js_lis 2.0.6 → 2.0.7

package/VirtualKeyboard.js

@@ -14,35 +14,16 @@ export class VirtualKeyboard {
     this.shiftActive = false;
     this.capsLockActive = false;
     this.isScrambled = false;
-    this.isVirtualKeyboardActive = false; // Flag to track VK operations
+    this.isVirtualKeyboardActive = false; 
 
-    // Maintain plaintext buffers per input (not stored in DOM). DOM will store only encrypted text.
     this.inputPlaintextBuffers = new WeakMap();
-
-    // Security state
-    // this.security = {
-    //   detectorStatus: "idle",
-    //   suspiciousEvents: [],
-    //   observer: null,
-    //   addSuspicious(event) {
-    //     try {
-    //       this.suspiciousEvents.push({
-    //         time: new Date().toISOString(),
-    //         ...event,
-    //       });
-    //       console.warn("[VK Security] Suspicious activity detected:", event);
-    //     } catch (_) {}
-    //   },
-    // };
-
-    injectCSS();
+    
     this.initialize();
   }
 
   async initialize() {
     try {
-      // this.applyCSPReportOnly();
-      // this.startKeyloggerDetector();
+      injectCSS();
       this.render();
       this.initializeInputListeners();
       console.log("VirtualKeyboard initialized successfully.");
@@ -51,113 +32,6 @@ export class VirtualKeyboard {
     }
   }
 
-  // Inject CSP Report-Only meta for runtime visibility into potential violations
-  // applyCSPReportOnly() {
-  //   // Disabled: Report-Only CSP must be set via HTTP headers. See server middleware in app.js.
-  //   return;
-  // }
-
-  // Start MutationObserver and limited listener-hook to detect potential keylogger injections
-  // startKeyloggerDetector() {
-  //   try {
-  //     const allowlistedScriptHosts = new Set([
-  //       window.location.host,
-  //       "cdnjs.cloudflare.com",
-  //     ]);
-
-  //     const isSuspiciousScript = (node) => {
-  //       try {
-  //         if (!(node instanceof HTMLScriptElement)) return false;
-  //         const src = node.getAttribute("src") || "";
-  //         if (!src) {
-  //           const code = (node.textContent || "").toLowerCase();
-  //           return /addEventListener\(['\"]key|document\.onkey|keylogger|send\(|fetch\(|xmlhttprequest/i.test(code);
-  //         }
-  //         const url = new URL(src, window.location.href);
-  //         return !Array.from(allowlistedScriptHosts).some((h) => url.host.endsWith(h));
-  //       } catch (_) {
-  //         return true;
-  //       }
-  //     };
-
-  //     const isSuspiciousElement = (node) => {
-  //       try {
-  //         if (!(node instanceof Element)) return false;
-  //         const hasKeyHandlers = node.hasAttribute("onkeydown") || node.hasAttribute("onkeypress") || node.hasAttribute("onkeyup");
-  //         const hiddenFrame = node.tagName === "IFRAME" && (node.getAttribute("sandbox") === null || node.getAttribute("srcdoc") !== null);
-  //         return hasKeyHandlers || hiddenFrame;
-  //       } catch (_) {
-  //         return false;
-  //       }
-  //     };
-
-  //     const quarantineScript = (script) => {
-  //       try {
-  //         script.type = "text/plain";
-  //         script.setAttribute("data-quarantined", "true");
-  //       } catch (_) {}
-  //     };
-
-  //     const observer = new MutationObserver((mutations) => {
-  //       for (const m of mutations) {
-  //         if (m.type === "childList") {
-  //           m.addedNodes.forEach((node) => {
-  //             if (isSuspiciousScript(node)) {
-  //               this.security.addSuspicious({ type: "script", reason: "suspicious source or inline pattern", node });
-  //               quarantineScript(node);
-  //             } else if (isSuspiciousElement(node)) {
-  //               this.security.addSuspicious({ type: "element", reason: "inline key handlers or risky frame", node });
-  //             }
-  //           });
-  //         } else if (m.type === "attributes" && isSuspiciousElement(m.target)) {
-  //           this.security.addSuspicious({ type: "attr", reason: `attribute ${m.attributeName}`, node: m.target });
-  //         }
-  //       }
-  //     });
-
-  //     observer.observe(document.documentElement, {
-  //       childList: true,
-  //       subtree: true,
-  //       attributes: true,
-  //       attributeFilter: ["onkeydown", "onkeypress", "onkeyup", "src", "type", "sandbox", "srcdoc"],
-  //     });
-
-  //     // Hook addEventListener to monitor keyboard listeners registration
-  //     const OriginalAddEventListener = EventTarget.prototype.addEventListener;
-  //     const selfRef = this;
-  //     EventTarget.prototype.addEventListener = function(type, listener, options) {
-  //       try {
-  //         if (type && /^(key(?:down|up|press))$/i.test(type)) {
-  //           const info = {
-  //             type: "event-listener",
-  //             reason: `keyboard listener registered: ${type}`,
-  //             target: this,
-  //           };
-  //           selfRef.security.addSuspicious(info);
-  //         }
-  //       } catch (_) {}
-  //       return OriginalAddEventListener.call(this, type, listener, options);
-  //     };
-
-  //     this.security.observer = observer;
-  //     this.security.detectorStatus = "running";
-
-  //     // Expose minimal security API
-  //     window.VKSecurity = {
-  //       getStatus: () => this.security.detectorStatus,
-  //       getEvents: () => [...this.security.suspiciousEvents],
-  //       stop: () => {
-  //         try { observer.disconnect(); } catch (_) {}
-  //         this.security.detectorStatus = "stopped";
-  //       },
-  //     };
-  //     console.info("[VK Security] Keylogger detector started");
-  //   } catch (err) {
-  //     this.security.detectorStatus = "error";
-  //     console.warn("[VK Security] Detector error:", err);
-  //   }
-  // }
-
   getLayoutName(layout) {
     switch (layout) {
       case "full":
@@ -170,6 +44,8 @@ export class VirtualKeyboard {
         return "Numpad Keyboard";
       case "symbols":
         return "Symbols Keyboard";
+      case "full-layouts":
+        return "Full English + Numpad";
       default:
         return "Unknown Layout";
     }
@@ -179,13 +55,8 @@ export class VirtualKeyboard {
     document.addEventListener("click", (e) => {
       const target = e.target;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        // Store the cursor position immediately after click
         const clickCursorPos = target.selectionStart;
-        
-        // Don't move cursor to end if virtual keyboard is currently active
         this.setCurrentInput(target, !this.isVirtualKeyboardActive);
-        
-        // Restore the cursor position that user clicked to set
         setTimeout(() => {
           if (target.selectionStart !== clickCursorPos) {
             target.setSelectionRange(clickCursorPos, clickCursorPos);
@@ -194,12 +65,9 @@ export class VirtualKeyboard {
       }
     });
 
-    document.addEventListener(
-      "focus",
-      (e) => {
+    document.addEventListener("focus", (e) => {
         const target = e.target;
         if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-          // Don't move cursor to end if virtual keyboard is currently active
           this.setCurrentInput(target, !this.isVirtualKeyboardActive);
         }
       },
@@ -210,7 +78,6 @@ export class VirtualKeyboard {
     document.addEventListener("input", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Only handle real keyboard input if it's not coming from virtual keyboard operations
         if (!this.isVirtualKeyboardActive) {
           this.handleRealKeyboardInput(target);
         }
@@ -221,10 +88,7 @@ export class VirtualKeyboard {
     document.addEventListener("keydown", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Handle arrow keys, HOME, END from real keyboard
         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
-          // Let the browser handle the navigation naturally
-          // Just ensure the input stays focused
           setTimeout(() => {
             target.focus();
           }, 0);
@@ -246,7 +110,6 @@ export class VirtualKeyboard {
     this.currentInput = inputElement;
     this.currentInput.classList.add("keyboard-active");
 
-    // Ensure the input is focused and cursor is visible
     this.currentInput.focus();
     
     // Ensure buffer initialized for this input
@@ -434,6 +297,20 @@ export class VirtualKeyboard {
           key.classList.toggle("active", this.isScrambled);
         });
       }
+
+      if (this.currentLayout === "full") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleFullLayoutKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
       this.isVirtualKeyboardActive = false;
       return;
     }
@@ -535,28 +412,12 @@ export class VirtualKeyboard {
       case "←":
         const leftNewPos = Math.max(0, start - 1);
         this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-        // Force immediate focus and ensure cursor is visible
-        this.currentInput.focus();
-        setTimeout(() => {
-          this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-          this.currentInput.focus();
-        }, 5);
-        // Skip the general cursor repositioning for arrow keys
-        this.isVirtualKeyboardActive = false;
         break;
 
       case "→":
         const bufferLength = this.getCurrentBuffer().length;
         const rightNewPos = Math.min(bufferLength, start + 1);
         this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-        // Force immediate focus and ensure cursor is visible
-        this.currentInput.focus();
-        setTimeout(() => {
-          this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-          this.currentInput.focus();
-        }, 5);
-        // Skip the general cursor repositioning for arrow keys
-        this.isVirtualKeyboardActive = false;
         break;
 
       case "↑":
@@ -602,24 +463,17 @@ export class VirtualKeyboard {
 
     if (isShiftActive && !isCapsActive) this.toggleShift();
 
-    // Only apply general focus and cursor management if not an arrow key
-    // Arrow keys handle their own cursor positioning and return early
     this.currentInput.focus();
-    
-    // Use setTimeout to ensure cursor positioning happens after DOM updates
+
     setTimeout(() => {
       this.currentInput.focus();
-      // Ensure cursor is visible by setting selection range
       const cursorPos = this.currentInput.selectionStart;
       this.currentInput.setSelectionRange(cursorPos, cursorPos);
     }, 0);
     
+    this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
-    
-    // Reset flag after virtual keyboard operation is complete
-    this.isVirtualKeyboardActive = false;
-    // console.log(keyPressed)
   }
 
   // [3]
@@ -632,17 +486,11 @@ export class VirtualKeyboard {
     const newBuffer = buffer.slice(0, start) + textvalue + buffer.slice(end);
     this.setCurrentBuffer(newBuffer);
     
-    // Calculate new cursor position first
     const newCursorPos = start + textvalue.length;
     
-    // Update displayed value without preserving old cursor position
     this.updateDisplayedValue(false);
     
-    // Set cursor position after the inserted text
     this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-    
-    // Ensure the input remains focused with visible cursor
-    // this.currentInput.focus();
   }
 
   // Helper: get current plaintext buffer for active input
@@ -689,10 +537,6 @@ export class VirtualKeyboard {
     
     // Encrypt and store in data-encrypted attribute
     this.updateDomEncrypted(input, currentValue);
-    
-    // this.updateDisplayedValue();
-    // console.log("Real keyboard input captured and encrypted for:", input.id || input.name || "unnamed input");
-    // console.log("Input type:", input.type, "Value length:", currentValue.length);
   }
 
   // Helper: encrypt and store ciphertext in DOM attribute
@@ -855,7 +699,7 @@ export class VirtualKeyboard {
   // [12]
   scrambleEnglishKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key='Space']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
     );
     const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
     this.shuffleArray(englishAlphabet);
@@ -868,7 +712,7 @@ export class VirtualKeyboard {
   // [13]
   scrambleThaiKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Space']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key=' ']):not([data-key='Tab ↹'])"
     );
     const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
     this.shuffleArray(ThaiAlphabet);
@@ -891,6 +735,21 @@ export class VirtualKeyboard {
     });
   }
 
+
+  scrambleFullLayoutKeys() {
+    const keys = document.querySelectorAll(
+      ".key:not(.concat-keys):not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+    );
+    const englishChars = "abcdefghijklmnopqrstuvwxyz1234567890;'\\/][`,.-=".split("");
+    this.shuffleArray(englishChars);
+    keys.forEach((key, index) => {
+      if (index < englishChars.length) {
+        key.textContent = englishChars[index];
+        key.dataset.key = englishChars[index];
+      }
+    });
+  }
+
   // [14] จัดการการลากคีย์บอร์ด
   startDrag(event) {
     this.isDragging = true;

package/layouts.js

@@ -1,11 +1,11 @@
 export const layouts = {
   full: [
-    // ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "DEL⌦", "HOME", "END"],
+    // ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "DEL⌦", "HOME", "END"],"ㅤ","ㅤ","ㅤ","ㅤ",
     ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"].concat(["+", "-", "*","/"]),
     ["Tab ↹", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"].concat(["7", "8", "9", "%"]),
     ["Caps 🄰", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"].concat(["4", "5", "6", "_"]),
     ["Shift ⇧", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift ⇧", "↑"].concat(["1", "2", "3", "="]),
-    ["@", " ", "←", "↓", "→"].concat(["0", "."]),
+    ["scrambled", " ", "←", "↓", "→"].concat(["0", "."]),
   ],
   en: [
     ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"],

package/package.json

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

package/style/kbstyle.js

@@ -1,6 +1,6 @@
 // CSS-in-JS version of kbstyle.css
 export const css = `
-.keyboard-row,.virtual-keyboard{display:flex;display:flex}.keyb,.keyboard-key{cursor:pointer;font-size:16px;text-align:center}.virtual-keyboard{flex-direction:column;width:100%;max-width:800px;margin:0 auto;border:2px solid #333;border-radius:10px;padding:20px;background-color:#f5f5f5;box-shadow:0 4px 10px rgba(0,0,0,.1)}.keyboard-row{justify-content:space-between}.keyboard-key{flex:1;padding:10px 15px;margin:2px;border:1px solid #ccc;border-radius:5px;background-color:#fff;transition:background-color .2s}.keyboard-active,input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.backspacew{flex:1.5;width:260px}.keyboard-key:hover{background:#e0e0e0}.keyboard-key:active{background:#d0d0d0;transform:translateY(1px)}.keyboard-row{display:flex;justify-content:flex-start;margin:5px 0}.controls{margin-bottom:20px}button,select{margin-right:10px;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer}button:hover{background:#f0f0f0}input:focus,textarea:focus{outline:0}#keyboard{position:absolute;cursor:move;top:80%;left:50%;transform:translate(-50%,-50%)}.keyb{color:#fff;border:#000;width:40px;height:25px;line-height:50px;margin:8px}.keyboard-row .active{background:#c7c7c7}body.dark-mode .virtual-keyboard{background-color:#333;box-shadow:0 4px 8px rgba(247,245,245,.1)}body.dark-mode{background-color:#333}body.dark-mode .login-container{background-color:#000;box-shadow:0 4px 8px rgba(247,245,245,.1);color:#fff}body.dark-mode .login-container input{background-color:#3333335d;color:#fff}body.dark-mode .login-container button{background-color:#005703;color:#fff}.fa-keyboard{color:#000}body.dark-mode .keyb .fa-keyboard{color:#ffffffde}body.dark-mode .keyboard-key.key{background-color:#222;color:#ffffffde}[data-key="Caps 🄰"],[data-key="Shift ⇧"],[data-key="Tab ↹"]{min-width:90px}.keyboard-key.key[data-key="Shift ⇧"]{color:#333}.virtual-keyboard.full [data-key=Enter]{min-width:95px}.virtual-keyboard.full [data-key="Shift ⇧"]{min-width:92px}.virtual-keyboard.full [data-key=" "]{min-width:620.8px}.virtual-keyboard.full .concat-keys[data-key="0"]{min-width:102px}.virtual-keyboard.full{min-width:1000px}.virtual-keyboard.Scnum,.virtual-keyboard.numpad{max-width:300px}.hidden{display:none!important}[data-key="Tab ↹"],[data-key=Backspace]{min-width:80px}[data-key="Shift ⇧"]{min-width:100px}[data-key=" "]{min-width:670px} 
+.keyboard-row,.virtual-keyboard{display:flex;display:flex}.keyb,.keyboard-key{cursor:pointer;font-size:16px;text-align:center}.virtual-keyboard{flex-direction:column;width:100%;max-width:800px;margin:0 auto;border:2px solid #333;border-radius:10px;padding:20px;background-color:#f5f5f5;box-shadow:0 4px 10px rgba(0,0,0,.1)}.keyboard-row{justify-content:space-between}.keyboard-key{flex:1;padding:10px 15px;margin:2px;border:1px solid #ccc;border-radius:5px;background-color:#fff;transition:background-color .2s}.keyboard-active,input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.backspacew{flex:1.5;width:260px}.keyboard-key:hover{background:#e0e0e0}.keyboard-key:active{background:#d0d0d0;transform:translateY(1px)}.keyboard-row{display:flex;justify-content:flex-start;margin:5px 0}.controls{margin-bottom:20px}button,select{margin-right:10px;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer}button:hover{background:#f0f0f0}input:focus,textarea:focus{outline:0}#keyboard{position:absolute;cursor:move;top:80%;left:50%;transform:translate(-50%,-50%)}.keyb{color:#fff;border:#000;width:40px;height:25px;line-height:50px;margin:8px}.keyboard-row .active{background:#c7c7c7}body.dark-mode .virtual-keyboard{background-color:#333;box-shadow:0 4px 8px rgba(247,245,245,.1)}body.dark-mode{background-color:#333}body.dark-mode .login-container{background-color:#000;box-shadow:0 4px 8px rgba(247,245,245,.1);color:#fff}body.dark-mode .login-container input{background-color:#3333335d;color:#fff}body.dark-mode .login-container button{background-color:#005703;color:#fff}.fa-keyboard{color:#000}body.dark-mode .keyb .fa-keyboard{color:#ffffffde}body.dark-mode .keyboard-key.key{background-color:#222;color:#ffffffde}[data-key="Caps 🄰"],[data-key="Shift ⇧"],[data-key="Tab ↹"]{min-width:90px}.keyboard-key.key[data-key="Shift ⇧"]{color:#333}.virtual-keyboard.full [data-key=Enter]{min-width:95px}.virtual-keyboard.full [data-key="Shift ⇧"]{min-width:92px}.virtual-keyboard.full [data-key=" "]{min-width:563.8px}.virtual-keyboard.full .concat-keys[data-key="0"]{min-width:102px}.virtual-keyboard.full{min-width:1000px}.virtual-keyboard.Scnum,.virtual-keyboard.numpad{max-width:300px}.hidden{display:none!important}[data-key="Tab ↹"],[data-key=Backspace]{min-width:80px}[data-key="Shift ⇧"]{min-width:100px}[data-key=" "]{min-width:670px} 
 `;
 
 export function injectCSS() {