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 guacamole-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 scaledElements = [];
54 var currentModifier = 1;
56 // Returns a unique power-of-two value for the modifier with the
57 // given name. The same value will be returned for the same modifier.
58 function getModifier(name) {
60 var value = modifiers[name];
63 // Get current modifier, advance to next
64 value = currentModifier;
65 currentModifier <<= 1;
67 // Store value of this modifier
68 modifiers[name] = value;
76 function ScaledElement(element, width, height, scaleFont) {
81 this.scale = function(pixels) {
82 element.style.width = Math.floor(width * pixels) + "px";
83 element.style.height = Math.floor(height * pixels) + "px";
86 element.style.lineHeight = Math.floor(height * pixels) + "px";
87 element.style.fontSize = pixels + "px";
93 // For each child of element, call handler defined in next
94 function parseChildren(element, next) {
96 var children = element.childNodes;
97 for (var i=0; i<children.length; i++) {
100 var child = children[i];
102 // Do not parse text nodes
106 // Get handler for node
107 var handler = next[child.tagName];
109 // Call handler if defined
113 // Throw exception if no handler
116 "Unexpected " + child.tagName
117 + " within " + element.tagName
125 var keyboard = document.createElement("div");
126 keyboard.className = "guacamole-keyboard";
128 // Retrieve keyboard XML
129 var xmlhttprequest = new XMLHttpRequest();
130 xmlhttprequest.open("GET", url, false);
131 xmlhttprequest.send(null);
133 var xml = xmlhttprequest.responseXML;
137 function parse_row(e) {
139 var row = document.createElement("div");
140 row.className = "guacamole-keyboard-row";
144 "column": function(e) {
145 row.appendChild(parse_column(e));
148 "gap": function parse_gap(e) {
151 var gap_size = e.attributes["size"];
154 var gap = document.createElement("div");
155 gap.className = "guacamole-keyboard-gap";
160 gap_units = parseFloat(gap_size.value);
162 scaledElements.push(new ScaledElement(gap, gap_units, gap_units));
163 row.appendChild(gap);
167 "key": function parse_key(e) {
170 var key_size = e.attributes["size"];
173 var key_element = document.createElement("div");
174 key_element.className = "guacamole-keyboard-key";
176 // Position keys using container div
177 var key_container_element = document.createElement("div");
178 key_container_element.className = "guacamole-keyboard-key-container";
179 key_container_element.appendChild(key_element);
182 var key = new Guacamole.OnScreenKeyboard.Key();
187 key_units = parseFloat(key_size.value);
189 key.size = key_units;
192 "cap": function parse_cap(e) {
195 var required = e.attributes["if"];
196 var modifier = e.attributes["modifier"];
197 var keysym = e.attributes["keysym"];
198 var sticky = e.attributes["sticky"];
200 // Get content of key cap
201 var content = e.textContent;
204 var cap = new Guacamole.OnScreenKeyboard.Cap(content,
205 keysym ? keysym.value : null);
207 // Create cap element
208 var cap_element = document.createElement("div");
209 cap_element.className = "guacamole-keyboard-cap";
210 cap_element.textContent = content;
211 key_element.appendChild(cap_element);
213 // Get modifier value
214 var modifierValue = 0;
217 // Get modifier value for specified comma-delimited
218 // list of required modifiers.
219 var requirements = required.value.split(",");
220 for (var i=0; i<requirements.length; i++) {
221 modifierValue |= getModifier(requirements[i]);
222 cap_element.className += " guacamole-keyboard-requires-" + requirements[i];
228 key.modifierMask |= modifierValue;
229 key.caps[modifierValue] = cap;
234 scaledElements.push(new ScaledElement(key_container_element, key_units, 1, true));
235 row.appendChild(key_container_element);
245 function parse_column(e) {
247 var col = document.createElement("div");
248 col.className = "guacamole-keyboard-column";
250 var align = col.attributes["align"];
253 col.style.textAlign = align.value;
255 // Columns can only contain rows
258 col.appendChild(parse_row(e));
268 var keyboard_element = xml.documentElement;
269 if (keyboard_element.tagName != "keyboard")
270 throw new Error("Root element must be keyboard");
273 if (!keyboard_element.attributes["size"])
274 throw new Error("size attribute is required for keyboard");
276 var keyboard_size = parseFloat(keyboard_element.attributes["size"].value);
278 parseChildren(keyboard_element, {
281 keyboard.appendChild(parse_row(e));
284 "column": function(e) {
285 keyboard.appendChild(parse_column(e));
292 // Do not allow selection or mouse movement to propagate/register.
293 keyboard.onselectstart =
294 keyboard.onmousemove =
296 keyboard.onmousedown =
303 this.onkeypressed = null;
304 this.onkeyreleased = null;
306 this.getElement = function() {
310 this.resize = function(width) {
312 // Get pixel size of a unit
313 var unit = Math.floor(width / keyboard_size);
315 // Resize all scaled elements
316 for (var i=0; i<scaledElements.length; i++) {
317 var scaledElement = scaledElements[i];
318 scaledElement.scale(unit)
325 Guacamole.OnScreenKeyboard.Key = function() {
330 * Width of the key, relative to the size of the keyboard.
335 * Whether this key is currently pressed.
337 this.pressed = false;
340 * An associative map of all caps by modifier.
345 * The currently active cap as chosen by select().
347 this.currentCap = null;
350 * Bit mask with all modifiers that affect this key set.
352 this.modifierMask = 0;
355 * Given the bitwise OR of all active modifiers, displays the key cap
358 this.select = function(modifier) {
360 key.currentCap = key.caps[modifier & key.modifierMask];
366 Guacamole.OnScreenKeyboard.Cap = function(text, keysym, modifier) {
369 * Modifier represented by this keycap
374 * The text to be displayed within this keycap
379 * The keysym this cap sends when its associated key is pressed/released
381 this.keysym = keysym;
383 // Set modifier if provided
384 if (modifier) this.modifier = modifier;