js_lis 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/keyboard.js +514 -0
- package/layouts.js +352 -0
- package/package.json +1 -1
- package/index.js +0 -312
- package/layout.js +0 -398
package/index.js
DELETED
|
@@ -1,312 +0,0 @@
|
|
|
1
|
-
class Layout {
|
|
2
|
-
constructor() {
|
|
3
|
-
this.activeInput = null;
|
|
4
|
-
this.isDragging = false;
|
|
5
|
-
this.offsetX = 0;
|
|
6
|
-
this.offsetY = 0;
|
|
7
|
-
this.isCapsLock = false;
|
|
8
|
-
this.isShift = false;
|
|
9
|
-
this.currentLanguage = "english";
|
|
10
|
-
this.encryptionKey = "1234567890123456";
|
|
11
|
-
|
|
12
|
-
this.initEventListeners();
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
initEventListeners() {
|
|
16
|
-
document.querySelectorAll("input, textarea, form").forEach((element) => {
|
|
17
|
-
element.addEventListener("focus", (event) => {
|
|
18
|
-
event.stopImmediatePropagation();
|
|
19
|
-
this.activeInput = element;
|
|
20
|
-
});
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
24
|
-
document.querySelectorAll(".key").forEach((key) => {
|
|
25
|
-
key.addEventListener("click", (event) => {
|
|
26
|
-
if (key.classList.contains("capslock")) {
|
|
27
|
-
this.toggleCapsLock();
|
|
28
|
-
} else if (key.classList.contains("tab")) {
|
|
29
|
-
this.tab();
|
|
30
|
-
} else if (key.classList.contains("backspace")) {
|
|
31
|
-
this.backspace();
|
|
32
|
-
} else if (key.classList.contains("shift")) {
|
|
33
|
-
this.toggleShift();
|
|
34
|
-
} else if (key.classList.contains("enter")) {
|
|
35
|
-
this.toggleEnter();
|
|
36
|
-
} else if (key.classList.contains("toggle-lang")) {
|
|
37
|
-
this.switchLanguage();
|
|
38
|
-
} else {
|
|
39
|
-
this.handleKeyPress(key);
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
document
|
|
45
|
-
.getElementById("login-button")
|
|
46
|
-
.addEventListener("click", this.login.bind(this));
|
|
47
|
-
document
|
|
48
|
-
.getElementById("toggleKeyboard")
|
|
49
|
-
.addEventListener("click", this.toggleKeyboard.bind(this));
|
|
50
|
-
document
|
|
51
|
-
.getElementById("switch-toggle")
|
|
52
|
-
.addEventListener("click", this.switchLanguage.bind(this));
|
|
53
|
-
document
|
|
54
|
-
.getElementById("numpad-toggle")
|
|
55
|
-
.addEventListener("click", this.numpad.bind(this));
|
|
56
|
-
document
|
|
57
|
-
.getElementById("scramble-toggle")
|
|
58
|
-
.addEventListener("click", this.scramble.bind(this));
|
|
59
|
-
document
|
|
60
|
-
.getElementById("scramble-toggle-thai")
|
|
61
|
-
.addEventListener("click", () => this.scrambleLanguage("thai"));
|
|
62
|
-
document
|
|
63
|
-
.getElementById("scramble-toggle-eng")
|
|
64
|
-
.addEventListener("click", () => this.scrambleLanguage("english"));
|
|
65
|
-
});
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
startDrag(event) {
|
|
69
|
-
this.isDragging = true;
|
|
70
|
-
this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
|
|
71
|
-
this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
|
|
72
|
-
|
|
73
|
-
document.addEventListener("mousemove", drag);
|
|
74
|
-
document.addEventListener("mouseup", () => {
|
|
75
|
-
this.isDragging = false;
|
|
76
|
-
document.removeEventListener("mousemove", drag);
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
drag(event) {
|
|
81
|
-
if (this.isDragging) {
|
|
82
|
-
const keyboard = document.getElementById("keyboard");
|
|
83
|
-
keyboard.style.left = `${event.clientX - offsetX}px`;
|
|
84
|
-
keyboard.style.top = `${event.clientY - offsetY}px`;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
toggleCapsLock() {
|
|
89
|
-
this.isCapsLock = !this.isCapsLock;
|
|
90
|
-
const capsLockKeys = document.querySelectorAll(".capslock");
|
|
91
|
-
capsLockKeys.forEach((key) => key.classList.toggle("caps-active"));
|
|
92
|
-
|
|
93
|
-
document.querySelectorAll(".key").forEach((key) => {
|
|
94
|
-
const normalText = key.getAttribute("data-normal");
|
|
95
|
-
const shiftedText = key.getAttribute("data-shifted");
|
|
96
|
-
|
|
97
|
-
if (this.isCapsLock) {
|
|
98
|
-
key.innerText = shiftedText || normalText.toUpperCase();
|
|
99
|
-
} else {
|
|
100
|
-
key.innerText = normalText;
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
toggleShift() {
|
|
106
|
-
this.isShift = !this.isShift;
|
|
107
|
-
const shiftKeys = document.querySelectorAll(".shift");
|
|
108
|
-
shiftKeys.forEach((key) => key.classList.toggle("shift-active"));
|
|
109
|
-
|
|
110
|
-
document.querySelectorAll(".key").forEach((key) => {
|
|
111
|
-
const normalText = key.getAttribute("data-normal");
|
|
112
|
-
const shiftedText = key.getAttribute("data-shifted");
|
|
113
|
-
|
|
114
|
-
if (this.isShift) {
|
|
115
|
-
key.innerText = shiftedText || normalText.toUpperCase();
|
|
116
|
-
} else {
|
|
117
|
-
key.innerText = normalText;
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
switchLanguage() {
|
|
123
|
-
this.currentLanguage =
|
|
124
|
-
this.currentLanguage === "english" ? "thai" : "english";
|
|
125
|
-
|
|
126
|
-
document.getElementById("english-keyboard").style.display =
|
|
127
|
-
this.currentLanguage === "english" ? "block" : "none";
|
|
128
|
-
document.getElementById("thai-keyboard").style.display =
|
|
129
|
-
this.currentLanguage === "thai" ? "block" : "none";
|
|
130
|
-
|
|
131
|
-
document.getElementById("numpad-keyboard").style.display = "none";
|
|
132
|
-
document.getElementById("scrambled-keyboard").style.display = "none";
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
async login(event) {
|
|
136
|
-
event.preventDefault();
|
|
137
|
-
const username = document.getElementById("u___n___").value;
|
|
138
|
-
const password = document.getElementById("p___w___").value;
|
|
139
|
-
|
|
140
|
-
const encryptedPassword = this.encryptText(password);
|
|
141
|
-
|
|
142
|
-
const loginData = {
|
|
143
|
-
u___n___: username,
|
|
144
|
-
p___w___: encryptedPassword,
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
const response = await fetch("/login", {
|
|
148
|
-
method: "POST",
|
|
149
|
-
headers: {
|
|
150
|
-
"Content-Type": "application/json",
|
|
151
|
-
},
|
|
152
|
-
body: JSON.stringify(loginData),
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
const data = await response.json();
|
|
156
|
-
|
|
157
|
-
if (data.token) {
|
|
158
|
-
alert("เข้าสู่ระบบสำเร็จ");
|
|
159
|
-
localStorage.setItem("token", data.token);
|
|
160
|
-
location.reload();
|
|
161
|
-
} else {
|
|
162
|
-
alert(data.message || "เกิดข้อผิดพลาด");
|
|
163
|
-
location.reload();
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
toggletap(event) {
|
|
168
|
-
const key = event.target;
|
|
169
|
-
key.style.backgroundColor = "#45a049";
|
|
170
|
-
|
|
171
|
-
setTimeout(() => {
|
|
172
|
-
key.style.backgroundColor = "#d3d3d3";
|
|
173
|
-
}, 100);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
numpad() {
|
|
177
|
-
const englishKeyboard = document.getElementById("english-keyboard");
|
|
178
|
-
const thaiKeyboard = document.getElementById("thai-keyboard");
|
|
179
|
-
const scrambledKeyboard = document.getElementById("scrambled-keyboard");
|
|
180
|
-
const numpadKeyboard = document.getElementById("numpad-keyboard");
|
|
181
|
-
const engScramble = document.getElementById("english-Scramble");
|
|
182
|
-
const thaiScramble = document.getElementById("thai-Scramble");
|
|
183
|
-
|
|
184
|
-
englishKeyboard.style.display = "none";
|
|
185
|
-
thaiKeyboard.style.display = "none";
|
|
186
|
-
scrambledKeyboard.style.display = "none";
|
|
187
|
-
thaiScramble.style.display = "none";
|
|
188
|
-
engScramble.style.display = "none";
|
|
189
|
-
|
|
190
|
-
if (numpadKeyboard) {
|
|
191
|
-
numpadKeyboard.style.display = "block";
|
|
192
|
-
} else {
|
|
193
|
-
alert("Numpad layout is not available");
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
scramble() {
|
|
198
|
-
const englishKeyboard = document.getElementById("english-keyboard");
|
|
199
|
-
const thaiKeyboard = document.getElementById("thai-keyboard");
|
|
200
|
-
const scrambledKeyboard = document.getElementById("scrambled-keyboard");
|
|
201
|
-
const numpadKeyboard = document.getElementById("numpad-keyboard");
|
|
202
|
-
const engScramble = document.getElementById("english-Scramble");
|
|
203
|
-
const thaiScramble = document.getElementById("thai-Scramble");
|
|
204
|
-
|
|
205
|
-
// ซ่อนคีย์บอร์ดทุกตัวที่ไม่ใช่ Scrambled
|
|
206
|
-
englishKeyboard.style.display = "none";
|
|
207
|
-
thaiKeyboard.style.display = "none";
|
|
208
|
-
numpadKeyboard.style.display = "none";
|
|
209
|
-
thaiScramble.style.display = "none";
|
|
210
|
-
engScramble.style.display = "none";
|
|
211
|
-
|
|
212
|
-
if (scrambledKeyboard) {
|
|
213
|
-
scrambledKeyboard.style.display = "block";
|
|
214
|
-
scrambleKeys(); // เรียกฟังก์ชันเพื่อสุ่มตัวเลขบนคีย์บอร์ด
|
|
215
|
-
} else {
|
|
216
|
-
alert("Scramble layout is not available");
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
scrambleKeys() {
|
|
221
|
-
// เลือกปุ่มทั้งหมดในคีย์บอร์ด "Scrambled" ยกเว้นปุ่ม backspace
|
|
222
|
-
const keys = document.querySelectorAll(
|
|
223
|
-
"#scrambled-keyboard .key:not(.backspace):not(.plus):not(.minus):not(.multiply):not(.divide):not(.modulo):not(.double-zero):not(.decimal):not(.equals)"
|
|
224
|
-
);
|
|
225
|
-
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
|
|
226
|
-
shuffleArray(numbers); // เรียงลำดับตัวเลขแบบสุ่ม
|
|
227
|
-
|
|
228
|
-
keys.forEach((key, index) => {
|
|
229
|
-
key.textContent = numbers[index];
|
|
230
|
-
});
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
scrambleLanguage(language) {
|
|
234
|
-
const englishKeyboard = document.getElementById("english-keyboard");
|
|
235
|
-
const thaiKeyboard = document.getElementById("thai-keyboard");
|
|
236
|
-
const scrambledKeyboard = document.getElementById("scrambled-keyboard");
|
|
237
|
-
const numpadKeyboard = document.getElementById("numpad-keyboard");
|
|
238
|
-
const engScramble = document.getElementById("english-Scramble");
|
|
239
|
-
const thaiScramble = document.getElementById("thai-Scramble");
|
|
240
|
-
|
|
241
|
-
if (language === "thai") {
|
|
242
|
-
englishKeyboard.style.display = "none";
|
|
243
|
-
thaiKeyboard.style.display = "none";
|
|
244
|
-
engScramble.style.display = "none";
|
|
245
|
-
numpadKeyboard.style.display = "none";
|
|
246
|
-
scrambledKeyboard.style.display = "none";
|
|
247
|
-
thaiScramble.style.display = "block";
|
|
248
|
-
scrambleThaiKeys(); // ฟังก์ชันสำหรับภาษาไทย
|
|
249
|
-
} else if (language === "english") {
|
|
250
|
-
englishKeyboard.style.display = "none";
|
|
251
|
-
thaiKeyboard.style.display = "none";
|
|
252
|
-
engScramble.style.display = "block";
|
|
253
|
-
numpadKeyboard.style.display = "none";
|
|
254
|
-
scrambledKeyboard.style.display = "none";
|
|
255
|
-
thaiScramble.style.display = "none";
|
|
256
|
-
scrambleEnglishKeys(); // ฟังก์ชันสำหรับภาษาอังกฤษ
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
scrambleEnglishKeys() {
|
|
261
|
-
const keys = document.querySelectorAll(
|
|
262
|
-
"#english-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
|
|
263
|
-
);
|
|
264
|
-
|
|
265
|
-
const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
|
|
266
|
-
shuffleArray(englishAlphabet);
|
|
267
|
-
|
|
268
|
-
keys.forEach((key, index) => {
|
|
269
|
-
if (index < englishAlphabet.length) {
|
|
270
|
-
key.textContent = englishAlphabet[index];
|
|
271
|
-
key.setAttribute("data-normal", englishAlphabet[index]);
|
|
272
|
-
key.setAttribute("data-shifted", englishAlphabet[index].toUpperCase());
|
|
273
|
-
} else {
|
|
274
|
-
key.textContent = "";
|
|
275
|
-
}
|
|
276
|
-
});
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
scrambleThaiKeys() {
|
|
280
|
-
const keys = document.querySelectorAll(
|
|
281
|
-
"#thai-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
|
|
282
|
-
);
|
|
283
|
-
const thaiAlphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ".split(
|
|
284
|
-
""
|
|
285
|
-
);
|
|
286
|
-
shuffleArray(thaiAlphabet);
|
|
287
|
-
|
|
288
|
-
keys.forEach((key, index) => {
|
|
289
|
-
if (index < thaiAlphabet.length) {
|
|
290
|
-
key.textContent = thaiAlphabet[index];
|
|
291
|
-
key.setAttribute("data-normal", thaiAlphabet[index]);
|
|
292
|
-
key.setAttribute("data-shifted", thaiAlphabet[index]);
|
|
293
|
-
} else {
|
|
294
|
-
key.textContent = "";
|
|
295
|
-
}
|
|
296
|
-
});
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
shuffleArray(array) {
|
|
300
|
-
for (let i = array.length - 1; i > 0; i--) {
|
|
301
|
-
const j = Math.floor(Math.random() * (i + 1));
|
|
302
|
-
[array[i], array[j]] = [array[j], array[i]];
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
changeDropdownName(name) {
|
|
307
|
-
const dropdownButton = document.getElementById("dropdownButton");
|
|
308
|
-
dropdownButton.textContent = name;
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
export default Layout;
|