]>
Commit | Line | Data |
---|---|---|
61dd52c9 | 1 | /* |
15046f00 | 2 | * noVNC: HTML5 VNC client |
d58f8b51 | 3 | * Copyright (C) 2012 Joel Martin |
1d728ace | 4 | * Licensed under MPL 2.0 (see LICENSE.txt) |
15046f00 JM |
5 | * |
6 | * See README.md for usage and integration instructions. | |
61dd52c9 JM |
7 | */ |
8 | ||
d21cd6c1 SR |
9 | /* jshint white: false, nonstandard: true */ |
10 | /*global window, console, document, navigator, ActiveXObject, INCLUDE_URI */ | |
61dd52c9 | 11 | |
a59f1cd2 | 12 | var Util = {}; |
15046f00 | 13 | |
d21cd6c1 | 14 | /* |
15046f00 JM |
15 | * ------------------------------------------------------ |
16 | * Namespaced in Util | |
17 | * ------------------------------------------------------ | |
18 | */ | |
19 | ||
8db09746 JM |
20 | /* |
21 | * Logging/debug routines | |
22 | */ | |
23 | ||
c1eba48f | 24 | Util._log_level = 'warn'; |
8db09746 | 25 | Util.init_logging = function (level) { |
d21cd6c1 | 26 | "use strict"; |
c1eba48f | 27 | if (typeof level === 'undefined') { |
c1eba48f JM |
28 | level = Util._log_level; |
29 | } else { | |
30 | Util._log_level = level; | |
31 | } | |
8db09746 JM |
32 | |
33 | Util.Debug = Util.Info = Util.Warn = Util.Error = function (msg) {}; | |
e4fef7be SR |
34 | if (typeof window.console !== "undefined") { |
35 | /* jshint -W086 */ | |
36 | switch (level) { | |
37 | case 'debug': | |
38 | Util.Debug = function (msg) { console.log(msg); }; | |
39 | case 'info': | |
40 | Util.Info = function (msg) { console.info(msg); }; | |
41 | case 'warn': | |
42 | Util.Warn = function (msg) { console.warn(msg); }; | |
43 | case 'error': | |
44 | Util.Error = function (msg) { console.error(msg); }; | |
45 | case 'none': | |
46 | break; | |
47 | default: | |
48 | throw new Error("invalid logging type '" + level + "'"); | |
49 | } | |
50 | /* jshint +W086 */ | |
8db09746 JM |
51 | } |
52 | }; | |
c1eba48f | 53 | Util.get_logging = function () { |
8d5d2c82 | 54 | return Util._log_level; |
d3796c14 | 55 | }; |
8db09746 | 56 | // Initialize logging level |
c1eba48f | 57 | Util.init_logging(); |
8db09746 | 58 | |
d21cd6c1 SR |
59 | Util.make_property = function (proto, name, mode, type) { |
60 | "use strict"; | |
a8edf9d8 | 61 | |
d21cd6c1 SR |
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 | } | |
5210330a | 76 | |
d21cd6c1 SR |
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 | }; | |
5210330a | 86 | } else { |
d21cd6c1 SR |
87 | return function (val, idx) { |
88 | if (typeof idx !== 'undefined') { | |
89 | this['_' + name][idx] = val; | |
90 | } else { | |
91 | this['_' + name] = val; | |
92 | } | |
93 | }; | |
5210330a JM |
94 | } |
95 | }; | |
96 | ||
d21cd6c1 SR |
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; | |
d890e864 | 102 | } else { |
d21cd6c1 | 103 | return true; |
d890e864 | 104 | } |
d21cd6c1 SR |
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) { | |
5210330a | 114 | if (!val) { |
d21cd6c1 SR |
115 | return function () {}; |
116 | } else { | |
117 | return val; | |
5210330a | 118 | } |
d21cd6c1 SR |
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 | } | |
5210330a | 125 | |
d21cd6c1 SR |
126 | // set the getter |
127 | if (typeof proto['get_' + name] === 'undefined') { | |
128 | proto['get_' + name] = getter; | |
125d8bbb | 129 | } |
d890e864 | 130 | |
d21cd6c1 SR |
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 | } | |
125d8bbb | 143 | } |
ff36b127 | 144 | |
d21cd6c1 SR |
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]); | |
ff36b127 | 156 | } |
125d8bbb JM |
157 | }; |
158 | ||
d21cd6c1 SR |
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 = {}; | |
5210330a | 163 | var i; |
d21cd6c1 SR |
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]]; | |
7caa9c20 MA |
170 | if (!setter) { |
171 | Util.Warn('Invalid property ' + keys[i]); | |
172 | continue; | |
173 | } | |
d21cd6c1 | 174 | |
cfc02e5e | 175 | if (keys[i] in conf) { |
d21cd6c1 SR |
176 | setter.call(obj, conf[keys[i]]); |
177 | } else { | |
178 | setter.call(obj, defaults[keys[i]]); | |
179 | } | |
5210330a | 180 | } |
ff4bfcb7 | 181 | }; |
125d8bbb | 182 | |
b7996b04 | 183 | /* |
184 | * Decode from UTF-8 | |
185 | */ | |
d21cd6c1 SR |
186 | Util.decodeUTF8 = function (utf8string) { |
187 | "use strict"; | |
b7996b04 | 188 | return decodeURIComponent(escape(utf8string)); |
d21cd6c1 | 189 | }; |
b7996b04 | 190 | |
191 | ||
a8edf9d8 | 192 | |
15046f00 JM |
193 | /* |
194 | * Cross-browser routines | |
195 | */ | |
196 | ||
455f8f3f | 197 | Util.getPosition = function(obj) { |
d21cd6c1 | 198 | "use strict"; |
72747869 SR |
199 | // NB(sross): the Mozilla developer reference seems to indicate that |
200 | // getBoundingClientRect includes border and padding, so the canvas | |
201 | // style should NOT include either. | |
455f8f3f | 202 | var objPosition = obj.getBoundingClientRect(); |
72747869 SR |
203 | return {'x': objPosition.left + window.pageXOffset, 'y': objPosition.top + window.pageYOffset, |
204 | 'width': objPosition.width, 'height': objPosition.height}; | |
455f8f3f | 205 | }; |
c77938ef | 206 | |
04b399e2 SM |
207 | Util.getPointerEvent = function (e) { |
208 | var evt; | |
209 | evt = (e ? e : window.event); | |
210 | evt = (evt.changedTouches ? evt.changedTouches[0] : evt.touches ? evt.touches[0] : evt); | |
211 | return evt; | |
212 | }; | |
15046f00 JM |
213 | |
214 | // Get mouse event position in DOM element | |
125d8bbb | 215 | Util.getEventPosition = function (e, obj, scale) { |
d21cd6c1 | 216 | "use strict"; |
15046f00 | 217 | var evt, docX, docY, pos; |
04b399e2 | 218 | evt = Util.getPointerEvent(e); |
15046f00 JM |
219 | if (evt.pageX || evt.pageY) { |
220 | docX = evt.pageX; | |
221 | docY = evt.pageY; | |
222 | } else if (evt.clientX || evt.clientY) { | |
223 | docX = evt.clientX + document.body.scrollLeft + | |
224 | document.documentElement.scrollLeft; | |
225 | docY = evt.clientY + document.body.scrollTop + | |
226 | document.documentElement.scrollTop; | |
227 | } | |
228 | pos = Util.getPosition(obj); | |
125d8bbb JM |
229 | if (typeof scale === "undefined") { |
230 | scale = 1; | |
231 | } | |
ca9a9964 PD |
232 | var realx = docX - pos.x; |
233 | var realy = docY - pos.y; | |
72747869 SR |
234 | var x = Math.max(Math.min(realx, pos.width - 1), 0); |
235 | var y = Math.max(Math.min(realy, pos.height - 1), 0); | |
ca9a9964 | 236 | return {'x': x / scale, 'y': y / scale, 'realx': realx / scale, 'realy': realy / scale}; |
15046f00 JM |
237 | }; |
238 | ||
d21cd6c1 | 239 | Util.stopEvent = function (e) { |
b4ef49ea SR |
240 | e.stopPropagation(); |
241 | e.preventDefault(); | |
15046f00 JM |
242 | }; |
243 | ||
bea2b3fd | 244 | // Touch detection |
245 | Util.isTouchDevice = ('ontouchstart' in document.documentElement) || | |
246 | // requried for Chrome debugger | |
247 | (document.ontouchstart !== undefined) || | |
248 | // required for MS Surface | |
249 | (navigator.maxTouchPoints > 0) || | |
250 | (navigator.msMaxTouchPoints > 0); | |
251 | window.addEventListener('touchstart', function onFirstTouch() { | |
252 | Util.isTouchDevice = true; | |
253 | window.removeEventListener('touchstart', onFirstTouch, false); | |
254 | }, false); | |
255 | ||
58ded70d SR |
256 | Util._cursor_uris_supported = null; |
257 | ||
258 | Util.browserSupportsCursorURIs = function () { | |
259 | if (Util._cursor_uris_supported === null) { | |
260 | try { | |
261 | var target = document.createElement('canvas'); | |
262 | target.style.cursor = 'url("data:image/x-icon;base64,AAACAAEACAgAAAIAAgA4AQAAFgAAACgAAAAIAAAAEAAAAAEAIAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAAAAAAAAAAAAAAAAAAAA==") 2 2, default'; | |
263 | ||
264 | if (target.style.cursor) { | |
265 | Util.Info("Data URI scheme cursor supported"); | |
266 | Util._cursor_uris_supported = true; | |
267 | } else { | |
268 | Util.Warn("Data URI scheme cursor not supported"); | |
269 | Util._cursor_uris_supported = false; | |
270 | } | |
271 | } catch (exc) { | |
272 | Util.Error("Data URI scheme cursor test exception: " + exc); | |
273 | Util._cursor_uris_supported = false; | |
274 | } | |
275 | } | |
276 | ||
277 | return Util._cursor_uris_supported; | |
278 | }; | |
15046f00 JM |
279 | |
280 | // Set browser engine versions. Based on mootools. | |
281 | Util.Features = {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)}; | |
282 | ||
d21cd6c1 SR |
283 | (function () { |
284 | "use strict"; | |
285 | // 'presto': (function () { return (!window.opera) ? false : true; }()), | |
286 | var detectPresto = function () { | |
287 | return !!window.opera; | |
288 | }; | |
289 | ||
290 | // 'trident': (function () { return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4); | |
291 | var detectTrident = function () { | |
292 | if (!window.ActiveXObject) { | |
293 | return false; | |
294 | } else { | |
295 | if (window.XMLHttpRequest) { | |
296 | return (document.querySelectorAll) ? 6 : 5; | |
297 | } else { | |
298 | return 4; | |
299 | } | |
300 | } | |
301 | }; | |
302 | ||
303 | // 'webkit': (function () { try { return (navigator.taintEnabled) ? false : ((Util.Features.xpath) ? ((Util.Features.query) ? 525 : 420) : 419); } catch (e) { return false; } }()), | |
304 | var detectInitialWebkit = function () { | |
305 | try { | |
306 | if (navigator.taintEnabled) { | |
307 | return false; | |
308 | } else { | |
309 | if (Util.Features.xpath) { | |
310 | return (Util.Features.query) ? 525 : 420; | |
311 | } else { | |
312 | return 419; | |
313 | } | |
314 | } | |
315 | } catch (e) { | |
316 | return false; | |
317 | } | |
318 | }; | |
319 | ||
320 | var detectActualWebkit = function (initial_ver) { | |
321 | var re = /WebKit\/([0-9\.]*) /; | |
322 | var str_ver = (navigator.userAgent.match(re) || ['', initial_ver])[1]; | |
323 | return parseFloat(str_ver, 10); | |
324 | }; | |
325 | ||
326 | // 'gecko': (function () { return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19ssName) ? 19 : 18 : 18); }()) | |
327 | var detectGecko = function () { | |
328 | /* jshint -W041 */ | |
329 | if (!document.getBoxObjectFor && window.mozInnerScreenX == null) { | |
330 | return false; | |
331 | } else { | |
332 | return (document.getElementsByClassName) ? 19 : 18; | |
333 | } | |
334 | /* jshint +W041 */ | |
335 | }; | |
336 | ||
337 | Util.Engine = { | |
338 | // Version detection break in Opera 11.60 (errors on arguments.callee.caller reference) | |
339 | //'presto': (function() { | |
340 | // return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925)); }()), | |
341 | 'presto': detectPresto(), | |
342 | 'trident': detectTrident(), | |
343 | 'webkit': detectInitialWebkit(), | |
9310577b | 344 | 'gecko': detectGecko() |
d21cd6c1 SR |
345 | }; |
346 | ||
347 | if (Util.Engine.webkit) { | |
348 | // Extract actual webkit version if available | |
349 | Util.Engine.webkit = detectActualWebkit(Util.Engine.webkit); | |
350 | } | |
351 | })(); | |
15046f00 | 352 | |
d21cd6c1 SR |
353 | Util.Flash = (function () { |
354 | "use strict"; | |
15046f00 JM |
355 | var v, version; |
356 | try { | |
357 | v = navigator.plugins['Shockwave Flash'].description; | |
d21cd6c1 | 358 | } catch (err1) { |
15046f00 JM |
359 | try { |
360 | v = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version'); | |
d21cd6c1 | 361 | } catch (err2) { |
15046f00 JM |
362 | v = '0 r0'; |
363 | } | |
364 | } | |
365 | version = v.match(/\d+/g); | |
366 | return {version: parseInt(version[0] || 0 + '.' + version[1], 10) || 0, build: parseInt(version[2], 10) || 0}; | |
d21cd6c1 | 367 | }()); |
ae510306 | 368 | |
5af39a87 LJ |
369 | |
370 | Util.Localisation = { | |
3cdc603a PO |
371 | // Currently configured language |
372 | language: 'en', | |
5af39a87 | 373 | |
3cdc603a PO |
374 | // Configure suitable language based on user preferences |
375 | setup: function (supportedLanguages) { | |
376 | var userLanguages; | |
da88c287 | 377 | |
3cdc603a | 378 | Util.Localisation.language = 'en'; // Default: US English |
5af39a87 | 379 | |
3cdc603a PO |
380 | /* |
381 | * Navigator.languages only available in Chrome (32+) and FireFox (32+) | |
382 | * Fall back to navigator.language for other browsers | |
383 | */ | |
5af39a87 | 384 | if (typeof window.navigator.languages == 'object') { |
3cdc603a | 385 | userLanguages = window.navigator.languages; |
5af39a87 | 386 | } else { |
3cdc603a | 387 | userLanguages = [navigator.language || navigator.userLanguage]; |
5af39a87 | 388 | } |
5af39a87 | 389 | |
3cdc603a PO |
390 | for (var i = 0;i < userLanguages.length;i++) { |
391 | var userLang = userLanguages[i]; | |
392 | userLang = userLang.toLowerCase(); | |
393 | userLang = userLang.replace("_", "-"); | |
394 | userLang = userLang.split("-"); | |
395 | ||
396 | // Built-in default? | |
397 | if ((userLang[0] === 'en') && | |
398 | ((userLang[1] === undefined) || (userLang[1] === 'us'))) { | |
399 | return; | |
5af39a87 | 400 | } |
5af39a87 | 401 | |
3cdc603a PO |
402 | // First pass: perfect match |
403 | for (var j = 0;j < supportedLanguages.length;j++) { | |
404 | var supLang = supportedLanguages[j]; | |
405 | supLang = supLang.toLowerCase(); | |
406 | supLang = supLang.replace("_", "-"); | |
407 | supLang = supLang.split("-"); | |
408 | ||
409 | if (userLang[0] !== supLang[0]) | |
410 | continue; | |
411 | if (userLang[1] !== supLang[1]) | |
412 | continue; | |
413 | ||
414 | Util.Localisation.language = supportedLanguages[j]; | |
415 | return; | |
416 | } | |
417 | ||
418 | // Second pass: fallback | |
419 | for (var j = 0;j < supportedLanguages.length;j++) { | |
420 | supLang = supportedLanguages[j]; | |
421 | supLang = supLang.toLowerCase(); | |
422 | supLang = supLang.replace("_", "-"); | |
423 | supLang = supLang.split("-"); | |
424 | ||
425 | if (userLang[0] !== supLang[0]) | |
426 | continue; | |
427 | if (supLang[1] !== undefined) | |
428 | continue; | |
429 | ||
430 | Util.Localisation.language = supportedLanguages[j]; | |
431 | return; | |
432 | } | |
433 | } | |
5af39a87 LJ |
434 | }, |
435 | ||
436 | // Retrieve localised text | |
437 | get: function (id) { | |
9e26112d | 438 | if (typeof Language !== 'undefined' && Language[id]) { |
5af39a87 LJ |
439 | return Language[id]; |
440 | } else { | |
441 | return id; | |
442 | } | |
edffd9e2 PO |
443 | }, |
444 | ||
445 | // Traverses the DOM and translates relevant fields | |
446 | // See https://html.spec.whatwg.org/multipage/dom.html#attr-translate | |
447 | translateDOM: function () { | |
448 | function process(elem, enabled) { | |
449 | function isAnyOf(searchElement, items) { | |
450 | return items.indexOf(searchElement) !== -1; | |
451 | } | |
452 | ||
453 | function translateAttribute(elem, attr) { | |
454 | var str = elem.getAttribute(attr); | |
455 | str = Util.Localisation.get(str); | |
456 | elem.setAttribute(attr, str); | |
457 | } | |
458 | ||
459 | function translateTextNode(node) { | |
460 | var str = node.data.trim(); | |
461 | str = Util.Localisation.get(str); | |
462 | node.data = str; | |
463 | } | |
464 | ||
465 | if (elem.hasAttribute("translate")) { | |
466 | if (isAnyOf(elem.getAttribute("translate"), ["", "yes"])) { | |
467 | enabled = true; | |
468 | } else if (isAnyOf(elem.getAttribute("translate"), ["no"])) { | |
469 | enabled = false; | |
470 | } | |
471 | } | |
472 | ||
473 | if (enabled) { | |
474 | if (elem.hasAttribute("abbr") && | |
475 | elem.tagName === "TH") { | |
476 | translateAttribute(elem, "abbr"); | |
477 | } | |
478 | if (elem.hasAttribute("alt") && | |
479 | isAnyOf(elem.tagName, ["AREA", "IMG", "INPUT"])) { | |
480 | translateAttribute(elem, "alt"); | |
481 | } | |
482 | if (elem.hasAttribute("download") && | |
483 | isAnyOf(elem.tagName, ["A", "AREA"])) { | |
484 | translateAttribute(elem, "download"); | |
485 | } | |
486 | if (elem.hasAttribute("label") && | |
487 | isAnyOf(elem.tagName, ["MENUITEM", "MENU", "OPTGROUP", | |
488 | "OPTION", "TRACK"])) { | |
489 | translateAttribute(elem, "label"); | |
490 | } | |
491 | // FIXME: Should update "lang" | |
492 | if (elem.hasAttribute("placeholder") && | |
493 | isAnyOf(elem.tagName in ["INPUT", "TEXTAREA"])) { | |
494 | translateAttribute(elem, "placeholder"); | |
495 | } | |
496 | if (elem.hasAttribute("title")) { | |
497 | translateAttribute(elem, "title"); | |
498 | } | |
499 | if (elem.hasAttribute("value") && | |
500 | elem.tagName === "INPUT" && | |
501 | isAnyOf(elem.getAttribute("type"), ["reset", "button"])) { | |
502 | translateAttribute(elem, "value"); | |
503 | } | |
504 | } | |
505 | ||
506 | for (var i = 0;i < elem.childNodes.length;i++) { | |
507 | node = elem.childNodes[i]; | |
508 | if (node.nodeType === node.ELEMENT_NODE) { | |
509 | process(node, enabled); | |
510 | } else if (node.nodeType === node.TEXT_NODE && enabled) { | |
511 | translateTextNode(node); | |
512 | } | |
513 | } | |
514 | } | |
515 | ||
516 | process(document.body, true); | |
517 | }, | |
5af39a87 LJ |
518 | }; |
519 | ||
ae510306 | 520 | /* [module] export default Util; */ |