js_lis 1.0.8 → 1.0.10

package/VirtualKeyboard.js

@@ -5,16 +5,75 @@ export class VirtualKeyboard {
         this.currentLayout = 'en';
         this.isVisible = false;
         this.container = document.getElementById('keyboard-container');
-        this.currentInput = null; 
+        this.currentInput = null;
         this.layouts = layouts;
         this.isDragging = false;
         this.offsetX = 0;
         this.offsetY = 0;
         this.shiftActive = false;
         this.capsLockActive = false;
-        
+        this.secretKey = '1234567890abcdef'; // คีย์ที่ใช้ในการเข้ารหัส
+        // ใช้ Web Crypto API สำหรับการจัดการคีย์
+        this.cryptoKey = null;
+        this.iv = window.crypto.getRandomValues(new Uint8Array(12)); // สร้าง IV สำหรับการเข้ารหัส/ถอดรหัส
+        this.generateKey();
+
         this.render();
-        this.initializeInputListeners();
+        this.initialize();
+    }
+
+    async initialize() { 
+        await this.generateKey(); 
+        this.render(); 
+        this.initializeInputListeners(); 
+    }
+
+    async generateKey() {
+        this.cryptoKey = await window.crypto.subtle.generateKey(
+            { name: "AES-GCM", length: 256 },
+            true,
+            ["encrypt", "decrypt"]
+        );
+    }
+
+    async encodeText(text) {
+        const encodedData = new TextEncoder().encode(text);
+        const encryptedData = await window.crypto.subtle.encrypt(
+            { name: "AES-GCM", iv: this.iv },
+            this.cryptoKey,
+            encodedData
+        );
+        return this.arrayBufferToBase64(encryptedData); // แปลงเป็น Base64
+    }
+
+    async decodeText(base64Text) {
+        const encryptedData = this.base64ToArrayBuffer(base64Text);
+        const decryptedData = await window.crypto.subtle.decrypt(
+            { name: "AES-GCM", iv: this.iv },
+            this.cryptoKey,
+            encryptedData
+        );
+        return new TextDecoder().decode(decryptedData);
+    }
+
+    arrayBufferToBase64(buffer) {
+        let binary = '';
+        const bytes = new Uint8Array(buffer);
+        const len = bytes.byteLength;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa(binary);
+    }
+
+    base64ToArrayBuffer(base64) {
+        const binaryString = window.atob(base64);
+        const len = binaryString.length;
+        const bytes = new Uint8Array(len);
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        return bytes.buffer;
     }
 
     getLayoutName(layout) {
@@ -29,7 +88,6 @@ export class VirtualKeyboard {
     }
 
     initializeInputListeners() {
-        // เพิ่ม event listener สำหรับทุก input และ textarea
         document.addEventListener('click', (e) => {
             const target = e.target;
             if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
@@ -37,7 +95,6 @@ export class VirtualKeyboard {
             }
         });
 
-        // เพิ่ม event listener สำหรับ focus
         document.addEventListener('focus', (e) => {
             const target = e.target;
             if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
@@ -48,40 +105,35 @@ export class VirtualKeyboard {
         document.addEventListener('click', (e) => {
             const target = document.getElementById("toggle");
             target.addEventListener('click', this.toggle.bind(this), { once: 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';
-    
-        // New: Add Layout selector at the top inside the keyboard div
+
         const controlsContainer = document.createElement('div');
         controlsContainer.className = 'controls';
         controlsContainer.style.display = 'flex';
         controlsContainer.style.justifyContent = 'center';
         controlsContainer.style.alignItems = 'center';
-        controlsContainer.style.marginBottom = '10px'; // Optional: Add some space below the selector
-    
+        controlsContainer.style.marginBottom = '10px'; 
+
         const layoutSelector = document.createElement('select');
         layoutSelector.id = 'layout-selector';
         layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
-    
+
         const layouts = ['en', 'enSc', 'th', 'thSc', 'numpad', 'scNum'];
         layouts.forEach(layout => {
             const option = document.createElement('option');
@@ -91,32 +143,31 @@ export class VirtualKeyboard {
         });
         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 => {
                 const keyElement = document.createElement('button');
-                keyElement.className = 'keyboard-key key';  // Add key class
+                keyElement.className = 'keyboard-key key';
                 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;
@@ -126,57 +177,53 @@ export class VirtualKeyboard {
                         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) {
+
+    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();
         };
-    
-        // ตรวจสอบค่า keyPressed
+
         if (!keyPressed) {
             console.error("Invalid key pressed.");
             return;
         }
-    
+
         switch(keyPressed) {
             case 'Backspace':
             case 'backspace':
@@ -188,32 +235,32 @@ export class VirtualKeyboard {
                     this.currentInput.selectionStart = this.currentInput.selectionEnd = start;
                 }
                 break;
-    
+
             case 'Space':
-                this.insertText(' ');
+                await this.insertText(' ');
                 break;
-    
+
             case 'Tab':
-                this.insertText('\t');
+                await this.insertText('\t');
                 break;
-    
+
             case 'Enter':
                 if (this.currentInput.tagName === 'TEXTAREA') {
-                    this.insertText('\n');
+                    await this.insertText('\n');
                 }
                 break;
-    
+
             case 'Caps':
                 this.toggleCapsLock();
                 break;
-    
+
             case 'Shift':
                 this.toggleShift();
                 break;
-    
+
             default:
-                this.insertText(convertToCorrectCase(keyPressed));
-                
+                const encryptedText = await this.encodeText(convertToCorrectCase(keyPressed));
+                await this.insertText(encryptedText);
         }
 
         if (isShiftActive && !isCapsActive) {
@@ -223,6 +270,17 @@ export class VirtualKeyboard {
         this.currentInput.focus();
         const event = new Event('input', { bubbles: true });
         this.currentInput.dispatchEvent(event);
+        // console.log(this.encodeText(convertToCorrectCase(keyPressed)));
+        // console.log(keyPressed);
+    }
+
+    async insertText(text) {
+        const start = this.currentInput.selectionStart;
+        const end = this.currentInput.selectionEnd;
+        const decodedText = await this.decodeText(text);  // ใช้ถอดรหัสก่อนแทรก
+
+        this.currentInput.value = this.currentInput.value.slice(0, start) + decodedText + this.currentInput.value.slice(end);
+        this.currentInput.selectionStart = this.currentInput.selectionEnd = start + decodedText.length;
     }
     
     toggleCapsLock() {
@@ -356,13 +414,6 @@ export class VirtualKeyboard {
         ฝ: "ฦ",
     };
 
-    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();

package/main.js

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

package/package.json

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