js_lis 1.0.0
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/index.js +687 -0
- package/package.json +12 -0
package/index.js
ADDED
|
@@ -0,0 +1,687 @@
|
|
|
1
|
+
class Layout {
|
|
2
|
+
constructor() {
|
|
3
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
4
|
+
this.createKeyboardContainer();
|
|
5
|
+
});
|
|
6
|
+
this.activeInput = null;
|
|
7
|
+
this.isDragging = false;
|
|
8
|
+
this.offsetX = 0;
|
|
9
|
+
this.offsetY = 0;
|
|
10
|
+
this.isCapsLock = false;
|
|
11
|
+
this.isShift = false;
|
|
12
|
+
this.currentLanguage = "english";
|
|
13
|
+
this.encryptionKey = "1234567890123456";
|
|
14
|
+
|
|
15
|
+
this.initEventListeners();
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
createKeyboardContainer() {
|
|
19
|
+
const keyboardContainer = document.createElement("div");
|
|
20
|
+
keyboardContainer.className = "keyboard";
|
|
21
|
+
keyboardContainer.id = "keyboard";
|
|
22
|
+
keyboardContainer.onmousedown = this.startDrag;
|
|
23
|
+
|
|
24
|
+
keyboardContainer.innerHTML = this.generateKeyboardHTML();
|
|
25
|
+
document.body.appendChild(keyboardContainer);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
generateKeyboardHTML() {
|
|
29
|
+
return `
|
|
30
|
+
<div class="keyboard-container">
|
|
31
|
+
${this.generateDropdown()}
|
|
32
|
+
${this.generateEnglishKeyboard()}
|
|
33
|
+
${this.generateThaiKeyboard()}
|
|
34
|
+
${this.generateNumpadKeyboard()}
|
|
35
|
+
${this.generateScrambledKeyboard()}
|
|
36
|
+
${this.generateEnglishScramble()}
|
|
37
|
+
${this.generateThaiScramble()}
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
generateDropdown() {
|
|
43
|
+
return `
|
|
44
|
+
<div class="dropdown">
|
|
45
|
+
<button class="dropdown-button but" id="dropdownButton" style="color: black;">เลือกแป้นพิมพ์</button>
|
|
46
|
+
<div class="dropdown-content">
|
|
47
|
+
<button id="switch-toggle" onclick="changeDropdownName('Switch Language')">Switch Language</button>
|
|
48
|
+
<button id="numpad-toggle" onclick="changeDropdownName('Numpad Keyboard')">Numpad Keyboard</button>
|
|
49
|
+
<button id="scramble-toggle" onclick="changeDropdownName('Scramble Numpad')">Scramble Numpad</button>
|
|
50
|
+
<button id="scramble-toggle-thai" onclick="changeDropdownName('Thai Scramble')">Thai Scramble</button>
|
|
51
|
+
<button id="scramble-toggle-eng" onclick="changeDropdownName('English Scramble')">English Scramble</button>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
`;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
generateEnglishKeyboard() {
|
|
58
|
+
return `
|
|
59
|
+
<div id="english-keyboard" class="keyboard-layout">
|
|
60
|
+
<!-- English Keyboard Rows -->
|
|
61
|
+
<div class="keyboard-row">
|
|
62
|
+
<button class="key" data-normal="\`" data-shifted="%">\`</button>
|
|
63
|
+
<button class="key" data-normal="1" data-shifted="!">1</button>
|
|
64
|
+
<button class="key" data-normal="2" data-shifted="@">2</button>
|
|
65
|
+
<button class="key" data-normal="3" data-shifted="#">3</button>
|
|
66
|
+
<button class="key" data-normal="4" data-shifted="$">4</button>
|
|
67
|
+
<button class="key" data-normal="5" data-shifted="%">5</button>
|
|
68
|
+
<button class="key" data-normal="6" data-shifted="^">6</button>
|
|
69
|
+
<button class="key" data-normal="7" data-shifted="&">7</button>
|
|
70
|
+
<button class="key" data-normal="8" data-shifted="*">8</button>
|
|
71
|
+
<button class="key" data-normal="9" data-shifted="(">9</button>
|
|
72
|
+
<button class="key" data-normal="0" data-shifted=")">0</button>
|
|
73
|
+
<button class="key" data-normal="-" data-shifted="_">-</button>
|
|
74
|
+
<button class="key" data-normal="=" data-shifted="+">=</button>
|
|
75
|
+
<button class="key backspace">Backspace</button>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div class="keyboard-row">
|
|
79
|
+
<button class="key tab">Tab</button>
|
|
80
|
+
<button class="key" data-normal="q" data-shifted="Q">q</button>
|
|
81
|
+
<button class="key" data-normal="w" data-shifted="W">w</button>
|
|
82
|
+
<button class="key" data-normal="e" data-shifted="E">e</button>
|
|
83
|
+
<button class="key" data-normal="r" data-shifted="R">r</button>
|
|
84
|
+
<button class="key" data-normal="t" data-shifted="T">t</button>
|
|
85
|
+
<button class="key" data-normal="y" data-shifted="Y">y</button>
|
|
86
|
+
<button class="key" data-normal="u" data-shifted="U">u</button>
|
|
87
|
+
<button class="key" data-normal="i" data-shifted="I">i</button>
|
|
88
|
+
<button class="key" data-normal="o" data-shifted="O">o</button>
|
|
89
|
+
<button class="key" data-normal="p" data-shifted="P">p</button>
|
|
90
|
+
<button class="key" data-normal="[" data-shifted="{">[</button>
|
|
91
|
+
<button class="key" data-normal="]" data-shifted="}">]</button>
|
|
92
|
+
<button class="key" data-normal="\\" data-shifted="|">\\</button>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="keyboard-row">
|
|
96
|
+
<button class="key capslock">CapsLk</button>
|
|
97
|
+
<button class="key" data-normal="a" data-shifted="A">a</button>
|
|
98
|
+
<button class="key" data-normal="s" data-shifted="S">s</button>
|
|
99
|
+
<button class="key" data-normal="d" data-shifted="D">d</button>
|
|
100
|
+
<button class="key" data-normal="f" data-shifted="F">f</button>
|
|
101
|
+
<button class="key" data-normal="g" data-shifted="G">g</button>
|
|
102
|
+
<button class="key" data-normal="h" data-shifted="H">h</button>
|
|
103
|
+
<button class="key" data-normal="j" data-shifted="J">j</button>
|
|
104
|
+
<button class="key" data-normal="k" data-shifted="K">k</button>
|
|
105
|
+
<button class="key" data-normal="l" data-shifted="L">l</button>
|
|
106
|
+
<button class="key" data-normal=";" data-shifted=":">;</button>
|
|
107
|
+
<button class="key" data-normal="'" data-shifted=""">'</button>
|
|
108
|
+
<button class="key enter" style="width: 90px; top:20%">Enter</button>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="keyboard-row">
|
|
112
|
+
<button class="key shift" style="width: 120px;">Shift</button>
|
|
113
|
+
<button class="key" data-normal="z" data-shifted="Z">z</button>
|
|
114
|
+
<button class="key" data-normal="x" data-shifted="X">x</button>
|
|
115
|
+
<button class="key" data-normal="c" data-shifted="C">c</button>
|
|
116
|
+
<button class="key" data-normal="v" data-shifted="V">v</button>
|
|
117
|
+
<button class="key" data-normal="b" data-shifted="B">b</button>
|
|
118
|
+
<button class="key" data-normal="n" data-shifted="N">n</button>
|
|
119
|
+
<button class="key" data-normal="m" data-shifted="M">m</button>
|
|
120
|
+
<button class="key" data-normal="," data-shifted="<">,</button>
|
|
121
|
+
<button class="key" data-normal="." data-shifted=">">.</button>
|
|
122
|
+
<button class="key" data-normal="/" data-shifted="?">/</button>
|
|
123
|
+
<button class="key shift" style="width: 115px;">Shift</button>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="keyboard-row">
|
|
127
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
`;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
generateThaiKeyboard() {
|
|
134
|
+
return `
|
|
135
|
+
<div id="thai-keyboard" class="keyboard-layout" style="display: none;">
|
|
136
|
+
<!-- Thai Keyboard Rows -->
|
|
137
|
+
<div class="keyboard-row">
|
|
138
|
+
<button class="key" data-normal="_" data-shifted="%">_</button>
|
|
139
|
+
<button class="key" data-normal="ๅ" data-shifted="+">ๅ</button>
|
|
140
|
+
<button class="key" data-normal="/" data-shifted="๑">/</button>
|
|
141
|
+
<button class="key" data-normal="-" data-shifted="๒">-</button>
|
|
142
|
+
<button class="key" data-normal="ภ" data-shifted="๓">ภ</button>
|
|
143
|
+
<button class="key" data-normal="ถ" data-shifted="๔">ถ</button>
|
|
144
|
+
<button class="key" data-normal="ุ" data-shifted="ู">ู</button>
|
|
145
|
+
<button class="key" data-normal="ึ" data-shifted="ฺ">฿</button>
|
|
146
|
+
<button class="key" data-normal="ค" data-shifted="๕">ค</button>
|
|
147
|
+
<button class="key" data-normal="ต" data-shifted="๖">ต</button>
|
|
148
|
+
<button class="key" data-normal="จ" data-shifted="๗">จ</button>
|
|
149
|
+
<button class="key" data-normal="ข" data-shifted="๘">ข</button>
|
|
150
|
+
<button class="key" data-normal="ช" data-shifted="๙">ช</button>
|
|
151
|
+
<button class="key backspace">Backspace</button>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div class="keyboard-row">
|
|
155
|
+
<button class="key tab">Tab</button>
|
|
156
|
+
<button class="key" data-normal="ๆ" data-shifted="๐">ๆ</button>
|
|
157
|
+
<button class="key" data-normal="ไ" data-shifted=""">ไ</button>
|
|
158
|
+
<button class="key" data-normal="ำ" data-shifted="ฎ">ำ</button>
|
|
159
|
+
<button class="key" data-normal="พ" data-shifted="ฑ">พ</button>
|
|
160
|
+
<button class="key" data-normal="ะ" data-shifted="ธ">ะ</button>
|
|
161
|
+
<button class="key" data-normal="ั" data-shifted="ํ">ั</button>
|
|
162
|
+
<button class="key" data-normal="ี" data-shifted="๋">ี</button>
|
|
163
|
+
<button class="key" data-normal="ร" data-shifted="ณ">ร</button>
|
|
164
|
+
<button class="key" data-normal="น" data-shifted="ฯ">น</button>
|
|
165
|
+
<button class="key" data-normal="ย" data-shifted="ญ">ย</button>
|
|
166
|
+
<button class="key" data-normal="บ" data-shifted="ฐ">บ</button>
|
|
167
|
+
<button class="key" data-normal="ล" data-shifted=",">ล</button>
|
|
168
|
+
<button class="key" data-normal="ฃ" data-shifted="ฅ">ฃ</button>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<div class="keyboard-row">
|
|
172
|
+
<button class="key capslock">CapsLock</button>
|
|
173
|
+
<button class="key" data-normal="ฟ" data-shifted="ฤ">ฟ</button>
|
|
174
|
+
<button class="key" data-normal="ห" data-shifted="ฆ">ห</button>
|
|
175
|
+
<button class="key" data-normal="ก" data-shifted="ฏ">ก</button>
|
|
176
|
+
<button class="key" data-normal="ด" data-shifted="โ">ด</button>
|
|
177
|
+
<button class="key" data-normal="เ" data-shifted="ฌ">เ</button>
|
|
178
|
+
<button class="key" data-normal="้" data-shifted="็">้</button>
|
|
179
|
+
<button class="key" data-normal="่" data-shifted="๋">่</button>
|
|
180
|
+
<button class="key" data-normal="า" data-shifted="ษ">า</button>
|
|
181
|
+
<button class="key" data-normal="ส" data-shifted="ศ">ส</button>
|
|
182
|
+
<button class="key" data-normal="ว" data-shifted="ซ">ว</button>
|
|
183
|
+
<button class="key" data-normal="ง" data-shifted=".">ง</button>
|
|
184
|
+
<button class="key enter" style="width: 90px; top:20%">Enter</button>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="keyboard-row">
|
|
188
|
+
<button class="key shift" style="width: 120px;">Shift</button>
|
|
189
|
+
<button class="key" data-normal="ผ" data-shifted="(">ผ</button>
|
|
190
|
+
<button class="key" data-normal="ป" data-shifted=")">ป</button>
|
|
191
|
+
<button class="key" data-normal="แ" data-shifted="ฉ">แ</button>
|
|
192
|
+
<button class="key" data-normal="อ" data-shifted="ฮ">อ</button>
|
|
193
|
+
<button class="key" data-normal="ิ" data-shifted="ฺ">ิ</button>
|
|
194
|
+
<button class="key" data-normal="ื" data-shifted="์">ื</button>
|
|
195
|
+
<button class="key" data-normal="ท" data-shifted="?">ท</button>
|
|
196
|
+
<button class="key" data-normal="ม" data-shifted="ฒ">ม</button>
|
|
197
|
+
<button class="key" data-normal="ใ" data-shifted="ฬ">ใ</button>
|
|
198
|
+
<button class="key" data-normal="ฝ" data-shifted="ฦ">ฝ</button>
|
|
199
|
+
<button class="key shift" style="width: 115px;">Shift</button>
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div class="keyboard-row">
|
|
203
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
`;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
generateNumpadKeyboard() {
|
|
210
|
+
return `
|
|
211
|
+
<div id="numpad-keyboard" class="keyboard-layout" style="display: none;">
|
|
212
|
+
<div class="keyboard-row">
|
|
213
|
+
<button class="key">+</button>
|
|
214
|
+
<button class="key">-</button>
|
|
215
|
+
<button class="key">*</button>
|
|
216
|
+
<button class="key">/</button>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="keyboard-row">
|
|
219
|
+
<button class="key">1</button>
|
|
220
|
+
<button class="key">2</button>
|
|
221
|
+
<button class="key">3</button>
|
|
222
|
+
<button class="key">%</button>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
<div class="keyboard-row">
|
|
226
|
+
<button class="key">4</button>
|
|
227
|
+
<button class="key">5</button>
|
|
228
|
+
<button class="key">6</button>
|
|
229
|
+
<button class="key">.</button>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="keyboard-row">
|
|
233
|
+
<button class="key">7</button>
|
|
234
|
+
<button class="key">8</button>
|
|
235
|
+
<button class="key">9</button>
|
|
236
|
+
<button class="key">=</button>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div class="keyboard-row">
|
|
240
|
+
<button class="key">00</button>
|
|
241
|
+
<button class="key">0</button>
|
|
242
|
+
<button class="key backspace" style="width: 90px;">Backspace</button>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
`;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
generateScrambledKeyboard() {
|
|
249
|
+
return `
|
|
250
|
+
<div id="scrambled-keyboard" class="keyboard-layout" style="display: none;">
|
|
251
|
+
<!-- เพิ่มปุ่มสำหรับคีย์บอร์ด Scramble -->
|
|
252
|
+
<div class="keyboard-row">
|
|
253
|
+
<button class="key plus">+</button>
|
|
254
|
+
<button class="key minus">-</button>
|
|
255
|
+
<button class="key multiply">*</button>
|
|
256
|
+
<button class="key divide">/</button>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="keyboard-row">
|
|
259
|
+
<button class="key">1</button>
|
|
260
|
+
<button class="key">2</button>
|
|
261
|
+
<button class="key">3</button>
|
|
262
|
+
<button class="key modulo">%</button>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<div class="keyboard-row">
|
|
266
|
+
<button class="key">4</button>
|
|
267
|
+
<button class="key">5</button>
|
|
268
|
+
<button class="key">6</button>
|
|
269
|
+
<button class="key decimal">.</button>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="keyboard-row">
|
|
273
|
+
<button class="key">7</button>
|
|
274
|
+
<button class="key">8</button>
|
|
275
|
+
<button class="key">9</button>
|
|
276
|
+
<button class="key equals">=</button>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="keyboard-row">
|
|
280
|
+
<button class="key double-zero">00</button>
|
|
281
|
+
<button class="key">0</button>
|
|
282
|
+
<button class="key backspace" style="width: 90px;">Backspace</button>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
`;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
generateEnglishScramble() {
|
|
289
|
+
return `
|
|
290
|
+
<div id="english-Scramble" class="keyboard-layout" style="display: none;">
|
|
291
|
+
<!-- English Keyboard Rows -->
|
|
292
|
+
<div class="keyboard-row">
|
|
293
|
+
<button class="key" data-normal="q" data-shifted="Q">q</button>
|
|
294
|
+
<button class="key" data-normal="w" data-shifted="W">w</button>
|
|
295
|
+
<button class="key" data-normal="e" data-shifted="E">e</button>
|
|
296
|
+
<button class="key" data-normal="r" data-shifted="R">r</button>
|
|
297
|
+
<button class="key" data-normal="t" data-shifted="T">t</button>
|
|
298
|
+
<button class="key" data-normal="y" data-shifted="Y">y</button>
|
|
299
|
+
<button class="key" data-normal="u" data-shifted="U">u</button>
|
|
300
|
+
<button class="key" data-normal="i" data-shifted="I">i</button>
|
|
301
|
+
<button class="key" data-normal="o" data-shifted="O">o</button>
|
|
302
|
+
<button class="key" data-normal="p" data-shifted="P">p</button>
|
|
303
|
+
<button class="key backspace">Backspace</button>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<div class="keyboard-row">
|
|
307
|
+
<button class="key capslock">CapsLk</button>
|
|
308
|
+
<button class="key" data-normal="s" data-shifted="S">s</button>
|
|
309
|
+
<button class="key" data-normal="d" data-shifted="D">d</button>
|
|
310
|
+
<button class="key" data-normal="f" data-shifted="F">f</button>
|
|
311
|
+
<button class="key" data-normal="g" data-shifted="G">g</button>
|
|
312
|
+
<button class="key" data-normal="h" data-shifted="H">h</button>
|
|
313
|
+
<button class="key" data-normal="j" data-shifted="J">j</button>
|
|
314
|
+
<button class="key" data-normal="k" data-shifted="K">k</button>
|
|
315
|
+
<button class="key" data-normal="l" data-shifted="L">l</button>
|
|
316
|
+
<button class="key enter" style="width: 90px; top:20%">Enter</button>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<div class="keyboard-row">
|
|
320
|
+
<button class="key shift" style="width: 90px;">Shift</button>
|
|
321
|
+
<button class="key" data-normal="z" data-shifted="Z">z</button>
|
|
322
|
+
<button class="key" data-normal="x" data-shifted="X">x</button>
|
|
323
|
+
<button class="key" data-normal="c" data-shifted="C">c</button>
|
|
324
|
+
<button class="key" data-normal="v" data-shifted="V">v</button>
|
|
325
|
+
<button class="key" data-normal="b" data-shifted="B">b</button>
|
|
326
|
+
<button class="key" data-normal="n" data-shifted="N">n</button>
|
|
327
|
+
<button class="key" data-normal="m" data-shifted="M">m</button>
|
|
328
|
+
<button class="key" data-normal="a" data-shifted="A">m</button>
|
|
329
|
+
<button class="key shift" style="width: 100px;">Shift</button>
|
|
330
|
+
</div>
|
|
331
|
+
|
|
332
|
+
<div class="keyboard-row">
|
|
333
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
`;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
generateThaiScramble() {
|
|
340
|
+
return `
|
|
341
|
+
<div id="thai-Scramble" class="keyboard-layout" style="display: none;">
|
|
342
|
+
<!-- Thai Keyboard Rows -->
|
|
343
|
+
<div class="keyboard-row">
|
|
344
|
+
<button class="key" data-normal="ก" data-shifted="ก">ก</button>
|
|
345
|
+
<button class="key" data-normal="ข" data-shifted="ข">ข</button>
|
|
346
|
+
<button class="key" data-normal="ฃ" data-shifted="ฃ">ฃ</button>
|
|
347
|
+
<button class="key" data-normal="ค" data-shifted="ค">ค</button>
|
|
348
|
+
<button class="key" data-normal="ฅ" data-shifted="ฅ">ฅ</button>
|
|
349
|
+
<button class="key" data-normal="ฆ" data-shifted="ฆ">ฆ</button>
|
|
350
|
+
<button class="key" data-normal="ง" data-shifted="ง">ง</button>
|
|
351
|
+
<button class="key" data-normal="จ" data-shifted="จ">จ</button>
|
|
352
|
+
<button class="key" data-normal="ฉ" data-shifted="ฉ">ฉ</button>
|
|
353
|
+
<button class="key" data-normal="ช" data-shifted="ช">ช</button>
|
|
354
|
+
<button class="key" data-normal="ซ" data-shifted="ซ">ซ</button>
|
|
355
|
+
<button class="key" data-normal="ฌ" data-shifted="ฌ">ฌ</button>
|
|
356
|
+
<button class="key" data-normal="ญ" data-shifted="ญ">ญ</button>
|
|
357
|
+
<button class="key" data-normal="ฎ" data-shifted="ฎ">ฎ</button>
|
|
358
|
+
<button class="key backspace" style="width: 86px;">Backspace</button>
|
|
359
|
+
</div>
|
|
360
|
+
|
|
361
|
+
<div class="keyboard-row">
|
|
362
|
+
<button class="key" data-normal="ฏ" data-shifted="ฏ">ฏ</button>
|
|
363
|
+
<button class="key" data-normal="ฐ" data-shifted="ฐ">ฐ</button>
|
|
364
|
+
<button class="key" data-normal="ฑ" data-shifted="ฑ">ฑ</button>
|
|
365
|
+
<button class="key" data-normal="ฒ" data-shifted="ฒ">ฒ</button>
|
|
366
|
+
<button class="key" data-normal="ณ" data-shifted="ณ">ณ</button>
|
|
367
|
+
<button class="key" data-normal="ด" data-shifted="ด">ด</button>
|
|
368
|
+
<button class="key" data-normal="ต" data-shifted="ต">ต</button>
|
|
369
|
+
<button class="key" data-normal="ถ" data-shifted="ถ">ถ</button>
|
|
370
|
+
<button class="key" data-normal="ท" data-shifted="ท">ท</button>
|
|
371
|
+
<button class="key" data-normal="ธ" data-shifted="ธ">ธ</button>
|
|
372
|
+
<button class="key" data-normal="น" data-shifted="น">น</button>
|
|
373
|
+
<button class="key" data-normal="บ" data-shifted="บ">บ</button>
|
|
374
|
+
<button class="key" data-normal="ป" data-shifted="ป">ป</button>
|
|
375
|
+
<button class="key" data-normal="ผ" data-shifted="ผ">ผ</button>
|
|
376
|
+
<button class="key" data-normal="ฝ" data-shifted="ฝ">ฝ</button>
|
|
377
|
+
<button class="key" data-normal="พ" data-shifted="พ">พ</button>
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<div class="keyboard-row">
|
|
381
|
+
<button class="key" data-normal="ฟ" data-shifted="ฟ">ฟ</button>
|
|
382
|
+
<button class="key" data-normal="ภ" data-shifted="ภ">ภ</button>
|
|
383
|
+
<button class="key" data-normal="ม" data-shifted="ม">ม</button>
|
|
384
|
+
<button class="key" data-normal="ย" data-shifted="ย">ย</button>
|
|
385
|
+
<button class="key" data-normal="ร" data-shifted="ร">ร</button>
|
|
386
|
+
<button class="key" data-normal="ฤ" data-shifted="ฤ">ฤ</button>
|
|
387
|
+
<button class="key" data-normal="ล" data-shifted="ล">ล</button>
|
|
388
|
+
<button class="key" data-normal="ฦ" data-shifted="ฦ">ฦ</button>
|
|
389
|
+
<button class="key" data-normal="ว" data-shifted="ว">ว</button>
|
|
390
|
+
<button class="key" data-normal="ศ" data-shifted="ศ">ศ</button>
|
|
391
|
+
<button class="key" data-normal="ษ" data-shifted="ษ">ษ</button>
|
|
392
|
+
<button class="key" data-normal="ส" data-shifted="ส">ส</button>
|
|
393
|
+
<button class="key" data-normal="ห" data-shifted="ห">ห</button>
|
|
394
|
+
<button class="key" data-normal="ฬ" data-shifted="ฬ">ฬ</button>
|
|
395
|
+
<button class="key" data-normal="อ" data-shifted="อ">อ</button>
|
|
396
|
+
<button class="key" data-normal="ฮ" data-shifted="ฮ">ฮ</button>
|
|
397
|
+
</div>
|
|
398
|
+
|
|
399
|
+
<div class="keyboard-row">
|
|
400
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
`;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
startDrag(event) {
|
|
407
|
+
// Implement drag functionality
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
initEventListeners() {
|
|
411
|
+
document.querySelectorAll("input, textarea, form").forEach((element) => {
|
|
412
|
+
element.addEventListener("focus", (event) => {
|
|
413
|
+
event.stopImmediatePropagation();
|
|
414
|
+
this.activeInput = element;
|
|
415
|
+
});
|
|
416
|
+
});
|
|
417
|
+
|
|
418
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
419
|
+
document.querySelectorAll(".key").forEach((key) => {
|
|
420
|
+
key.addEventListener("click", (event) => {
|
|
421
|
+
if (key.classList.contains("capslock")) {
|
|
422
|
+
this.toggleCapsLock();
|
|
423
|
+
} else if (key.classList.contains("tab")) {
|
|
424
|
+
this.tab();
|
|
425
|
+
} else if (key.classList.contains("backspace")) {
|
|
426
|
+
this.backspace();
|
|
427
|
+
} else if (key.classList.contains("shift")) {
|
|
428
|
+
this.toggleShift();
|
|
429
|
+
} else if (key.classList.contains("enter")) {
|
|
430
|
+
this.toggleEnter();
|
|
431
|
+
} else if (key.classList.contains("toggle-lang")) {
|
|
432
|
+
this.switchLanguage();
|
|
433
|
+
} else {
|
|
434
|
+
this.handleKeyPress(key);
|
|
435
|
+
}
|
|
436
|
+
});
|
|
437
|
+
});
|
|
438
|
+
|
|
439
|
+
document
|
|
440
|
+
.getElementById("login-button")
|
|
441
|
+
.addEventListener("click", this.login.bind(this));
|
|
442
|
+
document
|
|
443
|
+
.getElementById("toggleKeyboard")
|
|
444
|
+
.addEventListener("click", this.toggleKeyboard.bind(this));
|
|
445
|
+
document
|
|
446
|
+
.getElementById("switch-toggle")
|
|
447
|
+
.addEventListener("click", this.switchLanguage.bind(this));
|
|
448
|
+
document
|
|
449
|
+
.getElementById("numpad-toggle")
|
|
450
|
+
.addEventListener("click", this.numpad.bind(this));
|
|
451
|
+
document
|
|
452
|
+
.getElementById("scramble-toggle")
|
|
453
|
+
.addEventListener("click", this.scramble.bind(this));
|
|
454
|
+
document
|
|
455
|
+
.getElementById("scramble-toggle-thai")
|
|
456
|
+
.addEventListener("click", () => this.scrambleLanguage("thai"));
|
|
457
|
+
document
|
|
458
|
+
.getElementById("scramble-toggle-eng")
|
|
459
|
+
.addEventListener("click", () => this.scrambleLanguage("english"));
|
|
460
|
+
});
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
toggleCapsLock() {
|
|
464
|
+
this.isCapsLock = !this.isCapsLock;
|
|
465
|
+
const capsLockKeys = document.querySelectorAll(".capslock");
|
|
466
|
+
capsLockKeys.forEach((key) => key.classList.toggle("caps-active"));
|
|
467
|
+
|
|
468
|
+
document.querySelectorAll(".key").forEach((key) => {
|
|
469
|
+
const normalText = key.getAttribute("data-normal");
|
|
470
|
+
const shiftedText = key.getAttribute("data-shifted");
|
|
471
|
+
|
|
472
|
+
if (this.isCapsLock) {
|
|
473
|
+
key.innerText = shiftedText || normalText.toUpperCase();
|
|
474
|
+
} else {
|
|
475
|
+
key.innerText = normalText;
|
|
476
|
+
}
|
|
477
|
+
});
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
toggleShift() {
|
|
481
|
+
this.isShift = !this.isShift;
|
|
482
|
+
const shiftKeys = document.querySelectorAll(".shift");
|
|
483
|
+
shiftKeys.forEach((key) => key.classList.toggle("shift-active"));
|
|
484
|
+
|
|
485
|
+
document.querySelectorAll(".key").forEach((key) => {
|
|
486
|
+
const normalText = key.getAttribute("data-normal");
|
|
487
|
+
const shiftedText = key.getAttribute("data-shifted");
|
|
488
|
+
|
|
489
|
+
if (this.isShift) {
|
|
490
|
+
key.innerText = shiftedText || normalText.toUpperCase();
|
|
491
|
+
} else {
|
|
492
|
+
key.innerText = normalText;
|
|
493
|
+
}
|
|
494
|
+
});
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
switchLanguage() {
|
|
498
|
+
this.currentLanguage =
|
|
499
|
+
this.currentLanguage === "english" ? "thai" : "english";
|
|
500
|
+
|
|
501
|
+
document.getElementById("english-keyboard").style.display =
|
|
502
|
+
this.currentLanguage === "english" ? "block" : "none";
|
|
503
|
+
document.getElementById("thai-keyboard").style.display =
|
|
504
|
+
this.currentLanguage === "thai" ? "block" : "none";
|
|
505
|
+
|
|
506
|
+
document.getElementById("numpad-keyboard").style.display = "none";
|
|
507
|
+
document.getElementById("scrambled-keyboard").style.display = "none";
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
async login(event) {
|
|
511
|
+
event.preventDefault();
|
|
512
|
+
const username = document.getElementById("u___n___").value;
|
|
513
|
+
const password = document.getElementById("p___w___").value;
|
|
514
|
+
|
|
515
|
+
const encryptedPassword = this.encryptText(password);
|
|
516
|
+
|
|
517
|
+
const loginData = {
|
|
518
|
+
u___n___: username,
|
|
519
|
+
p___w___: encryptedPassword,
|
|
520
|
+
};
|
|
521
|
+
|
|
522
|
+
const response = await fetch("/login", {
|
|
523
|
+
method: "POST",
|
|
524
|
+
headers: {
|
|
525
|
+
"Content-Type": "application/json",
|
|
526
|
+
},
|
|
527
|
+
body: JSON.stringify(loginData),
|
|
528
|
+
});
|
|
529
|
+
|
|
530
|
+
const data = await response.json();
|
|
531
|
+
|
|
532
|
+
if (data.token) {
|
|
533
|
+
alert("เข้าสู่ระบบสำเร็จ");
|
|
534
|
+
localStorage.setItem("token", data.token);
|
|
535
|
+
location.reload();
|
|
536
|
+
} else {
|
|
537
|
+
alert(data.message || "เกิดข้อผิดพลาด");
|
|
538
|
+
location.reload();
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
toggletap(event) {
|
|
543
|
+
const key = event.target;
|
|
544
|
+
key.style.backgroundColor = "#45a049";
|
|
545
|
+
|
|
546
|
+
setTimeout(() => {
|
|
547
|
+
key.style.backgroundColor = "#d3d3d3";
|
|
548
|
+
}, 100);
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
numpad() {
|
|
552
|
+
const englishKeyboard = document.getElementById("english-keyboard");
|
|
553
|
+
const thaiKeyboard = document.getElementById("thai-keyboard");
|
|
554
|
+
const scrambledKeyboard = document.getElementById("scrambled-keyboard");
|
|
555
|
+
const numpadKeyboard = document.getElementById("numpad-keyboard");
|
|
556
|
+
const engScramble = document.getElementById("english-Scramble");
|
|
557
|
+
const thaiScramble = document.getElementById("thai-Scramble");
|
|
558
|
+
|
|
559
|
+
englishKeyboard.style.display = "none";
|
|
560
|
+
thaiKeyboard.style.display = "none";
|
|
561
|
+
scrambledKeyboard.style.display = "none";
|
|
562
|
+
thaiScramble.style.display = "none";
|
|
563
|
+
engScramble.style.display = "none";
|
|
564
|
+
|
|
565
|
+
if (numpadKeyboard) {
|
|
566
|
+
numpadKeyboard.style.display = "block";
|
|
567
|
+
} else {
|
|
568
|
+
alert("Numpad layout is not available");
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
scramble() {
|
|
573
|
+
const englishKeyboard = document.getElementById("english-keyboard");
|
|
574
|
+
const thaiKeyboard = document.getElementById("thai-keyboard");
|
|
575
|
+
const scrambledKeyboard = document.getElementById("scrambled-keyboard");
|
|
576
|
+
const numpadKeyboard = document.getElementById("numpad-keyboard");
|
|
577
|
+
const engScramble = document.getElementById("english-Scramble");
|
|
578
|
+
const thaiScramble = document.getElementById("thai-Scramble");
|
|
579
|
+
|
|
580
|
+
// ซ่อนคีย์บอร์ดทุกตัวที่ไม่ใช่ Scrambled
|
|
581
|
+
englishKeyboard.style.display = "none";
|
|
582
|
+
thaiKeyboard.style.display = "none";
|
|
583
|
+
numpadKeyboard.style.display = "none";
|
|
584
|
+
thaiScramble.style.display = "none";
|
|
585
|
+
engScramble.style.display = "none";
|
|
586
|
+
|
|
587
|
+
if (scrambledKeyboard) {
|
|
588
|
+
scrambledKeyboard.style.display = "block";
|
|
589
|
+
scrambleKeys(); // เรียกฟังก์ชันเพื่อสุ่มตัวเลขบนคีย์บอร์ด
|
|
590
|
+
} else {
|
|
591
|
+
alert("Scramble layout is not available");
|
|
592
|
+
}
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
scrambleKeys() {
|
|
596
|
+
// เลือกปุ่มทั้งหมดในคีย์บอร์ด "Scrambled" ยกเว้นปุ่ม backspace
|
|
597
|
+
const keys = document.querySelectorAll(
|
|
598
|
+
"#scrambled-keyboard .key:not(.backspace):not(.plus):not(.minus):not(.multiply):not(.divide):not(.modulo):not(.double-zero):not(.decimal):not(.equals)"
|
|
599
|
+
);
|
|
600
|
+
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
|
|
601
|
+
shuffleArray(numbers); // เรียงลำดับตัวเลขแบบสุ่ม
|
|
602
|
+
|
|
603
|
+
keys.forEach((key, index) => {
|
|
604
|
+
key.textContent = numbers[index];
|
|
605
|
+
});
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
scrambleLanguage(language) {
|
|
609
|
+
const englishKeyboard = document.getElementById("english-keyboard");
|
|
610
|
+
const thaiKeyboard = document.getElementById("thai-keyboard");
|
|
611
|
+
const scrambledKeyboard = document.getElementById("scrambled-keyboard");
|
|
612
|
+
const numpadKeyboard = document.getElementById("numpad-keyboard");
|
|
613
|
+
const engScramble = document.getElementById("english-Scramble");
|
|
614
|
+
const thaiScramble = document.getElementById("thai-Scramble");
|
|
615
|
+
|
|
616
|
+
if (language === "thai") {
|
|
617
|
+
englishKeyboard.style.display = "none";
|
|
618
|
+
thaiKeyboard.style.display = "none";
|
|
619
|
+
engScramble.style.display = "none";
|
|
620
|
+
numpadKeyboard.style.display = "none";
|
|
621
|
+
scrambledKeyboard.style.display = "none";
|
|
622
|
+
thaiScramble.style.display = "block";
|
|
623
|
+
scrambleThaiKeys(); // ฟังก์ชันสำหรับภาษาไทย
|
|
624
|
+
} else if (language === "english") {
|
|
625
|
+
englishKeyboard.style.display = "none";
|
|
626
|
+
thaiKeyboard.style.display = "none";
|
|
627
|
+
engScramble.style.display = "block";
|
|
628
|
+
numpadKeyboard.style.display = "none";
|
|
629
|
+
scrambledKeyboard.style.display = "none";
|
|
630
|
+
thaiScramble.style.display = "none";
|
|
631
|
+
scrambleEnglishKeys(); // ฟังก์ชันสำหรับภาษาอังกฤษ
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
scrambleEnglishKeys() {
|
|
636
|
+
const keys = document.querySelectorAll(
|
|
637
|
+
"#english-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
|
|
638
|
+
);
|
|
639
|
+
|
|
640
|
+
const englishAlphabet = "abcdefghijklmnopqrstuvwxyz".split("");
|
|
641
|
+
shuffleArray(englishAlphabet);
|
|
642
|
+
|
|
643
|
+
keys.forEach((key, index) => {
|
|
644
|
+
if (index < englishAlphabet.length) {
|
|
645
|
+
key.textContent = englishAlphabet[index];
|
|
646
|
+
key.setAttribute("data-normal", englishAlphabet[index]);
|
|
647
|
+
key.setAttribute("data-shifted", englishAlphabet[index].toUpperCase());
|
|
648
|
+
} else {
|
|
649
|
+
key.textContent = "";
|
|
650
|
+
}
|
|
651
|
+
});
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
scrambleThaiKeys() {
|
|
655
|
+
const keys = document.querySelectorAll(
|
|
656
|
+
"#thai-Scramble .key:not(.backspace):not(.capslock):not(.enter):not(.shift):not(.space-bar)"
|
|
657
|
+
);
|
|
658
|
+
const thaiAlphabet = "กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ".split(
|
|
659
|
+
""
|
|
660
|
+
);
|
|
661
|
+
shuffleArray(thaiAlphabet);
|
|
662
|
+
|
|
663
|
+
keys.forEach((key, index) => {
|
|
664
|
+
if (index < thaiAlphabet.length) {
|
|
665
|
+
key.textContent = thaiAlphabet[index];
|
|
666
|
+
key.setAttribute("data-normal", thaiAlphabet[index]);
|
|
667
|
+
key.setAttribute("data-shifted", thaiAlphabet[index]);
|
|
668
|
+
} else {
|
|
669
|
+
key.textContent = "";
|
|
670
|
+
}
|
|
671
|
+
});
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
shuffleArray(array) {
|
|
675
|
+
for (let i = array.length - 1; i > 0; i--) {
|
|
676
|
+
const j = Math.floor(Math.random() * (i + 1));
|
|
677
|
+
[array[i], array[j]] = [array[j], array[i]];
|
|
678
|
+
}
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
changeDropdownName(name) {
|
|
682
|
+
const dropdownButton = document.getElementById("dropdownButton");
|
|
683
|
+
dropdownButton.textContent = name;
|
|
684
|
+
}
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
module.exports = Layout;
|