src/main/resources/oskeyboard.js

   1
   2 /* ***** BEGIN LICENSE BLOCK *****
   3  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   4  *
   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/
   9  *
  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
  13  * License.
  14  *
  15  * The Original Code is guac-common-js.
  16  *
  17  * The Initial Developer of the Original Code is
  18  * Michael Jumper.
  19  * Portions created by the Initial Developer are Copyright (C) 2010
  20  * the Initial Developer. All Rights Reserved.
  21  *
  22  * Contributor(s):
  23  *
  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.
  35  *
  36  * ***** END LICENSE BLOCK ***** */
  37
  38 // Guacamole namespace
  39 var Guacamole = Guacamole || {};
  40
  41 /**
  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.
  45  *
  46  * @constructor
  47  * @param {String} url The URL of an XML keyboard layout file.
  48  */
  49 Guacamole.OnScreenKeyboard = function(url) {
  50
  51     var on_screen_keyboard = this;
  52
  53     var scaledElements = [];
  54
  55     var modifiers = {};
  56     var currentModifier = 1;
  57
  58     // Function for adding a class to an element
  59     var addClass;
  60
  61     // Function for removing a class from an element
  62     var removeClass;
  63
  64     // If Node.classList is supported, implement addClass/removeClass using that
  65     if (Node.classList) {
  66
  67         addClass = function(element, classname) {
  68             element.classList.add(classname);
  69         };
  70
  71         removeClass = function(element, classname) {
  72             element.classList.remove(classname);
  73         };
  74
  75     }
  76
  77     // Otherwise, implement own
  78     else {
  79
  80         addClass = function(element, classname) {
  81
  82             // Simply add new class
  83             element.className += " " + classname;
  84
  85         };
  86
  87         removeClass = function(element, classname) {
  88
  89             // Filter out classes with given name
  90             element.className = element.className.replace(/([^ ]+)[ ]*/g,
  91                 function(match, testClassname, spaces, offset, string) {
  92
  93                     // If same class, remove
  94                     if (testClassname == classname)
  95                         return "";
  96
  97                     // Otherwise, allow
  98                     return match;
  99
 100                 }
 101             );
 102
 103         };
 104
 105     }
 106
 107     // Returns a unique power-of-two value for the modifier with the
 108     // given name. The same value will be returned for the same modifier.
 109     function getModifier(name) {
 110
 111         var value = modifiers[name];
 112         if (!value) {
 113
 114             // Get current modifier, advance to next
 115             value = currentModifier;
 116             currentModifier <<= 1;
 117
 118             // Store value of this modifier
 119             modifiers[name] = value;
 120
 121         }
 122
 123         return value;
 124
 125     }
 126
 127     function ScaledElement(element, width, height, scaleFont) {
 128
 129         this.width = width;
 130         this.height = height;
 131
 132         this.scale = function(pixels) {
 133             element.style.width      = (width  * pixels) + "px";
 134             element.style.height     = (height * pixels) + "px";
 135
 136             if (scaleFont) {
 137                 element.style.lineHeight = (height * pixels) + "px";
 138                 element.style.fontSize   = pixels + "px";
 139             }
 140         }
 141
 142     }
 143
 144     // For each child of element, call handler defined in next
 145     function parseChildren(element, next) {
 146
 147         var children = element.childNodes;
 148         for (var i=0; i<children.length; i++) {
 149
 150             // Get child node
 151             var child = children[i];
 152
 153             // Do not parse text nodes
 154             if (!child.tagName)
 155                 continue;
 156
 157             // Get handler for node
 158             var handler = next[child.tagName];
 159
 160             // Call handler if defined
 161             if (handler)
 162                 handler(child);
 163
 164             // Throw exception if no handler
 165             else
 166                 throw new Error(
 167                       "Unexpected " + child.tagName
 168                     + " within " + element.tagName
 169                 );
 170
 171         }
 172
 173     }
 174
 175     // Create keyboard
 176     var keyboard = document.createElement("div");
 177     keyboard.className = "guac-keyboard";
 178
 179     // Retrieve keyboard XML
 180     var xmlhttprequest = new XMLHttpRequest();
 181     xmlhttprequest.open("GET", url, false);
 182     xmlhttprequest.send(null);
 183
 184     var xml = xmlhttprequest.responseXML;
 185
 186     if (xml) {
 187
 188         function parse_row(e) {
 189
 190             var row = document.createElement("div");
 191             row.className = "guac-keyboard-row";
 192
 193             parseChildren(e, {
 194
 195                 "column": function(e) {
 196                     row.appendChild(parse_column(e));
 197                 },
 198
 199                 "gap": function parse_gap(e) {
 200
 201                     // Create element
 202                     var gap = document.createElement("div");
 203                     gap.className = "guac-keyboard-gap";
 204
 205                     // Set gap size
 206                     var gap_units = 1;
 207                     if (e.getAttribute("size"))
 208                         gap_units = parseFloat(e.getAttribute("size"));
 209
 210                     scaledElements.push(new ScaledElement(gap, gap_units, gap_units));
 211                     row.appendChild(gap);
 212
 213                 },
 214
 215                 "key": function parse_key(e) {
 216
 217                     // Create element
 218                     var key_element = document.createElement("div");
 219                     key_element.className = "guac-keyboard-key";
 220
 221                     // Append class if specified
 222                     if (e.getAttribute("class"))
 223                         key_element.className += " " + e.getAttribute("class");
 224
 225                     // Position keys using container div
 226                     var key_container_element = document.createElement("div");
 227                     key_container_element.className = "guac-keyboard-key-container";
 228                     key_container_element.appendChild(key_element);
 229
 230                     // Create key
 231                     var key = new Guacamole.OnScreenKeyboard.Key();
 232
 233                     // Set key size
 234                     var key_units = 1;
 235                     if (e.getAttribute("size"))
 236                         key_units = parseFloat(e.getAttribute("size"));
 237
 238                     key.size = key_units;
 239
 240                     parseChildren(e, {
 241                         "cap": function parse_cap(e) {
 242
 243                             // TODO: Handle "sticky" attribute
 244
 245                             // Get content of key cap
 246                             var content = e.textContent || e.text;
 247
 248                             // If read as blank, assume cap is a single space.
 249                             if (content.length == 0)
 250                                 content = " ";
 251
 252                             // Get keysym
 253                             var real_keysym = null;
 254                             if (e.getAttribute("keysym"))
 255                                 real_keysym = parseInt(e.getAttribute("keysym"));
 256
 257                             // If no keysym specified, try to get from key content
 258                             else if (content.length == 1) {
 259
 260                                 var charCode = content.charCodeAt(0);
 261                                 if (charCode >= 0x0000 && charCode <= 0x00FF)
 262                                     real_keysym = charCode;
 263                                 else if (charCode >= 0x0100 && charCode <= 0x10FFFF)
 264                                     real_keysym = 0x01000000 | charCode;
 265
 266                             }
 267
 268                             // Create cap
 269                             var cap = new Guacamole.OnScreenKeyboard.Cap(content, real_keysym);
 270
 271                             if (e.getAttribute("modifier"))
 272                                 cap.modifier = e.getAttribute("modifier");
 273
 274                             // Create cap element
 275                             var cap_element = document.createElement("div");
 276                             cap_element.className = "guac-keyboard-cap";
 277                             cap_element.textContent = content;
 278                             key_element.appendChild(cap_element);
 279
 280                             // Append class if specified
 281                             if (e.getAttribute("class"))
 282                                 cap_element.className += " " + e.getAttribute("class");
 283
 284                             // Get modifier value
 285                             var modifierValue = 0;
 286                             if (e.getAttribute("if")) {
 287
 288                                 // Get modifier value for specified comma-delimited
 289                                 // list of required modifiers.
 290                                 var requirements = e.getAttribute("if").split(",");
 291                                 for (var i=0; i<requirements.length; i++) {
 292                                     modifierValue |= getModifier(requirements[i]);
 293                                     addClass(cap_element, "guac-keyboard-requires-" + requirements[i]);
 294                                     addClass(key_element, "guac-keyboard-uses-" + requirements[i]);
 295                                 }
 296
 297                             }
 298
 299                             // Store cap
 300                             key.modifierMask |= modifierValue;
 301                             key.caps[modifierValue] = cap;
 302
 303                         }
 304                     });
 305
 306                     scaledElements.push(new ScaledElement(key_container_element, key_units, 1, true));
 307                     row.appendChild(key_container_element);
 308
 309                     // Set up click handler for key
 310                     function press(e) {
 311
 312                         // Press key if not yet pressed
 313                         if (!key.pressed) {
 314
 315                             addClass(key_element, "guac-keyboard-pressed");
 316
 317                             // Get current cap based on modifier state
 318                             var cap = key.getCap(on_screen_keyboard.modifiers);
 319
 320                             // Update modifier state
 321                             if (cap.modifier) {
 322
 323                                 // Construct classname for modifier
 324                                 var modifierClass = "guac-keyboard-modifier-" + cap.modifier;
 325                                 var modifierFlag = getModifier(cap.modifier);
 326
 327                                 // Toggle modifier state
 328                                 on_screen_keyboard.modifiers ^= modifierFlag;
 329
 330                                 // Activate modifier if pressed
 331                                 if (on_screen_keyboard.modifiers & modifierFlag) {
 332
 333                                     addClass(keyboard, modifierClass);
 334
 335                                     // Send key event
 336                                     if (on_screen_keyboard.onkeydown && cap.keysym)
 337                                         on_screen_keyboard.onkeydown(cap.keysym);
 338
 339                                 }
 340
 341                                 // Deactivate if not pressed
 342                                 else {
 343
 344                                     removeClass(keyboard, modifierClass);
 345
 346                                     // Send key event
 347                                     if (on_screen_keyboard.onkeyup && cap.keysym)
 348                                         on_screen_keyboard.onkeyup(cap.keysym);
 349
 350                                 }
 351
 352                             }
 353
 354                             // If not modifier, send key event now
 355                             else if (on_screen_keyboard.onkeydown && cap.keysym)
 356                                 on_screen_keyboard.onkeydown(cap.keysym);
 357
 358                             // Mark key as pressed
 359                             key.pressed = true;
 360
 361                         }
 362
 363                         e.preventDefault();
 364
 365                     };
 366
 367                     function release(e) {
 368
 369                         // Release key if currently pressed
 370                         if (key.pressed) {
 371
 372                             // Get current cap based on modifier state
 373                             var cap = key.getCap(on_screen_keyboard.modifiers);
 374
 375                             removeClass(key_element, "guac-keyboard-pressed");
 376
 377                             // Send key event if not a modifier key
 378                             if (!cap.modifier && on_screen_keyboard.onkeyup && cap.keysym)
 379                                 on_screen_keyboard.onkeyup(cap.keysym);
 380
 381                             // Mark key as released
 382                             key.pressed = false;
 383
 384                         }
 385
 386                         e.preventDefault();
 387
 388                     };
 389
 390                     key_element.addEventListener("mousedown", press, true);
 391                     key_element.addEventListener("touchstart", press, true);
 392
 393                     key_element.addEventListener("mouseup", release, true);
 394                     key_element.addEventListener("mouseout", release, true);
 395                     key_element.addEventListener("touchend", release, true);
 396
 397                 }
 398
 399             });
 400
 401             return row;
 402
 403         }
 404
 405         function parse_column(e) {
 406
 407             var col = document.createElement("div");
 408             col.className = "guac-keyboard-column";
 409
 410             if (col.getAttribute("align"))
 411                 col.style.textAlign = col.getAttribute("align");
 412
 413             // Columns can only contain rows
 414             parseChildren(e, {
 415                 "row": function(e) {
 416                     col.appendChild(parse_row(e));
 417                 }
 418             });
 419
 420             return col;
 421
 422         }
 423
 424
 425         // Parse document
 426         var keyboard_element = xml.documentElement;
 427         if (keyboard_element.tagName != "keyboard")
 428             throw new Error("Root element must be keyboard");
 429
 430         // Get attributes
 431         if (!keyboard_element.getAttribute("size"))
 432             throw new Error("size attribute is required for keyboard");
 433
 434         var keyboard_size = parseFloat(keyboard_element.getAttribute("size"));
 435
 436         parseChildren(keyboard_element, {
 437
 438             "row": function(e) {
 439                 keyboard.appendChild(parse_row(e));
 440             },
 441
 442             "column": function(e) {
 443                 keyboard.appendChild(parse_column(e));
 444             }
 445
 446         });
 447
 448     }
 449
 450     // Do not allow selection or mouse movement to propagate/register.
 451     keyboard.onselectstart =
 452     keyboard.onmousemove   =
 453     keyboard.onmouseup     =
 454     keyboard.onmousedown   =
 455     function(e) {
 456         e.stopPropagation();
 457         return false;
 458     };
 459
 460     /**
 461      * State of all modifiers.
 462      */
 463     this.modifiers = 0;
 464
 465     this.onkeydown = null;
 466     this.onkeyup   = null;
 467
 468     this.getElement = function() {
 469         return keyboard;
 470     };
 471
 472     this.resize = function(width) {
 473
 474         // Get pixel size of a unit
 475         var unit = Math.floor(width * 10 / keyboard_size) / 10;
 476
 477         // Resize all scaled elements
 478         for (var i=0; i<scaledElements.length; i++) {
 479             var scaledElement = scaledElements[i];
 480             scaledElement.scale(unit)
 481         }
 482
 483     };
 484
 485 };
 486
 487 Guacamole.OnScreenKeyboard.Key = function() {
 488
 489     var key = this;
 490
 491     /**
 492      * Whether this key is currently pressed.
 493      */
 494     this.pressed = false;
 495
 496     /**
 497      * Width of the key, relative to the size of the keyboard.
 498      */
 499     this.size = 1;
 500
 501     /**
 502      * An associative map of all caps by modifier.
 503      */
 504     this.caps = {};
 505
 506     /**
 507      * Bit mask with all modifiers that affect this key set.
 508      */
 509     this.modifierMask = 0;
 510
 511     /**
 512      * Given the bitwise OR of all active modifiers, returns the key cap
 513      * which applies.
 514      */
 515     this.getCap = function(modifier) {
 516         return key.caps[modifier & key.modifierMask];
 517     };
 518
 519 }
 520
 521 Guacamole.OnScreenKeyboard.Cap = function(text, keysym, modifier) {
 522
 523     /**
 524      * Modifier represented by this keycap
 525      */
 526     this.modifier = null;
 527
 528     /**
 529      * The text to be displayed within this keycap
 530      */
 531     this.text = text;
 532
 533     /**
 534      * The keysym this cap sends when its associated key is pressed/released
 535      */
 536     this.keysym = keysym;
 537
 538     // Set modifier if provided
 539     if (modifier) this.modifier = modifier;
 540
 541 }