drinks-manager/app/static/js/simple-keyboard_configure.js

(() => {
    // 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
                });
            }
        }
    });
})()