js_lis 1.0.24 → 2.0.0

package/VirtualKeyboard.js

@@ -2,7 +2,7 @@ import { layouts } from "./layouts.js";
 
 export class VirtualKeyboard {
   constructor() {
-    this.currentLayout = "en";
+    this.currentLayout = "full";
     this.isVisible = false;
     this.container = document.getElementById("keyboard-container");
     this.currentInput = null;
@@ -12,10 +12,7 @@ export class VirtualKeyboard {
     this.offsetY = 0;
     this.shiftActive = false;
     this.capsLockActive = false;
-
-    // กำหนดคีย์และ IV สำหรับการเข้ารหัส
-    this.secretKey = "1234567890abcdef1234567890abcdef"; // คีย์ความยาว 32 bytes
-    this.iv = CryptoJS.lib.WordArray.random(16); // สร้าง IV ความยาว 16 bytes
+    this.isScrambled = false;
 
     this.initialize();
   }
@@ -30,62 +27,16 @@ export class VirtualKeyboard {
     }
   }
 
-  encodeText(text) {
-    const encrypted = CryptoJS.AES.encrypt(
-      text,
-      CryptoJS.enc.Hex.parse(this.secretKey),
-      {
-        iv: this.iv,
-        mode: CryptoJS.mode.CBC,
-        padding: CryptoJS.pad.Pkcs7,
-      }
-    );
-    return {
-      encrypted: encrypted.ciphertext.toString(CryptoJS.enc.Base64),
-      iv: this.iv.toString(CryptoJS.enc.Base64),
-    };
-  }
-
-  decodeText(encryptedData) {
-    if (!encryptedData || !encryptedData.encrypted || !encryptedData.iv) {
-      if (encryptedData === "\t") {
-        return "\t";
-      } else {
-        return " ";
-      }
-    }
-
-    try {
-      const decrypted = CryptoJS.AES.decrypt(
-        { ciphertext: CryptoJS.enc.Base64.parse(encryptedData.encrypted) },
-        CryptoJS.enc.Hex.parse(this.secretKey),
-        {
-          iv: CryptoJS.enc.Base64.parse(encryptedData.iv),
-          mode: CryptoJS.mode.CBC,
-          padding: CryptoJS.pad.Pkcs7,
-        }
-      );
-      return decrypted.toString(CryptoJS.enc.Utf8);
-    } catch (error) {
-      console.error("Error decoding text:", error);
-      return " ";
-    }
-  }
-
   getLayoutName(layout) {
     switch (layout) {
+      case "full":
+        return "Full Keyboard";
       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";
       default:
         return "Unknown Layout";
     }
@@ -125,9 +76,10 @@ export class VirtualKeyboard {
     this.currentInput.classList.add("keyboard-active");
   }
 
+  // [1]
   render() {
     const keyboard = document.createElement("div");
-    keyboard.className = "virtual-keyboard";
+    keyboard.className = `virtual-keyboard ${this.currentLayout}`;
     keyboard.style.display = this.isVisible ? "block" : "none";
     keyboard.id = "keyboard";
 
@@ -142,7 +94,7 @@ export class VirtualKeyboard {
     layoutSelector.id = "layout-selector";
     layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
 
-    const layouts = ["en", "enSc", "th", "thSc", "numpad", "scNum"];
+    const layouts = ["full", "en", "th", "numpad"];
     layouts.forEach((layout) => {
       const option = document.createElement("option");
       option.value = layout;
@@ -160,7 +112,7 @@ export class VirtualKeyboard {
       const rowElement = document.createElement("div");
       rowElement.className = "keyboard-row";
 
-      row.forEach((key) => {
+      row.forEach((key, index) => {
         const keyElement = document.createElement("button");
         keyElement.className = "keyboard-key key";
         keyElement.textContent = key;
@@ -168,6 +120,10 @@ export class VirtualKeyboard {
 
         keyElement.dataset.key = key;
 
+        if (index >= row.length - 4) {
+          keyElement.classList.add("concat-keys");
+        }
+
         if (key === "Space") {
           keyElement.className += " space";
         }
@@ -196,24 +152,12 @@ export class VirtualKeyboard {
     this.container.innerHTML = "";
     this.container.appendChild(keyboard);
 
-    if (this.currentLayout === "scNum") {
-      this.scrambleKeyboard();
-    }
-
-    if (this.currentLayout === "enSc") {
-      this.scrambleEnglishKeys();
-    }
-
-    if (this.currentLayout === "thSc") {
-      this.scrambleThaiKeys();
-    }
-
     keyboard.addEventListener("mousedown", (event) => this.startDrag(event));
   }
 
+  // [2]
   async handleKeyPress(keyPressed) {
     if (!this.currentInput) return;
-
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
     const value = this.currentInput.value;
@@ -228,23 +172,158 @@ export class VirtualKeyboard {
       return char.toLowerCase();
     };
 
-    if (!keyPressed) {
-      console.error("Invalid key pressed.");
+    if (!keyPressed) return console.error("Invalid key pressed.");
+
+    if (keyPressed === "scr" || keyPressed === "scrambled") {
+      if (this.currentLayout === "en") {
+        if (this.isScrambled) {
+          this.unscrambleEnglishKeys();
+        } else {
+          this.scrambleEnglishKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
+
+      if (this.currentLayout === "th") {
+        if (this.isScrambled) {
+          this.unscrambleEnglishKeys();
+        } else {
+          this.scrambleThaiKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
+
+      if (this.currentLayout === "numpad") {
+        if (this.isScrambled) {
+          this.unscrambleEnglishKeys();
+        } else {
+          this.scrambleKeyboard();
+        }
+        this.isScrambled = !this.isScrambled;
+        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
+          key.classList.toggle("active", this.isScrambled);
+        });
+      }
       return;
     }
 
     switch (keyPressed) {
+      case "Esc":
+        const modals = document.querySelectorAll(".modal");
+        if (modals.length === 0) {
+          document.exitFullscreen();
+          console.warn("No modals found to close.");
+        }
+        modals.forEach((modal) => {
+          modal.classList.add("hidden"); 
+        });
+        break;
+
+      case "F1":
+        break;
+
+      case "F2":
+        // เปิดโหมดแก้ไขสำหรับ element ที่เลือก
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement.contentEditable !== undefined) {
+          activeElement.contentEditable = true;
+          activeElement.focus();
+          console.log(activeElement.contentEditable);
+        } else {
+          console.warn("No editable element found.");
+        }
+        break;
+
+      case "F3":
+        // เปิดการค้นหา
+        event.preventDefault();
+        this.option.openSearch();
+        break;
+
+      case "F4":
+        // เปิดเมนูการตั้งค่า
+        event.preventDefault();
+        this.option.openSettings();
+        break;
+
+      case "F5":
+        // รีโหลดหน้าเว็บ (คงเดิม)
+        window.location.reload();
+        break;
+
+      case "F6":
+        // สลับระหว่างโหมดกลางวัน/กลางคืน
+        document.body.classList.toggle("dark-mode");
+        break;
+
+      case "F7":
+        break;
+
+      case "F8":
+        break;
+
+      case "F9":
+        break;
+
+      case "F10":
+        break;
+
+      case "F11":
+        if (!document.fullscreenElement) {
+          document.documentElement
+            .requestFullscreen()
+            .catch((err) =>
+              console.error("Error attempting to enable fullscreen:", err)
+            );
+        } else {
+          document
+            .exitFullscreen()
+            .catch((err) =>
+              console.error("Error attempting to exit fullscreen:", err)
+            );
+        }
+        break;
+
+      case "F12":
+        break;
+
+      case "HOME":
+        this.currentInput.setSelectionRange(Math.max(0, 0), Math.max(0, 0));
+        break;
+
+      case "END":
+        const length = this.currentInput.value.length;
+        this.currentInput.setSelectionRange(length, length);
+        break;
+
       case "Backspace":
       case "backspace":
         if (start === end && start > 0) {
-          this.currentInput.value =
-            value.slice(0, start - 1) + value.slice(end);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd =
-            start - 1;
+          this.currentInput.value = value.slice(0, start - 1) + value.slice(end);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start - 1;
+        } else {
+          this.currentInput.value = value.slice(0, start) + value.slice(end);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+        }
+        break;
+
+      case "DEL⌦":
+        if (start === end && start < value.length) {
+          this.currentInput.value = value.slice(0, start) + value.slice(end + 1);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
         } else {
           this.currentInput.value = value.slice(0, start) + value.slice(end);
-          this.currentInput.selectionStart = this.currentInput.selectionEnd =
-            start;
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
         }
         break;
 
@@ -252,290 +331,203 @@ export class VirtualKeyboard {
         await this.insertText(" ");
         break;
 
-      case "Tab":
+      case "Tab ↹":
         await this.insertText("\t");
         break;
 
-      case 'Enter':
+      case "Enter":
         if (this.currentInput.tagName === "TEXTAREA") {
-          const start = this.currentInput.selectionStart;
-          const end = this.currentInput.selectionEnd;
-          const value = this.currentInput.value;
           this.currentInput.value = value.slice(0, start) + "\n" + value.slice(end);
           this.currentInput.setSelectionRange(start + 1, start + 1);
-        } else if (this.currentInput.tagName === "INPUT" || this.currentInput.type === "password" || this.currentInput.type === "text") {
+        } else if (this.currentInput.tagName === "INPUT" || this.currentInput.type === "password" || this.currentInput.type === "text" ) {
           if (this.currentInput.form) {
-            const submitButton = this.currentInput.form.querySelector('input[type="submit"], button[type="submit"], button[type="button"], button[onclick]');
-            if (submitButton) {
-              submitButton.click();
-            } else {
-              this.currentInput.form.submit(); 
-            }
+            const submitButton = this.currentInput.form.querySelector(
+              'input[type="submit"], button[type="submit"], button[type="button"], button[onclick]'
+            );
+            if (submitButton) submitButton.click(); else this.currentInput.form.submit();
           } else {
-            this.currentInput.value += '\n'; 
+            this.currentInput.value += "\n";
           }
         }
         break;
 
-      case "Caps":
+      case "Caps 🄰":
         this.toggleCapsLock();
         break;
 
-      case "Shift":
+      case "Shift ⇧":
         this.toggleShift();
         break;
 
-      default:
-        const encryptedText = await this.encodeText(
-          convertToCorrectCase(keyPressed)
+      case "←":
+        this.currentInput.setSelectionRange(
+          Math.max(0, start - 1),
+          Math.max(0, start - 1)
         );
-        await this.insertText(encryptedText);
-    }
+        break;
 
-    if (isShiftActive && !isCapsActive) {
-      this.toggleShift();
+      case "→":
+        this.currentInput.setSelectionRange(start + 1, start + 1);
+        break;
+
+      case "↑":
+      case "↓":
+        const text = this.currentInput.value;
+        const lines = text.substring(0, start).split("\n");
+        const currentLineIndex = lines.length - 1;
+        const currentLine = lines[currentLineIndex];
+        const columnIndex = start - text.lastIndexOf("\n", start - 1) - 1;
+
+        if (keyPressed === "↑" && currentLineIndex > 0) {
+          const prevLineLength = lines[currentLineIndex - 1].length;
+          const newPos = start - currentLine.length - 1 - Math.min(columnIndex, prevLineLength);
+          this.currentInput.setSelectionRange(newPos, newPos);
+        } else if (keyPressed === "↓" && currentLineIndex < lines.length - 1) {
+          const nextLine = lines[currentLineIndex + 1];
+          const newPos = start + currentLine.length + 1 + Math.min(columnIndex, nextLine.length);
+          this.currentInput.setSelectionRange(newPos, newPos);
+        }
+        break;
+
+      default:
+        const textvalue = await convertToCorrectCase(keyPressed);
+        await this.insertText(textvalue);
     }
 
+    if (isShiftActive && !isCapsActive) this.toggleShift();
+
     this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
-    // console.log(this.encodeText(convertToCorrectCase(keyPressed)));
-    // console.log(keyPressed);
   }
 
+  // [3]
   async insertText(text) {
     const start = this.currentInput.selectionStart;
     const end = this.currentInput.selectionEnd;
-    const decodedText = await this.decodeText(text); // ใช้ถอดรหัสก่อนแทรก
-
-    this.currentInput.value =
-      this.currentInput.value.slice(0, start) +
-      decodedText +
-      this.currentInput.value.slice(end);
-    this.currentInput.selectionStart = this.currentInput.selectionEnd =
-      start + decodedText.length;
+    const textvalue = text; 
+
+    this.currentInput.value = this.currentInput.value.slice(0, start) + textvalue + this.currentInput.value.slice(end);
+    this.currentInput.selectionStart = this.currentInput.selectionEnd = start + textvalue.length;
+  }
+
+  // [4]
+  unscrambleEnglishKeys() {
+    this.keys = this.originalKeys;
+    this.render();
   }
 
+  // [5]
   toggleCapsLock() {
     this.capsLockActive = !this.capsLockActive;
-    document.querySelectorAll('.key[data-key="Caps"]').forEach((key) => {
+
+    document.querySelectorAll('.key[data-key="Caps 🄰"]').forEach((key) => {
       key.classList.toggle("active", this.capsLockActive);
       key.classList.toggle("bg-gray-400", this.capsLockActive);
     });
 
     document.querySelectorAll(".key").forEach((key) => {
-      if (key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key)) {
+      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
+
+      if (isLetter) {
         key.textContent = this.capsLockActive
           ? key.dataset.key.toUpperCase()
           : key.dataset.key.toLowerCase();
       }
+      this.updateKeyContent(key, this.capsLockActive);
     });
-
-    const keyboardKeys = document.querySelectorAll(
-      ".key:not([data-key='Caps'])"
-    );
-    keyboardKeys.forEach((key) => {
-      const currentChar = key.textContent.trim();
-      if (
-        this.capsLockActive &&
-        this.currentLayout === "th" &&
-        this.ThaiAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.ThaiAlphabetShift[currentChar];
-        key.dataset.key = this.ThaiAlphabetShift[currentChar];
-      } else if (
-        !this.capsLockActive &&
-        this.currentLayout === "th" &&
-        Object.values(this.ThaiAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.ThaiAlphabetShift).find(
-          (key) => this.ThaiAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
-      }
-
-      if (
-        this.capsLockActive &&
-        this.currentLayout === "en" &&
-        this.EngAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.EngAlphabetShift[currentChar];
-        key.dataset.key = this.EngAlphabetShift[currentChar];
-      } else if (
-        !this.capsLockActive &&
-        this.currentLayout === "en" &&
-        Object.values(this.EngAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.EngAlphabetShift).find(
-          (key) => this.EngAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
+  }
+  updateKeyContent(key, capsLockActive) {
+    const currentChar = key.textContent.trim();
+
+    const layouts = {
+      th: this.ThaiAlphabetShift,
+      en: this.EngAlphabetShift,
+      enSc: this.EngAlphabetShift,
+      full: this.FullAlphabetShift,
+    };
+    const layout = layouts[this.currentLayout];
+
+    if (!layout) return;
+
+    if (capsLockActive && layout[currentChar]) {
+      key.textContent = layout[currentChar];
+      key.dataset.key = layout[currentChar];
+    } else if (!capsLockActive && Object.values(layout).includes(currentChar)) {
+      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
+      if (originalKey) {
+        key.textContent = originalKey;
+        key.dataset.key = originalKey;
       }
-    });
+    }
   }
 
+  // [6]
   toggleShift() {
     if (this.capsLockActive) {
       return this.toggleCapsLock();
     }
 
     this.shiftActive = !this.shiftActive;
-    document.querySelectorAll('.key[data-key="Shift"]').forEach((key) => {
+    document.querySelectorAll('.key[data-key="Shift ⇧"]').forEach((key) => {
       key.classList.toggle("active", this.shiftActive);
       key.classList.toggle("bg-gray-400", this.shiftActive);
     });
-
+  
     document.querySelectorAll(".key").forEach((key) => {
-      if (key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key)) {
+      const isLetter = key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key);
+  
+      if (isLetter) {
         key.textContent = this.shiftActive
           ? key.dataset.key.toUpperCase()
           : key.dataset.key.toLowerCase();
       }
+      this.updateKeyContent(key, this.shiftActive);
     });
-
-    const keyboardKeys = document.querySelectorAll(
-      ".key:not([data-key='Shift'])"
-    );
-    keyboardKeys.forEach((key) => {
-      const currentChar = key.textContent.trim();
-      if (
-        this.shiftActive &&
-        this.currentLayout === "th" &&
-        this.ThaiAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.ThaiAlphabetShift[currentChar];
-        key.dataset.key = this.ThaiAlphabetShift[currentChar];
-      } else if (
-        !this.shiftActive &&
-        this.currentLayout === "th" &&
-        Object.values(this.ThaiAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.ThaiAlphabetShift).find(
-          (key) => this.ThaiAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
-      }
-
-      if (
-        this.shiftActive &&
-        this.currentLayout === "en" &&
-        this.EngAlphabetShift[currentChar]
-      ) {
-        key.textContent = this.EngAlphabetShift[currentChar];
-        key.dataset.key = this.EngAlphabetShift[currentChar];
-      } else if (
-        !this.shiftActive &&
-        this.currentLayout === "en" &&
-        Object.values(this.EngAlphabetShift).includes(currentChar)
-      ) {
-        // เปลี่ยนกลับเมื่อปิด Shift
-        const originalKey = Object.keys(this.EngAlphabetShift).find(
-          (key) => this.EngAlphabetShift[key] === currentChar
-        );
-        if (originalKey) {
-          key.textContent = originalKey;
-          key.dataset.key = originalKey;
-        }
+  }
+  updateKeyContent(key, shiftActive) {
+    const currentChar = key.textContent.trim();
+  
+    const layouts = {
+      th: this.ThaiAlphabetShift,
+      en: this.EngAlphabetShift,
+      enSc: this.EngAlphabetShift,
+      full: this.FullAlphabetShift,
+    };
+    const layout = layouts[this.currentLayout];
+  
+    if (!layout) return;
+  
+    if (shiftActive && layout[currentChar]) {
+      key.textContent = layout[currentChar];
+      key.dataset.key = layout[currentChar];
+    } else if (!shiftActive && Object.values(layout).includes(currentChar)) {
+      const originalKey = Object.keys(layout).find((k) => layout[k] === currentChar);
+      if (originalKey) {
+        key.textContent = originalKey;
+        key.dataset.key = originalKey;
       }
-    });
+    }
   }
 
-  EngAlphabetShift = {
-    "`": "~",
-    1: "!",
-    2: "@",
-    3: "#",
-    4: "$",
-    5: "%",
-    6: "^",
-    7: "&",
-    8: "*",
-    9: "(",
-    0: ")",
-    "-": "_",
-    "=": "+",
-    "[": "{",
-    "]": "}",
-    "\\": "|",
-    ";": ":",
-    "'": '"',
-    ",": "<",
-    ".": ">",
-    "/": "?",
-  };
-
-  ThaiAlphabetShift = {
-    _: "%",
-    ๅ: "+",
-    "/": "๑",
-    "-": "๒",
-    ภ: "๓",
-    ถ: "๔",
-    "ุ": "ู",
-    "ึ": "฿",
-    ค: "๕",
-    ต: "๖",
-    จ: "๗",
-    ข: "๘",
-    ช: "๙",
-    ๆ: "๐",
-    ไ: '"',
-    ำ: "ฎ",
-    พ: "ฑ",
-    ะ: "ธ",
-    "ั": "ํ",
-    "ี": "๋",
-    ร: "ณ",
-    น: "ฯ",
-    ย: "ญ",
-    บ: "ฐ",
-    ล: ",",
-    ฃ: "ฅ",
-    ฟ: "ฤ",
-    ห: "ฆ",
-    ก: "ฏ",
-    ด: "โ",
-    เ: "ฌ",
-    "้": "็",
-    "่": "๋",
-    า: "ษ",
-    ส: "ศ",
-    ว: "ซ",
-    ง: ".",
-    ผ: "(",
-    ป: ")",
-    แ: "ฉ",
-    อ: "ฮ",
-    "ิ": "ฺ",
-    "ื": "์",
-    ท: "?",
-    ม: "ฒ",
-    ใ: "ฬ",
-    ฝ: "ฦ",
-  };
+  // [7]
+  EngAlphabetShift = { "`": "~", 1: "!", 2: "@", 3: "#", 4: "$", 5: "%", 6: "^", 7: "&", 8: "*", 9: "(", 0: ")", "-": "_", "=": "+", "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
+  ThaiAlphabetShift = { _: "%", ๅ: "+", "/": "๑", "-": "๒", ภ: "๓", ถ: "๔", "ุ": "ู", "ึ": "฿", ค: "๕", ต: "๖", จ: "๗", ข: "๘", ช: "๙", ๆ: "๐", ไ: '"', ำ: "ฎ", พ: "ฑ", ะ: "ธ", "ั": "ํ", "ี": "๋", ร: "ณ", น: "ฯ", ย: "ญ", บ: "ฐ", ล: ",", ฃ: "ฅ", ฟ: "ฤ", ห: "ฆ", ก: "ฏ", ด: "โ", เ: "ฌ", "้": "็", "่": "๋", า: "ษ", ส: "ศ", ว: "ซ", ง: ".", ผ: "(", ป: ")", แ: "ฉ", อ: "ฮ", "ิ": "ฺ", "ื": "์", ท: "?", ม: "ฒ", ใ: "ฬ", ฝ: "ฦ"};
+  FullAlphabetShift = { "[": "{", "]": "}", "\\": "|", ";": ":", "'": '"', ",": "<", ".": ">", "/": "?", };
 
+  // [8]
   toggle() {
     this.isVisible = !this.isVisible;
     this.render();
   }
 
+  // [9]
   changeLayout(layout) {
     this.currentLayout = layout;
     this.render();
   }
 
+  // [10]
   shuffleArray(array) {
     for (let i = array.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -543,11 +535,12 @@ export class VirtualKeyboard {
     }
   }
 
+  // [11]
   scrambleKeyboard() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key=backspace]):not([data-key='+']):not([data-key='-']):not([data-key='*']):not([data-key='/']):not([data-key='%']):not([data-key='=']):not([data-key='.']):not([data-key='00'])"
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
     );
-    const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+    const numbers = "1234567890-=+%/*.()".split("");
     this.shuffleArray(numbers);
     keys.forEach((key, index) => {
       key.textContent = numbers[index];
@@ -555,11 +548,12 @@ export class VirtualKeyboard {
     });
   }
 
+  // [12]
   scrambleEnglishKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='Space']):not([data-key='Backspace']):not([data-key='Caps']):not([data-key='Shift']):not([data-key='Enter']):not([data-key='Tab']):not([data-key='`']):not([data-key='1']):not([data-key='2']):not([data-key='3']):not([data-key='4']):not([data-key='5']):not([data-key='6']):not([data-key='7']):not([data-key='8']):not([data-key='9']):not([data-key='0']):not([data-key='-']):not([data-key='+']):not([data-key='='])"
+      ".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 ↹'])"
     );
-    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
     this.shuffleArray(englishAlphabet);
     keys.forEach((key, index) => {
       key.textContent = englishAlphabet[index];
@@ -567,37 +561,33 @@ export class VirtualKeyboard {
     });
   }
 
+  // [13]
   scrambleThaiKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='Backspace']):not([data-key='Caps']):not([data-key='Shift']):not([data-key='Enter']):not([data-key='Space'])"
-    );
-    const ThaiAlphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ".split(
-      ""
+      ".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 ↹'])"
     );
-    this.shuffleArray(ThaiAlphabet); // สับเปลี่ยนลำดับของตัวอักษร
-
+    const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
+    this.shuffleArray(ThaiAlphabet);
     keys.forEach((key, index) => {
-      // อัพเดต textContent และ dataset.key ให้ตรงกับค่าใหม่ที่สับเปลี่ยน
       key.textContent = ThaiAlphabet[index];
-      key.dataset.key = ThaiAlphabet[index]; // อัพเดต dataset.key ด้วยค่าใหม่
+      key.dataset.key = ThaiAlphabet[index]; 
     });
   }
 
-  // จัดการการลากคีย์บอร์ด
+  // [14] จัดการการลากคีย์บอร์ด
   startDrag(event) {
     this.isDragging = true;
-    this.offsetX =
-      event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY =
-      event.clientY - document.getElementById("keyboard").offsetTop;
+    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
+    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
 
-    document.addEventListener("mousemove", this.drag.bind(this)); // Use bind to preserve `this` context
+    document.addEventListener("mousemove", this.drag.bind(this)); 
     document.addEventListener("mouseup", () => {
       this.isDragging = false;
       document.removeEventListener("mousemove", this.drag.bind(this));
     });
   }
 
+  // [15]
   drag(event) {
     if (this.isDragging) {
       const keyboard = document.getElementById("keyboard");

package/layouts.js

@@ -1,44 +1,32 @@
 export const layouts = {
+  full: [
+    ["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", "="]),
+    ["Space", "←", "↓", "→"].concat(["0", "."]),
+  ],
   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"],
+    ["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 ⇧"],
+    ["scrambled", "Space"],
   ],
   th: [
     ["_", "ๅ", "/", "-", "ภ", "ถ", "ุ", "ึ", "ค", "ต", "จ", "ข", "ช", "Backspace"],
-    ["Tab", "ๆ", "ไ", "ำ", "พ", "ะ", "ั", "ี", "ร", "น", "ย", "บ", "ล", "ฃ"],
-    ["Caps", "ฟ", "ห", "ก", "ด", "เ", "้", "่", "า", "ส", "ว", "ง", "Enter"],
-    ["Shift", "ผ", "ป", "แ", "อ", "ิ", "ื", "ท", "ม", "ใ", "ฝ", "Shift"],
-    ["Space"],
+    ["Tab ↹", "ๆ", "ไ", "ำ", "พ", "ะ", "ั", "ี", "ร", "น", "ย", "บ", "ล", "ฃ"],
+    ["Caps 🄰", "ฟ", "ห", "ก", "ด", "เ", "้", "่", "า", "ส", "ว", "ง", "Enter"],
+    ["Shift ⇧", "ผ", "ป", "แ", "อ", "ิ", "ื", "ท", "ม", "ใ", "ฝ", "Shift ⇧"],
+    ["scrambled" ,"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"],
-  ],
+    ["scr", "+", "-", "*"],
+    ["1", "2", "3", "/"],
+    ["4", "5", "6", "%"],
+    ["7", "8", "9", "."],
+    ["(", "0", ")", "="],
+    ["backspace"]
+  ]
 };

package/package.json

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