-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
543 lines (470 loc) · 19.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron app with virtual keyboard!</title>
<!-- <link rel="stylesheet" href="https://mottie.github.io/Keyboard/css/keyboard.css"> -->
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"> -->
<style>
.ui-keyboard {
background-color: beige;
/* text-align: center;
-moz-box-shadow: 0 -15px 15px #FFFFFF;
-webkit-box-shadow: 0 -15px 15px #FFFFFF;
-ms-box-shadow: 0 -15px 15px #FFFFFF;
-o-box-shadow: 0 -15px 15px #FFFFFF;
box-shadow: 0 -15px 15px #FFFFFF;
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
-ms-border-radius: 0 0 0 0 !important;
-o-border-radius: 0 0 0 0 !important;
border-radius: 0 0 0 0 !important;
font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
left: 0px !important;
top: auto !important;
bottom: 0px;
position: fixed !important;
width: 100%; */
}
.ui-keyboard button {
position: relative;
background: transparent;
text-align: center;
color: black;
float: left;
border-radius: 0.3em;
margin: 0.2em;
padding: 0.2em;
width: 3.3em;
height: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-user-select: none;
border: 1px solid #5174EC;
border-bottom-color: #5174EC;
}
</style>
</head>
<body>
<h1>Electron app with virtual keyboard!</h1>
<!-- <img id="icon" src="https://mottie.github.io/Keyboard/docs/css/images/keyboard.png" /> -->
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! " />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 1" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 2" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 3" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 4" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 5" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 6" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 7" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 8" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 9" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 10" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 11" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 12" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 13" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 14" />
</div>
<div id="wrap">
<input type="text" placeholder="Escriba algo!!! 15" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui-custom.min.js"></script> -->
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script>
$(document).ready(function () {
/* VIRTUAL KEYBOARD DEMO - https://github.com/Mottie/Keyboard */
$(function () {
// text that is typed when when pressing the
// keyboard icon (actual code using .typeIn()
// is at the bottom of this code block
var simulateTyping = "Hello World!!1\b <3";
// create a new language (love, awww) by copying the english language
// file. we're doing this just for this demo, so we can add "<3" to the
// combo regex
$.keyboard.language.love = $.extend($.keyboard.language.en);
$('input').keyboard({
// set this to ISO 639-1 language code to override language set by
// the layout: http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
// language defaults to ["en"] if not found
language: ['love'],
rtl: false,
// *** choose layout & positioning ***
// choose from 'qwerty', 'alpha',
// 'international', 'dvorak', 'num' or
// 'custom' (to use the customLayout below)
layout: 'qwerty',
customLayout: {
'default': [
'd e f a u l t',
'{meta1} {meta2} {accept} {cancel}'
],
'meta1': [
'm y m e t a 1',
'{meta1} {meta2} {accept} {cancel}'
],
'meta2': [
'M Y M E T A 2',
'{meta1} {meta2} {accept} {cancel}'
]
},
// Used by jQuery UI position utility
position: {
// null = attach to input/textarea;
// use $(sel) to attach elsewhere
of: null,
my: 'center top',
at: 'center top',
// used when "usePreview" is false
at2: 'center bottom'
},
// allow jQuery position utility to reposition the keyboard on
// window resize
reposition: true,
// true: preview added above keyboard;
// false: original input/textarea used
usePreview: true,
// if true, the keyboard will always be visible
alwaysOpen: false,
// give the preview initial focus when the keyboard
// becomes visible
initialFocus: true,
// Avoid focusing the input the keyboard is attached to
noFocus: false,
// if true, keyboard will remain open even if
// the input loses focus.
stayOpen: false,
// Prevents the keyboard from closing when the user clicks or
// presses outside the keyboard. The `autoAccept` option must
// also be set to true when this option is true or changes are lost
userClosed: false,
// if true, keyboard will not close if you press escape.
ignoreEsc: false,
// *** change keyboard language & look ***
display: {
'meta1': '\u2666', // Diamond
'meta2': '\u2665', // Heart
// check mark (accept)
'a': '\u2714:Accept (Shift-Enter)',
'accept': 'Accept:Accept (Shift-Enter)',
'alt': 'AltGr:Alternate Graphemes',
// Left arrow (same as ←)
'b': '\u2190:Backspace',
'bksp': 'Bksp:Backspace',
// big X, close/cancel
'c': '\u2716:Cancel (Esc)',
'cancel': 'Cancel:Cancel (Esc)',
// clear num pad
'clear': 'C:Clear',
'combo': '\u00f6:Toggle Combo Keys',
// num pad decimal '.' (US) & ',' (EU)
'dec': '.:Decimal',
// down, then left arrow - enter symbol
'e': '\u21b5:Enter',
'empty': '\u00a0', //
'enter': 'Enter:Enter',
// left arrow (move caret)
'left': '\u2190',
// caps lock
'lock': '\u21ea Lock:Caps Lock',
'next': 'Next \u21e8',
'prev': '\u21e6 Prev',
// right arrow (move caret)
'right': '\u2192',
// thick hollow up arrow
's': '\u21e7:Shift',
'shift': 'Shift:Shift',
// +/- sign for num pad
'sign': '\u00b1:Change Sign',
'space': '\u00a0:Space',
// right arrow to bar
// \u21b9 is the true tab symbol
't': '\u21e5:Tab',
'tab': '\u21e5 Tab:Tab',
// replaced by an image
'toggle': ' ',
// added to titles of keys
// accept key status when acceptValid:true
'valid': 'valid',
'invalid': 'invalid',
// combo key states
'active': 'active',
'disabled': 'disabled'
},
// Message added to the key title while hovering,
// if the mousewheel plugin exists
wheelMessage: 'Use mousewheel to see other keys',
css: {
// input & preview
input: 'ui-widget-content ui-corner-all',
// keyboard container
container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
// keyboard container extra class (same as container, but separate)
popup: '',
// default state
buttonDefault: 'ui-state-default ui-corner-all',
// hovered button
buttonHover: 'ui-state-hover',
// Action keys (e.g. Accept, Cancel, Tab, etc);
// this replaces "actionClass" option
buttonAction: 'ui-state-active',
// Active keys
// (e.g. shift down, meta keyset active, combo keys active)
buttonActive: 'ui-state-active',
// used when disabling the decimal button {dec}
// when a decimal exists in the input area
buttonDisabled: 'ui-state-disabled',
// {empty} button class name
buttonEmpty: 'ui-keyboard-empty'
},
// *** Useability ***
// Auto-accept content when clicking outside the
// keyboard (popup will close)
autoAccept: false,
// Auto-accept content even if the user presses escape
// (only works if `autoAccept` is `true`)
autoAcceptOnEsc: false,
// Prevents direct input in the preview window when true
lockInput: false,
// Prevent keys not in the displayed keyboard from being
// typed in
restrictInput: false,
// Additional allowed characters while restrictInput is true
restrictInclude: '', // e.g. 'a b foo \ud83d\ude38'
// Check input against validate function, if valid the
// accept button is clickable; if invalid, the accept
// button is disabled.
acceptValid: true,
// Auto-accept when input is valid; requires `acceptValid`
// set `true` & validate callback
autoAcceptOnValid: false,
// if acceptValid is true & the validate function returns
// a false, this option will cancel a keyboard close only
// after the accept button is pressed
cancelClose: true,
// tab to go to next, shift-tab for previous
// (default behavior)
tabNavigation: false,
// enter for next input; shift-enter accepts content &
// goes to next shift + "enterMod" + enter ("enterMod"
// is the alt as set below) will accept content and go
// to previous in a textarea
enterNavigation: false,
// mod key options: 'ctrlKey', 'shiftKey', 'altKey',
// 'metaKey' (MAC only)
// alt-enter to go to previous;
// shift-alt-enter to accept & go to previous
enterMod: 'altKey',
// if true, the next button will stop on the last
// keyboard input/textarea; prev button stops at first
// if false, the next button will wrap to target the
// first input/textarea; prev will go to the last
stopAtEnd: true,
// Set this to append the keyboard immediately after the
// input/textarea it is attached to. This option works
// best when the input container doesn't have a set width
// and when the "tabNavigation" option is true
appendLocally: false,
// When appendLocally is false, the keyboard will be appended
// to this object
appendTo: 'body',
// If false, the shift key will remain active until the
// next key is (mouse) clicked on; if true it will stay
// active until pressed again
stickyShift: true,
// Prevent pasting content into the area
preventPaste: false,
// caret places at the end of any text
caretToEnd: false,
// caret stays this many pixels from the edge of the input
// while scrolling left/right; use "c" or "center" to center
// the caret while scrolling
scrollAdjustment: 10,
// Set the max number of characters allowed in the input,
// setting it to false disables this option
maxLength: false,
// allow inserting characters @ caret when maxLength is set
maxInsert: true,
// Mouse repeat delay - when clicking/touching a virtual
// keyboard key, after this delay the key will start
// repeating
repeatDelay: 500,
// Mouse repeat rate - after the repeatDelay, this is the
// rate (characters per second) at which the key is
// repeated. Added to simulate holding down a real keyboard
// key and having it repeat. I haven't calculated the upper
// limit of this rate, but it is limited to how fast the
// javascript can process the keys. And for me, in Firefox,
// it's around 20.
repeatRate: 20,
// resets the keyboard to the default keyset when visible
resetDefault: false,
// Event (namespaced) on the input to reveal the keyboard.
// To disable it, just set it to ''.
openOn: 'focus',
// Event (namepaced) for when the character is added to the
// input (clicking on the keyboard)
keyBinding: 'mousedown touchstart',
// enable/disable mousewheel functionality
// enabling still depends on the mousewheel plugin
useWheel: true,
// combos (emulate dead keys)
// if user inputs `a the script converts it to à,
// ^o becomes ô, etc.
useCombos: true,
// if you add a new combo, you will need to update the
// regex below
combos: {
// uncomment out the next line, then read the Combos
//Regex section below
'<': { 3: '\u2665' }, // turn <3 into ♥ - change regex below
'a': { e: "\u00e6" }, // ae ligature
'A': { E: "\u00c6" },
'o': { e: "\u0153" }, // oe ligature
'O': { E: "\u0152" }
},
// *** Methods ***
// Callbacks - attach a function to any of these
// callbacks as desired
initialized: function (e, keyboard, el) { },
beforeVisible: function (e, keyboard, el) { },
visible: function (e, keyboard, el) { },
beforeInsert: function (e, keyboard, el, textToAdd) { return textToAdd; },
change: function (e, keyboard, el) { },
beforeClose: function (e, keyboard, el, accepted) { },
accepted: function (e, keyboard, el) { },
canceled: function (e, keyboard, el) { },
restricted: function (e, keyboard, el) { },
hidden: function (e, keyboard, el) { },
// called instead of base.switchInput
// Go to next or prev inputs
// goToNext = true, then go to next input;
// if false go to prev
// isAccepted is from autoAccept option or
// true if user presses shift-enter
switchInput: function (keyboard, goToNext, isAccepted) { },
/*
// build key callback
buildKey : function( keyboard, data ) {
/* data = {
// READ ONLY
isAction: [boolean] true if key is an action key
// name... may include decimal ascii value of character
// prefix = 'ui-keyboard-'
name : [string] key class name suffix
value : [string] text inserted (non-action keys)
title : [string] title attribute of key
action : [string] keyaction name
// html includes a <span> wrapping the text
html : [string] HTML of the key;
// DO NOT MODIFY THE ABOVE SETTINGS
// use to modify key HTML
$key : [object] jQuery selector of key already added to keyboard
}
* /
data.$key.html('<span class="ui-keyboard-text">Foo</span>');
return data;
},
*/
// this callback is called just before the "beforeClose"
// to check the value if the value is valid, return true
// and the keyboard will continue as it should (close if
// not always open, etc)
// if the value is not value, return false and the clear
// the keyboard value ( like this
// "keyboard.$preview.val('');" ), if desired
validate: function (keyboard, value, isClosing) {
return true;
}
})
// activate the typing extension
.addTyping({
showTyping: true,
delay: 250
});
/* Combos Regex -
You could change $.keyboard.comboRegex so that it applies to all
keyboards, but if a specific layout language has a comboRegex defined,
it has precidence over this setting. This regex is used to match combos
to combine, the first part looks for the accent/letter and the second
part matches the following letter so lets say you want to do something
crazy like turn "<3" into a heart. Add this to the
combos '<' : { 3: "\u2665" } and add a comma to the end if needed.
Then change the regex to this: /([<`\'~\^\"ao])([a-z3])/mig;
( first part )( 2nd ) */
$.keyboard.language.love.comboRegex = /([<`\'~\^\"ao])([a-z3])/mig;
/* if you look close at the regex, all that was added was "<" to the
beginning of the first part; some characters need to be escaped with a
backslash in front because they mean something else in regex. The
second part has a 3 added after the 'a-z', so that should cover both
parts :P */
// Typing Extension
$('#icon').click(function () {
var kb = $('#keyboard').getkeyboard();
// typeIn( text, delay, callback );
kb.reveal().typeIn(simulateTyping, 500, function () {
// do something after text is added
// kb.accept();
});
});
});
});
</script>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>