js_lis 1.0.18 → 1.0.21

package/VirtualKeyboard.js

@@ -144,9 +144,11 @@ export class VirtualKeyboard {
                     keyElement.className += ' space';
                 }
 
-                if (key === 'backspace') {
-                    keyElement.className += ' backspacew';
-                }
+                if (key === 'backspace' || key === 'Backspace') {
+                  keyElement.className += ' backspacew';
+                  keyElement.innerHTML = '<i class="fa fa-backspace"></i>'; 
+              }
+              
 
                 keyElement.onclick = (e) => {
                     e.preventDefault();
@@ -264,15 +266,81 @@ export class VirtualKeyboard {
     }
 
     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);
+      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) => {
+        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='Caps'])"
+      );
+      keyboardKeys.forEach((key) => {
+        const currentChar = key.textContent.trim();
+        if (
+          this.capsLockActive &&
+          this.currentLayout === "th" &&
+          this.ThaiAlphabetShift[currentChar]
+        ) {
+          key.textContent = this.ThaiAlphabetShift[currentChar];
+          key.dataset.key = this.ThaiAlphabetShift[currentChar];
+        } else if (
+          !this.capsLockActive &&
+          this.currentLayout === "th" &&
+          Object.values(this.ThaiAlphabetShift).includes(currentChar)
+        ) {
+          // เปลี่ยนกลับเมื่อปิด Shift
+          const originalKey = Object.keys(this.ThaiAlphabetShift).find(
+            (key) => this.ThaiAlphabetShift[key] === currentChar
+          );
+          if (originalKey) {
+            key.textContent = originalKey;
+            key.dataset.key = originalKey;
+          }
+        }
+
+        if (
+          this.capsLockActive &&
+          this.currentLayout === "en" &&
+          this.EngAlphabetShift[currentChar]
+        ) {
+          key.textContent = this.EngAlphabetShift[currentChar];
+          key.dataset.key = this.EngAlphabetShift[currentChar];
+        } else if (
+          !this.capsLockActive &&
+          this.currentLayout === "en" &&
+          Object.values(this.EngAlphabetShift).includes(currentChar)
+        ) {
+          // เปลี่ยนกลับเมื่อปิด Shift
+          const originalKey = Object.keys(this.EngAlphabetShift).find(
+            (key) => this.EngAlphabetShift[key] === currentChar
+          );
+          if (originalKey) {
+            key.textContent = originalKey;
+            key.dataset.key = originalKey;
+          }
+        }
+      });
+  }
+
+    toggleShift() {
+        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) => {
           if (key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key)) {
-            key.textContent = this.capsLockActive
+            key.textContent = this.shiftActive
               ? key.dataset.key.toUpperCase()
               : key.dataset.key.toLowerCase();
           }
@@ -284,19 +352,19 @@ export class VirtualKeyboard {
         keyboardKeys.forEach((key) => {
           const currentChar = key.textContent.trim();
           if (
-            this.capsLockActive &&
+            this.shiftActive &&
             this.currentLayout === "th" &&
             this.ThaiAlphabetShift[currentChar]
           ) {
             key.textContent = this.ThaiAlphabetShift[currentChar];
             key.dataset.key = this.ThaiAlphabetShift[currentChar];
           } else if (
-            !this.capsLockActive &&
+            !this.shiftActive &&
             this.currentLayout === "th" &&
             Object.values(this.ThaiAlphabetShift).includes(currentChar)
           ) {
             // เปลี่ยนกลับเมื่อปิด Shift
-            const originalKey = Object.keys(ThaiAlphabetShift).find(
+            const originalKey = Object.keys(this.ThaiAlphabetShift).find(
               (key) => this.ThaiAlphabetShift[key] === currentChar
             );
             if (originalKey) {
@@ -304,88 +372,28 @@ export class VirtualKeyboard {
               key.dataset.key = originalKey;
             }
           }
-    
-          // Shift state for English layout
-          if (this.capsLockActive && this.currentLayout === "en") {
-            if (EngAlphabetShift[key.dataset.key]) {
-              key.textContent = this.EngAlphabetShift[key.dataset.key];
-              key.dataset.key = this.EngAlphabetShift[key.dataset.key];
-            }
-          } else if (!this.capsLockActive && this.currentLayout === "en") {
-            // Revert when shift is off
-            if (Object.values(EngAlphabetShift).includes(currentChar)) {
-              const originalKey = Object.keys(EngAlphabetShift).find(
-                (key) => EngAlphabetShift[key] === currentChar
-              );
-              if (originalKey) {
-                key.textContent = originalKey;
-                key.dataset.key = originalKey;
-              }
-            }
-          }
-        });
-    }
 
-    toggleShift() {
-        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) => {
-          if (key.dataset.key.length === 1 && /[a-zA-Zก-๙]/.test(key.dataset.key)) {
-            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]
+            this.currentLayout === "en" &&
+            this.EngAlphabetShift[currentChar]
           ) {
-            key.textContent = this.ThaiAlphabetShift[currentChar];
-            key.dataset.key = this.ThaiAlphabetShift[currentChar];
+            key.textContent = this.EngAlphabetShift[currentChar];
+            key.dataset.key = this.EngAlphabetShift[currentChar];
           } else if (
             !this.shiftActive &&
-            this.currentLayout === "th" &&
-            Object.values(this.ThaiAlphabetShift).includes(currentChar)
+            this.currentLayout === "en" &&
+            Object.values(this.EngAlphabetShift).includes(currentChar)
           ) {
             // เปลี่ยนกลับเมื่อปิด Shift
-            const originalKey = Object.keys(ThaiAlphabetShift).find(
-              (key) => this.ThaiAlphabetShift[key] === currentChar
+            const originalKey = Object.keys(this.EngAlphabetShift).find(
+              (key) => this.EngAlphabetShift[key] === currentChar
             );
             if (originalKey) {
               key.textContent = originalKey;
               key.dataset.key = originalKey;
             }
           }
-    
-          // Shift state for English layout
-          if (this.shiftActive && this.currentLayout === "en") {
-            if (EngAlphabetShift[key.dataset.key]) {
-              key.textContent = this.EngAlphabetShift[key.dataset.key];
-              key.dataset.key = this.EngAlphabetShift[key.dataset.key];
-            }
-          } else if (!this.shiftActive && this.currentLayout === "en") {
-            // Revert when shift is off
-            if (Object.values(EngAlphabetShift).includes(currentChar)) {
-              const originalKey = Object.keys(EngAlphabetShift).find(
-                (key) => EngAlphabetShift[key] === currentChar
-              );
-              if (originalKey) {
-                key.textContent = originalKey;
-                key.dataset.key = originalKey;
-              }
-            }
-          }
         });
     }
 

package/package.json

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