2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Copyright (C) 2016 Samuel Mannehed for Cendio AB
5 * Copyright (C) 2016 Pierre Ossman for Cendio AB
6 * Licensed under MPL 2.0 (see LICENSE.txt)
8 * See README.md for usage and integration instructions.
11 import * as Log
from '../core/util/logging.js';
12 import _
, { l10n
} from './localization.js';
13 import { isTouchDevice
} from '../core/util/browser.js';
14 import { setCapture
, getPointerEvent
} from '../core/util/events.js';
15 import KeyTable
from "../core/input/keysym.js";
16 import keysyms
from "../core/input/keysymdef.js";
17 import Keyboard
from "../core/input/keyboard.js";
18 import RFB
from "../core/rfb.js";
19 import Display
from "../core/display.js";
20 import * as WebUtil
from "./webutil.js";
28 hideKeyboardTimeout
: null,
29 idleControlbarTimeout
: null,
30 closeControlbarTimeout
: null,
32 controlbarGrabbed
: false,
33 controlbarDrag
: false,
34 controlbarMouseDownClientY
: 0,
35 controlbarMouseDownOffsetY
: 0,
38 lastKeyboardinput
: null,
39 defaultKeyboardinputLen
: 100,
41 inhibit_reconnect
: true,
42 reconnect_callback
: null,
43 reconnect_password
: null,
45 prime: function(callback
) {
46 if (document
.readyState
=== "interactive" || document
.readyState
=== "complete") {
49 document
.addEventListener('DOMContentLoaded', UI
.load
.bind(UI
, callback
));
53 // Setup rfb object, load settings from browser storage, then call
54 // UI.init to setup the UI/menus
55 load: function(callback
) {
56 WebUtil
.initSettings(UI
.start
, callback
);
59 // Render default UI and initialize settings menu
60 start: function(callback
) {
62 // Setup global variables first
63 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
64 navigator
.userAgent
.indexOf('Chrome') === -1);
71 // Adapt the interface for touch screen devices
73 document
.documentElement
.classList
.add("noVNC_touch");
74 // Remove the address bar
75 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
78 // Restore control bar position
79 if (WebUtil
.readSetting('controlbar_pos') === 'right') {
80 UI
.toggleControlbarSide();
85 // Setup event handlers
86 UI
.addControlbarHandlers();
87 UI
.addTouchSpecificHandlers();
88 UI
.addExtraKeysHandlers();
89 UI
.addMachineHandlers();
90 UI
.addConnectionControlHandlers();
91 UI
.addClipboardHandlers();
92 UI
.addSettingsHandlers();
93 document
.getElementById("noVNC_status")
94 .addEventListener('click', UI
.hideStatus
);
96 // Bootstrap fallback input handler
97 UI
.keyboardinputReset();
101 UI
.updateVisualState('init');
103 document
.documentElement
.classList
.remove("noVNC_loading");
105 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
106 if (autoconnect
=== 'true' || autoconnect
== '1') {
111 // Show the connect panel on first load unless autoconnecting
112 UI
.openConnectPanel();
115 if (typeof callback
=== "function") {
120 initFullscreen: function() {
121 // Only show the button if fullscreen is properly supported
122 // * Safari doesn't support alphanumerical input while in fullscreen
124 (document
.documentElement
.requestFullscreen
||
125 document
.documentElement
.mozRequestFullScreen
||
126 document
.documentElement
.webkitRequestFullscreen
||
127 document
.body
.msRequestFullscreen
)) {
128 document
.getElementById('noVNC_fullscreen_button')
129 .classList
.remove("noVNC_hidden");
130 UI
.addFullscreenHandlers();
134 initSettings: function() {
137 // Logging selection dropdown
138 var llevels
= ['error', 'warn', 'info', 'debug'];
139 for (i
= 0; i
< llevels
.length
; i
+= 1) {
140 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
143 // Settings with immediate effects
144 UI
.initSetting('logging', 'warn');
147 // if port == 80 (or 443) then it won't be present and should be
149 var port
= window
.location
.port
;
151 if (window
.location
.protocol
.substring(0,5) == 'https') {
154 else if (window
.location
.protocol
.substring(0,4) == 'http') {
159 /* Populate the controls if defaults are provided in the URL */
160 UI
.initSetting('host', window
.location
.hostname
);
161 UI
.initSetting('port', port
);
162 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
163 UI
.initSetting('view_clip', false);
164 UI
.initSetting('resize', 'off');
165 UI
.initSetting('shared', true);
166 UI
.initSetting('view_only', false);
167 UI
.initSetting('path', 'websockify');
168 UI
.initSetting('repeaterID', '');
169 UI
.initSetting('reconnect', false);
170 UI
.initSetting('reconnect_delay', 5000);
172 UI
.setupSettingLabels();
174 // Adds a link to the label elements on the corresponding input elements
175 setupSettingLabels: function() {
176 var labels
= document
.getElementsByTagName('LABEL');
177 for (var i
= 0; i
< labels
.length
; i
++) {
178 var htmlFor
= labels
[i
].htmlFor
;
180 var elem
= document
.getElementById(htmlFor
);
181 if (elem
) elem
.label
= labels
[i
];
183 // If 'for' isn't set, use the first input element child
184 var children
= labels
[i
].children
;
185 for (var j
= 0; j
< children
.length
; j
++) {
186 if (children
[j
].form
!== undefined) {
187 children
[j
].label
= labels
[i
];
201 addControlbarHandlers: function() {
202 document
.getElementById("noVNC_control_bar")
203 .addEventListener('mousemove', UI
.activateControlbar
);
204 document
.getElementById("noVNC_control_bar")
205 .addEventListener('mouseup', UI
.activateControlbar
);
206 document
.getElementById("noVNC_control_bar")
207 .addEventListener('mousedown', UI
.activateControlbar
);
208 document
.getElementById("noVNC_control_bar")
209 .addEventListener('keydown', UI
.activateControlbar
);
211 document
.getElementById("noVNC_control_bar")
212 .addEventListener('mousedown', UI
.keepControlbar
);
213 document
.getElementById("noVNC_control_bar")
214 .addEventListener('keydown', UI
.keepControlbar
);
216 document
.getElementById("noVNC_view_drag_button")
217 .addEventListener('click', UI
.toggleViewDrag
);
219 document
.getElementById("noVNC_control_bar_handle")
220 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
221 document
.getElementById("noVNC_control_bar_handle")
222 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
223 document
.getElementById("noVNC_control_bar_handle")
224 .addEventListener('mousemove', UI
.dragControlbarHandle
);
225 // resize events aren't available for elements
226 window
.addEventListener('resize', UI
.updateControlbarHandle
);
228 var exps
= document
.getElementsByClassName("noVNC_expander");
229 for (var i
= 0;i
< exps
.length
;i
++) {
230 exps
[i
].addEventListener('click', UI
.toggleExpander
);
234 addTouchSpecificHandlers: function() {
235 document
.getElementById("noVNC_mouse_button0")
236 .addEventListener('click', function () { UI
.setMouseButton(1); });
237 document
.getElementById("noVNC_mouse_button1")
238 .addEventListener('click', function () { UI
.setMouseButton(2); });
239 document
.getElementById("noVNC_mouse_button2")
240 .addEventListener('click', function () { UI
.setMouseButton(4); });
241 document
.getElementById("noVNC_mouse_button4")
242 .addEventListener('click', function () { UI
.setMouseButton(0); });
243 document
.getElementById("noVNC_keyboard_button")
244 .addEventListener('click', UI
.toggleVirtualKeyboard
);
246 UI
.touchKeyboard
= new Keyboard(document
.getElementById('noVNC_keyboardinput'));
247 UI
.touchKeyboard
.onkeyevent
= UI
.keyEvent
;
248 UI
.touchKeyboard
.grab();
249 document
.getElementById("noVNC_keyboardinput")
250 .addEventListener('input', UI
.keyInput
);
251 document
.getElementById("noVNC_keyboardinput")
252 .addEventListener('focus', UI
.onfocusVirtualKeyboard
);
253 document
.getElementById("noVNC_keyboardinput")
254 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
255 document
.getElementById("noVNC_keyboardinput")
256 .addEventListener('submit', function () { return false; });
258 document
.documentElement
259 .addEventListener('mousedown', UI
.keepVirtualKeyboard
, true);
261 document
.getElementById("noVNC_control_bar")
262 .addEventListener('touchstart', UI
.activateControlbar
);
263 document
.getElementById("noVNC_control_bar")
264 .addEventListener('touchmove', UI
.activateControlbar
);
265 document
.getElementById("noVNC_control_bar")
266 .addEventListener('touchend', UI
.activateControlbar
);
267 document
.getElementById("noVNC_control_bar")
268 .addEventListener('input', UI
.activateControlbar
);
270 document
.getElementById("noVNC_control_bar")
271 .addEventListener('touchstart', UI
.keepControlbar
);
272 document
.getElementById("noVNC_control_bar")
273 .addEventListener('input', UI
.keepControlbar
);
275 document
.getElementById("noVNC_control_bar_handle")
276 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
277 document
.getElementById("noVNC_control_bar_handle")
278 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
279 document
.getElementById("noVNC_control_bar_handle")
280 .addEventListener('touchmove', UI
.dragControlbarHandle
);
283 addExtraKeysHandlers: function() {
284 document
.getElementById("noVNC_toggle_extra_keys_button")
285 .addEventListener('click', UI
.toggleExtraKeys
);
286 document
.getElementById("noVNC_toggle_ctrl_button")
287 .addEventListener('click', UI
.toggleCtrl
);
288 document
.getElementById("noVNC_toggle_alt_button")
289 .addEventListener('click', UI
.toggleAlt
);
290 document
.getElementById("noVNC_send_tab_button")
291 .addEventListener('click', UI
.sendTab
);
292 document
.getElementById("noVNC_send_esc_button")
293 .addEventListener('click', UI
.sendEsc
);
294 document
.getElementById("noVNC_send_ctrl_alt_del_button")
295 .addEventListener('click', UI
.sendCtrlAltDel
);
298 addMachineHandlers: function() {
299 document
.getElementById("noVNC_shutdown_button")
300 .addEventListener('click', function() { UI
.rfb
.machineShutdown(); });
301 document
.getElementById("noVNC_reboot_button")
302 .addEventListener('click', function() { UI
.rfb
.machineReboot(); });
303 document
.getElementById("noVNC_reset_button")
304 .addEventListener('click', function() { UI
.rfb
.machineReset(); });
305 document
.getElementById("noVNC_power_button")
306 .addEventListener('click', UI
.togglePowerPanel
);
309 addConnectionControlHandlers: function() {
310 document
.getElementById("noVNC_disconnect_button")
311 .addEventListener('click', UI
.disconnect
);
312 document
.getElementById("noVNC_connect_button")
313 .addEventListener('click', UI
.connect
);
314 document
.getElementById("noVNC_cancel_reconnect_button")
315 .addEventListener('click', UI
.cancelReconnect
);
317 document
.getElementById("noVNC_password_button")
318 .addEventListener('click', UI
.setPassword
);
321 addClipboardHandlers: function() {
322 document
.getElementById("noVNC_clipboard_button")
323 .addEventListener('click', UI
.toggleClipboardPanel
);
324 document
.getElementById("noVNC_clipboard_text")
325 .addEventListener('change', UI
.clipboardSend
);
326 document
.getElementById("noVNC_clipboard_clear_button")
327 .addEventListener('click', UI
.clipboardClear
);
330 // Add a call to save settings when the element changes,
331 // unless the optional parameter changeFunc is used instead.
332 addSettingChangeHandler: function(name
, changeFunc
) {
333 var settingElem
= document
.getElementById("noVNC_setting_" + name
);
334 if (changeFunc
=== undefined) {
335 changeFunc = function () { UI
.saveSetting(name
); };
337 settingElem
.addEventListener('change', changeFunc
);
340 addSettingsHandlers: function() {
341 document
.getElementById("noVNC_settings_button")
342 .addEventListener('click', UI
.toggleSettingsPanel
);
344 UI
.addSettingChangeHandler('encrypt');
345 UI
.addSettingChangeHandler('resize');
346 UI
.addSettingChangeHandler('resize', UI
.enableDisableViewClip
);
347 UI
.addSettingChangeHandler('resize', UI
.applyResizeMode
);
348 UI
.addSettingChangeHandler('view_clip');
349 UI
.addSettingChangeHandler('view_clip', UI
.updateViewClip
);
350 UI
.addSettingChangeHandler('shared');
351 UI
.addSettingChangeHandler('view_only');
352 UI
.addSettingChangeHandler('view_only', UI
.updateViewOnly
);
353 UI
.addSettingChangeHandler('host');
354 UI
.addSettingChangeHandler('port');
355 UI
.addSettingChangeHandler('path');
356 UI
.addSettingChangeHandler('repeaterID');
357 UI
.addSettingChangeHandler('logging');
358 UI
.addSettingChangeHandler('logging', UI
.updateLogging
);
359 UI
.addSettingChangeHandler('reconnect');
360 UI
.addSettingChangeHandler('reconnect_delay');
363 addFullscreenHandlers: function() {
364 document
.getElementById("noVNC_fullscreen_button")
365 .addEventListener('click', UI
.toggleFullscreen
);
367 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
368 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
369 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
370 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
379 // Disable/enable controls depending on connection state
380 updateVisualState: function(state
) {
382 document
.documentElement
.classList
.remove("noVNC_connecting");
383 document
.documentElement
.classList
.remove("noVNC_connected");
384 document
.documentElement
.classList
.remove("noVNC_disconnecting");
385 document
.documentElement
.classList
.remove("noVNC_reconnecting");
387 let transition_elem
= document
.getElementById("noVNC_transition_text");
392 transition_elem
.textContent
= _("Connecting...");
393 document
.documentElement
.classList
.add("noVNC_connecting");
396 document
.documentElement
.classList
.add("noVNC_connected");
398 case 'disconnecting':
399 transition_elem
.textContent
= _("Disconnecting...");
400 document
.documentElement
.classList
.add("noVNC_disconnecting");
405 transition_elem
.textContent
= _("Reconnecting...");
406 document
.documentElement
.classList
.add("noVNC_reconnecting");
409 Log
.Error("Invalid visual state: " + state
);
410 UI
.showStatus(_("Internal error"), 'error');
414 UI
.enableDisableViewClip();
417 UI
.disableSetting('encrypt');
418 UI
.disableSetting('shared');
419 UI
.disableSetting('host');
420 UI
.disableSetting('port');
421 UI
.disableSetting('path');
422 UI
.disableSetting('repeaterID');
423 UI
.setMouseButton(1);
425 // Hide the controlbar after 2 seconds
426 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
428 UI
.enableSetting('encrypt');
429 UI
.enableSetting('shared');
430 UI
.enableSetting('host');
431 UI
.enableSetting('port');
432 UI
.enableSetting('path');
433 UI
.enableSetting('repeaterID');
434 UI
.updatePowerButton();
438 // State change disables viewport dragging.
439 // It is enabled (toggled) by direct click on the button
440 UI
.setViewDrag(false);
442 // State change also closes the password dialog
443 document
.getElementById('noVNC_password_dlg')
444 .classList
.remove('noVNC_open');
447 showStatus: function(text
, status_type
, time
) {
448 var statusElem
= document
.getElementById('noVNC_status');
450 clearTimeout(UI
.statusTimeout
);
452 if (typeof status_type
=== 'undefined') {
453 status_type
= 'normal';
456 // Don't overwrite more severe visible statuses and never
457 // errors. Only shows the first error.
458 let visible_status_type
= 'none';
459 if (statusElem
.classList
.contains("noVNC_open")) {
460 if (statusElem
.classList
.contains("noVNC_status_error")) {
461 visible_status_type
= 'error';
462 } else if (statusElem
.classList
.contains("noVNC_status_warn")) {
463 visible_status_type
= 'warn';
465 visible_status_type
= 'normal';
468 if (visible_status_type
=== 'error' ||
469 (visible_status_type
=== 'warn' && status_type
=== 'normal')) {
473 switch (status_type
) {
475 statusElem
.classList
.remove("noVNC_status_warn");
476 statusElem
.classList
.remove("noVNC_status_normal");
477 statusElem
.classList
.add("noVNC_status_error");
481 statusElem
.classList
.remove("noVNC_status_error");
482 statusElem
.classList
.remove("noVNC_status_normal");
483 statusElem
.classList
.add("noVNC_status_warn");
488 statusElem
.classList
.remove("noVNC_status_error");
489 statusElem
.classList
.remove("noVNC_status_warn");
490 statusElem
.classList
.add("noVNC_status_normal");
494 statusElem
.textContent
= text
;
495 statusElem
.classList
.add("noVNC_open");
497 // If no time was specified, show the status for 1.5 seconds
498 if (typeof time
=== 'undefined') {
502 // Error messages do not timeout
503 if (status_type
!== 'error') {
504 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
508 hideStatus: function() {
509 clearTimeout(UI
.statusTimeout
);
510 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
513 activateControlbar: function(event
) {
514 clearTimeout(UI
.idleControlbarTimeout
);
515 // We manipulate the anchor instead of the actual control
516 // bar in order to avoid creating new a stacking group
517 document
.getElementById('noVNC_control_bar_anchor')
518 .classList
.remove("noVNC_idle");
519 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
522 idleControlbar: function() {
523 document
.getElementById('noVNC_control_bar_anchor')
524 .classList
.add("noVNC_idle");
527 keepControlbar: function() {
528 clearTimeout(UI
.closeControlbarTimeout
);
531 openControlbar: function() {
532 document
.getElementById('noVNC_control_bar')
533 .classList
.add("noVNC_open");
536 closeControlbar: function() {
538 document
.getElementById('noVNC_control_bar')
539 .classList
.remove("noVNC_open");
542 toggleControlbar: function() {
543 if (document
.getElementById('noVNC_control_bar')
544 .classList
.contains("noVNC_open")) {
545 UI
.closeControlbar();
551 toggleControlbarSide: function () {
552 // Temporarily disable animation to avoid weird movement
553 var bar
= document
.getElementById('noVNC_control_bar');
554 bar
.style
.transitionDuration
= '0s';
555 bar
.addEventListener('transitionend', function () { this.style
.transitionDuration
= ""; });
557 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
558 if (anchor
.classList
.contains("noVNC_right")) {
559 WebUtil
.writeSetting('controlbar_pos', 'left');
560 anchor
.classList
.remove("noVNC_right");
562 WebUtil
.writeSetting('controlbar_pos', 'right');
563 anchor
.classList
.add("noVNC_right");
566 // Consider this a movement of the handle
567 UI
.controlbarDrag
= true;
570 showControlbarHint: function (show
) {
571 var hint
= document
.getElementById('noVNC_control_bar_hint');
573 hint
.classList
.add("noVNC_active");
575 hint
.classList
.remove("noVNC_active");
579 dragControlbarHandle: function (e
) {
580 if (!UI
.controlbarGrabbed
) return;
582 var ptr
= getPointerEvent(e
);
584 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
585 if (ptr
.clientX
< (window
.innerWidth
* 0.1)) {
586 if (anchor
.classList
.contains("noVNC_right")) {
587 UI
.toggleControlbarSide();
589 } else if (ptr
.clientX
> (window
.innerWidth
* 0.9)) {
590 if (!anchor
.classList
.contains("noVNC_right")) {
591 UI
.toggleControlbarSide();
595 if (!UI
.controlbarDrag
) {
596 // The goal is to trigger on a certain physical width, the
597 // devicePixelRatio brings us a bit closer but is not optimal.
598 var dragThreshold
= 10 * (window
.devicePixelRatio
|| 1);
599 var dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
601 if (dragDistance
< dragThreshold
) return;
603 UI
.controlbarDrag
= true;
606 var eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
608 UI
.moveControlbarHandle(eventY
);
613 UI
.activateControlbar();
616 // Move the handle but don't allow any position outside the bounds
617 moveControlbarHandle: function (viewportRelativeY
) {
618 var handle
= document
.getElementById("noVNC_control_bar_handle");
619 var handleHeight
= handle
.getBoundingClientRect().height
;
620 var controlbarBounds
= document
.getElementById("noVNC_control_bar")
621 .getBoundingClientRect();
624 // These heights need to be non-zero for the below logic to work
625 if (handleHeight
=== 0 || controlbarBounds
.height
=== 0) {
629 var newY
= viewportRelativeY
;
631 // Check if the coordinates are outside the control bar
632 if (newY
< controlbarBounds
.top
+ margin
) {
633 // Force coordinates to be below the top of the control bar
634 newY
= controlbarBounds
.top
+ margin
;
636 } else if (newY
> controlbarBounds
.top
+
637 controlbarBounds
.height
- handleHeight
- margin
) {
638 // Force coordinates to be above the bottom of the control bar
639 newY
= controlbarBounds
.top
+
640 controlbarBounds
.height
- handleHeight
- margin
;
643 // Corner case: control bar too small for stable position
644 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
645 newY
= controlbarBounds
.top
+
646 (controlbarBounds
.height
- handleHeight
) / 2;
649 // The transform needs coordinates that are relative to the parent
650 var parentRelativeY
= newY
- controlbarBounds
.top
;
651 handle
.style
.transform
= "translateY(" + parentRelativeY
+ "px)";
654 updateControlbarHandle: function () {
655 // Since the control bar is fixed on the viewport and not the page,
656 // the move function expects coordinates relative the the viewport.
657 var handle
= document
.getElementById("noVNC_control_bar_handle");
658 var handleBounds
= handle
.getBoundingClientRect();
659 UI
.moveControlbarHandle(handleBounds
.top
);
662 controlbarHandleMouseUp: function(e
) {
663 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
665 // mouseup and mousedown on the same place toggles the controlbar
666 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
667 UI
.toggleControlbar();
671 UI
.activateControlbar();
673 UI
.controlbarGrabbed
= false;
674 UI
.showControlbarHint(false);
677 controlbarHandleMouseDown: function(e
) {
678 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
680 var ptr
= getPointerEvent(e
);
682 var handle
= document
.getElementById("noVNC_control_bar_handle");
683 var bounds
= handle
.getBoundingClientRect();
685 // Touch events have implicit capture
686 if (e
.type
=== "mousedown") {
690 UI
.controlbarGrabbed
= true;
691 UI
.controlbarDrag
= false;
693 UI
.showControlbarHint(true);
695 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
696 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
700 UI
.activateControlbar();
703 toggleExpander: function(e
) {
704 if (this.classList
.contains("noVNC_open")) {
705 this.classList
.remove("noVNC_open");
707 this.classList
.add("noVNC_open");
717 // Initial page load read/initialization of settings
718 initSetting: function(name
, defVal
) {
719 // Check Query string followed by cookie
720 var val
= WebUtil
.getConfigVar(name
);
722 val
= WebUtil
.readSetting(name
, defVal
);
724 WebUtil
.setSetting(name
, val
);
725 UI
.updateSetting(name
);
729 // Update cookie and form control setting. If value is not set, then
730 // updates from control to current cookie setting.
731 updateSetting: function(name
) {
733 // Update the settings control
734 var value
= UI
.getSetting(name
);
736 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
737 if (ctrl
.type
=== 'checkbox') {
738 ctrl
.checked
= value
;
740 } else if (typeof ctrl
.options
!== 'undefined') {
741 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
742 if (ctrl
.options
[i
].value
=== value
) {
743 ctrl
.selectedIndex
= i
;
748 /*Weird IE9 error leads to 'null' appearring
749 in textboxes instead of ''.*/
750 if (value
=== null) {
757 // Save control setting to cookie
758 saveSetting: function(name
) {
759 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
760 if (ctrl
.type
=== 'checkbox') {
762 } else if (typeof ctrl
.options
!== 'undefined') {
763 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
767 WebUtil
.writeSetting(name
, val
);
768 //Log.Debug("Setting saved '" + name + "=" + val + "'");
772 // Read form control compatible setting from cookie
773 getSetting: function(name
) {
774 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
775 var val
= WebUtil
.readSetting(name
);
776 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
777 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
786 // These helpers compensate for the lack of parent-selectors and
787 // previous-sibling-selectors in CSS which are needed when we want to
788 // disable the labels that belong to disabled input elements.
789 disableSetting: function(name
) {
790 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
791 ctrl
.disabled
= true;
792 ctrl
.label
.classList
.add('noVNC_disabled');
795 enableSetting: function(name
) {
796 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
797 ctrl
.disabled
= false;
798 ctrl
.label
.classList
.remove('noVNC_disabled');
807 closeAllPanels: function() {
808 UI
.closeSettingsPanel();
809 UI
.closePowerPanel();
810 UI
.closeClipboardPanel();
820 openSettingsPanel: function() {
824 // Refresh UI elements from saved cookies
825 UI
.updateSetting('encrypt');
826 UI
.updateSetting('view_clip');
827 UI
.updateSetting('resize');
828 UI
.updateSetting('shared');
829 UI
.updateSetting('view_only');
830 UI
.updateSetting('path');
831 UI
.updateSetting('repeaterID');
832 UI
.updateSetting('logging');
833 UI
.updateSetting('reconnect');
834 UI
.updateSetting('reconnect_delay');
836 document
.getElementById('noVNC_settings')
837 .classList
.add("noVNC_open");
838 document
.getElementById('noVNC_settings_button')
839 .classList
.add("noVNC_selected");
842 closeSettingsPanel: function() {
843 document
.getElementById('noVNC_settings')
844 .classList
.remove("noVNC_open");
845 document
.getElementById('noVNC_settings_button')
846 .classList
.remove("noVNC_selected");
849 toggleSettingsPanel: function() {
850 if (document
.getElementById('noVNC_settings')
851 .classList
.contains("noVNC_open")) {
852 UI
.closeSettingsPanel();
854 UI
.openSettingsPanel();
864 openPowerPanel: function() {
868 document
.getElementById('noVNC_power')
869 .classList
.add("noVNC_open");
870 document
.getElementById('noVNC_power_button')
871 .classList
.add("noVNC_selected");
874 closePowerPanel: function() {
875 document
.getElementById('noVNC_power')
876 .classList
.remove("noVNC_open");
877 document
.getElementById('noVNC_power_button')
878 .classList
.remove("noVNC_selected");
881 togglePowerPanel: function() {
882 if (document
.getElementById('noVNC_power')
883 .classList
.contains("noVNC_open")) {
884 UI
.closePowerPanel();
890 // Disable/enable power button
891 updatePowerButton: function() {
893 UI
.rfb
.capabilities
.power
&&
895 document
.getElementById('noVNC_power_button')
896 .classList
.remove("noVNC_hidden");
898 document
.getElementById('noVNC_power_button')
899 .classList
.add("noVNC_hidden");
900 // Close power panel if open
901 UI
.closePowerPanel();
911 openClipboardPanel: function() {
915 document
.getElementById('noVNC_clipboard')
916 .classList
.add("noVNC_open");
917 document
.getElementById('noVNC_clipboard_button')
918 .classList
.add("noVNC_selected");
921 closeClipboardPanel: function() {
922 document
.getElementById('noVNC_clipboard')
923 .classList
.remove("noVNC_open");
924 document
.getElementById('noVNC_clipboard_button')
925 .classList
.remove("noVNC_selected");
928 toggleClipboardPanel: function() {
929 if (document
.getElementById('noVNC_clipboard')
930 .classList
.contains("noVNC_open")) {
931 UI
.closeClipboardPanel();
933 UI
.openClipboardPanel();
937 clipboardReceive: function(e
) {
938 Log
.Debug(">> UI.clipboardReceive: " + e
.detail
.text
.substr(0,40) + "...");
939 document
.getElementById('noVNC_clipboard_text').value
= e
.detail
.text
;
940 Log
.Debug("<< UI.clipboardReceive");
943 clipboardClear: function() {
944 document
.getElementById('noVNC_clipboard_text').value
= "";
945 UI
.rfb
.clipboardPasteFrom("");
948 clipboardSend: function() {
949 var text
= document
.getElementById('noVNC_clipboard_text').value
;
950 Log
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
951 UI
.rfb
.clipboardPasteFrom(text
);
952 Log
.Debug("<< UI.clipboardSend");
961 openConnectPanel: function() {
962 document
.getElementById('noVNC_connect_dlg')
963 .classList
.add("noVNC_open");
966 closeConnectPanel: function() {
967 document
.getElementById('noVNC_connect_dlg')
968 .classList
.remove("noVNC_open");
971 connect: function(event
, password
) {
973 // Ignore when rfb already exists
974 if (typeof UI
.rfb
!== 'undefined') {
978 var host
= UI
.getSetting('host');
979 var port
= UI
.getSetting('port');
980 var path
= UI
.getSetting('path');
982 if (typeof password
=== 'undefined') {
983 password
= WebUtil
.getConfigVar('password');
984 UI
.reconnect_password
= password
;
987 if (password
=== null) {
988 password
= undefined;
994 Log
.Error("Can't connect when host is: " + host
);
995 UI
.showStatus(_("Must set host"), 'error');
1000 UI
.closeConnectPanel();
1002 UI
.updateVisualState('connecting');
1006 url
= UI
.getSetting('encrypt') ? 'wss' : 'ws';
1008 url
+= '://' + host
;
1014 UI
.rfb
= new RFB(document
.getElementById('noVNC_container'), url
,
1015 { shared
: UI
.getSetting('shared'),
1016 repeaterID
: UI
.getSetting('repeaterID'),
1017 credentials
: { password
: password
} });
1018 UI
.rfb
.addEventListener("connect", UI
.connectFinished
);
1019 UI
.rfb
.addEventListener("disconnect", UI
.disconnectFinished
);
1020 UI
.rfb
.addEventListener("credentialsrequired", UI
.credentials
);
1021 UI
.rfb
.addEventListener("securityfailure", UI
.securityFailed
);
1022 UI
.rfb
.addEventListener("capabilities", function () { UI
.updatePowerButton(); });
1023 UI
.rfb
.addEventListener("clipboard", UI
.clipboardReceive
);
1024 UI
.rfb
.addEventListener("bell", UI
.bell
);
1025 UI
.rfb
.addEventListener("desktopname", UI
.updateDesktopName
);
1026 UI
.rfb
.clipViewport
= UI
.getSetting('view_clip');
1027 UI
.rfb
.scaleViewport
= UI
.getSetting('resize') === 'scale';
1028 UI
.rfb
.resizeSession
= UI
.getSetting('resize') === 'remote';
1030 UI
.updateViewOnly(); // requires UI.rfb
1033 disconnect: function() {
1034 UI
.closeAllPanels();
1035 UI
.rfb
.disconnect();
1037 UI
.connected
= false;
1039 // Disable automatic reconnecting
1040 UI
.inhibit_reconnect
= true;
1042 UI
.updateVisualState('disconnecting');
1044 // Don't display the connection settings until we're actually disconnected
1047 reconnect: function() {
1048 UI
.reconnect_callback
= null;
1050 // if reconnect has been disabled in the meantime, do nothing.
1051 if (UI
.inhibit_reconnect
) {
1055 UI
.connect(null, UI
.reconnect_password
);
1058 cancelReconnect: function() {
1059 if (UI
.reconnect_callback
!== null) {
1060 clearTimeout(UI
.reconnect_callback
);
1061 UI
.reconnect_callback
= null;
1064 UI
.updateVisualState('disconnected');
1066 UI
.openControlbar();
1067 UI
.openConnectPanel();
1070 connectFinished: function (e
) {
1071 UI
.connected
= true;
1072 UI
.inhibit_reconnect
= false;
1075 if (UI
.getSetting('encrypt')) {
1076 msg
= _("Connected (encrypted) to ") + UI
.desktopName
;
1078 msg
= _("Connected (unencrypted) to ") + UI
.desktopName
;
1081 UI
.updateVisualState('connected');
1083 // Do this last because it can only be used on rendered elements
1087 disconnectFinished: function (e
) {
1088 let wasConnected
= UI
.connected
;
1090 // This variable is ideally set when disconnection starts, but
1091 // when the disconnection isn't clean or if it is initiated by
1092 // the server, we need to do it here as well since
1093 // UI.disconnect() won't be used in those cases.
1094 UI
.connected
= false;
1098 if (!e
.detail
.clean
) {
1099 UI
.updateVisualState('disconnected');
1101 UI
.showStatus(_("Something went wrong, connection is closed"),
1104 UI
.showStatus(_("Failed to connect to server"), 'error');
1106 } else if (UI
.getSetting('reconnect', false) === true && !UI
.inhibit_reconnect
) {
1107 UI
.updateVisualState('reconnecting');
1109 var delay
= parseInt(UI
.getSetting('reconnect_delay'));
1110 UI
.reconnect_callback
= setTimeout(UI
.reconnect
, delay
);
1113 UI
.updateVisualState('disconnected');
1114 UI
.showStatus(_("Disconnected"), 'normal');
1117 UI
.openControlbar();
1118 UI
.openConnectPanel();
1121 securityFailed: function (e
) {
1123 // On security failures we might get a string with a reason
1124 // directly from the server. Note that we can't control if
1125 // this string is translated or not.
1126 if ('reason' in e
.detail
) {
1127 msg
= _("New connection has been rejected with reason: ") +
1130 msg
= _("New connection has been rejected");
1132 UI
.showStatus(msg
, 'error');
1141 credentials: function(e
) {
1142 // FIXME: handle more types
1143 document
.getElementById('noVNC_password_dlg')
1144 .classList
.add('noVNC_open');
1146 setTimeout(function () {
1147 document
.getElementById('noVNC_password_input').focus();
1150 Log
.Warn("Server asked for a password");
1151 UI
.showStatus(_("Password is required"), "warning");
1154 setPassword: function(e
) {
1155 // Prevent actually submitting the form
1158 var inputElem
= document
.getElementById('noVNC_password_input');
1159 var password
= inputElem
.value
;
1160 // Clear the input after reading the password
1161 inputElem
.value
= "";
1162 UI
.rfb
.sendCredentials({ password
: password
});
1163 UI
.reconnect_password
= password
;
1164 document
.getElementById('noVNC_password_dlg')
1165 .classList
.remove('noVNC_open');
1174 toggleFullscreen: function() {
1175 if (document
.fullscreenElement
|| // alternative standard method
1176 document
.mozFullScreenElement
|| // currently working methods
1177 document
.webkitFullscreenElement
||
1178 document
.msFullscreenElement
) {
1179 if (document
.exitFullscreen
) {
1180 document
.exitFullscreen();
1181 } else if (document
.mozCancelFullScreen
) {
1182 document
.mozCancelFullScreen();
1183 } else if (document
.webkitExitFullscreen
) {
1184 document
.webkitExitFullscreen();
1185 } else if (document
.msExitFullscreen
) {
1186 document
.msExitFullscreen();
1189 if (document
.documentElement
.requestFullscreen
) {
1190 document
.documentElement
.requestFullscreen();
1191 } else if (document
.documentElement
.mozRequestFullScreen
) {
1192 document
.documentElement
.mozRequestFullScreen();
1193 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1194 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1195 } else if (document
.body
.msRequestFullscreen
) {
1196 document
.body
.msRequestFullscreen();
1199 UI
.enableDisableViewClip();
1200 UI
.updateFullscreenButton();
1203 updateFullscreenButton: function() {
1204 if (document
.fullscreenElement
|| // alternative standard method
1205 document
.mozFullScreenElement
|| // currently working methods
1206 document
.webkitFullscreenElement
||
1207 document
.msFullscreenElement
) {
1208 document
.getElementById('noVNC_fullscreen_button')
1209 .classList
.add("noVNC_selected");
1211 document
.getElementById('noVNC_fullscreen_button')
1212 .classList
.remove("noVNC_selected");
1222 // Apply remote resizing or local scaling
1223 applyResizeMode: function() {
1224 if (!UI
.rfb
) return;
1226 UI
.rfb
.scaleViewport
= UI
.getSetting('resize') === 'scale';
1227 UI
.rfb
.resizeSession
= UI
.getSetting('resize') === 'remote';
1236 // Update parameters that depend on the viewport clip setting
1237 updateViewClip: function() {
1238 if (!UI
.rfb
) return;
1240 var cur_clip
= UI
.rfb
.clipViewport
;
1241 var new_clip
= UI
.getSetting('view_clip');
1243 if (isTouchDevice
) {
1244 // Touch devices usually have shit scrollbars
1248 if (cur_clip
!== new_clip
) {
1249 UI
.rfb
.clipViewport
= new_clip
;
1252 // Changing the viewport may change the state of
1253 // the dragging button
1254 UI
.updateViewDrag();
1257 // Handle special cases where viewport clipping is forced on/off or locked
1258 enableDisableViewClip: function() {
1259 var resizeSetting
= UI
.getSetting('resize');
1260 // Disable clipping if we are scaling, connected or on touch
1261 if (resizeSetting
=== 'scale' ||
1263 UI
.disableSetting('view_clip');
1265 UI
.enableSetting('view_clip');
1275 toggleViewDrag: function() {
1276 if (!UI
.rfb
) return;
1278 var drag
= UI
.rfb
.dragViewport
;
1279 UI
.setViewDrag(!drag
);
1282 // Set the view drag mode which moves the viewport on mouse drags
1283 setViewDrag: function(drag
) {
1284 if (!UI
.rfb
) return;
1286 UI
.rfb
.dragViewport
= drag
;
1288 UI
.updateViewDrag();
1291 updateViewDrag: function() {
1292 if (!UI
.connected
) return;
1294 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1296 if (!UI
.rfb
.clipViewport
&& UI
.rfb
.dragViewport
) {
1297 // We are no longer clipping the viewport. Make sure
1298 // viewport drag isn't active when it can't be used.
1299 UI
.rfb
.dragViewport
= false;
1302 if (UI
.rfb
.dragViewport
) {
1303 viewDragButton
.classList
.add("noVNC_selected");
1305 viewDragButton
.classList
.remove("noVNC_selected");
1308 // Different behaviour for touch vs non-touch
1309 // The button is disabled instead of hidden on touch devices
1310 if (isTouchDevice
) {
1311 viewDragButton
.classList
.remove("noVNC_hidden");
1313 if (UI
.rfb
.clipViewport
) {
1314 viewDragButton
.disabled
= false;
1316 viewDragButton
.disabled
= true;
1319 viewDragButton
.disabled
= false;
1321 if (UI
.rfb
.clipViewport
) {
1322 viewDragButton
.classList
.remove("noVNC_hidden");
1324 viewDragButton
.classList
.add("noVNC_hidden");
1335 showVirtualKeyboard: function() {
1336 if (!isTouchDevice
) return;
1338 var input
= document
.getElementById('noVNC_keyboardinput');
1340 if (document
.activeElement
== input
) return;
1345 var l
= input
.value
.length
;
1346 // Move the caret to the end
1347 input
.setSelectionRange(l
, l
);
1348 } catch (err
) {} // setSelectionRange is undefined in Google Chrome
1351 hideVirtualKeyboard: function() {
1352 if (!isTouchDevice
) return;
1354 var input
= document
.getElementById('noVNC_keyboardinput');
1356 if (document
.activeElement
!= input
) return;
1361 toggleVirtualKeyboard: function () {
1362 if (document
.getElementById('noVNC_keyboard_button')
1363 .classList
.contains("noVNC_selected")) {
1364 UI
.hideVirtualKeyboard();
1366 UI
.showVirtualKeyboard();
1370 onfocusVirtualKeyboard: function(event
) {
1371 document
.getElementById('noVNC_keyboard_button')
1372 .classList
.add("noVNC_selected");
1374 UI
.rfb
.focusOnClick
= false;
1378 onblurVirtualKeyboard: function(event
) {
1379 document
.getElementById('noVNC_keyboard_button')
1380 .classList
.remove("noVNC_selected");
1382 UI
.rfb
.focusOnClick
= true;
1386 keepVirtualKeyboard: function(event
) {
1387 var input
= document
.getElementById('noVNC_keyboardinput');
1389 // Only prevent focus change if the virtual keyboard is active
1390 if (document
.activeElement
!= input
) {
1394 // Only allow focus to move to other elements that need
1395 // focus to function properly
1396 if (event
.target
.form
!== undefined) {
1397 switch (event
.target
.type
) {
1406 case 'select-multiple':
1411 event
.preventDefault();
1414 keyboardinputReset: function() {
1415 var kbi
= document
.getElementById('noVNC_keyboardinput');
1416 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1417 UI
.lastKeyboardinput
= kbi
.value
;
1420 keyEvent: function (keysym
, code
, down
) {
1421 if (!UI
.rfb
) return;
1423 UI
.rfb
.sendKey(keysym
, code
, down
);
1426 // When normal keyboard events are left uncought, use the input events from
1427 // the keyboardinput element instead and generate the corresponding key events.
1428 // This code is required since some browsers on Android are inconsistent in
1429 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1430 keyInput: function(event
) {
1432 if (!UI
.rfb
) return;
1434 var newValue
= event
.target
.value
;
1436 if (!UI
.lastKeyboardinput
) {
1437 UI
.keyboardinputReset();
1439 var oldValue
= UI
.lastKeyboardinput
;
1443 // Try to check caret position since whitespace at the end
1444 // will not be considered by value.length in some browsers
1445 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1447 // selectionStart is undefined in Google Chrome
1448 newLen
= newValue
.length
;
1450 var oldLen
= oldValue
.length
;
1453 var inputs
= newLen
- oldLen
;
1455 backspaces
= -inputs
;
1460 // Compare the old string with the new to account for
1461 // text-corrections or other input that modify existing text
1463 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1464 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1465 inputs
= newLen
- i
;
1466 backspaces
= oldLen
- i
;
1471 // Send the key events
1472 for (i
= 0; i
< backspaces
; i
++) {
1473 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
, "Backspace");
1475 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1476 UI
.rfb
.sendKey(keysyms
.lookup(newValue
.charCodeAt(i
)));
1479 // Control the text content length in the keyboardinput element
1480 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1481 UI
.keyboardinputReset();
1482 } else if (newLen
< 1) {
1483 // There always have to be some text in the keyboardinput
1484 // element with which backspace can interact.
1485 UI
.keyboardinputReset();
1486 // This sometimes causes the keyboard to disappear for a second
1487 // but it is required for the android keyboard to recognize that
1488 // text has been added to the field
1489 event
.target
.blur();
1490 // This has to be ran outside of the input handler in order to work
1491 setTimeout(event
.target
.focus
.bind(event
.target
), 0);
1493 UI
.lastKeyboardinput
= newValue
;
1503 openExtraKeys: function() {
1504 UI
.closeAllPanels();
1505 UI
.openControlbar();
1507 document
.getElementById('noVNC_modifiers')
1508 .classList
.add("noVNC_open");
1509 document
.getElementById('noVNC_toggle_extra_keys_button')
1510 .classList
.add("noVNC_selected");
1513 closeExtraKeys: function() {
1514 document
.getElementById('noVNC_modifiers')
1515 .classList
.remove("noVNC_open");
1516 document
.getElementById('noVNC_toggle_extra_keys_button')
1517 .classList
.remove("noVNC_selected");
1520 toggleExtraKeys: function() {
1521 if(document
.getElementById('noVNC_modifiers')
1522 .classList
.contains("noVNC_open")) {
1523 UI
.closeExtraKeys();
1529 sendEsc: function() {
1530 UI
.rfb
.sendKey(KeyTable
.XK_Escape
, "Escape");
1533 sendTab: function() {
1534 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1537 toggleCtrl: function() {
1538 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1539 if (btn
.classList
.contains("noVNC_selected")) {
1540 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, "ControlLeft", false);
1541 btn
.classList
.remove("noVNC_selected");
1543 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, "ControlLeft", true);
1544 btn
.classList
.add("noVNC_selected");
1548 toggleAlt: function() {
1549 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1550 if (btn
.classList
.contains("noVNC_selected")) {
1551 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, "AltLeft", false);
1552 btn
.classList
.remove("noVNC_selected");
1554 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, "AltLeft", true);
1555 btn
.classList
.add("noVNC_selected");
1559 sendCtrlAltDel: function() {
1560 UI
.rfb
.sendCtrlAltDel();
1569 setMouseButton: function(num
) {
1570 var view_only
= UI
.rfb
.viewOnly
;
1571 if (UI
.rfb
&& !view_only
) {
1572 UI
.rfb
.touchButton
= num
;
1575 var blist
= [0, 1,2,4];
1576 for (var b
= 0; b
< blist
.length
; b
++) {
1577 var button
= document
.getElementById('noVNC_mouse_button' +
1579 if (blist
[b
] === num
&& !view_only
) {
1580 button
.classList
.remove("noVNC_hidden");
1582 button
.classList
.add("noVNC_hidden");
1587 updateViewOnly: function() {
1588 if (!UI
.rfb
) return;
1589 UI
.rfb
.viewOnly
= UI
.getSetting('view_only');
1591 // Hide input related buttons in view only mode
1592 if (UI
.rfb
.viewOnly
) {
1593 document
.getElementById('noVNC_keyboard_button')
1594 .classList
.add('noVNC_hidden');
1595 document
.getElementById('noVNC_toggle_extra_keys_button')
1596 .classList
.add('noVNC_hidden');
1598 document
.getElementById('noVNC_keyboard_button')
1599 .classList
.remove('noVNC_hidden');
1600 document
.getElementById('noVNC_toggle_extra_keys_button')
1601 .classList
.remove('noVNC_hidden');
1603 UI
.setMouseButton(1); //has it's own logic for hiding/showing
1606 updateLogging: function() {
1607 WebUtil
.init_logging(UI
.getSetting('logging'));
1610 updateDesktopName: function(e
) {
1611 UI
.desktopName
= e
.detail
.name
;
1612 // Display the desktop name in the document title
1613 document
.title
= e
.detail
.name
+ " - noVNC";
1617 if (WebUtil
.getConfigVar('bell', 'on') === 'on') {
1618 var promise
= document
.getElementById('noVNC_bell').play();
1619 // The standards disagree on the return value here
1621 promise
.catch(function(e
) {
1622 if (e
.name
=== "NotAllowedError") {
1623 // Ignore when the browser doesn't let us play audio.
1624 // It is common that the browsers require audio to be
1625 // initiated from a user action.
1627 Log
.Error("Unable to play bell: " + e
);
1634 //Helper to add options to dropdown.
1635 addOption: function(selectbox
, text
, value
) {
1636 var optn
= document
.createElement("OPTION");
1639 selectbox
.options
.add(optn
);
1648 // Set up translations
1649 var LINGUAS
= ["de", "el", "es", "nl", "pl", "sv", "tr", "zh"];
1650 l10n
.setup(LINGUAS
);
1651 if (l10n
.language
!== "en" && l10n
.dictionary
=== undefined) {
1652 WebUtil
.fetchJSON('app/locale/' + l10n
.language
+ '.json', function (translations
) {
1653 l10n
.dictionary
= translations
;
1655 // wait for translations to load before loading the UI
1658 Log
.Error("Failed to load translations: " + err
);