mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-17 13:12:07 +00:00
implement keybind prompt
This commit is contained in:
Araxeus
305
providers/prompt/page/keybind.js
Normal file
305
providers/prompt/page/keybind.js
Normal file
@ -0,0 +1,305 @@
|
||||
/* HTML
|
||||
|
||||
<div class="keybind" , id="div">
|
||||
<label id="label" class="keybindLabel">Example</label>
|
||||
<input readonly type="text" id="txt" class="keybindData">
|
||||
<button id="clear" class="clearButton">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
*/
|
||||
/* CSS
|
||||
|
||||
div.keybind {
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content max-content;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
div.keybind button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
div.keybind label {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.keybind label:after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
*/
|
||||
const { promptError } = require("./prompt")
|
||||
|
||||
class KeybindGetter {
|
||||
value = null;
|
||||
modifiers = null;
|
||||
key = "";
|
||||
label = null;
|
||||
txt = null;
|
||||
clearButton = null;
|
||||
|
||||
constructor(options, parentElement) {
|
||||
if (!options.label || !options.value) {
|
||||
promptError("keybind option must contain label and value");
|
||||
return;
|
||||
}
|
||||
|
||||
this.value = options.value
|
||||
this.modifiers = new Set();
|
||||
this.key = "";
|
||||
|
||||
this.label = document.createElement("label");
|
||||
this.label.classList.add("keybindLabel");
|
||||
|
||||
this.txt = document.createElement("input");
|
||||
this.txt.setAttribute('readonly', true);
|
||||
this.txt.classList.add("keybindData");
|
||||
|
||||
this.clearButton = document.createElement("button");
|
||||
this.clearButton.classList.add("clearButton");
|
||||
this.clearButton.textContent = "Clear";
|
||||
this.clearButton.onclick = (e) => e.preventDefault();
|
||||
|
||||
parentElement.append(this.label, this.txt, this.clearButton);
|
||||
|
||||
this.setup(options);
|
||||
if (options.default) {
|
||||
this.setDefault(options.default)
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.txt.focus();
|
||||
}
|
||||
|
||||
output() {
|
||||
const output = {value: this.value, accelerator: this.txt.value.replaceAll(" ", "")}
|
||||
return JSON.stringify(output);
|
||||
}
|
||||
|
||||
updateText() {
|
||||
let result = "";
|
||||
for (let modifier of this.modifiers) {
|
||||
result += modifier + " + ";
|
||||
}
|
||||
this.txt.value = result + this.key;
|
||||
}
|
||||
|
||||
setDefault(defaultValue) {
|
||||
const accelerator = parseAccelerator(defaultValue).split("+");
|
||||
for (let key of accelerator) {
|
||||
if (isModifier(key))
|
||||
this.modifiers.add(key);
|
||||
else
|
||||
this.key = key;
|
||||
}
|
||||
this.updateText();
|
||||
}
|
||||
clear() {
|
||||
this.modifiers.clear();
|
||||
this.key = "";
|
||||
this.txt.value = "";
|
||||
}
|
||||
|
||||
setup(options) {
|
||||
this.txt.addEventListener("keydown", (event) => {
|
||||
event.preventDefault();
|
||||
if (event.repeat) {
|
||||
return
|
||||
}
|
||||
let key = event.code || event.key;
|
||||
if (key in virtualKeyCodes)
|
||||
key = virtualKeyCodes[event.code];
|
||||
else {
|
||||
console.log('Error, key "' + event.code + '" was not found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isModifier(key)) {
|
||||
if (this.modifiers.size < 3)
|
||||
this.modifiers.add(key);
|
||||
} else { // is key
|
||||
this.key = key;
|
||||
}
|
||||
this.updateText();
|
||||
});
|
||||
|
||||
this.clearButton.addEventListener("click", () => {
|
||||
this.clear()
|
||||
});
|
||||
this.label.textContent = options.label + " ";
|
||||
}
|
||||
}
|
||||
|
||||
class keybindContainer {
|
||||
elements = [];
|
||||
|
||||
constructor(options, parentElement) {
|
||||
parentElement.classList.add("keybind");
|
||||
this.elements = options.map(option => new KeybindGetter(option, parentElement));
|
||||
document.querySelector("#buttons").style["padding-top"] = "20px";
|
||||
}
|
||||
|
||||
focus() {
|
||||
if (this.elements.length > 0)
|
||||
this.elements[0].focus();
|
||||
}
|
||||
|
||||
submit() {
|
||||
return this.elements.map(element => element.output());
|
||||
}
|
||||
}
|
||||
|
||||
function parseAccelerator(a) {
|
||||
let accelerator = a.toString();
|
||||
|
||||
if (process.platform !== 'darwin') {
|
||||
accelerator = accelerator.replace(/(Cmd)|(Command)/gi, '');
|
||||
} else {
|
||||
accelerator = accelerator.replace(/(Ctrl)|(Control)/gi, '');
|
||||
}
|
||||
|
||||
accelerator = accelerator.replace(/(Or)/gi, '');
|
||||
|
||||
return accelerator;
|
||||
}
|
||||
|
||||
function isModifier(key) {
|
||||
for (let modifier of ["Shift", "Control", "Ctrl", "Command", "Cmd", "Alt", "AltGr", "Super"]) {
|
||||
if (key === modifier)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const virtualKeyCodes = {
|
||||
ShiftLeft: "Shift",
|
||||
ShiftRight: "Shift",
|
||||
ControlLeft: "Ctrl",
|
||||
ControlRight: "Ctrl",
|
||||
AltLeft: "Alt",
|
||||
AltRight: "Alt",
|
||||
MetaLeft: "Super",
|
||||
MetaRight: "Super",
|
||||
NumLock: "NumLock",
|
||||
NumpadDivide: "NumDiv",
|
||||
NumpadMultiply: "NumMult",
|
||||
NumpadSubtract: "NumSub",
|
||||
NumpadAdd: "NumAdd",
|
||||
NumpadDecimal: "NumDec ",
|
||||
Numpad0: "Num0",
|
||||
Numpad1: "Num1",
|
||||
Numpad2: "Num2",
|
||||
Numpad3: "Num3",
|
||||
Numpad4: "Num4",
|
||||
Numpad5: "Num5",
|
||||
Numpad6: "Num6",
|
||||
Numpad7: "Num7",
|
||||
Numpad8: "Num8",
|
||||
Numpad9: "Num9",
|
||||
Digit0: "0",
|
||||
Digit1: "1",
|
||||
Digit2: "2",
|
||||
Digit3: "3",
|
||||
Digit4: "4",
|
||||
Digit5: "5",
|
||||
Digit6: "6",
|
||||
Digit7: "7",
|
||||
Digit8: "8",
|
||||
Digit9: "9",
|
||||
Minus: "-",
|
||||
Equal: "=",
|
||||
KeyQ: "Q",
|
||||
KeyW: "W",
|
||||
KeyE: "E",
|
||||
KeyR: "R",
|
||||
KeyT: "T",
|
||||
KeyY: "Y",
|
||||
KeyU: "U",
|
||||
KeyI: "I",
|
||||
KeyO: "O",
|
||||
KeyP: "P",
|
||||
KeyA: "A",
|
||||
KeyS: "S",
|
||||
KeyD: "D",
|
||||
KeyF: "F",
|
||||
KeyG: "G",
|
||||
KeyH: "H",
|
||||
KeyJ: "J",
|
||||
KeyK: "K",
|
||||
KeyL: "L",
|
||||
KeyZ: "Z",
|
||||
KeyX: "X",
|
||||
KeyC: "C",
|
||||
KeyV: "V",
|
||||
KeyB: "B",
|
||||
KeyN: "N",
|
||||
KeyM: "M",
|
||||
BracketLeft: "[",
|
||||
BracketRight: "]",
|
||||
Semicolon: ";",
|
||||
Quote: "'",
|
||||
Backquote: '"',
|
||||
Backslash: "\\",
|
||||
Comma: ",",
|
||||
Period: "'.'",
|
||||
Slash: "/",
|
||||
plus: '+',
|
||||
Space: "Space",
|
||||
Tab: "Tab",
|
||||
Backspace: "Backspace",
|
||||
Delete: "Delete",
|
||||
Insert: "Insert",
|
||||
Return: "Return",
|
||||
Enter: "Enter",
|
||||
ArrowUp: "Up",
|
||||
ArrowDown: "Down",
|
||||
ArrowLeft: "Left",
|
||||
ArrowRight: "Right",
|
||||
Home: "Home",
|
||||
End: "End",
|
||||
PageUp: "PageUp",
|
||||
PageDown: "PageDown",
|
||||
Escape: "Escape",
|
||||
AudioVolumeUp: "VolumeUp",
|
||||
AudioVolumeDown: "VolumeDown",
|
||||
AudioVolumeMute: "VolumeMute",
|
||||
MediaTrackNext: "MediaNextTrack",
|
||||
MediaTrackPrevious: "MediaPreviousTrack",
|
||||
MediaStop: "MediaStop",
|
||||
MediaPlayPause: "MediaPlayPause",
|
||||
ScrollLock: "ScrollLock",
|
||||
PrintScreen: "PrintScreen",
|
||||
F1: "F1",
|
||||
F2: "F2",
|
||||
F3: "F3",
|
||||
F4: "F4",
|
||||
F5: "F5",
|
||||
F6: "F6",
|
||||
F7: "F7",
|
||||
F8: "F8",
|
||||
F9: "F9",
|
||||
F10: "F10",
|
||||
F11: "F11",
|
||||
F12: "F12",
|
||||
F13: "F13",
|
||||
F14: "F14",
|
||||
F15: "F15",
|
||||
F16: "F16",
|
||||
F17: "F17",
|
||||
F18: "F18",
|
||||
F19: "F19",
|
||||
F20: "F20",
|
||||
F21: "F21",
|
||||
F22: "F22",
|
||||
F23: "F23",
|
||||
F24: "F24",
|
||||
};
|
||||
|
||||
|
||||
|
||||
module.exports = function promptCreateKeybind(options, parentElement) {
|
||||
return new keybindContainer(options, parentElement);
|
||||
}
|
||||
Reference in New Issue
Block a user