js_lis 2.0.1 → 2.0.2

package/VirtualKeyboard.js

@@ -1,625 +1,699 @@
-import { layouts } from "./layouts.js";
-
-export class VirtualKeyboard {
-  constructor() {
-    this.currentLayout = "full";
-    this.isVisible = false;
-    this.container = document.getElementById("keyboard-container");
-    this.currentInput = null;
-    this.layouts = layouts;
-    this.isDragging = false;
-    this.offsetX = 0;
-    this.offsetY = 0;
-    this.shiftActive = false;
-    this.capsLockActive = false;
-    this.isScrambled = false;
-
-    this.initialize();
-  }
-
-  async initialize() {
-    try {
-      this.render();
-      this.initializeInputListeners();
-      console.log("VirtualKeyboard initialized successfully.");
-    } catch (error) {
-      console.error("Error initializing VirtualKeyboard:", error);
-    }
-  }
-
-  getLayoutName(layout) {
-    switch (layout) {
-      case "full":
-        return "Full Keyboard";
-      case "en":
-        return "English Keyboard";
-      case "th":
-        return "Thai keyboard";
-      case "numpad":
-        return "Numpad Keyboard";
-      case "symbols":
-        return "Symbols Keyboard";
-      default:
-        return "Unknown Layout";
-    }
-  }
-
-  initializeInputListeners() {
-    document.addEventListener("click", (e) => {
-      const target = e.target;
-      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        this.setCurrentInput(target);
-      }
-    });
-
-    document.addEventListener(
-      "focus",
-      (e) => {
-        const target = e.target;
-        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-          this.setCurrentInput(target);
-        }
-      },
-      true
-    );
-
-    const toggle = document.getElementById("toggle");
-    if (toggle) {
-      toggle.addEventListener("click", this.toggle.bind(this));
-    }
-  }
-
-  setCurrentInput(inputElement) {
-    if (this.currentInput) {
-      this.currentInput.classList.remove("keyboard-active");
-    }
-
-    this.currentInput = inputElement;
-    this.currentInput.classList.add("keyboard-active");
-  }
-
-  // [1]
-  render() {
-    const keyboard = document.createElement("div");
-    keyboard.className = `virtual-keyboard ${this.currentLayout}`;
-    keyboard.style.display = this.isVisible ? "block" : "none";
-    keyboard.id = "keyboard";
-
-    const controlsContainer = document.createElement("div");
-    controlsContainer.className = "controls";
-    controlsContainer.style.display = "flex";
-    controlsContainer.style.justifyContent = "center";
-    controlsContainer.style.alignItems = "center";
-    controlsContainer.style.marginBottom = "10px";
-
-    const layoutSelector = document.createElement("select");
-    layoutSelector.id = "layout-selector";
-    layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
-
-    const layouts = ["full", "en", "th", "numpad", "symbols"];
-    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";
-
-      row.forEach((key, index) => {
-        const keyElement = document.createElement("button");
-        keyElement.className = "keyboard-key key";
-        keyElement.textContent = key;
-        keyElement.type = "button";
-
-        keyElement.dataset.key = key;
-
-        if (index >= row.length - 4) {
-          keyElement.classList.add("concat-keys");
-        }
-
-        if (key === "Space") {
-          keyElement.className += " space";
-        }
-
-        if (key === "backspace" || key === "Backspace") {
-          keyElement.className += " backspacew";
-          keyElement.innerHTML = '<i class="fa fa-backspace"></i>';
-        }
-
-        keyElement.onclick = (e) => {
-          e.preventDefault();
-          const keyPressed = keyElement.dataset.key || keyElement.textContent;
-          if (keyPressed) {
-            this.handleKeyPress(keyPressed);
-          } else {
-            console.error("The key element does not have a valid key value.");
-          }
-        };
-
-        rowElement.appendChild(keyElement);
-      });
-
-      keyboard.appendChild(rowElement);
-    });
-
-    this.container.innerHTML = "";
-    this.container.appendChild(keyboard);
-
-    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;
-
-    const isCapsActive = this.capsLockActive;
-    const isShiftActive = this.shiftActive;
-
-    const convertToCorrectCase = (char) => {
-      if (isCapsActive || isShiftActive) {
-        return char.toUpperCase();
-      }
-      return char.toLowerCase();
-    };
-
-    if (!keyPressed) return console.error("Invalid key pressed.");
-
-    if (keyPressed === "scr" || keyPressed === "scrambled") {
-      if (this.currentLayout === "en") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } 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.unscrambleKeys();
-        } 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.unscrambleKeys();
-        } else {
-          this.scrambleKeyboard();
-        }
-        this.isScrambled = !this.isScrambled;
-        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
-          key.classList.toggle("active", this.isScrambled);
-        });
-      }
-
-      if (this.currentLayout === "symbols") {
-        if (this.isScrambled) {
-          this.unscrambleKeys();
-        } else {
-          this.scrambleSymbols();
-        }
-        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;
-        } 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;
-        }
-        break;
-
-      case "Space":
-        await this.insertText(" ");
-        break;
-
-      case "Tab ↹":
-        await this.insertText("\t");
-        break;
-
-      case "Enter":
-        if (this.currentInput.tagName === "TEXTAREA") {
-          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" ) {
-          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();
-          } else {
-            this.currentInput.value += "\n";
-          }
-        }
-        break;
-
-      case "Caps 🄰":
-        this.toggleCapsLock();
-        break;
-
-      case "Shift ⇧":
-        this.toggleShift();
-        break;
-
-      case "←":
-        this.currentInput.setSelectionRange(
-          Math.max(0, start - 1),
-          Math.max(0, start - 1)
-        );
-        break;
-
-      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);
-  }
-
-  // [3]
-  async insertText(text) {
-    const start = this.currentInput.selectionStart;
-    const end = this.currentInput.selectionEnd;
-    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]
-  unscrambleKeys() {
-    this.keys = this.originalKeys;
-    this.render();
-  }
-
-  // [5]
-  toggleCapsLock() {
-    this.capsLockActive = !this.capsLockActive;
-
-    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) => {
-      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);
-    });
-  }
-  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) => {
-      key.classList.toggle("active", this.shiftActive);
-      key.classList.toggle("bg-gray-400", this.shiftActive);
-    });
-  
-    document.querySelectorAll(".key").forEach((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);
-    });
-  }
-  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;
-      }
-    }
-  }
-
-  // [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));
-      [array[i], array[j]] = [array[j], array[i]];
-    }
-  }
-
-  // [11]
-  scrambleKeyboard() {
-    const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
-    );
-    const numbers = "1234567890-=+%/*.()".split("");
-    this.shuffleArray(numbers);
-    keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-      key.dataset.key = numbers[index];
-    });
-  }
-
-  // [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 ↹'])"
-    );
-    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
-    this.shuffleArray(englishAlphabet);
-    keys.forEach((key, index) => {
-      key.textContent = englishAlphabet[index];
-      key.dataset.key = englishAlphabet[index];
-    });
-  }
-
-  // [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 ↹'])"
-    );
-    const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
-    this.shuffleArray(ThaiAlphabet);
-    keys.forEach((key, index) => {
-      key.textContent = ThaiAlphabet[index];
-      key.dataset.key = ThaiAlphabet[index]; 
-    });
-  }
-
-  // []
-  scrambleSymbols() {
-    const keys = document.querySelectorAll(
-      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
-    );
-    const numbers = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
-    this.shuffleArray(numbers);
-    keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-      key.dataset.key = numbers[index];
-    });
-  }
-
-  // [14] จัดการการลากคีย์บอร์ด
-  startDrag(event) {
-    this.isDragging = true;
-    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
-
-    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");
-      keyboard.style.left = `${event.clientX - this.offsetX}px`;
-      keyboard.style.top = `${event.clientY - this.offsetY}px`;
-    }
-  }
+import { layouts } from "./layouts.js";
+
+export class VirtualKeyboard {
+  constructor() {
+    this.currentLayout = "full";
+    this.isVisible = false;
+    this.container = document.getElementById("keyboard-container");
+    this.currentInput = null;
+    this.layouts = layouts;
+    this.isDragging = false;
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.shiftActive = false;
+    this.capsLockActive = false;
+    this.isScrambled = false;
+
+    // Maintain plaintext buffers per input (not stored in DOM). DOM will store only encrypted text.
+    this.inputPlaintextBuffers = new WeakMap();
+
+    this.initialize();
+  }
+
+  async initialize() {
+    try {
+      this.render();
+      this.initializeInputListeners();
+      console.log("VirtualKeyboard initialized successfully.");
+    } catch (error) {
+      console.error("Error initializing VirtualKeyboard:", error);
+    }
+  }
+
+  getLayoutName(layout) {
+    switch (layout) {
+      case "full":
+        return "Full Keyboard";
+      case "en":
+        return "English Keyboard";
+      case "th":
+        return "Thai keyboard";
+      case "numpad":
+        return "Numpad Keyboard";
+      case "symbols":
+        return "Symbols Keyboard";
+      default:
+        return "Unknown Layout";
+    }
+  }
+
+  initializeInputListeners() {
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+        this.setCurrentInput(target);
+      }
+    });
+
+    document.addEventListener(
+      "focus",
+      (e) => {
+        const target = e.target;
+        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+          this.setCurrentInput(target);
+        }
+      },
+      true
+    );
+
+    const toggle = document.getElementById("toggle");
+    if (toggle) {
+      toggle.addEventListener("click", this.toggle.bind(this));
+    }
+  }
+
+  setCurrentInput(inputElement) {
+    if (this.currentInput) {
+      this.currentInput.classList.remove("keyboard-active");
+    }
+
+    this.currentInput = inputElement;
+    this.currentInput.classList.add("keyboard-active");
+
+    // Ensure buffer initialized for this input
+    if (!this.inputPlaintextBuffers.has(this.currentInput)) {
+      const ds = this.currentInput.dataset ? this.currentInput.dataset.encrypted : undefined;
+      let initial = "";
+      try {
+        if (ds && window.VKCrypto && typeof window.VKCrypto.decrypt === "function") {
+          initial = window.VKCrypto.decrypt(ds) || "";
+        } else {
+          initial = this.currentInput.value || "";
+        }
+      } catch (_) {
+        initial = this.currentInput.value || "";
+      }
+      this.inputPlaintextBuffers.set(this.currentInput, initial);
+      this.updateDomEncrypted(this.currentInput, initial);
+    }
+    // Sync visible with buffer (masking for password)
+    this.updateDisplayedValue();
+  }
+
+  // [1]
+  render() {
+    const keyboard = document.createElement("div");
+    keyboard.className = `virtual-keyboard ${this.currentLayout}`;
+    keyboard.style.display = this.isVisible ? "block" : "none";
+    keyboard.id = "keyboard";
+
+    const controlsContainer = document.createElement("div");
+    controlsContainer.className = "controls";
+    controlsContainer.style.display = "flex";
+    controlsContainer.style.justifyContent = "center";
+    controlsContainer.style.alignItems = "center";
+    controlsContainer.style.marginBottom = "10px";
+
+    const layoutSelector = document.createElement("select");
+    layoutSelector.id = "layout-selector";
+    layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
+
+    const layouts = ["full", "en", "th", "numpad", "symbols"];
+    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";
+
+      row.forEach((key, index) => {
+        const keyElement = document.createElement("button");
+        keyElement.className = "keyboard-key key";
+        keyElement.textContent = key;
+        keyElement.type = "button";
+
+        keyElement.dataset.key = key;
+
+        if (index >= row.length - 4) {
+          keyElement.classList.add("concat-keys");
+        }
+
+        if (key === "Space") {
+          keyElement.className += " space";
+        }
+
+        if (key === "backspace" || key === "Backspace") {
+          keyElement.className += " backspacew";
+          keyElement.innerHTML = '<i class="fa fa-backspace"></i>';
+        }
+
+        keyElement.onclick = (e) => {
+          e.preventDefault();
+          const keyPressed = keyElement.dataset.key || keyElement.textContent;
+          if (keyPressed) {
+            this.handleKeyPress(keyPressed);
+          } else {
+            console.error("The key element does not have a valid key value.");
+          }
+        };
+
+        rowElement.appendChild(keyElement);
+      });
+
+      keyboard.appendChild(rowElement);
+    });
+
+    this.container.innerHTML = "";
+    this.container.appendChild(keyboard);
+
+    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 buffer = this.getCurrentBuffer();
+
+    const isCapsActive = this.capsLockActive;
+    const isShiftActive = this.shiftActive;
+
+    const convertToCorrectCase = (char) => {
+      if (isCapsActive || isShiftActive) {
+        return char.toUpperCase();
+      }
+      return char.toLowerCase();
+    };
+
+    if (!keyPressed) return console.error("Invalid key pressed.");
+
+    if (keyPressed === "scr" || keyPressed === "scrambled") {
+      if (this.currentLayout === "en") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } 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.unscrambleKeys();
+        } 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.unscrambleKeys();
+        } else {
+          this.scrambleKeyboard();
+        }
+        this.isScrambled = !this.isScrambled;
+        document.querySelectorAll('.key[data-key="scr"]').forEach((key) => {
+          key.classList.toggle("active", this.isScrambled);
+        });
+      }
+
+      if (this.currentLayout === "symbols") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleSymbols();
+        }
+        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) {
+          const newBuffer = buffer.slice(0, start - 1) + buffer.slice(end);
+          this.setCurrentBuffer(newBuffer);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start - 1;
+        } else {
+          const newBuffer = buffer.slice(0, start) + buffer.slice(end);
+          this.setCurrentBuffer(newBuffer);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+        }
+        this.updateDisplayedValue();
+        break;
+
+      case "DEL⌦":
+        if (start === end && start < buffer.length) {
+          const newBuffer = buffer.slice(0, start) + buffer.slice(end + 1);
+          this.setCurrentBuffer(newBuffer);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+        } else {
+          const newBuffer = buffer.slice(0, start) + buffer.slice(end);
+          this.setCurrentBuffer(newBuffer);
+          this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
+        }
+        this.updateDisplayedValue();
+        break;
+
+      case "Space":
+        await this.insertText(" ");
+        break;
+
+      case "Tab ↹":
+        await this.insertText("\t");
+        break;
+
+      case "Enter":
+        if (this.currentInput.tagName === "TEXTAREA") {
+          const newBuffer = buffer.slice(0, start) + "\n" + buffer.slice(end);
+          this.setCurrentBuffer(newBuffer);
+          this.updateDisplayedValue();
+          this.currentInput.setSelectionRange(start + 1, start + 1);
+        } 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();
+          } else {
+            const newBuffer = buffer + "\n";
+            this.setCurrentBuffer(newBuffer);
+            this.updateDisplayedValue();
+          }
+        }
+        break;
+
+      case "Caps 🄰":
+        this.toggleCapsLock();
+        break;
+
+      case "Shift ⇧":
+        this.toggleShift();
+        break;
+
+      case "←":
+        this.currentInput.setSelectionRange(
+          Math.max(0, start - 1),
+          Math.max(0, start - 1)
+        );
+        break;
+
+      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);
+  }
+
+  // [3]
+  async insertText(text) {
+    const start = this.currentInput.selectionStart;
+    const end = this.currentInput.selectionEnd;
+    const textvalue = text; 
+
+    const buffer = this.getCurrentBuffer();
+    const newBuffer = buffer.slice(0, start) + textvalue + buffer.slice(end);
+    this.setCurrentBuffer(newBuffer);
+    this.updateDisplayedValue();
+    this.currentInput.selectionStart = this.currentInput.selectionEnd = start + textvalue.length;
+  }
+
+  // Helper: get current plaintext buffer for active input
+  getCurrentBuffer() {
+    if (!this.currentInput) return "";
+    return this.inputPlaintextBuffers.get(this.currentInput) || "";
+  }
+
+  // Helper: set buffer and update encrypted dataset
+  setCurrentBuffer(newBuffer) {
+    if (!this.currentInput) return;
+    this.inputPlaintextBuffers.set(this.currentInput, newBuffer);
+    this.updateDomEncrypted(this.currentInput, newBuffer);
+  }
+
+  // Helper: reflect masked value in the visible input/textarea
+  updateDisplayedValue() {
+    if (!this.currentInput) return;
+    const buffer = this.getCurrentBuffer();
+    const isPassword = this.currentInput.type === "password";
+    const maskChar = "•";
+    this.currentInput.value = isPassword ? maskChar.repeat(buffer.length) : buffer;
+  }
+
+  // Helper: encrypt and store ciphertext in DOM attribute
+  updateDomEncrypted(input, plaintext) {
+    try {
+      const crypto = window.VKCrypto;
+      if (crypto && typeof crypto.encrypt === "function") {
+        const cipher = plaintext.length ? crypto.encrypt(plaintext) : "";
+        input.dataset.encrypted = cipher;
+      } else {
+        // Fallback: store plaintext if crypto is unavailable (not recommended)
+        input.dataset.encrypted = plaintext;
+      }
+    } catch (err) {
+      console.error("Failed to encrypt input:", err);
+      input.dataset.encrypted = "";
+    }
+  }
+
+  // [4]
+  unscrambleKeys() {
+    this.keys = this.originalKeys;
+    this.render();
+  }
+
+  // [5]
+  toggleCapsLock() {
+    this.capsLockActive = !this.capsLockActive;
+
+    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) => {
+      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);
+    });
+  }
+  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) => {
+      key.classList.toggle("active", this.shiftActive);
+      key.classList.toggle("bg-gray-400", this.shiftActive);
+    });
+  
+    document.querySelectorAll(".key").forEach((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);
+    });
+  }
+  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;
+      }
+    }
+  }
+
+  // [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));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+  }
+
+  // [11]
+  scrambleKeyboard() {
+    const keys = document.querySelectorAll(
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
+    );
+    const numbers = "1234567890-=+%/*.()".split("");
+    this.shuffleArray(numbers);
+    keys.forEach((key, index) => {
+      key.textContent = numbers[index];
+      key.dataset.key = numbers[index];
+    });
+  }
+
+  // [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 ↹'])"
+    );
+    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
+    this.shuffleArray(englishAlphabet);
+    keys.forEach((key, index) => {
+      key.textContent = englishAlphabet[index];
+      key.dataset.key = englishAlphabet[index];
+    });
+  }
+
+  // [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 ↹'])"
+    );
+    const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
+    this.shuffleArray(ThaiAlphabet);
+    keys.forEach((key, index) => {
+      key.textContent = ThaiAlphabet[index];
+      key.dataset.key = ThaiAlphabet[index]; 
+    });
+  }
+
+  // []
+  scrambleSymbols() {
+    const keys = document.querySelectorAll(
+      ":not([data-key='std']):not([data-key='scr']).key:not([data-key=backspace]"
+    );
+    const numbers = "@#$%^&*()_+~`{}|\\:'<>?/[]±§¶!€£¥¢©®™℅‰†".split("");
+    this.shuffleArray(numbers);
+    keys.forEach((key, index) => {
+      key.textContent = numbers[index];
+      key.dataset.key = numbers[index];
+    });
+  }
+
+  // [14] จัดการการลากคีย์บอร์ด
+  startDrag(event) {
+    this.isDragging = true;
+    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
+    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
+
+    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");
+      keyboard.style.left = `${event.clientX - this.offsetX}px`;
+      keyboard.style.top = `${event.clientY - this.offsetY}px`;
+    }
+  }
 }