Integrated simple-keyboard from hodged as a on-screen keyboard #14

app/static/js/login.js

@@ -1,7 +1,6 @@
 (() => {
 
     // Define variables
-
     let usernameInputElement;
     let passwordInputElement;
     let submitButton;
@@ -11,77 +10,43 @@
     let pinpadButtons;
     let userlistContainerElement;
 
-
     // Add event listeners after DOM Content loaded
-
     document.addEventListener("DOMContentLoaded", () => {
-        
         // elements
-
         usernameInputElement = document.getElementById("id_username");
         passwordInputElement = document.getElementById("id_password");
         submitButton = document.getElementById("submit_login");
         passwordOverlayElement = document.getElementById("passwordoverlaycontainer");
         pwOverlayCancelButton = document.getElementById("pwocancel");
         userlistContainerElement = document.getElementById("userlistcontainer");
-
         userlistButtons = document.getElementsByClassName("userlistbutton");
-        pinpadButtons = document.getElementsByClassName("pinpadbtn");
-
         // event listeners
-
         // [...<html-collection>] converts an html collection to an array
-
         [...userlistButtons].forEach(element => {
             element.addEventListener("click", () => {
                 set_username(element.dataset.username);
                 show_password_overlay();
             })
         });
-
-        [...pinpadButtons].forEach(element => {
-            element.addEventListener("click", () => {
-                pinpad_press(element.dataset.btn);
-            })
-        })
-
         pwOverlayCancelButton.addEventListener("click", () => {
             hide_password_overlay();
         });
-
     })
 
-
     function set_username(username) {
         usernameInputElement.value = username;
     }
 
     function show_password_overlay() {
-
         window.scrollTo(0, 0);
         passwordOverlayElement.classList.remove("nodisplay");
         userlistContainerElement.classList.add("nodisplay");
-
     }
 
     function hide_password_overlay() {
-
         passwordOverlayElement.classList.add("nodisplay");
         userlistContainerElement.classList.remove("nodisplay");
         passwordInputElement.value = "";
-
-    }
-
-    function pinpad_press(key) {
-        if (key == "enter") {
-            submitButton.click();
-        }
-        else if (key == "x") {
-            passwordInputElement.value = "";
-        }
-        else {
-            passwordInputElement.value += key;
-        }
     }
 
 })()

app/static/js/simple-keyboard_configure.js

@@ -0,0 +1,82 @@
+(() => {
+    // 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}",
+            ".com @ {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}",
+            ".com @ {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}",
+            ".com @ {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}",
+            ".com @ {space}",
+        ],
+    }
+    const layout_numeric = {
+        default: [
+            "1 2 3",
+            "4 5 6",
+            "7 8 9",
+            "{bksp} . ,"
+        ]
+    }
+    // Configure keyboard when all DOM content has loaded
+    document.addEventListener("DOMContentLoaded", () => {
+        // 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 myKeyboard = new Keyboard({
+            theme: theme,
+            // choose german layout if language is de,
+            // else choose english layout
+            layout: layout,
+            onChange: (input) => {
+                keyboardInputElement.value = input;
+            }
+        });
+
+    });
+})()