Hushian/Presentation/HushianWebApp/wwwroot/Before/js/vk.js

let Keyboard = window.SimpleKeyboard.default;
let keyboard;
let currentInputClass;

function setOptions() {
    keyboard.setOptions({
        layout: {
            default: [
                "q w e r t y u i o p",
                "a s d f g h j k l {backspace}",
                "{shift} z x c v b n m",
                "{numbers} {space} {spchars}"
            ],
            shift: [
                "Q W E R T Y U I O P",
                "A S D F G H J K L {backspace}",
                "{shift} Z X C V B N M",
                "{numbers} {space} {spchars}"
            ],
            numbers: ["1 2 3", "4 5 6", "7 8 9", "{abc} 0 {backspace}"],
            spchars: [
                '! @ # $ % ^ & * ( ) _ +',
                '~ - = ` \' " [ ] { }',
                '< > ? | \\ / : ; , .',
                '{numbers} {space} {abc}'
            ]
        },
        display: {
            "{numbers}": "123",
            "{escape}": "esc ⎋",
            "{tab}": "tab ⇥",
            "{backspace}": "⌫",
            "{capslock}": "caps lock ⇪",
            "{shift}": "⇧",
            "{controlleft}": "ctrl ⌃",
            "{controlright}": "ctrl ⌃",
            "{altleft}": "alt ⌥",
            "{altright}": "alt ⌥",
            "{metaleft}": "cmd ⌘",
            "{metaright}": "cmd ⌘",
            "{abc}": "abc",
            "{space}": "␣",
            "{ent}": "↵",
            "{spchars}": "#@$"
        }
    });
}

let selectedElem;

function onChange(input) {
    selectedElem.value = input;
}

function onKeyPress(button) {
    if (button === '{clear}') {
        keyboard.setInput('');
        selectedElem.value = '';
        return;
    }
    let currentLayout = keyboard.options.layoutName;
    if (currentLayout === 'numeric') {
        return;
    }
    if (button === "{shift}") {
        handleShift();
    }
    if (button === "{numbers}") {
        handleNumbers();
    }
    if (button === "{abc}") {
        handleAbc();
    }
    if (button === "{spchars}") {
        handleSpecialChars();
    }
}

function handleShift() {
    let currentLayout = keyboard.options.layoutName;
    let shiftToggle = currentLayout === "default" ? "shift" : "default";

    keyboard.setOptions({
        layoutName: shiftToggle
    });
}

function handleNumbers() {
    let currentLayout = keyboard.options.layoutName;
    let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";

    keyboard.setOptions({
        layoutName: numbersToggle
    });
}

function handleAbc() {
    keyboard.setOptions({
        layoutName: "default"
    });
}

function handleSpecialChars() {
    let currentLayout = keyboard.options.layoutName;
    let spCharsToggle = currentLayout !== "spchars" ? "spchars" : "default";

    keyboard.setOptions({
        layoutName: spCharsToggle
    });
}

function toggleKeyboard(e, inputElemClassName, maxLength) {

    for (let item of document.getElementsByClassName('vr-keyboard-section')) {
        item.innerHTML = '';
    }
    document.getElementById(inputElemClassName + "_con").innerHTML = '<div class="simple-keyboard-con"><div class="simple-keyboard"></div></div>';

    if (selectedElem) {
        selectedElem.removeEventListener('input', () => { });
    }
    if (currentInputClass === inputElemClassName) {
        currentInputClass = '';
    }
    else {
        currentInputClass = inputElemClassName;

        keyboard = new Keyboard({
            onChange: input => onChange(input),
            onKeyPress: button => onKeyPress(button)
        });
        setOptions();
        keyboard.setOptions({
            maxLength: maxLength
        });

        selectedElem = document.querySelector(`.${inputElemClassName}`);
        keyboard.setInput(selectedElem.value);
        selectedElem.addEventListener("input", event => {
            keyboard.setInput(event.target.value);
        });
    }

    let keyboardConElem = document.querySelector('.simple-keyboard-con');
    if (e.target.classList.contains('mdi')) {
        if (e.target.classList.contains('mdi-keyboard')) {
            document.querySelectorAll('.mdi-keyboard-off').forEach(e => {
                e.classList.remove('mdi-keyboard-off');
                e.classList.add('mdi-keyboard');
            });
            keyboardConElem.style.display = 'block';
            e.target.classList.add('mdi-keyboard-off');
            e.target.classList.remove('mdi-keyboard');
        }
        else {
            keyboardConElem.style.display = 'none';
            e.target.classList.add('mdi-keyboard');
            e.target.classList.remove('mdi-keyboard-off');
        }
    }
    else {
        let child = e.target.children[0];
        if (child) {
            if (child.classList.contains('mdi-keyboard')) {
                child.classList.add('mdi-keyboard-off');
                child.classList.remove('mdi-keyboard');
            }
            else {
                child.classList.add('mdi-keyboard');
                child.classList.remove('mdi-keyboard-off');
            }
        }
    }
}