js_lis 1.0.2 → 1.0.4
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 +7 -398
- package/layout.js +398 -0
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
class Layout {
|
|
2
2
|
constructor() {
|
|
3
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
4
|
-
this.createKeyboardContainer();
|
|
5
|
-
});
|
|
6
3
|
this.activeInput = null;
|
|
7
4
|
this.isDragging = false;
|
|
8
5
|
this.offsetX = 0;
|
|
@@ -15,394 +12,6 @@ class Layout {
|
|
|
15
12
|
this.initEventListeners();
|
|
16
13
|
}
|
|
17
14
|
|
|
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
15
|
initEventListeners() {
|
|
407
16
|
document.querySelectorAll("input, textarea, form").forEach((element) => {
|
|
408
17
|
element.addEventListener("focus", (event) => {
|
|
@@ -457,25 +66,25 @@ class Layout {
|
|
|
457
66
|
}
|
|
458
67
|
|
|
459
68
|
startDrag(event) {
|
|
460
|
-
isDragging = true;
|
|
461
|
-
offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
|
|
462
|
-
offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
|
|
69
|
+
this.isDragging = true;
|
|
70
|
+
this.offsetX = event.clientX - document.getElementById("keyboard").offsetLeft;
|
|
71
|
+
this.offsetY = event.clientY - document.getElementById("keyboard").offsetTop;
|
|
463
72
|
|
|
464
73
|
document.addEventListener("mousemove", drag);
|
|
465
74
|
document.addEventListener("mouseup", () => {
|
|
466
|
-
isDragging = false;
|
|
75
|
+
this.isDragging = false;
|
|
467
76
|
document.removeEventListener("mousemove", drag);
|
|
468
77
|
});
|
|
469
78
|
}
|
|
470
79
|
|
|
471
80
|
drag(event) {
|
|
472
|
-
if (isDragging) {
|
|
81
|
+
if (this.isDragging) {
|
|
473
82
|
const keyboard = document.getElementById("keyboard");
|
|
474
83
|
keyboard.style.left = `${event.clientX - offsetX}px`;
|
|
475
84
|
keyboard.style.top = `${event.clientY - offsetY}px`;
|
|
476
85
|
}
|
|
477
86
|
}
|
|
478
|
-
|
|
87
|
+
|
|
479
88
|
toggleCapsLock() {
|
|
480
89
|
this.isCapsLock = !this.isCapsLock;
|
|
481
90
|
const capsLockKeys = document.querySelectorAll(".capslock");
|
|
@@ -700,4 +309,4 @@ class Layout {
|
|
|
700
309
|
}
|
|
701
310
|
}
|
|
702
311
|
|
|
703
|
-
|
|
312
|
+
export default Layout;
|
package/layout.js
ADDED
|
@@ -0,0 +1,398 @@
|
|
|
1
|
+
class keyboard {
|
|
2
|
+
constructor() {
|
|
3
|
+
document.addEventListener("DOMContentLoaded", () => {
|
|
4
|
+
this.createKeyboardContainer();
|
|
5
|
+
});
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
createKeyboardContainer() {
|
|
9
|
+
const keyboardContainer = document.createElement("div");
|
|
10
|
+
keyboardContainer.className = "keyboard";
|
|
11
|
+
keyboardContainer.id = "keyboard";
|
|
12
|
+
keyboardContainer.onmousedown = this.startDrag;
|
|
13
|
+
|
|
14
|
+
keyboardContainer.innerHTML = this.generateKeyboardHTML();
|
|
15
|
+
document.body.appendChild(keyboardContainer);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
generateKeyboardHTML() {
|
|
19
|
+
return `
|
|
20
|
+
<div class="keyboard-container">
|
|
21
|
+
${this.generateDropdown()}
|
|
22
|
+
${this.generateEnglishKeyboard()}
|
|
23
|
+
${this.generateThaiKeyboard()}
|
|
24
|
+
${this.generateNumpadKeyboard()}
|
|
25
|
+
${this.generateScrambledKeyboard()}
|
|
26
|
+
${this.generateEnglishScramble()}
|
|
27
|
+
${this.generateThaiScramble()}
|
|
28
|
+
</div>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
generateDropdown() {
|
|
33
|
+
return `
|
|
34
|
+
<div class="dropdown">
|
|
35
|
+
<button class="dropdown-button but" id="dropdownButton" style="color: black;">เลือกแป้นพิมพ์</button>
|
|
36
|
+
<div class="dropdown-content">
|
|
37
|
+
<button id="switch-toggle" onclick="changeDropdownName('Switch Language')">Switch Language</button>
|
|
38
|
+
<button id="numpad-toggle" onclick="changeDropdownName('Numpad Keyboard')">Numpad Keyboard</button>
|
|
39
|
+
<button id="scramble-toggle" onclick="changeDropdownName('Scramble Numpad')">Scramble Numpad</button>
|
|
40
|
+
<button id="scramble-toggle-thai" onclick="changeDropdownName('Thai Scramble')">Thai Scramble</button>
|
|
41
|
+
<button id="scramble-toggle-eng" onclick="changeDropdownName('English Scramble')">English Scramble</button>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
`;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
generateEnglishKeyboard() {
|
|
48
|
+
return `
|
|
49
|
+
<div id="english-keyboard" class="keyboard-layout">
|
|
50
|
+
<!-- English Keyboard Rows -->
|
|
51
|
+
<div class="keyboard-row">
|
|
52
|
+
<button class="key" data-normal="\`" data-shifted="%">\`</button>
|
|
53
|
+
<button class="key" data-normal="1" data-shifted="!">1</button>
|
|
54
|
+
<button class="key" data-normal="2" data-shifted="@">2</button>
|
|
55
|
+
<button class="key" data-normal="3" data-shifted="#">3</button>
|
|
56
|
+
<button class="key" data-normal="4" data-shifted="$">4</button>
|
|
57
|
+
<button class="key" data-normal="5" data-shifted="%">5</button>
|
|
58
|
+
<button class="key" data-normal="6" data-shifted="^">6</button>
|
|
59
|
+
<button class="key" data-normal="7" data-shifted="&">7</button>
|
|
60
|
+
<button class="key" data-normal="8" data-shifted="*">8</button>
|
|
61
|
+
<button class="key" data-normal="9" data-shifted="(">9</button>
|
|
62
|
+
<button class="key" data-normal="0" data-shifted=")">0</button>
|
|
63
|
+
<button class="key" data-normal="-" data-shifted="_">-</button>
|
|
64
|
+
<button class="key" data-normal="=" data-shifted="+">=</button>
|
|
65
|
+
<button class="key backspace">Backspace</button>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="keyboard-row">
|
|
69
|
+
<button class="key tab">Tab</button>
|
|
70
|
+
<button class="key" data-normal="q" data-shifted="Q">q</button>
|
|
71
|
+
<button class="key" data-normal="w" data-shifted="W">w</button>
|
|
72
|
+
<button class="key" data-normal="e" data-shifted="E">e</button>
|
|
73
|
+
<button class="key" data-normal="r" data-shifted="R">r</button>
|
|
74
|
+
<button class="key" data-normal="t" data-shifted="T">t</button>
|
|
75
|
+
<button class="key" data-normal="y" data-shifted="Y">y</button>
|
|
76
|
+
<button class="key" data-normal="u" data-shifted="U">u</button>
|
|
77
|
+
<button class="key" data-normal="i" data-shifted="I">i</button>
|
|
78
|
+
<button class="key" data-normal="o" data-shifted="O">o</button>
|
|
79
|
+
<button class="key" data-normal="p" data-shifted="P">p</button>
|
|
80
|
+
<button class="key" data-normal="[" data-shifted="{">[</button>
|
|
81
|
+
<button class="key" data-normal="]" data-shifted="}">]</button>
|
|
82
|
+
<button class="key" data-normal="\\" data-shifted="|">\\</button>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="keyboard-row">
|
|
86
|
+
<button class="key capslock">CapsLk</button>
|
|
87
|
+
<button class="key" data-normal="a" data-shifted="A">a</button>
|
|
88
|
+
<button class="key" data-normal="s" data-shifted="S">s</button>
|
|
89
|
+
<button class="key" data-normal="d" data-shifted="D">d</button>
|
|
90
|
+
<button class="key" data-normal="f" data-shifted="F">f</button>
|
|
91
|
+
<button class="key" data-normal="g" data-shifted="G">g</button>
|
|
92
|
+
<button class="key" data-normal="h" data-shifted="H">h</button>
|
|
93
|
+
<button class="key" data-normal="j" data-shifted="J">j</button>
|
|
94
|
+
<button class="key" data-normal="k" data-shifted="K">k</button>
|
|
95
|
+
<button class="key" data-normal="l" data-shifted="L">l</button>
|
|
96
|
+
<button class="key" data-normal=";" data-shifted=":">;</button>
|
|
97
|
+
<button class="key" data-normal="'" data-shifted=""">'</button>
|
|
98
|
+
<button class="key enter" style="width: 90px; top:20%">Enter</button>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="keyboard-row">
|
|
102
|
+
<button class="key shift" style="width: 120px;">Shift</button>
|
|
103
|
+
<button class="key" data-normal="z" data-shifted="Z">z</button>
|
|
104
|
+
<button class="key" data-normal="x" data-shifted="X">x</button>
|
|
105
|
+
<button class="key" data-normal="c" data-shifted="C">c</button>
|
|
106
|
+
<button class="key" data-normal="v" data-shifted="V">v</button>
|
|
107
|
+
<button class="key" data-normal="b" data-shifted="B">b</button>
|
|
108
|
+
<button class="key" data-normal="n" data-shifted="N">n</button>
|
|
109
|
+
<button class="key" data-normal="m" data-shifted="M">m</button>
|
|
110
|
+
<button class="key" data-normal="," data-shifted="<">,</button>
|
|
111
|
+
<button class="key" data-normal="." data-shifted=">">.</button>
|
|
112
|
+
<button class="key" data-normal="/" data-shifted="?">/</button>
|
|
113
|
+
<button class="key shift" style="width: 115px;">Shift</button>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="keyboard-row">
|
|
117
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
`;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
generateThaiKeyboard() {
|
|
124
|
+
return `
|
|
125
|
+
<div id="thai-keyboard" class="keyboard-layout" style="display: none;">
|
|
126
|
+
<!-- Thai Keyboard Rows -->
|
|
127
|
+
<div class="keyboard-row">
|
|
128
|
+
<button class="key" data-normal="_" data-shifted="%">_</button>
|
|
129
|
+
<button class="key" data-normal="ๅ" data-shifted="+">ๅ</button>
|
|
130
|
+
<button class="key" data-normal="/" data-shifted="๑">/</button>
|
|
131
|
+
<button class="key" data-normal="-" data-shifted="๒">-</button>
|
|
132
|
+
<button class="key" data-normal="ภ" data-shifted="๓">ภ</button>
|
|
133
|
+
<button class="key" data-normal="ถ" data-shifted="๔">ถ</button>
|
|
134
|
+
<button class="key" data-normal="ุ" data-shifted="ู">ู</button>
|
|
135
|
+
<button class="key" data-normal="ึ" data-shifted="ฺ">฿</button>
|
|
136
|
+
<button class="key" data-normal="ค" data-shifted="๕">ค</button>
|
|
137
|
+
<button class="key" data-normal="ต" data-shifted="๖">ต</button>
|
|
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 backspace">Backspace</button>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div class="keyboard-row">
|
|
145
|
+
<button class="key tab">Tab</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" data-normal="ั" data-shifted="ํ">ั</button>
|
|
152
|
+
<button class="key" data-normal="ี" data-shifted="๋">ี</button>
|
|
153
|
+
<button class="key" data-normal="ร" data-shifted="ณ">ร</button>
|
|
154
|
+
<button class="key" data-normal="น" data-shifted="ฯ">น</button>
|
|
155
|
+
<button class="key" data-normal="ย" data-shifted="ญ">ย</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
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="keyboard-row">
|
|
162
|
+
<button class="key capslock">CapsLock</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
|
+
<button class="key" data-normal="่" data-shifted="๋">่</button>
|
|
170
|
+
<button class="key" data-normal="า" data-shifted="ษ">า</button>
|
|
171
|
+
<button class="key" data-normal="ส" data-shifted="ศ">ส</button>
|
|
172
|
+
<button class="key" data-normal="ว" data-shifted="ซ">ว</button>
|
|
173
|
+
<button class="key" data-normal="ง" data-shifted=".">ง</button>
|
|
174
|
+
<button class="key enter" style="width: 90px; top:20%">Enter</button>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<div class="keyboard-row">
|
|
178
|
+
<button class="key shift" style="width: 120px;">Shift</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" data-normal="ื" data-shifted="์">ื</button>
|
|
185
|
+
<button class="key" data-normal="ท" data-shifted="?">ท</button>
|
|
186
|
+
<button class="key" data-normal="ม" data-shifted="ฒ">ม</button>
|
|
187
|
+
<button class="key" data-normal="ใ" data-shifted="ฬ">ใ</button>
|
|
188
|
+
<button class="key" data-normal="ฝ" data-shifted="ฦ">ฝ</button>
|
|
189
|
+
<button class="key shift" style="width: 115px;">Shift</button>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="keyboard-row">
|
|
193
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
`;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
generateNumpadKeyboard() {
|
|
200
|
+
return `
|
|
201
|
+
<div id="numpad-keyboard" class="keyboard-layout" style="display: none;">
|
|
202
|
+
<div class="keyboard-row">
|
|
203
|
+
<button class="key">+</button>
|
|
204
|
+
<button class="key">-</button>
|
|
205
|
+
<button class="key">*</button>
|
|
206
|
+
<button class="key">/</button>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="keyboard-row">
|
|
209
|
+
<button class="key">1</button>
|
|
210
|
+
<button class="key">2</button>
|
|
211
|
+
<button class="key">3</button>
|
|
212
|
+
<button class="key">%</button>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<div class="keyboard-row">
|
|
216
|
+
<button class="key">4</button>
|
|
217
|
+
<button class="key">5</button>
|
|
218
|
+
<button class="key">6</button>
|
|
219
|
+
<button class="key">.</button>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="keyboard-row">
|
|
223
|
+
<button class="key">7</button>
|
|
224
|
+
<button class="key">8</button>
|
|
225
|
+
<button class="key">9</button>
|
|
226
|
+
<button class="key">=</button>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div class="keyboard-row">
|
|
230
|
+
<button class="key">00</button>
|
|
231
|
+
<button class="key">0</button>
|
|
232
|
+
<button class="key backspace" style="width: 90px;">Backspace</button>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
`;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
generateScrambledKeyboard() {
|
|
239
|
+
return `
|
|
240
|
+
<div id="scrambled-keyboard" class="keyboard-layout" style="display: none;">
|
|
241
|
+
<!-- เพิ่มปุ่มสำหรับคีย์บอร์ด Scramble -->
|
|
242
|
+
<div class="keyboard-row">
|
|
243
|
+
<button class="key plus">+</button>
|
|
244
|
+
<button class="key minus">-</button>
|
|
245
|
+
<button class="key multiply">*</button>
|
|
246
|
+
<button class="key divide">/</button>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="keyboard-row">
|
|
249
|
+
<button class="key">1</button>
|
|
250
|
+
<button class="key">2</button>
|
|
251
|
+
<button class="key">3</button>
|
|
252
|
+
<button class="key modulo">%</button>
|
|
253
|
+
</div>
|
|
254
|
+
|
|
255
|
+
<div class="keyboard-row">
|
|
256
|
+
<button class="key">4</button>
|
|
257
|
+
<button class="key">5</button>
|
|
258
|
+
<button class="key">6</button>
|
|
259
|
+
<button class="key decimal">.</button>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div class="keyboard-row">
|
|
263
|
+
<button class="key">7</button>
|
|
264
|
+
<button class="key">8</button>
|
|
265
|
+
<button class="key">9</button>
|
|
266
|
+
<button class="key equals">=</button>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<div class="keyboard-row">
|
|
270
|
+
<button class="key double-zero">00</button>
|
|
271
|
+
<button class="key">0</button>
|
|
272
|
+
<button class="key backspace" style="width: 90px;">Backspace</button>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
`;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
generateEnglishScramble() {
|
|
279
|
+
return `
|
|
280
|
+
<div id="english-Scramble" class="keyboard-layout" style="display: none;">
|
|
281
|
+
<!-- English Keyboard Rows -->
|
|
282
|
+
<div class="keyboard-row">
|
|
283
|
+
<button class="key" data-normal="q" data-shifted="Q">q</button>
|
|
284
|
+
<button class="key" data-normal="w" data-shifted="W">w</button>
|
|
285
|
+
<button class="key" data-normal="e" data-shifted="E">e</button>
|
|
286
|
+
<button class="key" data-normal="r" data-shifted="R">r</button>
|
|
287
|
+
<button class="key" data-normal="t" data-shifted="T">t</button>
|
|
288
|
+
<button class="key" data-normal="y" data-shifted="Y">y</button>
|
|
289
|
+
<button class="key" data-normal="u" data-shifted="U">u</button>
|
|
290
|
+
<button class="key" data-normal="i" data-shifted="I">i</button>
|
|
291
|
+
<button class="key" data-normal="o" data-shifted="O">o</button>
|
|
292
|
+
<button class="key" data-normal="p" data-shifted="P">p</button>
|
|
293
|
+
<button class="key backspace">Backspace</button>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<div class="keyboard-row">
|
|
297
|
+
<button class="key capslock">CapsLk</button>
|
|
298
|
+
<button class="key" data-normal="s" data-shifted="S">s</button>
|
|
299
|
+
<button class="key" data-normal="d" data-shifted="D">d</button>
|
|
300
|
+
<button class="key" data-normal="f" data-shifted="F">f</button>
|
|
301
|
+
<button class="key" data-normal="g" data-shifted="G">g</button>
|
|
302
|
+
<button class="key" data-normal="h" data-shifted="H">h</button>
|
|
303
|
+
<button class="key" data-normal="j" data-shifted="J">j</button>
|
|
304
|
+
<button class="key" data-normal="k" data-shifted="K">k</button>
|
|
305
|
+
<button class="key" data-normal="l" data-shifted="L">l</button>
|
|
306
|
+
<button class="key enter" style="width: 90px; top:20%">Enter</button>
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div class="keyboard-row">
|
|
310
|
+
<button class="key shift" style="width: 90px;">Shift</button>
|
|
311
|
+
<button class="key" data-normal="z" data-shifted="Z">z</button>
|
|
312
|
+
<button class="key" data-normal="x" data-shifted="X">x</button>
|
|
313
|
+
<button class="key" data-normal="c" data-shifted="C">c</button>
|
|
314
|
+
<button class="key" data-normal="v" data-shifted="V">v</button>
|
|
315
|
+
<button class="key" data-normal="b" data-shifted="B">b</button>
|
|
316
|
+
<button class="key" data-normal="n" data-shifted="N">n</button>
|
|
317
|
+
<button class="key" data-normal="m" data-shifted="M">m</button>
|
|
318
|
+
<button class="key" data-normal="a" data-shifted="A">m</button>
|
|
319
|
+
<button class="key shift" style="width: 100px;">Shift</button>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<div class="keyboard-row">
|
|
323
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
`;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
generateThaiScramble() {
|
|
330
|
+
return `
|
|
331
|
+
<div id="thai-Scramble" class="keyboard-layout" style="display: none;">
|
|
332
|
+
<!-- Thai Keyboard Rows -->
|
|
333
|
+
<div class="keyboard-row">
|
|
334
|
+
<button class="key" data-normal="ก" data-shifted="ก">ก</button>
|
|
335
|
+
<button class="key" data-normal="ข" data-shifted="ข">ข</button>
|
|
336
|
+
<button class="key" data-normal="ฃ" data-shifted="ฃ">ฃ</button>
|
|
337
|
+
<button class="key" data-normal="ค" data-shifted="ค">ค</button>
|
|
338
|
+
<button class="key" data-normal="ฅ" data-shifted="ฅ">ฅ</button>
|
|
339
|
+
<button class="key" data-normal="ฆ" data-shifted="ฆ">ฆ</button>
|
|
340
|
+
<button class="key" data-normal="ง" data-shifted="ง">ง</button>
|
|
341
|
+
<button class="key" data-normal="จ" data-shifted="จ">จ</button>
|
|
342
|
+
<button class="key" data-normal="ฉ" data-shifted="ฉ">ฉ</button>
|
|
343
|
+
<button class="key" data-normal="ช" data-shifted="ช">ช</button>
|
|
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 backspace" style="width: 86px;">Backspace</button>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
<div class="keyboard-row">
|
|
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" data-normal="ต" data-shifted="ต">ต</button>
|
|
359
|
+
<button class="key" data-normal="ถ" data-shifted="ถ">ถ</button>
|
|
360
|
+
<button class="key" data-normal="ท" data-shifted="ท">ท</button>
|
|
361
|
+
<button class="key" data-normal="ธ" data-shifted="ธ">ธ</button>
|
|
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
|
+
</div>
|
|
369
|
+
|
|
370
|
+
<div class="keyboard-row">
|
|
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
|
+
<button class="key" data-normal="ฦ" data-shifted="ฦ">ฦ</button>
|
|
379
|
+
<button class="key" data-normal="ว" data-shifted="ว">ว</button>
|
|
380
|
+
<button class="key" data-normal="ศ" data-shifted="ศ">ศ</button>
|
|
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
|
+
</div>
|
|
388
|
+
|
|
389
|
+
<div class="keyboard-row">
|
|
390
|
+
<button class="key space-bar" data-normal=" " data-shifted=" "> </button>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
<script src="index.js"></script>
|
|
394
|
+
`;
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
export default keyboard;
|