126 lines
No EOL
4 KiB
JavaScript
126 lines
No EOL
4 KiB
JavaScript
class KeyboardController {
|
|
constructor(connection) {
|
|
this.connection = connection;
|
|
this.container = null;
|
|
|
|
this.layouts = {
|
|
default: [
|
|
["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
|
|
["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
|
|
["a", "s", "d", "f", "g", "h", "j", "k", "l"],
|
|
["🄰", "z", "x", "c", "v", "b", "n", "m", ".", "⌦"],
|
|
["🔢", " ", "↵"]
|
|
],
|
|
uppercase: [
|
|
["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
|
|
["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
|
|
["A", "S", "D", "F", "G", "H", "J", "K", "L"],
|
|
["🅰", "Z", "X", "C", "V", "B", "N", "M", ",", "⌦"],
|
|
["🔢", " ", "↵"]
|
|
],
|
|
symbols: [
|
|
["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
|
|
["[", "]", "{", "}", ";", ":", "'", "\"", ",", "<"],
|
|
[".", ">", "-", "_", "=", "+", "/", "?", "\\"],
|
|
["🄰", "|", "`", "~", "⌦"],
|
|
["🔤", " ", "↵"]
|
|
]
|
|
}
|
|
}
|
|
|
|
_sendKeyPress(l) {
|
|
this.connection.sendMessage("k", [l]);
|
|
}
|
|
|
|
makeKeyboardForLayout(layout) {
|
|
queueMicrotask(() => {
|
|
while (this.container.firstChild) {
|
|
this.container.removeChild(this.container.lastChild);
|
|
}
|
|
|
|
const rowsParent = document.createElement("div");
|
|
rowsParent.classList.add("Keyboard-rows");
|
|
|
|
const rowsFragment = document.createDocumentFragment();
|
|
|
|
for (let row = 0; row < layout.length; row++) {
|
|
const rowElement = document.createElement("div");
|
|
rowElement.classList.add("Keyboard-row");
|
|
for (let col = 0; col < layout[row].length; col++) {
|
|
const key = layout[row][col];
|
|
|
|
const colElement = document.createElement("button");
|
|
colElement.classList.add("Keyboard-button");
|
|
colElement.innerText = key;
|
|
colElement.addEventListener("click", () => {
|
|
this.handleKeypress(key);
|
|
});
|
|
|
|
rowElement.appendChild(colElement);
|
|
}
|
|
rowsFragment.appendChild(rowElement);
|
|
}
|
|
|
|
rowsParent.appendChild(rowsFragment);
|
|
this.container.appendChild(rowsParent);
|
|
});
|
|
}
|
|
|
|
handleKeypress(key) {
|
|
switch (key) {
|
|
case "🄰": {
|
|
this.makeKeyboardForLayout(this.layouts.uppercase);
|
|
break;
|
|
}
|
|
case "🅰": {
|
|
this.makeKeyboardForLayout(this.layouts.default);
|
|
break;
|
|
}
|
|
case "🔢": {
|
|
this.makeKeyboardForLayout(this.layouts.symbols);
|
|
break;
|
|
}
|
|
case "🔤": {
|
|
this.makeKeyboardForLayout(this.layouts.default);
|
|
break;
|
|
}
|
|
case " ": {
|
|
this._sendKeyPress("{space}");
|
|
break;
|
|
}
|
|
case "⌦": {
|
|
this._sendKeyPress("{backspace}");
|
|
break;
|
|
}
|
|
case "↵": {
|
|
this._sendKeyPress("{ent}");
|
|
break;
|
|
}
|
|
default: {
|
|
this._sendKeyPress(key);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
mountOn(element) {
|
|
if (this.container)
|
|
return; // Already mounted;
|
|
|
|
this.container = document.createElement("div");
|
|
this.container.classList.add("Keyboard");
|
|
element.appendChild(this.container);
|
|
|
|
this.makeKeyboardForLayout(this.layouts.default);
|
|
}
|
|
|
|
unmount() {
|
|
if (!this.container)
|
|
return; // Not mounted - don't do anything
|
|
|
|
this.container.parentElement.removeChild(this.container);
|
|
this.container = null;
|
|
}
|
|
}
|
|
|
|
export default KeyboardController; |