js_lis 1.0.6 → 1.0.8

package/VirtualKeyboard.js

@@ -5,17 +5,29 @@ export class VirtualKeyboard {
         this.currentLayout = 'en';
         this.isVisible = false;
         this.container = document.getElementById('keyboard-container');
-        this.currentInput = null; // เปลี่ยนจาก fixed input เป็น dynamic
+        this.currentInput = null; 
         this.layouts = layouts;
         this.isDragging = false;
         this.offsetX = 0;
         this.offsetY = 0;
         this.shiftActive = false;
         this.capsLockActive = false;
+        
         this.render();
         this.initializeInputListeners();
     }
-    
+
+    getLayoutName(layout) {
+        switch (layout) {
+            case 'en': return 'English Keyboard';
+            case 'enSc': return 'English scrambled';
+            case 'th': return 'Thai keyboard';
+            case 'thSc': return 'Thai scrambled';
+            case 'numpad': return 'Numpad Keyboard';
+            case 'scNum': return 'Scrambled Keyboard';
+        }
+    }
+
     initializeInputListeners() {
         // เพิ่ม event listener สำหรับทุก input และ textarea
         document.addEventListener('click', (e) => {
@@ -32,6 +44,11 @@ export class VirtualKeyboard {
                 this.setCurrentInput(target);
             }
         }, true);
+
+        document.addEventListener('click', (e) => {
+            const target = document.getElementById("toggle");
+            target.addEventListener('click', this.toggle.bind(this), { once: true });
+        });           
     }
 
     setCurrentInput(inputElement) {
@@ -49,12 +66,36 @@ export class VirtualKeyboard {
         const keyboard = document.createElement('div');
         keyboard.className = 'virtual-keyboard';
         keyboard.style.display = this.isVisible ? 'block' : 'none';
-
+    
         // Add the ID for easy reference in dragging
         keyboard.id = 'keyboard';
-
-        const layout = this.layouts[this.currentLayout];
     
+        // New: Add Layout selector at the top inside the keyboard div
+        const controlsContainer = document.createElement('div');
+        controlsContainer.className = 'controls';
+        controlsContainer.style.display = 'flex';
+        controlsContainer.style.justifyContent = 'center';
+        controlsContainer.style.alignItems = 'center';
+        controlsContainer.style.marginBottom = '10px'; // Optional: Add some space below the selector
+    
+        const layoutSelector = document.createElement('select');
+        layoutSelector.id = 'layout-selector';
+        layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
+    
+        const layouts = ['en', 'enSc', 'th', 'thSc', 'numpad', 'scNum'];
+        layouts.forEach(layout => {
+            const option = document.createElement('option');
+            option.value = layout;
+            option.innerText = this.getLayoutName(layout);
+            layoutSelector.appendChild(option);
+        });
+        layoutSelector.value = this.currentLayout;
+        controlsContainer.appendChild(layoutSelector);
+    
+        keyboard.appendChild(controlsContainer);
+    
+        const layout = this.layouts[this.currentLayout];
+        
         layout.forEach(row => {
             const rowElement = document.createElement('div');
             rowElement.className = 'keyboard-row';
@@ -71,7 +112,7 @@ export class VirtualKeyboard {
                 if (key === 'Space') {
                     keyElement.className += ' space';
                 }
-
+    
                 if (key === 'backspace') {
                     keyElement.className += ' backspacew';
                 }
@@ -85,7 +126,6 @@ export class VirtualKeyboard {
                         console.error("The key element does not have a valid key value.");
                     }
                 };
-                
     
                 rowElement.appendChild(keyElement);
             });
@@ -107,11 +147,13 @@ export class VirtualKeyboard {
         if (this.currentLayout === "thSc") {
             this.scrambleThaiKeys();
         }
-
+    
         // Add drag functionality to the keyboard
         keyboard.addEventListener('mousedown', (event) => this.startDrag(event));
     }
     
+    
+    
     handleKeyPress(keyPressed) {
         if (!this.currentInput) return;
         
@@ -397,4 +439,5 @@ export class VirtualKeyboard {
             keyboard.style.top = `${event.clientY - this.offsetY}px`;
         }
     }
+    
 }

package/layouts.js

@@ -1,44 +1,44 @@
 export const layouts = {
-    en: [
-        ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace'],
-        ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
-        ['Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
-        ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
-        ['Space']
-    ],
-    th: [
-        ['_', 'ๅ', '/', '-', 'ภ', 'ถ', 'ุ', 'ึ', 'ค', 'ต', 'จ', 'ข', 'ช', 'Backspace'],
-        ['Tab', 'ๆ', 'ไ', 'ำ', 'พ', 'ะ', 'ั', 'ี', 'ร', 'น', 'ย', 'บ', 'ล', 'ฃ'],
-        ['Caps', 'ฟ', 'ห', 'ก', 'ด', 'เ', '้', '่', 'า', 'ส', 'ว', 'ง', 'Enter'],
-        ['Shift', 'ผ', 'ป', 'แ', 'อ', 'ิ', 'ื', 'ท', 'ม', 'ใ', 'ฝ', 'Shift'],
-        ['Space']
-    ],
-    numpad: [
-      ["+", "-", "*", "/"],
-      ["1", "2", "3", "%"],
-      ["4", "5", "6", "."],
-      ["7", "8", "9", "="],
-      ["00", "0", "backspace"],
-    ],
-    scNum : [
-      ["+", "-", "*", "/"],
-      ["1", "2", "3", "%"],
-      ["4", "5", "6", "."],
-      ["7", "8", "9", "="],
-      ["00", "0", "backspace"],
-    ],
-    thSc : [
-      ["ก", "ข", "ฃ", "ค", "ฅ", "ฆ", "ง", "จ", "ฉ", "ช", "ซ", "ฌ", "Backspace"],
-      ["ญ", "ฎ", "ฏ", "ฐ", "ฑ", "ฒ", "ณ", "ด", "ต", "ถ", "ท", "ธ", "น"],
-      ["บ", "ป", "ผ", "ฝ", "พ", "ฟ", "ภ", "ม", "ย", "ร", "ฤ", "Enter"],
-      ["ล", "ฦ", "ว", "ศ", "ษ", "ส", "ห", "ฬ", "อ", "ฮ"],
-      ["Space"],
-    ],
-    enSc: [
-      ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "="],
-      ["Tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "Backspace"],
-      ["Caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", "Enter"],
-      ["Shift", "z", "x", "c", "v", "b", "n", "m", "Shift"],
-      ["Space"],
-    ],
+  en: [
+      ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace'],
+      ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
+      ['Caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'Enter'],
+      ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'Shift'],
+      ['Space']
+  ],
+  th: [
+      ['_', 'ๅ', '/', '-', 'ภ', 'ถ', 'ุ', 'ึ', 'ค', 'ต', 'จ', 'ข', 'ช', 'Backspace'],
+      ['Tab', 'ๆ', 'ไ', 'ำ', 'พ', 'ะ', 'ั', 'ี', 'ร', 'น', 'ย', 'บ', 'ล', 'ฃ'],
+      ['Caps', 'ฟ', 'ห', 'ก', 'ด', 'เ', '้', '่', 'า', 'ส', 'ว', 'ง', 'Enter'],
+      ['Shift', 'ผ', 'ป', 'แ', 'อ', 'ิ', 'ื', 'ท', 'ม', 'ใ', 'ฝ', 'Shift'],
+      ['Space']
+  ],
+  numpad: [
+    ["+", "-", "*", "/"],
+    ["1", "2", "3", "%"],
+    ["4", "5", "6", "."],
+    ["7", "8", "9", "="],
+    ["00", "0", "backspace"],
+  ],
+  scNum : [
+    ["+", "-", "*", "/"],
+    ["1", "2", "3", "%"],
+    ["4", "5", "6", "."],
+    ["7", "8", "9", "="],
+    ["00", "0", "backspace"],
+  ],
+  thSc : [
+    ["ก", "ข", "ฃ", "ค", "ฅ", "ฆ", "ง", "จ", "ฉ", "ช", "ซ", "ฌ", "Backspace"],
+    ["ญ", "ฎ", "ฏ", "ฐ", "ฑ", "ฒ", "ณ", "ด", "ต", "ถ", "ท", "ธ", "น"],
+    ["บ", "ป", "ผ", "ฝ", "พ", "ฟ", "ภ", "ม", "ย", "ร", "ฤ", "Enter"],
+    ["ล", "ฦ", "ว", "ศ", "ษ", "ส", "ห", "ฬ", "อ", "ฮ"],
+    ["Space"],
+  ],
+  enSc: [
+    ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "="],
+    ["Tab", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "Backspace"],
+    ["Caps", "a", "s", "d", "f", "g", "h", "j", "k", "l", "Enter"],
+    ["Shift", "z", "x", "c", "v", "b", "n", "m", "Shift"],
+    ["Space"],
+  ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js_lis",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"