2021-11-03 04:21:58 +02:00
|
|
|
import SimpleKeyboard from "simple-keyboard";
|
|
|
|
|
|
|
|
class KeyboardController {
|
|
|
|
constructor(connection) {
|
|
|
|
this.connection = connection;
|
|
|
|
this.keyboard = null;
|
2021-11-08 00:25:27 +02:00
|
|
|
this.keyboardDiv = null;
|
2021-11-03 04:21:58 +02:00
|
|
|
}
|
|
|
|
|
2021-11-04 02:07:37 +02:00
|
|
|
_sendKeyPress(l) {
|
2021-11-03 04:21:58 +02:00
|
|
|
this.connection.sendMessage("k", [l]);
|
|
|
|
}
|
|
|
|
|
2021-11-08 00:25:27 +02:00
|
|
|
mountOn(element) {
|
|
|
|
if (this.keyboardDiv)
|
|
|
|
return; // Already mounted;
|
|
|
|
|
|
|
|
this.keyboardDiv = document.createElement("div");
|
|
|
|
this.keyboardDiv.classList.add("keyboard");
|
|
|
|
element.appendChild(this.keyboardDiv);
|
|
|
|
|
|
|
|
this.keyboard = new SimpleKeyboard(this.keyboardDiv, {
|
2021-11-03 04:21:58 +02:00
|
|
|
onKeyPress: this.onKeyPress.bind(this),
|
|
|
|
mergeDisplay: true,
|
|
|
|
layoutName: "default",
|
|
|
|
// refer to: https://hodgef.com/simple-keyboard/demos/?d=mobile
|
|
|
|
layout: {
|
|
|
|
default: [
|
|
|
|
"q w e r t y u i o p",
|
|
|
|
"a s d f g h j k l",
|
|
|
|
"{shift} z x c v b n m {backspace}",
|
|
|
|
"{numbers} {space} {ent}"
|
|
|
|
],
|
|
|
|
shift: [
|
|
|
|
"Q W E R T Y U I O P",
|
|
|
|
"A S D F G H J K L",
|
|
|
|
"{shift} Z X C V B N M {backspace}",
|
|
|
|
"{numbers} {space} {ent}"
|
|
|
|
],
|
|
|
|
numbers: ["1 2 3", "4 5 6", "7 8 9", "{abc} 0 {backspace}"]
|
|
|
|
},
|
|
|
|
display: {
|
|
|
|
"{numbers}": "123",
|
|
|
|
"{ent}": "return",
|
|
|
|
"{escape}": "esc ⎋",
|
|
|
|
"{tab}": "tab ⇥",
|
|
|
|
"{backspace}": "⌫",
|
|
|
|
"{capslock}": "caps lock ⇪",
|
|
|
|
"{shift}": "⇧",
|
|
|
|
"{controlleft}": "ctrl ⌃",
|
|
|
|
"{controlright}": "ctrl ⌃",
|
|
|
|
"{altleft}": "alt ⌥",
|
|
|
|
"{altright}": "alt ⌥",
|
|
|
|
"{metaleft}": "cmd ⌘",
|
|
|
|
"{metaright}": "cmd ⌘",
|
|
|
|
"{abc}": "ABC"
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-11-08 00:25:27 +02:00
|
|
|
unmount() {
|
|
|
|
if (!this.keyboardDiv)
|
|
|
|
return; // Not mounted - don't do anything
|
|
|
|
|
|
|
|
this.keyboardDiv.parentElement.removeChild(this.keyboardDiv);
|
|
|
|
this.keyboardDiv = null;
|
|
|
|
}
|
|
|
|
|
2021-11-03 04:21:58 +02:00
|
|
|
onKeyPress(button) {
|
|
|
|
if (button === "{shift}" || button === "{lock}")
|
|
|
|
return this.handleShift();
|
|
|
|
if (button === "{numbers}" || button === "{abc}")
|
|
|
|
return this.handleNumbers();
|
|
|
|
|
2021-11-04 02:07:37 +02:00
|
|
|
this._sendKeyPress(button);
|
2021-11-03 04:21:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
handleShift() {
|
|
|
|
this.keyboard.setOptions({
|
|
|
|
layoutName: this.keyboard.options.layoutName === "default" ? "shift" : "default"
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
handleNumbers() {
|
|
|
|
this.keyboard.setOptions({
|
|
|
|
layoutName: this.keyboard.options.layoutName !== "numbers" ? "numbers" : "default"
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default KeyboardController;
|