100 lines
No EOL
3.6 KiB
JavaScript
100 lines
No EOL
3.6 KiB
JavaScript
(() => {
|
|
// layouts derived from
|
|
// https://github.com/simple-keyboard/simple-keyboard-layouts/blob/master/src/lib/layouts/
|
|
const layout_de = {
|
|
default: [
|
|
"^ 1 2 3 4 5 6 7 8 9 0 \u00DF \u00B4 {bksp}",
|
|
"{tab} q w e r t z u i o p \u00FC +",
|
|
"{lock} a s d f g h j k l \u00F6 \u00E4 #",
|
|
"{shift} < y x c v b n m , . - {shift}",
|
|
"@ {space}",
|
|
],
|
|
shift: [
|
|
'\u00B0 ! " \u00A7 $ % & / ( ) = ? ` {bksp}',
|
|
"{tab} Q W E R T Z U I O P \u00DC *",
|
|
"{lock} A S D F G H J K L \u00D6 \u00C4 '",
|
|
"{shift} > Y X C V B N M ; : _ {shift}",
|
|
"@ {space}",
|
|
],
|
|
}
|
|
const layout_en = {
|
|
default: [
|
|
"` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
|
|
"{tab} q w e r t y u i o p [ ] \\",
|
|
"{lock} a s d f g h j k l ; '",
|
|
"{shift} z x c v b n m , . / {shift}",
|
|
"@ {space}",
|
|
],
|
|
shift: [
|
|
"~ ! @ # $ % ^ & * ( ) _ + {bksp}",
|
|
"{tab} Q W E R T Y U I O P { } |",
|
|
'{lock} A S D F G H J K L : "',
|
|
"{shift} Z X C V B N M < > ? {shift}",
|
|
"@ {space}",
|
|
],
|
|
}
|
|
const layout_numeric = {
|
|
default: [
|
|
"1 2 3",
|
|
"4 5 6",
|
|
"7 8 9",
|
|
"{bksp} . ,"
|
|
]
|
|
}
|
|
// Check if on smartphone
|
|
let onSmartphone = navigator.userAgent.toLowerCase().match(/android|webos|iphone|ipod|blackberry/i) != null;
|
|
console.log(onSmartphone)
|
|
// Configure keyboard when all DOM content has loaded
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
if (!onSmartphone) {
|
|
// Get element to send input to
|
|
let keyboardInputElement = document.querySelector(".keyboard-input");
|
|
// Get language code
|
|
let layoutCode = document.getElementById("keyboard").dataset.layout;
|
|
// Determine keyboard layout (default: en)
|
|
let layout;
|
|
switch (layoutCode) {
|
|
case "de":
|
|
layout = layout_de;
|
|
break;
|
|
case "numeric":
|
|
layout = layout_numeric;
|
|
break;
|
|
default:
|
|
layout = layout_en;
|
|
}
|
|
// determine if the numeric class has to be added
|
|
if (layoutCode == "numeric") {
|
|
theme = "hg-theme-default darkTheme numeric";
|
|
}
|
|
else {
|
|
theme = "hg-theme-default darkTheme";
|
|
}
|
|
// virtual keyboard
|
|
const Keyboard = window.SimpleKeyboard.default;
|
|
const keyboard = new Keyboard({
|
|
theme: theme,
|
|
// choose german layout if language is de,
|
|
// else choose english layout
|
|
layout: layout,
|
|
onChange: (input) => {
|
|
keyboardInputElement.value = input;
|
|
},
|
|
onKeyPress: (button) => {
|
|
if (button === "{shift}" || button === "{lock}") handleShift();
|
|
}
|
|
});
|
|
// additional handlers
|
|
keyboardInputElement.addEventListener("input", event => {
|
|
keyboard.setInput(event.target.value);
|
|
});
|
|
function handleShift(input) {
|
|
let currentLayout = keyboard.options.layoutName;
|
|
let shiftToggle = currentLayout === "default" ? "shift" : "default";
|
|
keyboard.setOptions({
|
|
layoutName: shiftToggle
|
|
});
|
|
}
|
|
}
|
|
});
|
|
})() |