core/util.js

   1 /*
   2  * noVNC: HTML5 VNC client
   3  * Copyright (C) 2012 Joel Martin
   4  * Licensed under MPL 2.0 (see LICENSE.txt)
   5  *
   6  * See README.md for usage and integration instructions.
   7  */
   8
   9 /* jshint white: false, nonstandard: true */
  10 /*global window, console, document, navigator, ActiveXObject, INCLUDE_URI */
  11
  12 var Util = {};
  13
  14 /*
  15  * ------------------------------------------------------
  16  * Namespaced in Util
  17  * ------------------------------------------------------
  18  */
  19
  20 /*
  21  * Logging/debug routines
  22  */
  23
  24 Util._log_level = 'warn';
  25 Util.init_logging = function (level) {
  26     "use strict";
  27     if (typeof level === 'undefined') {
  28         level = Util._log_level;
  29     } else {
  30         Util._log_level = level;
  31     }
  32
  33     Util.Debug = Util.Info = Util.Warn = Util.Error = function (msg) {};
  34     if (typeof window.console !== "undefined") {
  35         /* jshint -W086 */
  36         switch (level) {
  37             case 'debug':
  38                 Util.Debug = console.debug.bind(window.console);
  39             case 'info':
  40                 Util.Info  = console.info.bind(window.console);
  41             case 'warn':
  42                 Util.Warn  = console.warn.bind(window.console);
  43             case 'error':
  44                 Util.Error = console.error.bind(window.console);
  45             case 'none':
  46                 break;
  47             default:
  48                 throw new Error("invalid logging type '" + level + "'");
  49         }
  50         /* jshint +W086 */
  51     }
  52 };
  53 Util.get_logging = function () {
  54     return Util._log_level;
  55 };
  56 // Initialize logging level
  57 Util.init_logging();
  58
  59 Util.make_property = function (proto, name, mode, type) {
  60     "use strict";
  61
  62     var getter;
  63     if (type === 'arr') {
  64         getter = function (idx) {
  65             if (typeof idx !== 'undefined') {
  66                 return this['_' + name][idx];
  67             } else {
  68                 return this['_' + name];
  69             }
  70         };
  71     } else {
  72         getter = function () {
  73             return this['_' + name];
  74         };
  75     }
  76
  77     var make_setter = function (process_val) {
  78         if (process_val) {
  79             return function (val, idx) {
  80                 if (typeof idx !== 'undefined') {
  81                     this['_' + name][idx] = process_val(val);
  82                 } else {
  83                     this['_' + name] = process_val(val);
  84                 }
  85             };
  86         } else {
  87             return function (val, idx) {
  88                 if (typeof idx !== 'undefined') {
  89                     this['_' + name][idx] = val;
  90                 } else {
  91                     this['_' + name] = val;
  92                 }
  93             };
  94         }
  95     };
  96
  97     var setter;
  98     if (type === 'bool') {
  99         setter = make_setter(function (val) {
 100             if (!val || (val in {'0': 1, 'no': 1, 'false': 1})) {
 101                 return false;
 102             } else {
 103                 return true;
 104             }
 105         });
 106     } else if (type === 'int') {
 107         setter = make_setter(function (val) { return parseInt(val, 10); });
 108     } else if (type === 'float') {
 109         setter = make_setter(parseFloat);
 110     } else if (type === 'str') {
 111         setter = make_setter(String);
 112     } else if (type === 'func') {
 113         setter = make_setter(function (val) {
 114             if (!val) {
 115                 return function () {};
 116             } else {
 117                 return val;
 118             }
 119         });
 120     } else if (type === 'arr' || type === 'dom' || type == 'raw') {
 121         setter = make_setter();
 122     } else {
 123         throw new Error('Unknown property type ' + type);  // some sanity checking
 124     }
 125
 126     // set the getter
 127     if (typeof proto['get_' + name] === 'undefined') {
 128         proto['get_' + name] = getter;
 129     }
 130
 131     // set the setter if needed
 132     if (typeof proto['set_' + name] === 'undefined') {
 133         if (mode === 'rw') {
 134             proto['set_' + name] = setter;
 135         } else if (mode === 'wo') {
 136             proto['set_' + name] = function (val, idx) {
 137                 if (typeof this['_' + name] !== 'undefined') {
 138                     throw new Error(name + " can only be set once");
 139                 }
 140                 setter.call(this, val, idx);
 141             };
 142         }
 143     }
 144
 145     // make a special setter that we can use in set defaults
 146     proto['_raw_set_' + name] = function (val, idx) {
 147         setter.call(this, val, idx);
 148         //delete this['_init_set_' + name];  // remove it after use
 149     };
 150 };
 151
 152 Util.make_properties = function (constructor, arr) {
 153     "use strict";
 154     for (var i = 0; i < arr.length; i++) {
 155         Util.make_property(constructor.prototype, arr[i][0], arr[i][1], arr[i][2]);
 156     }
 157 };
 158
 159 Util.set_defaults = function (obj, conf, defaults) {
 160     var defaults_keys = Object.keys(defaults);
 161     var conf_keys = Object.keys(conf);
 162     var keys_obj = {};
 163     var i;
 164     for (i = 0; i < defaults_keys.length; i++) { keys_obj[defaults_keys[i]] = 1; }
 165     for (i = 0; i < conf_keys.length; i++) { keys_obj[conf_keys[i]] = 1; }
 166     var keys = Object.keys(keys_obj);
 167
 168     for (i = 0; i < keys.length; i++) {
 169         var setter = obj['_raw_set_' + keys[i]];
 170         if (!setter) {
 171           Util.Warn('Invalid property ' + keys[i]);
 172           continue;
 173         }
 174
 175         if (keys[i] in conf) {
 176             setter.call(obj, conf[keys[i]]);
 177         } else {
 178             setter.call(obj, defaults[keys[i]]);
 179         }
 180     }
 181 };
 182
 183 /*
 184  * Decode from UTF-8
 185  */
 186 Util.decodeUTF8 = function (utf8string) {
 187     "use strict";
 188     return decodeURIComponent(escape(utf8string));
 189 };
 190
 191
 192
 193 /*
 194  * Cross-browser routines
 195  */
 196
 197 Util.getPointerEvent = function (e) {
 198     return e.changedTouches ? e.changedTouches[0] : e.touches ? e.touches[0] : e;
 199 };
 200
 201 Util.stopEvent = function (e) {
 202     e.stopPropagation();
 203     e.preventDefault();
 204 };
 205
 206 // Touch detection
 207 Util.isTouchDevice = ('ontouchstart' in document.documentElement) ||
 208                      // requried for Chrome debugger
 209                      (document.ontouchstart !== undefined) ||
 210                      // required for MS Surface
 211                      (navigator.maxTouchPoints > 0) ||
 212                      (navigator.msMaxTouchPoints > 0);
 213 window.addEventListener('touchstart', function onFirstTouch() {
 214     Util.isTouchDevice = true;
 215     window.removeEventListener('touchstart', onFirstTouch, false);
 216 }, false);
 217
 218 Util._cursor_uris_supported = null;
 219
 220 Util.browserSupportsCursorURIs = function () {
 221     if (Util._cursor_uris_supported === null) {
 222         try {
 223             var target = document.createElement('canvas');
 224             target.style.cursor = 'url("data:image/x-icon;base64,AAACAAEACAgAAAIAAgA4AQAAFgAAACgAAAAIAAAAEAAAAAEAIAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAA==") 2 2, default';
 225
 226             if (target.style.cursor) {
 227                 Util.Info("Data URI scheme cursor supported");
 228                 Util._cursor_uris_supported = true;
 229             } else {
 230                 Util.Warn("Data URI scheme cursor not supported");
 231                 Util._cursor_uris_supported = false;
 232             }
 233         } catch (exc) {
 234             Util.Error("Data URI scheme cursor test exception: " + exc);
 235             Util._cursor_uris_supported = false;
 236         }
 237     }
 238
 239     return Util._cursor_uris_supported;
 240 };
 241
 242 // Set browser engine versions. Based on mootools.
 243 Util.Features = {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)};
 244
 245 (function () {
 246     "use strict";
 247     // 'presto': (function () { return (!window.opera) ? false : true; }()),
 248     var detectPresto = function () {
 249         return !!window.opera;
 250     };
 251
 252     // 'trident': (function () { return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4);
 253     var detectTrident = function () {
 254         if (!window.ActiveXObject) {
 255             return false;
 256         } else {
 257             if (window.XMLHttpRequest) {
 258                 return (document.querySelectorAll) ? 6 : 5;
 259             } else {
 260                 return 4;
 261             }
 262         }
 263     };
 264
 265     // 'webkit': (function () { try { return (navigator.taintEnabled) ? false : ((Util.Features.xpath) ? ((Util.Features.query) ? 525 : 420) : 419); } catch (e) { return false; } }()),
 266     var detectInitialWebkit = function () {
 267         try {
 268             if (navigator.taintEnabled) {
 269                 return false;
 270             } else {
 271                 if (Util.Features.xpath) {
 272                     return (Util.Features.query) ? 525 : 420;
 273                 } else {
 274                     return 419;
 275                 }
 276             }
 277         } catch (e) {
 278             return false;
 279         }
 280     };
 281
 282     var detectActualWebkit = function (initial_ver) {
 283         var re = /WebKit\/([0-9\.]*) /;
 284         var str_ver = (navigator.userAgent.match(re) || ['', initial_ver])[1];
 285         return parseFloat(str_ver, 10);
 286     };
 287
 288     // 'gecko': (function () { return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19ssName) ? 19 : 18 : 18); }())
 289     var detectGecko = function () {
 290         /* jshint -W041 */
 291         if (!document.getBoxObjectFor && window.mozInnerScreenX == null) {
 292             return false;
 293         } else {
 294             return (document.getElementsByClassName) ? 19 : 18;
 295         }
 296         /* jshint +W041 */
 297     };
 298
 299     Util.Engine = {
 300         // Version detection break in Opera 11.60 (errors on arguments.callee.caller reference)
 301         //'presto': (function() {
 302         //         return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925)); }()),
 303         'presto': detectPresto(),
 304         'trident': detectTrident(),
 305         'webkit': detectInitialWebkit(),
 306         'gecko': detectGecko()
 307     };
 308
 309     if (Util.Engine.webkit) {
 310         // Extract actual webkit version if available
 311         Util.Engine.webkit = detectActualWebkit(Util.Engine.webkit);
 312     }
 313 })();
 314
 315 Util.Flash = (function () {
 316     "use strict";
 317     var v, version;
 318     try {
 319         v = navigator.plugins['Shockwave Flash'].description;
 320     } catch (err1) {
 321         try {
 322             v = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');
 323         } catch (err2) {
 324             v = '0 r0';
 325         }
 326     }
 327     version = v.match(/\d+/g);
 328     return {version: parseInt(version[0] || 0 + '.' + version[1], 10) || 0, build: parseInt(version[2], 10) || 0};
 329 }());
 330
 331
 332 Util.Localisation = {
 333     // Currently configured language
 334     language: 'en',
 335
 336     // Configure suitable language based on user preferences
 337     setup: function (supportedLanguages) {
 338         var userLanguages;
 339
 340         Util.Localisation.language = 'en'; // Default: US English
 341
 342         /*
 343          * Navigator.languages only available in Chrome (32+) and FireFox (32+)
 344          * Fall back to navigator.language for other browsers
 345          */
 346         if (typeof window.navigator.languages == 'object') {
 347             userLanguages = window.navigator.languages;
 348         } else {
 349             userLanguages = [navigator.language || navigator.userLanguage];
 350         }
 351
 352         for (var i = 0;i < userLanguages.length;i++) {
 353             var userLang = userLanguages[i];
 354             userLang = userLang.toLowerCase();
 355             userLang = userLang.replace("_", "-");
 356             userLang = userLang.split("-");
 357
 358             // Built-in default?
 359             if ((userLang[0] === 'en') &&
 360                 ((userLang[1] === undefined) || (userLang[1] === 'us'))) {
 361                 return;
 362             }
 363
 364             // First pass: perfect match
 365             for (var j = 0;j < supportedLanguages.length;j++) {
 366                 var supLang = supportedLanguages[j];
 367                 supLang = supLang.toLowerCase();
 368                 supLang = supLang.replace("_", "-");
 369                 supLang = supLang.split("-");
 370
 371                 if (userLang[0] !== supLang[0])
 372                     continue;
 373                 if (userLang[1] !== supLang[1])
 374                     continue;
 375
 376                 Util.Localisation.language = supportedLanguages[j];
 377                 return;
 378             }
 379
 380             // Second pass: fallback
 381             for (var j = 0;j < supportedLanguages.length;j++) {
 382                 supLang = supportedLanguages[j];
 383                 supLang = supLang.toLowerCase();
 384                 supLang = supLang.replace("_", "-");
 385                 supLang = supLang.split("-");
 386
 387                 if (userLang[0] !== supLang[0])
 388                     continue;
 389                 if (supLang[1] !== undefined)
 390                     continue;
 391
 392                 Util.Localisation.language = supportedLanguages[j];
 393                 return;
 394             }
 395         }
 396     },
 397
 398     // Retrieve localised text
 399     get: function (id) {
 400         if (typeof Language !== 'undefined' && Language[id]) {
 401             return Language[id];
 402         } else {
 403             return id;
 404         }
 405     },
 406
 407     // Traverses the DOM and translates relevant fields
 408     // See https://html.spec.whatwg.org/multipage/dom.html#attr-translate
 409     translateDOM: function () {
 410         function process(elem, enabled) {
 411             function isAnyOf(searchElement, items) {
 412                 return items.indexOf(searchElement) !== -1;
 413             }
 414
 415             function translateAttribute(elem, attr) {
 416                 var str = elem.getAttribute(attr);
 417                 str = Util.Localisation.get(str);
 418                 elem.setAttribute(attr, str);
 419             }
 420
 421             function translateTextNode(node) {
 422                 var str = node.data.trim();
 423                 str = Util.Localisation.get(str);
 424                 node.data = str;
 425             }
 426
 427             if (elem.hasAttribute("translate")) {
 428                 if (isAnyOf(elem.getAttribute("translate"), ["", "yes"])) {
 429                     enabled = true;
 430                 } else if (isAnyOf(elem.getAttribute("translate"), ["no"])) {
 431                     enabled = false;
 432                 }
 433             }
 434
 435             if (enabled) {
 436                 if (elem.hasAttribute("abbr") &&
 437                     elem.tagName === "TH") {
 438                     translateAttribute(elem, "abbr");
 439                 }
 440                 if (elem.hasAttribute("alt") &&
 441                     isAnyOf(elem.tagName, ["AREA", "IMG", "INPUT"])) {
 442                     translateAttribute(elem, "alt");
 443                 }
 444                 if (elem.hasAttribute("download") &&
 445                     isAnyOf(elem.tagName, ["A", "AREA"])) {
 446                     translateAttribute(elem, "download");
 447                 }
 448                 if (elem.hasAttribute("label") &&
 449                     isAnyOf(elem.tagName, ["MENUITEM", "MENU", "OPTGROUP",
 450                                    "OPTION", "TRACK"])) {
 451                     translateAttribute(elem, "label");
 452                 }
 453                 // FIXME: Should update "lang"
 454                 if (elem.hasAttribute("placeholder") &&
 455                     isAnyOf(elem.tagName in ["INPUT", "TEXTAREA"])) {
 456                     translateAttribute(elem, "placeholder");
 457                 }
 458                 if (elem.hasAttribute("title")) {
 459                     translateAttribute(elem, "title");
 460                 }
 461                 if (elem.hasAttribute("value") &&
 462                     elem.tagName === "INPUT" &&
 463                     isAnyOf(elem.getAttribute("type"), ["reset", "button"])) {
 464                     translateAttribute(elem, "value");
 465                 }
 466             }
 467
 468             for (var i = 0;i < elem.childNodes.length;i++) {
 469                 node = elem.childNodes[i];
 470                 if (node.nodeType === node.ELEMENT_NODE) {
 471                     process(node, enabled);
 472                 } else if (node.nodeType === node.TEXT_NODE && enabled) {
 473                     translateTextNode(node);
 474                 }
 475             }
 476         }
 477
 478         process(document.body, true);
 479     },
 480 };
 481
 482 // Emulate Element.setCapture() when not supported
 483
 484 Util._captureRecursion = false;
 485 Util._captureProxy = function (e) {
 486     // Recursion protection as we'll see our own event
 487     if (Util._captureRecursion) return;
 488
 489     // Clone the event as we cannot dispatch an already dispatched event
 490     var newEv = new e.constructor(e.type, e);
 491
 492     Util._captureRecursion = true;
 493     Util._captureElem.dispatchEvent(newEv);
 494     Util._captureRecursion = false;
 495
 496     // Avoid double events
 497     e.stopPropagation();
 498
 499     // Respect the wishes of the redirected event handlers
 500     if (newEv.defaultPrevented) {
 501         e.preventDefault();
 502     }
 503
 504     // Implicitly release the capture on button release
 505     if ((e.type === "mouseup") || (e.type === "touchend")) {
 506         Util.releaseCapture();
 507     }
 508 };
 509
 510 // Follow cursor style of target element
 511 Util._captureElemChanged = function() {
 512     var captureElem = document.getElementById("noVNC_mouse_capture_elem");
 513     captureElem.style.cursor = window.getComputedStyle(Util._captureElem).cursor;
 514 };
 515 Util._captureObserver = new MutationObserver(Util._captureElemChanged);
 516
 517 Util.setCapture = function (elem) {
 518     if (elem.setCapture) {
 519
 520         elem.setCapture();
 521
 522         // IE releases capture on 'click' events which might not trigger
 523         elem.addEventListener('mouseup', Util.releaseCapture);
 524         elem.addEventListener('touchend', Util.releaseCapture);
 525
 526     } else {
 527         // Release any existing capture in case this method is
 528         // called multiple times without coordination
 529         Util.releaseCapture();
 530
 531         // Safari on iOS 9 has a broken constructor for TouchEvent.
 532         // We are fine in this case however, since Safari seems to
 533         // have some sort of implicit setCapture magic anyway.
 534         if (window.TouchEvent !== undefined) {
 535             try {
 536                 new TouchEvent("touchstart");
 537             } catch (TypeError) {
 538                 return;
 539             }
 540         }
 541
 542         var captureElem = document.getElementById("noVNC_mouse_capture_elem");
 543
 544         if (captureElem === null) {
 545             captureElem = document.createElement("div");
 546             captureElem.id = "noVNC_mouse_capture_elem";
 547             captureElem.style.position = "fixed";
 548             captureElem.style.top = "0px";
 549             captureElem.style.left = "0px";
 550             captureElem.style.width = "100%";
 551             captureElem.style.height = "100%";
 552             captureElem.style.zIndex = 10000;
 553             captureElem.style.display = "none";
 554             document.body.appendChild(captureElem);
 555
 556             // This is to make sure callers don't get confused by having
 557             // our blocking element as the target
 558             captureElem.addEventListener('contextmenu', Util._captureProxy);
 559
 560             captureElem.addEventListener('mousemove', Util._captureProxy);
 561             captureElem.addEventListener('mouseup', Util._captureProxy);
 562
 563             captureElem.addEventListener('touchmove', Util._captureProxy);
 564             captureElem.addEventListener('touchend', Util._captureProxy);
 565         }
 566
 567         Util._captureElem = elem;
 568
 569         // Track cursor and get initial cursor
 570         Util._captureObserver.observe(elem, {attributes:true});
 571         Util._captureElemChanged();
 572
 573         captureElem.style.display = null;
 574
 575         // We listen to events on window in order to keep tracking if it
 576         // happens to leave the viewport
 577         window.addEventListener('mousemove', Util._captureProxy);
 578         window.addEventListener('mouseup', Util._captureProxy);
 579
 580         window.addEventListener('touchmove', Util._captureProxy);
 581         window.addEventListener('touchend', Util._captureProxy);
 582     }
 583 };
 584
 585 Util.releaseCapture = function () {
 586     if (document.releaseCapture) {
 587
 588         document.releaseCapture();
 589
 590     } else {
 591         if (!Util._captureElem) {
 592             return;
 593         }
 594
 595         // There might be events already queued, so we need to wait for
 596         // them to flush. E.g. contextmenu in Microsoft Edge
 597         //
 598         // FIXME: What happens if setCapture is called before this fires?
 599         window.setTimeout(function() { Util._captureElem = null; });
 600
 601         Util._captureObserver.disconnect();
 602
 603         var captureElem = document.getElementById("noVNC_mouse_capture_elem");
 604         captureElem.style.display = "none";
 605
 606         window.removeEventListener('mousemove', Util._captureProxy);
 607         window.removeEventListener('mouseup', Util._captureProxy);
 608
 609         window.removeEventListener('touchmove', Util._captureProxy);
 610         window.removeEventListener('touchend', Util._captureProxy);
 611     }
 612 };
 613
 614 /* [module] export default Util; */