/
layouts.html
181 lines (159 loc) · 7.13 KB
/
layouts.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Language Layouts</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.min.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.keyboard.extension-typing.js"></script>
<!-- preloaded keyboard layout -->
<script src="layouts/albanian.js" charset="utf-8"></script>
<!-- theme switcher -->
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script>
// Change display language, if the definitions are available
if (typeof(language) === 'undefined') { var language = {}; };
var showKb = function(name, lang){
if (language.hasOwnProperty(lang)){
$.extend(true, $.keyboard.defaultOptions, language[lang]);
} else {
$.extend(true, $.keyboard.defaultOptions, language.basic);
}
$('#multi').keyboard({
layout: name,
usePreview: false,
alwaysOpen: true
})
.addTyping();
};
// Renaming some of the default keyboard key names (including symbols)
// *Note* this will effect ALL layouts on this page - but will be overridden by specific layout languages
language.basic = {
display : {
'a' : '\u2714:Accept (Shift-Enter)', // check mark - same action as accept
'accept' : '\u2714 Accept:Accept (Shift-Enter)', // check mark
'alt' : 'AltGr:Alternate Graphemes',
'b' : '\u2190:Backspace', // Left arrow (same as ←)
'bksp' : ($.browser.msie ? '\u2190 Bksp:Backspace' : '\u232b Bksp:Backspace'), // Arrow with X (not in IE) or Left arrow (same as ←)
'c' : '\u2716:Cancel (Esc)', // big X, close - same action as cancel
'cancel' : '\u2716 Cancel:Cancel (Esc)', // big X, close - same action as cancel
'clear' : 'C:Clear', // clear num pad
'combo' : '\u00f6:Toggle Combo Keys',
'dec' : '.:Decimal', // decimal point for num pad (optional), change '.' to ',' for European format
'e' : '\u21b5:Enter', // down, then left arrow - enter symbol
'enter' : '\u21b5 Enter:Enter', // down, then left arrow - enter symbol
'lock' : '\u21ea Lock:Caps Lock', // caps lock
's' : '\u21e7:Shift', // thick hollow up arrow
'shift' : '\u21e7 Shift:Shift', // thick hollow up arrow
'sign' : '\u00b1:Change Sign', // +/- sign for num pad
'space' : ' :Space',
't' : '\u21e5:Tab', // right arrow to bar (used since this virtual keyboard works with one directional tabs)
'tab' : '\u21e5 Tab:Tab' // right arrow to bar (used since this virtual keyboard works with one directional tabs)
},
// Message added to the key title while hovering, if the mousewheel plugin exists
wheelMessage : 'Use mousewheel to see other keys'
};
$(function(){
// Theme switcher
$('#switcher').themeswitcher();
$('#lang').change(function(){
var kb = $('#multi'),
opt = $(this).find('option:selected'),
layout = opt.attr('class'),
file = $(this).val();
$('h2').text(opt.text());
$('#multi')[file.match('arabic') ? 'addClass' : 'removeClass']('rtl');
if (!$('script[src*=' + file + ']').length) {
$.getScript('layouts/' + file + '.js', function(){
if (kb.data('keyboard')) { kb.getkeyboard().destroy(); }
showKb( layout, file );
});
} else {
showKb( layout, file );
}
}).trigger('change');
});
</script>
<style>
/* making a few keys wider, to include the symbol - use .ui-keyboard-actionkey to affect all (including space) */
.ui-keyboard-accept, .ui-keyboard-cancel, .ui-keyboard-bksp, .ui-keyboard-enter, .ui-keyboard-shift {
font-size: .8em;
width: 5.2em;
height: 2em;
}
.rtl {
direction: rtl;
text-align: right;
}
</style>
</head>
<body>
<div id="page-wrap">
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="basic.html">Basic</a>
<a href="mobile.html">Mobile</a>
<a class="current" href="layouts.html">Layouts</a>
<a href="navigate.html">Navigate</a>
<a href="calculator.html">Calculator</a>
<a class="play" href="http://jsfiddle.net/Mottie/Em8sG/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard Language Layouts</a></h1>
<h4>This is a work in progress.</h4>
<div id="switcher"></div>
<br>
<div class="block2">
<select id="lang">
<!-- value="file name", class="layout name", Title -->
<option value="albanian" class="albanian-qwerty">Albanian (qwerty)</option>
<option value="albanian" class="albanian-qwertz">Albanian (qwertz)</option>
<option value="arabic" class="arabic-azerty">Arabic (azerty)</option>
<option value="arabic" class="arabic-qwerty-1">Arabic (qwerty-1)</option>
<option value="arabic" class="arabic-qwerty-2">Arabic (qwerty-2)</option>
<option value="arabic" class="arabic-qwerty-3">Arabic (qwerty-3)</option>
<option value="arabic" class="arabic-qwerty-4">Arabic (qwerty-4)</option>
<option value="belarusian" class="belarusian-qwerty">Belarusian (Belarus)</option>
<option value="bengali" class="bengali-qwerty-1">Bengali (qwerty-1)</option>
<option value="bengali" class="bengali-qwerty-2">Bengali (qwerty-2)</option>
<option value="bulgarian" class="bulgarian-qwerty">Bulgarian (qwerty)</option>
<option value="catalan" class="catalan-qwerty">Catalan (qwerty)</option>
<option value="danish" class="danish-qwerty">Danish (qwerty)</option>
<option value="french" class="french-azerty-1">French (azerty-1)</option>
<option value="french" class="french-azerty-2">French (azerty-2)</option>
<option value="german" class="german-qwertz-1">German (qwertz-1)</option>
<option value="german" class="german-qwertz-2">German (qwertz-2)</option>
<option value="russian" class="russian-qwerty">Russian (qwerty)</option>
<option value="swedish" class="swedish-qwerty">Swedish (qwerty)</option>
<option value="swedish" class="swedish-dvorak">Swedish (dvorak)</option>
<!--
<option value="" class=""></option>
-->
</select>
<div style="height: 50px;"></div>
<h2></h2>
<input id="multi" type="text" />
</div>
<br class="clear" />
<div id="footer2">
<div>
If you find any errors, please submit an <a href="https://github.com/Mottie/Keyboard/issues">issue</a>.<br>
Or if you would like to contribute a layout, please email me at <a href="%6D%61%69%6C%74%6F%3Aw%6Fwm%6Ftty%40g%6Dail%2Ec%6Fm">wowmotty at gmail dot com</a>
</div>
</div>
</div>
</body>
</html>