2 /* ***** BEGIN LICENSE BLOCK *****
3 * Version: MPL 1.1/GPL 2.0/LGPL 2.1
5 * The contents of this file are subject to the Mozilla Public License Version
6 * 1.1 (the "License"); you may not use this file except in compliance with
7 * the License. You may obtain a copy of the License at
8 * http://www.mozilla.org/MPL/
10 * Software distributed under the License is distributed on an "AS IS" basis,
11 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
12 * for the specific language governing rights and limitations under the
15 * The Original Code is guac-common-js.
17 * The Initial Developer of the Original Code is
19 * Portions created by the Initial Developer are Copyright (C) 2010
20 * the Initial Developer. All Rights Reserved.
24 * Alternatively, the contents of this file may be used under the terms of
25 * either the GNU General Public License Version 2 or later (the "GPL"), or
26 * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
27 * in which case the provisions of the GPL or the LGPL are applicable instead
28 * of those above. If you wish to allow use of your version of this file only
29 * under the terms of either the GPL or the LGPL, and not to allow others to
30 * use your version of this file under the terms of the MPL, indicate your
31 * decision by deleting the provisions above and replace them with the notice
32 * and other provisions required by the GPL or the LGPL. If you do not delete
33 * the provisions above, a recipient may use your version of this file under
34 * the terms of any one of the MPL, the GPL or the LGPL.
36 * ***** END LICENSE BLOCK ***** */
38 // Guacamole namespace
39 var Guacamole = Guacamole || {};
42 * Dynamic on-screen keyboard. Given the URL to an XML keyboard layout file,
43 * this object will download and use the XML to construct a clickable on-screen
44 * keyboard with its own key events.
47 * @param {String} url The URL of an XML keyboard layout file.
49 Guacamole.OnScreenKeyboard = function(url) {
51 var on_screen_keyboard = this;
53 var scaledElements = [];
56 var currentModifier = 1;
58 // Returns a unique power-of-two value for the modifier with the
59 // given name. The same value will be returned for the same modifier.
60 function getModifier(name) {
62 var value = modifiers[name];
65 // Get current modifier, advance to next
66 value = currentModifier;
67 currentModifier <<= 1;
69 // Store value of this modifier
70 modifiers[name] = value;
78 function ScaledElement(element, width, height, scaleFont) {
83 this.scale = function(pixels) {
84 element.style.width = (width * pixels) + "px";
85 element.style.height = (height * pixels) + "px";
88 element.style.lineHeight = (height * pixels) + "px";
89 element.style.fontSize = pixels + "px";
95 // For each child of element, call handler defined in next
96 function parseChildren(element, next) {
98 var children = element.childNodes;
99 for (var i=0; i<children.length; i++) {
102 var child = children[i];
104 // Do not parse text nodes
108 // Get handler for node
109 var handler = next[child.tagName];
111 // Call handler if defined
115 // Throw exception if no handler
118 "Unexpected " + child.tagName
119 + " within " + element.tagName
127 var keyboard = document.createElement("div");
128 keyboard.className = "guac-keyboard";
130 // Retrieve keyboard XML
131 var xmlhttprequest = new XMLHttpRequest();
132 xmlhttprequest.open("GET", url, false);
133 xmlhttprequest.send(null);
135 var xml = xmlhttprequest.responseXML;
139 function parse_row(e) {
141 var row = document.createElement("div");
142 row.className = "guac-keyboard-row";
146 "column": function(e) {
147 row.appendChild(parse_column(e));
150 "gap": function parse_gap(e) {
153 var gap_size = e.attributes["size"];
156 var gap = document.createElement("div");
157 gap.className = "guac-keyboard-gap";
162 gap_units = parseFloat(gap_size.value);
164 scaledElements.push(new ScaledElement(gap, gap_units, gap_units));
165 row.appendChild(gap);
169 "key": function parse_key(e) {
172 var key_size = e.attributes["size"];
173 var key_class = e.attributes["class"];
176 var key_element = document.createElement("div");
177 key_element.className = "guac-keyboard-key";
179 // Append class if specified
181 key_element.className += " " + key_class.value;
183 // Position keys using container div
184 var key_container_element = document.createElement("div");
185 key_container_element.className = "guac-keyboard-key-container";
186 key_container_element.appendChild(key_element);
189 var key = new Guacamole.OnScreenKeyboard.Key();
194 key_units = parseFloat(key_size.value);
196 key.size = key_units;
199 "cap": function parse_cap(e) {
202 var required = e.attributes["if"];
203 var modifier = e.attributes["modifier"];
204 var keysym = e.attributes["keysym"];
205 var sticky = e.attributes["sticky"];
206 var cap_class = e.attributes["class"];
208 // Get content of key cap
209 var content = e.textContent;
212 var real_keysym = null;
214 real_keysym = parseInt(keysym.value);
216 // If no keysym specified, try to get from key content
217 else if (content.length == 1) {
219 var charCode = content.charCodeAt(0);
220 if (charCode >= 0x0000 && charCode <= 0x00FF)
221 real_keysym = charCode;
222 else if (charCode >= 0x0100 && charCode <= 0x10FFFF)
223 real_keysym = 0x01000000 | charCode;
228 var cap = new Guacamole.OnScreenKeyboard.Cap(content, real_keysym);
231 cap.modifier = modifier.value;
233 // Create cap element
234 var cap_element = document.createElement("div");
235 cap_element.className = "guac-keyboard-cap";
236 cap_element.textContent = content;
237 key_element.appendChild(cap_element);
239 // Append class if specified
241 cap_element.className += " " + cap_class.value;
243 // Get modifier value
244 var modifierValue = 0;
247 // Get modifier value for specified comma-delimited
248 // list of required modifiers.
249 var requirements = required.value.split(",");
250 for (var i=0; i<requirements.length; i++) {
251 modifierValue |= getModifier(requirements[i]);
252 cap_element.classList.add("guac-keyboard-requires-" + requirements[i]);
253 key_element.classList.add("guac-keyboard-uses-" + requirements[i]);
259 key.modifierMask |= modifierValue;
260 key.caps[modifierValue] = cap;
265 scaledElements.push(new ScaledElement(key_container_element, key_units, 1, true));
266 row.appendChild(key_container_element);
268 // Set up click handler for key
269 key_element.onmousedown =
270 key_element.ontouchstart = function() {
272 // Press key if not yet pressed
275 key_element.classList.add("guac-keyboard-pressed");
277 // Get current cap based on modifier state
278 var cap = key.getCap(on_screen_keyboard.modifiers);
280 // Update modifier state
283 // Construct classname for modifier
284 var modifierClass = "guac-keyboard-modifier-" + cap.modifier;
285 var modifierFlag = getModifier(cap.modifier);
287 // Toggle modifier state
288 on_screen_keyboard.modifiers ^= modifierFlag;
290 // Activate modifier if pressed
291 if (on_screen_keyboard.modifiers & modifierFlag)
292 keyboard.classList.add(modifierClass);
294 // Deactivate if not pressed
296 keyboard.classList.remove(modifierClass);
301 if (on_screen_keyboard.onkeydown && cap.keysym)
302 on_screen_keyboard.onkeydown(cap.keysym);
304 // Mark key as pressed
311 key_element.onmouseup =
312 key_element.onmouseout =
313 key_element.ontouchend = function() {
315 // Release key if currently pressed
318 // Get current cap based on modifier state
319 var cap = key.getCap(on_screen_keyboard.modifiers);
321 key_element.classList.remove("guac-keyboard-pressed");
324 if (on_screen_keyboard.onkeyup && cap.keysym)
325 on_screen_keyboard.onkeyup(cap.keysym);
327 // Mark key as released
342 function parse_column(e) {
344 var col = document.createElement("div");
345 col.className = "guac-keyboard-column";
347 var align = col.attributes["align"];
350 col.style.textAlign = align.value;
352 // Columns can only contain rows
355 col.appendChild(parse_row(e));
365 var keyboard_element = xml.documentElement;
366 if (keyboard_element.tagName != "keyboard")
367 throw new Error("Root element must be keyboard");
370 if (!keyboard_element.attributes["size"])
371 throw new Error("size attribute is required for keyboard");
373 var keyboard_size = parseFloat(keyboard_element.attributes["size"].value);
375 parseChildren(keyboard_element, {
378 keyboard.appendChild(parse_row(e));
381 "column": function(e) {
382 keyboard.appendChild(parse_column(e));
389 // Do not allow selection or mouse movement to propagate/register.
390 keyboard.onselectstart =
391 keyboard.onmousemove =
393 keyboard.onmousedown =
400 * State of all modifiers.
404 this.onkeydown = null;
407 this.getElement = function() {
411 this.resize = function(width) {
413 // Get pixel size of a unit
414 var unit = Math.floor(width * 10 / keyboard_size) / 10;
416 // Resize all scaled elements
417 for (var i=0; i<scaledElements.length; i++) {
418 var scaledElement = scaledElements[i];
419 scaledElement.scale(unit)
426 Guacamole.OnScreenKeyboard.Key = function() {
431 * Whether this key is currently pressed.
433 this.pressed = false;
436 * Width of the key, relative to the size of the keyboard.
441 * An associative map of all caps by modifier.
446 * Bit mask with all modifiers that affect this key set.
448 this.modifierMask = 0;
451 * Given the bitwise OR of all active modifiers, returns the key cap
454 this.getCap = function(modifier) {
455 return key.caps[modifier & key.modifierMask];
460 Guacamole.OnScreenKeyboard.Cap = function(text, keysym, modifier) {
463 * Modifier represented by this keycap
465 this.modifier = null;
468 * The text to be displayed within this keycap
473 * The keysym this cap sends when its associated key is pressed/released
475 this.keysym = keysym;
477 // Set modifier if provided
478 if (modifier) this.modifier = modifier;