js_lis 1.0.4 → 1.0.6

package/VirtualKeyboard.js

@@ -0,0 +1,400 @@
+import { layouts } from './layouts.js';
+
+export class VirtualKeyboard {
+    constructor() {
+        this.currentLayout = 'en';
+        this.isVisible = false;
+        this.container = document.getElementById('keyboard-container');
+        this.currentInput = null; // เปลี่ยนจาก fixed input เป็น dynamic
+        this.layouts = layouts;
+        this.isDragging = false;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.shiftActive = false;
+        this.capsLockActive = false;
+        this.render();
+        this.initializeInputListeners();
+    }
+    
+    initializeInputListeners() {
+        // เพิ่ม event listener สำหรับทุก input และ textarea
+        document.addEventListener('click', (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                this.setCurrentInput(target);
+            }
+        });
+
+        // เพิ่ม event listener สำหรับ focus
+        document.addEventListener('focus', (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                this.setCurrentInput(target);
+            }
+        }, true);
+    }
+
+    setCurrentInput(inputElement) {
+        // ถ้ามี input เก่า ให้ลบ class active
+        if (this.currentInput) {
+            this.currentInput.classList.remove('keyboard-active');
+        }
+        
+        // เซ็ต input ใหม่และเพิ่ม class active
+        this.currentInput = inputElement;
+        this.currentInput.classList.add('keyboard-active');
+    }
+    
+    render() {
+        const keyboard = document.createElement('div');
+        keyboard.className = 'virtual-keyboard';
+        keyboard.style.display = this.isVisible ? 'block' : 'none';
+
+        // Add the ID for easy reference in dragging
+        keyboard.id = 'keyboard';
+
+        const layout = this.layouts[this.currentLayout];
+    
+        layout.forEach(row => {
+            const rowElement = document.createElement('div');
+            rowElement.className = 'keyboard-row';
+    
+            row.forEach(key => {
+                const keyElement = document.createElement('button');
+                keyElement.className = 'keyboard-key key';  // Add key class
+                keyElement.textContent = key;
+                keyElement.type = 'button';
+    
+                // Add data-key to each key for reference
+                keyElement.dataset.key = key;
+    
+                if (key === 'Space') {
+                    keyElement.className += ' space';
+                }
+
+                if (key === 'backspace') {
+                    keyElement.className += ' backspacew';
+                }
+    
+                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);
+    
+        if (this.currentLayout === "scNum") {
+            this.scrambleKeyboard();
+        }
+    
+        if (this.currentLayout === "enSc") {
+            this.scrambleEnglishKeys();
+        }
+    
+        if (this.currentLayout === "thSc") {
+            this.scrambleThaiKeys();
+        }
+
+        // Add drag functionality to the keyboard
+        keyboard.addEventListener('mousedown', (event) => this.startDrag(event));
+    }
+    
+    handleKeyPress(keyPressed) {
+        if (!this.currentInput) return;
+        
+        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();
+        };
+    
+        // ตรวจสอบค่า keyPressed
+        if (!keyPressed) {
+            console.error("Invalid key pressed.");
+            return;
+        }
+    
+        switch(keyPressed) {
+            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 'Space':
+                this.insertText(' ');
+                break;
+    
+            case 'Tab':
+                this.insertText('\t');
+                break;
+    
+            case 'Enter':
+                if (this.currentInput.tagName === 'TEXTAREA') {
+                    this.insertText('\n');
+                }
+                break;
+    
+            case 'Caps':
+                this.toggleCapsLock();
+                break;
+    
+            case 'Shift':
+                this.toggleShift();
+                break;
+    
+            default:
+                this.insertText(convertToCorrectCase(keyPressed));
+                
+        }
+
+        if (isShiftActive && !isCapsActive) {
+            this.toggleShift();
+        }
+
+        this.currentInput.focus();
+        const event = new Event('input', { bubbles: true });
+        this.currentInput.dispatchEvent(event);
+    }
+    
+    toggleCapsLock() {
+        this.capsLockActive = !this.capsLockActive;
+        const capsKey = document.querySelector('.key[data-key="Caps"]');
+        capsKey.classList.toggle("active", this.capsLockActive);
+        capsKey.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)) {
+                key.textContent = this.capsLockActive
+                    ? key.dataset.key.toUpperCase()
+                    : key.dataset.key.toLowerCase();
+            }
+        });
+    
+        const keyboardKeys = document.querySelectorAll(".key:not([data-key='Shift'])");
+        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)
+            ) {
+                const originalKey = Object.keys(this.ThaiAlphabetShift).find(
+                    (key) => this.ThaiAlphabetShift[key] === currentChar
+                );
+                if (originalKey) {
+                    key.textContent = originalKey;
+                    key.dataset.key = originalKey;
+                }
+            }
+        });
+    }
+    
+    toggleShift() {
+        this.shiftActive = !this.shiftActive;
+        const shiftKey = document.querySelector('.key[data-key="Shift"]');
+        shiftKey.classList.toggle("active", this.shiftActive);
+        shiftKey.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)) {
+                // แสดงผลตัวพิมพ์ใหญ่หรือเล็กตามค่า Shift
+                key.textContent = this.shiftActive
+                    ? key.dataset.key.toUpperCase()
+                    : key.dataset.key.toLowerCase();
+            }
+        });
+    
+        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]; // แสดงอักษรจาก shift
+                key.dataset.key = this.ThaiAlphabetShift[currentChar]; // อัปเดต dataset.key
+            } else if (
+                !this.shiftActive &&
+                this.currentLayout === "th" &&
+                Object.values(this.ThaiAlphabetShift).includes(currentChar)
+            ) {
+                const originalKey = Object.keys(this.ThaiAlphabetShift).find(
+                    (key) => this.ThaiAlphabetShift[key] === currentChar
+                );
+                if (originalKey) {
+                    key.textContent = originalKey;
+                    key.dataset.key = originalKey;
+                }
+            }
+        });
+    }
+
+    ThaiAlphabetShift = {
+        _: "%",
+        ๅ: "+",
+        "/": "๑",
+        "-": "๒",
+        ภ: "๓",
+        ถ: "๔",
+        "ุ": "ู",
+        "ึ": "฿",
+        ค: "๕",
+        ต: "๖",
+        จ: "๗",
+        ข: "๘",
+        ช: "๙",
+        ๆ: "๐",
+        ไ: '"',
+        ำ: "ฎ",
+        พ: "ฑ",
+        ะ: "ธ",
+        "ั": "ํ",
+        "ี": "๋",
+        ร: "ณ",
+        น: "ฯ",
+        ย: "ญ",
+        บ: "ฐ",
+        ล: ",",
+        ฃ: "ฅ",
+        ฟ: "ฤ",
+        ห: "ฆ",
+        ก: "ฏ",
+        ด: "โ",
+        เ: "ฌ",
+        "้": "็",
+        "่": "๋",
+        า: "ษ",
+        ส: "ศ",
+        ว: "ซ",
+        ง: ".",
+        ผ: "(",
+        ป: ")",
+        แ: "ฉ",
+        อ: "ฮ",
+        "ิ": "ฺ",
+        "ื": "์",
+        ท: "?",
+        ม: "ฒ",
+        ใ: "ฬ",
+        ฝ: "ฦ",
+    };
+
+    insertText(text) {
+        const start = this.currentInput.selectionStart;
+        const end = this.currentInput.selectionEnd;
+        this.currentInput.value = this.currentInput.value.slice(0, start) + text + this.currentInput.value.slice(end);
+        this.currentInput.selectionStart = this.currentInput.selectionEnd = start + text.length;
+    }
+    
+    toggle() {
+        this.isVisible = !this.isVisible;
+        this.render();
+    }
+
+    changeLayout(layout) {
+        this.currentLayout = layout;
+        this.render();
+    }
+
+    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]];
+        }
+      }
+    
+    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'])"
+        );
+        const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+        this.shuffleArray(numbers);
+        keys.forEach((key, index) => {
+          key.textContent = numbers[index];
+          key.dataset.key = numbers[index];
+        });
+      }
+    
+    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='='])"
+        );
+        const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+        this.shuffleArray(englishAlphabet);
+        keys.forEach((key, index) => {
+          key.textContent = englishAlphabet[index];
+          key.dataset.key = englishAlphabet[index];
+        });
+      }
+    
+      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("");
+        this.shuffleArray(ThaiAlphabet); // สับเปลี่ยนลำดับของตัวอักษร
+    
+        keys.forEach((key, index) => {
+            // อัพเดต textContent และ dataset.key ให้ตรงกับค่าใหม่ที่สับเปลี่ยน
+            key.textContent = ThaiAlphabet[index];
+            key.dataset.key = ThaiAlphabet[index];  // อัพเดต dataset.key ด้วยค่าใหม่
+        });
+    }
+    
+    
+    // จัดการการลากคีย์บอร์ด
+    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)); // Use bind to preserve `this` context
+        document.addEventListener("mouseup", () => {
+          this.isDragging = false;
+          document.removeEventListener("mousemove", this.drag.bind(this));
+        });
+    }
+  
+    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`;
+        }
+    }
+}

package/layouts.js

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

package/main.js

@@ -0,0 +1,4 @@
+import { VirtualKeyboard } from './VirtualKeyboard.js';
+
+// Create global instance
+window.keyboard = new VirtualKeyboard();

package/package.json

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

package/index.js

@@ -1,312 +0,0 @@
-class Layout {
-  constructor() {
-    this.activeInput = null;
-    this.isDragging = false;
-    this.offsetX = 0;
-    this.offsetY = 0;
-    this.isCapsLock = false;
-    this.isShift = false;
-    this.currentLanguage = "english";
-    this.encryptionKey = "1234567890123456";
-
-    this.initEventListeners();
-  }
-
-  initEventListeners() {
-    document.querySelectorAll("input, textarea, form").forEach((element) => {
-      element.addEventListener("focus", (event) => {
-        event.stopImmediatePropagation();
-        this.activeInput = element;
-      });
-    });
-
-    document.addEventListener("DOMContentLoaded", () => {
-      document.querySelectorAll(".key").forEach((key) => {
-        key.addEventListener("click", (event) => {
-          if (key.classList.contains("capslock")) {
-            this.toggleCapsLock();
-          } else if (key.classList.contains("tab")) {
-            this.tab();
-          } else if (key.classList.contains("backspace")) {
-            this.backspace();
-          } else if (key.classList.contains("shift")) {
-            this.toggleShift();
-          } else if (key.classList.contains("enter")) {
-            this.toggleEnter();
-          } else if (key.classList.contains("toggle-lang")) {
-            this.switchLanguage();
-          } else {
-            this.handleKeyPress(key);
-          }
-        });
-      });
-
-      document
-        .getElementById("login-button")
-        .addEventListener("click", this.login.bind(this));
-      document
-        .getElementById("toggleKeyboard")
-        .addEventListener("click", this.toggleKeyboard.bind(this));
-      document
-        .getElementById("switch-toggle")
-        .addEventListener("click", this.switchLanguage.bind(this));
-      document
-        .getElementById("numpad-toggle")
-        .addEventListener("click", this.numpad.bind(this));
-      document
-        .getElementById("scramble-toggle")
-        .addEventListener("click", this.scramble.bind(this));
-      document
-        .getElementById("scramble-toggle-thai")
-        .addEventListener("click", () => this.scrambleLanguage("thai"));
-      document
-        .getElementById("scramble-toggle-eng")
-        .addEventListener("click", () => this.scrambleLanguage("english"));
-    });
-  }
-
-  startDrag(event) {
-    this.isDragging = true;
-    this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
-    this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
-  
-    document.addEventListener("mousemove", drag);
-    document.addEventListener("mouseup", () => {
-      this.isDragging = false;
-      document.removeEventListener("mousemove", drag);
-    });
-  }
-  
-  drag(event) {
-    if (this.isDragging) {
-      const keyboard = document.getElementById("keyboard");
-      keyboard.style.left = `${event.clientX - offsetX}px`;
-      keyboard.style.top = `${event.clientY - offsetY}px`;
-    }
-  }
-
-  toggleCapsLock() {
-    this.isCapsLock = !this.isCapsLock;
-    const capsLockKeys = document.querySelectorAll(".capslock");
-    capsLockKeys.forEach((key) => key.classList.toggle("caps-active"));
-
-    document.querySelectorAll(".key").forEach((key) => {
-      const normalText = key.getAttribute("data-normal");
-      const shiftedText = key.getAttribute("data-shifted");
-
-      if (this.isCapsLock) {
-        key.innerText = shiftedText || normalText.toUpperCase();
-      } else {
-        key.innerText = normalText;
-      }
-    });
-  }
-
-  toggleShift() {
-    this.isShift = !this.isShift;
-    const shiftKeys = document.querySelectorAll(".shift");
-    shiftKeys.forEach((key) => key.classList.toggle("shift-active"));
-
-    document.querySelectorAll(".key").forEach((key) => {
-      const normalText = key.getAttribute("data-normal");
-      const shiftedText = key.getAttribute("data-shifted");
-
-      if (this.isShift) {
-        key.innerText = shiftedText || normalText.toUpperCase();
-      } else {
-        key.innerText = normalText;
-      }
-    });
-  }
-
-  switchLanguage() {
-    this.currentLanguage =
-      this.currentLanguage === "english" ? "thai" : "english";
-
-    document.getElementById("english-keyboard").style.display =
-      this.currentLanguage === "english" ? "block" : "none";
-    document.getElementById("thai-keyboard").style.display =
-      this.currentLanguage === "thai" ? "block" : "none";
-
-    document.getElementById("numpad-keyboard").style.display = "none";
-    document.getElementById("scrambled-keyboard").style.display = "none";
-  }
-
-  async login(event) {
-    event.preventDefault();
-    const username = document.getElementById("u___n___").value;
-    const password = document.getElementById("p___w___").value;
-
-    const encryptedPassword = this.encryptText(password);
-
-    const loginData = {
-      u___n___: username,
-      p___w___: encryptedPassword,
-    };
-
-    const response = await fetch("/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(loginData),
-    });
-
-    const data = await response.json();
-
-    if (data.token) {
-      alert("เข้าสู่ระบบสำเร็จ");
-      localStorage.setItem("token", data.token);
-      location.reload();
-    } else {
-      alert(data.message || "เกิดข้อผิดพลาด");
-      location.reload();
-    }
-  }
-
-  toggletap(event) {
-    const key = event.target;
-    key.style.backgroundColor = "#45a049";
-
-    setTimeout(() => {
-      key.style.backgroundColor = "#d3d3d3";
-    }, 100);
-  }
-
-  numpad() {
-    const englishKeyboard = document.getElementById("english-keyboard");
-    const thaiKeyboard = document.getElementById("thai-keyboard");
-    const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-    const numpadKeyboard = document.getElementById("numpad-keyboard");
-    const engScramble = document.getElementById("english-Scramble");
-    const thaiScramble = document.getElementById("thai-Scramble");
-
-    englishKeyboard.style.display = "none";
-    thaiKeyboard.style.display = "none";
-    scrambledKeyboard.style.display = "none";
-    thaiScramble.style.display = "none";
-    engScramble.style.display = "none";
-
-    if (numpadKeyboard) {
-      numpadKeyboard.style.display = "block";
-    } else {
-      alert("Numpad layout is not available");
-    }
-  }
-
-  scramble() {
-    const englishKeyboard = document.getElementById("english-keyboard");
-    const thaiKeyboard = document.getElementById("thai-keyboard");
-    const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-    const numpadKeyboard = document.getElementById("numpad-keyboard");
-    const engScramble = document.getElementById("english-Scramble");
-    const thaiScramble = document.getElementById("thai-Scramble");
-
-    // ซ่อนคีย์บอร์ดทุกตัวที่ไม่ใช่ Scrambled
-    englishKeyboard.style.display = "none";
-    thaiKeyboard.style.display = "none";
-    numpadKeyboard.style.display = "none";
-    thaiScramble.style.display = "none";
-    engScramble.style.display = "none";
-
-    if (scrambledKeyboard) {
-      scrambledKeyboard.style.display = "block";
-      scrambleKeys(); // เรียกฟังก์ชันเพื่อสุ่มตัวเลขบนคีย์บอร์ด
-    } else {
-      alert("Scramble layout is not available");
-    }
-  }
-
-  scrambleKeys() {
-    // เลือกปุ่มทั้งหมดในคีย์บอร์ด "Scrambled" ยกเว้นปุ่ม backspace
-    const keys = document.querySelectorAll(
-      "#scrambled-keyboard .key:not(.backspace):not(.plus):not(.minus):not(.multiply):not(.divide):not(.modulo):not(.double-zero):not(.decimal):not(.equals)"
-    );
-    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
-    shuffleArray(numbers); // เรียงลำดับตัวเลขแบบสุ่ม
-
-    keys.forEach((key, index) => {
-      key.textContent = numbers[index];
-    });
-  }
-
-  scrambleLanguage(language) {
-    const englishKeyboard = document.getElementById("english-keyboard");
-    const thaiKeyboard = document.getElementById("thai-keyboard");
-    const scrambledKeyboard = document.getElementById("scrambled-keyboard");
-    const numpadKeyboard = document.getElementById("numpad-keyboard");
-    const engScramble = document.getElementById("english-Scramble");
-    const thaiScramble = document.getElementById("thai-Scramble");
-
-    if (language === "thai") {
-      englishKeyboard.style.display = "none";
-      thaiKeyboard.style.display = "none";
-      engScramble.style.display = "none";
-      numpadKeyboard.style.display = "none";
-      scrambledKeyboard.style.display = "none";
-      thaiScramble.style.display = "block";
-      scrambleThaiKeys(); // ฟังก์ชันสำหรับภาษาไทย
-    } else if (language === "english") {
-      englishKeyboard.style.display = "none";
-      thaiKeyboard.style.display = "none";
-      engScramble.style.display = "block";
-      numpadKeyboard.style.display = "none";
-      scrambledKeyboard.style.display = "none";
-      thaiScramble.style.display = "none";
-      scrambleEnglishKeys(); // ฟังก์ชันสำหรับภาษาอังกฤษ
-    }
-  }
-
-  scrambleEnglishKeys() {
-    const keys = document.querySelectorAll(
-      "#english-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
-    );
-
-    const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
-    shuffleArray(englishAlphabet);
-
-    keys.forEach((key, index) => {
-      if (index < englishAlphabet.length) {
-        key.textContent = englishAlphabet[index];
-        key.setAttribute("data-normal", englishAlphabet[index]);
-        key.setAttribute("data-shifted", englishAlphabet[index].toUpperCase());
-      } else {
-        key.textContent = "";
-      }
-    });
-  }
-
-  scrambleThaiKeys() {
-    const keys = document.querySelectorAll(
-      "#thai-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
-    );
-    const thaiAlphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ".split(
-      ""
-    );
-    shuffleArray(thaiAlphabet);
-
-    keys.forEach((key, index) => {
-      if (index < thaiAlphabet.length) {
-        key.textContent = thaiAlphabet[index];
-        key.setAttribute("data-normal", thaiAlphabet[index]);
-        key.setAttribute("data-shifted", thaiAlphabet[index]);
-      } else {
-        key.textContent = "";
-      }
-    });
-  }
-
-  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]];
-    }
-  }
-
-  changeDropdownName(name) {
-    const dropdownButton = document.getElementById("dropdownButton");
-    dropdownButton.textContent = name;
-  }
-}
-
-export default Layout;

package/layout.js

@@ -1,398 +0,0 @@
-class keyboard {
-    constructor() {
-        document.addEventListener("DOMContentLoaded", () => {
-            this.createKeyboardContainer();
-        });
-    }
-
-    createKeyboardContainer() {
-        const keyboardContainer = document.createElement("div");
-        keyboardContainer.className = "keyboard";
-        keyboardContainer.id = "keyboard";
-        keyboardContainer.onmousedown = this.startDrag;
-
-        keyboardContainer.innerHTML = this.generateKeyboardHTML();
-        document.body.appendChild(keyboardContainer);
-    }
-
-    generateKeyboardHTML() {
-        return `
-            <div class="keyboard-container">
-                ${this.generateDropdown()}
-                ${this.generateEnglishKeyboard()}
-                ${this.generateThaiKeyboard()}
-                ${this.generateNumpadKeyboard()}
-                ${this.generateScrambledKeyboard()}
-                ${this.generateEnglishScramble()}
-                ${this.generateThaiScramble()}
-            </div>
-        `;
-    }
-
-    generateDropdown() {
-        return `
-            <div class="dropdown">
-                <button class="dropdown-button but" id="dropdownButton" style="color: black;">เลือกแป้นพิมพ์</button>
-                <div class="dropdown-content">
-                    <button id="switch-toggle" onclick="changeDropdownName('Switch Language')">Switch Language</button>
-                    <button id="numpad-toggle" onclick="changeDropdownName('Numpad Keyboard')">Numpad Keyboard</button>
-                    <button id="scramble-toggle" onclick="changeDropdownName('Scramble Numpad')">Scramble Numpad</button>
-                    <button id="scramble-toggle-thai" onclick="changeDropdownName('Thai Scramble')">Thai Scramble</button>
-                    <button id="scramble-toggle-eng" onclick="changeDropdownName('English Scramble')">English Scramble</button>
-                </div>
-            </div>
-        `;
-    }
-
-    generateEnglishKeyboard() {
-        return `
-            <div id="english-keyboard" class="keyboard-layout">
-                  <!-- English Keyboard Rows -->
-                  <div class="keyboard-row">
-                      <button class="key" data-normal="\`" data-shifted="%">\`</button>
-                      <button class="key" data-normal="1" data-shifted="!">1</button>
-                      <button class="key" data-normal="2" data-shifted="@">2</button>
-                      <button class="key" data-normal="3" data-shifted="#">3</button>
-                      <button class="key" data-normal="4" data-shifted="$">4</button>
-                      <button class="key" data-normal="5" data-shifted="%">5</button>
-                      <button class="key" data-normal="6" data-shifted="^">6</button>
-                      <button class="key" data-normal="7" data-shifted="&">7</button>
-                      <button class="key" data-normal="8" data-shifted="*">8</button>
-                      <button class="key" data-normal="9" data-shifted="(">9</button>
-                      <button class="key" data-normal="0" data-shifted=")">0</button>
-                      <button class="key" data-normal="-" data-shifted="_">-</button>
-                      <button class="key" data-normal="=" data-shifted="+">=</button>
-                      <button class="key backspace">Backspace</button>  
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key tab">Tab</button>
-                      <button class="key" data-normal="q" data-shifted="Q">q</button>
-                      <button class="key" data-normal="w" data-shifted="W">w</button>
-                      <button class="key" data-normal="e" data-shifted="E">e</button>
-                      <button class="key" data-normal="r" data-shifted="R">r</button>
-                      <button class="key" data-normal="t" data-shifted="T">t</button>
-                      <button class="key" data-normal="y" data-shifted="Y">y</button>
-                      <button class="key" data-normal="u" data-shifted="U">u</button>
-                      <button class="key" data-normal="i" data-shifted="I">i</button>
-                      <button class="key" data-normal="o" data-shifted="O">o</button>
-                      <button class="key" data-normal="p" data-shifted="P">p</button>
-                      <button class="key" data-normal="[" data-shifted="{">[</button>
-                      <button class="key" data-normal="]" data-shifted="}">]</button>
-                      <button class="key" data-normal="\\" data-shifted="|">\\</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key capslock">CapsLk</button>
-                      <button class="key" data-normal="a" data-shifted="A">a</button>
-                      <button class="key" data-normal="s" data-shifted="S">s</button>
-                      <button class="key" data-normal="d" data-shifted="D">d</button>
-                      <button class="key" data-normal="f" data-shifted="F">f</button>
-                      <button class="key" data-normal="g" data-shifted="G">g</button>
-                      <button class="key" data-normal="h" data-shifted="H">h</button>
-                      <button class="key" data-normal="j" data-shifted="J">j</button>
-                      <button class="key" data-normal="k" data-shifted="K">k</button>
-                      <button class="key" data-normal="l" data-shifted="L">l</button>
-                      <button class="key" data-normal=";" data-shifted=":">;</button>
-                      <button class="key" data-normal="'" data-shifted="&quot;">'</button>
-                      <button class="key enter" style="width: 90px; top:20%">Enter</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key shift" style="width: 120px;">Shift</button>
-                      <button class="key" data-normal="z" data-shifted="Z">z</button>
-                      <button class="key" data-normal="x" data-shifted="X">x</button>
-                      <button class="key" data-normal="c" data-shifted="C">c</button>
-                      <button class="key" data-normal="v" data-shifted="V">v</button>
-                      <button class="key" data-normal="b" data-shifted="B">b</button>
-                      <button class="key" data-normal="n" data-shifted="N">n</button>
-                      <button class="key" data-normal="m" data-shifted="M">m</button>
-                      <button class="key" data-normal="," data-shifted="&lt;">,</button>
-                      <button class="key" data-normal="." data-shifted="&gt;">.</button>
-                      <button class="key" data-normal="/" data-shifted="?">/</button>
-                      <button class="key shift" style="width: 115px;">Shift</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                     <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                  </div>
-              </div>
-        `;
-    }
-
-    generateThaiKeyboard() {
-        return `
-            <div id="thai-keyboard" class="keyboard-layout" style="display: none;">
-                  <!-- Thai Keyboard Rows -->
-                  <div class="keyboard-row">
-                      <button class="key" data-normal="_" data-shifted="%">_</button>
-                      <button class="key" data-normal="ๅ" data-shifted="+">ๅ</button>
-                      <button class="key" data-normal="/" data-shifted="๑">/</button>
-                      <button class="key" data-normal="-" data-shifted="๒">-</button>
-                      <button class="key" data-normal="ภ" data-shifted="๓">ภ</button>
-                      <button class="key" data-normal="ถ" data-shifted="๔">ถ</button>
-                      <button class="key" data-normal="ุ" data-shifted="ู">ู</button>
-                      <button class="key" data-normal="ึ" data-shifted="ฺ">฿</button>
-                      <button class="key" data-normal="ค" data-shifted="๕">ค</button>
-                      <button class="key" data-normal="ต" data-shifted="๖">ต</button>
-                      <button class="key" data-normal="จ" data-shifted="๗">จ</button>
-                      <button class="key" data-normal="ข" data-shifted="๘">ข</button>
-                      <button class="key" data-normal="ช" data-shifted="๙">ช</button>
-                      <button class="key backspace">Backspace</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key tab">Tab</button>
-                      <button class="key" data-normal="ๆ" data-shifted="๐">ๆ</button>
-                      <button class="key" data-normal="ไ" data-shifted=""">ไ</button>
-                      <button class="key" data-normal="ำ" data-shifted="ฎ">ำ</button>
-                      <button class="key" data-normal="พ" data-shifted="ฑ">พ</button>
-                      <button class="key" data-normal="ะ" data-shifted="ธ">ะ</button>
-                      <button class="key" data-normal="ั" data-shifted="ํ">ั</button>
-                      <button class="key" data-normal="ี" data-shifted="๋">ี</button>
-                      <button class="key" data-normal="ร" data-shifted="ณ">ร</button>
-                      <button class="key" data-normal="น" data-shifted="ฯ">น</button>
-                      <button class="key" data-normal="ย" data-shifted="ญ">ย</button>
-                      <button class="key" data-normal="บ" data-shifted="ฐ">บ</button>
-                      <button class="key" data-normal="ล" data-shifted=",">ล</button>
-                      <button class="key" data-normal="ฃ" data-shifted="ฅ">ฃ</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key capslock">CapsLock</button>
-                      <button class="key" data-normal="ฟ" data-shifted="ฤ">ฟ</button>
-                      <button class="key" data-normal="ห" data-shifted="ฆ">ห</button>
-                      <button class="key" data-normal="ก" data-shifted="ฏ">ก</button>
-                      <button class="key" data-normal="ด" data-shifted="โ">ด</button>
-                      <button class="key" data-normal="เ" data-shifted="ฌ">เ</button>
-                      <button class="key" data-normal="้" data-shifted="็">้</button>
-                      <button class="key" data-normal="่" data-shifted="๋">่</button>
-                      <button class="key" data-normal="า" data-shifted="ษ">า</button>
-                      <button class="key" data-normal="ส" data-shifted="ศ">ส</button>
-                      <button class="key" data-normal="ว" data-shifted="ซ">ว</button>
-                      <button class="key" data-normal="ง" data-shifted=".">ง</button>
-                      <button class="key enter" style="width: 90px; top:20%">Enter</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key shift" style="width: 120px;">Shift</button>
-                      <button class="key" data-normal="ผ" data-shifted="(">ผ</button>
-                      <button class="key" data-normal="ป" data-shifted=")">ป</button>
-                      <button class="key" data-normal="แ" data-shifted="ฉ">แ</button>
-                      <button class="key" data-normal="อ" data-shifted="ฮ">อ</button>
-                      <button class="key" data-normal="ิ" data-shifted="ฺ">ิ</button>
-                      <button class="key" data-normal="ื" data-shifted="์">ื</button>
-                      <button class="key" data-normal="ท" data-shifted="?">ท</button>
-                      <button class="key" data-normal="ม" data-shifted="ฒ">ม</button>
-                      <button class="key" data-normal="ใ" data-shifted="ฬ">ใ</button>
-                      <button class="key" data-normal="ฝ" data-shifted="ฦ">ฝ</button>
-                      <button class="key shift" style="width: 115px;">Shift</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                     <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                  </div>
-              </div>
-        `;
-    }
-
-    generateNumpadKeyboard() {
-        return `
-            <div id="numpad-keyboard" class="keyboard-layout" style="display: none;">
-                  <div class="keyboard-row">
-                      <button class="key">+</button>
-                      <button class="key">-</button>
-                      <button class="key">*</button>
-                      <button class="key">/</button>
-                  </div>
-                  <div class="keyboard-row">
-                      <button class="key">1</button>
-                      <button class="key">2</button>
-                      <button class="key">3</button>
-                      <button class="key">%</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key">4</button>
-                      <button class="key">5</button>
-                      <button class="key">6</button>
-                      <button class="key">.</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key">7</button>
-                      <button class="key">8</button>
-                      <button class="key">9</button>
-                      <button class="key">=</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key">00</button>
-                      <button class="key">0</button>
-                      <button class="key backspace" style="width: 90px;">Backspace</button>
-                  </div>
-              </div>
-        `;
-    }
-
-    generateScrambledKeyboard() {
-        return `
-            <div id="scrambled-keyboard" class="keyboard-layout" style="display: none;">
-                  <!-- เพิ่มปุ่มสำหรับคีย์บอร์ด Scramble -->
-                  <div class="keyboard-row">
-                      <button class="key plus">+</button>
-                      <button class="key minus">-</button>
-                      <button class="key multiply">*</button>
-                      <button class="key divide">/</button>
-                  </div>
-                  <div class="keyboard-row">
-                      <button class="key">1</button>
-                      <button class="key">2</button>
-                      <button class="key">3</button>
-                      <button class="key modulo">%</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key">4</button>
-                      <button class="key">5</button>
-                      <button class="key">6</button>
-                      <button class="key decimal">.</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key">7</button>
-                      <button class="key">8</button>
-                      <button class="key">9</button>
-                      <button class="key equals">=</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key double-zero">00</button>
-                      <button class="key">0</button>
-                      <button class="key backspace" style="width: 90px;">Backspace</button>
-                  </div>
-              </div>
-        `;
-    }
-
-    generateEnglishScramble() {
-        return `
-            <div id="english-Scramble" class="keyboard-layout" style="display: none;">
-                  <!-- English Keyboard Rows -->
-                  <div class="keyboard-row">
-                      <button class="key" data-normal="q" data-shifted="Q">q</button>
-                      <button class="key" data-normal="w" data-shifted="W">w</button>
-                      <button class="key" data-normal="e" data-shifted="E">e</button>
-                      <button class="key" data-normal="r" data-shifted="R">r</button>
-                      <button class="key" data-normal="t" data-shifted="T">t</button>
-                      <button class="key" data-normal="y" data-shifted="Y">y</button>
-                      <button class="key" data-normal="u" data-shifted="U">u</button>
-                      <button class="key" data-normal="i" data-shifted="I">i</button>
-                      <button class="key" data-normal="o" data-shifted="O">o</button>
-                      <button class="key" data-normal="p" data-shifted="P">p</button>
-                      <button class="key backspace">Backspace</button>  
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key capslock">CapsLk</button>
-                      <button class="key" data-normal="s" data-shifted="S">s</button>
-                      <button class="key" data-normal="d" data-shifted="D">d</button>
-                      <button class="key" data-normal="f" data-shifted="F">f</button>
-                      <button class="key" data-normal="g" data-shifted="G">g</button>
-                      <button class="key" data-normal="h" data-shifted="H">h</button>
-                      <button class="key" data-normal="j" data-shifted="J">j</button>
-                      <button class="key" data-normal="k" data-shifted="K">k</button>
-                      <button class="key" data-normal="l" data-shifted="L">l</button>
-                      <button class="key enter" style="width: 90px; top:20%">Enter</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                      <button class="key shift" style="width: 90px;">Shift</button>
-                      <button class="key" data-normal="z" data-shifted="Z">z</button>
-                      <button class="key" data-normal="x" data-shifted="X">x</button>
-                      <button class="key" data-normal="c" data-shifted="C">c</button>
-                      <button class="key" data-normal="v" data-shifted="V">v</button>
-                      <button class="key" data-normal="b" data-shifted="B">b</button>
-                      <button class="key" data-normal="n" data-shifted="N">n</button>
-                      <button class="key" data-normal="m" data-shifted="M">m</button>
-                      <button class="key" data-normal="a" data-shifted="A">m</button>
-                      <button class="key shift" style="width: 100px;">Shift</button>
-                  </div>
-  
-                  <div class="keyboard-row">
-                     <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                  </div>
-              </div>
-        `;
-    }
-
-    generateThaiScramble() {
-        return `
-            <div id="thai-Scramble" class="keyboard-layout" style="display: none;">
-                  <!-- Thai Keyboard Rows -->
-                  <div class="keyboard-row">
-                      <button class="key" data-normal="ก" data-shifted="ก">ก</button>
-                      <button class="key" data-normal="ข" data-shifted="ข">ข</button>
-                      <button class="key" data-normal="ฃ" data-shifted="ฃ">ฃ</button>
-                      <button class="key" data-normal="ค" data-shifted="ค">ค</button>
-                      <button class="key" data-normal="ฅ" data-shifted="ฅ">ฅ</button>
-                      <button class="key" data-normal="ฆ" data-shifted="ฆ">ฆ</button>
-                      <button class="key" data-normal="ง" data-shifted="ง">ง</button>
-                      <button class="key" data-normal="จ" data-shifted="จ">จ</button>
-                      <button class="key" data-normal="ฉ" data-shifted="ฉ">ฉ</button>
-                      <button class="key" data-normal="ช" data-shifted="ช">ช</button>
-                      <button class="key" data-normal="ซ" data-shifted="ซ">ซ</button>
-                      <button class="key" data-normal="ฌ" data-shifted="ฌ">ฌ</button>
-                      <button class="key" data-normal="ญ" data-shifted="ญ">ญ</button>
-                      <button class="key" data-normal="ฎ" data-shifted="ฎ">ฎ</button>
-                      <button class="key backspace" style="width: 86px;">Backspace</button>
-                  </div>
-                  
-                  <div class="keyboard-row">
-                      <button class="key" data-normal="ฏ" data-shifted="ฏ">ฏ</button>
-                      <button class="key" data-normal="ฐ" data-shifted="ฐ">ฐ</button>
-                      <button class="key" data-normal="ฑ" data-shifted="ฑ">ฑ</button>
-                      <button class="key" data-normal="ฒ" data-shifted="ฒ">ฒ</button>
-                      <button class="key" data-normal="ณ" data-shifted="ณ">ณ</button>
-                      <button class="key" data-normal="ด" data-shifted="ด">ด</button>
-                      <button class="key" data-normal="ต" data-shifted="ต">ต</button>
-                      <button class="key" data-normal="ถ" data-shifted="ถ">ถ</button>
-                      <button class="key" data-normal="ท" data-shifted="ท">ท</button>
-                      <button class="key" data-normal="ธ" data-shifted="ธ">ธ</button>
-                      <button class="key" data-normal="น" data-shifted="น">น</button>
-                      <button class="key" data-normal="บ" data-shifted="บ">บ</button>
-                      <button class="key" data-normal="ป" data-shifted="ป">ป</button>
-                      <button class="key" data-normal="ผ" data-shifted="ผ">ผ</button>
-                      <button class="key" data-normal="ฝ" data-shifted="ฝ">ฝ</button>
-                      <button class="key" data-normal="พ" data-shifted="พ">พ</button>
-                  </div>
-                  
-                  <div class="keyboard-row">
-                      <button class="key" data-normal="ฟ" data-shifted="ฟ">ฟ</button>
-                      <button class="key" data-normal="ภ" data-shifted="ภ">ภ</button>
-                      <button class="key" data-normal="ม" data-shifted="ม">ม</button>
-                      <button class="key" data-normal="ย" data-shifted="ย">ย</button>
-                      <button class="key" data-normal="ร" data-shifted="ร">ร</button>
-                      <button class="key" data-normal="ฤ" data-shifted="ฤ">ฤ</button>
-                      <button class="key" data-normal="ล" data-shifted="ล">ล</button>
-                      <button class="key" data-normal="ฦ" data-shifted="ฦ">ฦ</button>
-                      <button class="key" data-normal="ว" data-shifted="ว">ว</button>
-                      <button class="key" data-normal="ศ" data-shifted="ศ">ศ</button>
-                      <button class="key" data-normal="ษ" data-shifted="ษ">ษ</button>
-                      <button class="key" data-normal="ส" data-shifted="ส">ส</button>
-                      <button class="key" data-normal="ห" data-shifted="ห">ห</button>
-                      <button class="key" data-normal="ฬ" data-shifted="ฬ">ฬ</button>
-                      <button class="key" data-normal="อ" data-shifted="อ">อ</button>
-                      <button class="key" data-normal="ฮ" data-shifted="ฮ">ฮ</button>
-                  </div>
-                  
-                  <div class="keyboard-row">
-                     <button class="key space-bar" data-normal=" " data-shifted=" "> </button> 
-                  </div>
-            </div>
-            <script src="index.js"></script>
-        `;
-    }
-}
-
-export default keyboard;