js_lis 1.0.3 → 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 +0 -392
- 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) => {
|
|
@@ -701,4 +310,3 @@ class Layout {
|
|
|
701
310
|
}
|
|
702
311
|
|
|
703
312
|
export default Layout;
|
|
704
|
-
|
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;
|