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 /* jslint white: false, browser: true */
12 /* global window, document.getElementById, Util, WebUtil, RFB, Display */
15 * import Util from "../core/util";
16 * import KeyTable from "../core/input/keysym";
17 * import keysyms from "./keysymdef";
18 * import RFB from "../core/rfb";
19 * import Display from "../core/display";
20 * import WebUtil from "./webutil";
28 // Fallback for all uncought errors
29 window
.addEventListener('error', function(event
) {
33 msg
= document
.getElementById('noVNC_fallback_errormsg');
35 // Only show the initial error
36 if (msg
.hasChildNodes()) {
40 div
= document
.createElement("div");
41 div
.appendChild(document
.createTextNode(event
.message
));
44 div
= document
.createElement("div");
45 div
.className
= 'noVNC_location';
46 text
= event
.filename
+ ":" + event
.lineno
+ ":" + event
.colno
;
47 div
.appendChild(document
.createTextNode(text
));
50 if ((event
.error
!== undefined) &&
51 (event
.error
.stack
!== undefined)) {
52 div
= document
.createElement("div");
53 div
.className
= 'noVNC_stack';
54 div
.appendChild(document
.createTextNode(event
.error
.stack
));
58 document
.getElementById('noVNC_fallback_error')
59 .classList
.add("noVNC_open");
61 document
.write("noVNC encountered an error.");
63 // Don't return true since this would prevent the error
64 // from being printed to the browser console.
68 // Set up translations
69 var LINGUAS
= ["de", "el", "nl", "sv"];
70 Util
.Localisation
.setup(LINGUAS
);
71 if (Util
.Localisation
.language
!== "en") {
73 {'app': ["locale/" + Util
.Localisation
.language
+ ".js"]});
76 /* [begin skip-as-module] */
77 // Load supporting scripts
79 {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
80 "input/xtscancodes.js", "input/util.js", "input/devices.js",
81 "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
83 window
.onscriptsload = function () { UI
.load(); };
84 /* [end skip-as-module] */
86 var _
= Util
.Localisation
.get;
95 hideKeyboardTimeout
: null,
96 idleControlbarTimeout
: null,
97 closeControlbarTimeout
: null,
99 controlbarGrabbed
: false,
100 controlbarDrag
: false,
101 controlbarMouseDownClientY
: 0,
102 controlbarMouseDownOffsetY
: 0,
105 rememberedClipSetting
: null,
106 lastKeyboardinput
: null,
107 defaultKeyboardinputLen
: 100,
109 inhibit_reconnect
: true,
110 reconnect_callback
: null,
111 reconnect_password
: null,
113 // Setup rfb object, load settings from browser storage, then call
114 // UI.init to setup the UI/menus
115 load: function(callback
) {
116 WebUtil
.initSettings(UI
.start
, callback
);
119 // Render default UI and initialize settings menu
120 start: function(callback
) {
122 // Setup global variables first
123 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
124 navigator
.userAgent
.indexOf('Chrome') === -1);
129 Util
.Localisation
.translateDOM();
131 // Adapt the interface for touch screen devices
132 if (Util
.isTouchDevice
) {
133 document
.documentElement
.classList
.add("noVNC_touch");
134 // Remove the address bar
135 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
136 UI
.forceSetting('clip', true);
138 UI
.initSetting('clip', false);
141 // Restore control bar position
142 if (WebUtil
.readSetting('controlbar_pos') === 'right') {
143 UI
.toggleControlbarSide();
148 // Setup event handlers
149 UI
.addResizeHandlers();
150 UI
.addControlbarHandlers();
151 UI
.addTouchSpecificHandlers();
152 UI
.addExtraKeysHandlers();
154 UI
.addConnectionControlHandlers();
155 UI
.addClipboardHandlers();
156 UI
.addSettingsHandlers();
157 document
.getElementById("noVNC_status")
158 .addEventListener('click', UI
.hideStatus
);
162 // Show the connect panel on first load unless autoconnecting
164 UI
.openConnectPanel();
169 UI
.updateVisualState();
171 document
.getElementById('noVNC_setting_host').focus();
173 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
174 if (autoconnect
=== 'true' || autoconnect
== '1') {
181 if (typeof callback
=== "function") {
186 initFullscreen: function() {
187 // Only show the button if fullscreen is properly supported
188 // * Safari doesn't support alphanumerical input while in fullscreen
190 (document
.documentElement
.requestFullscreen
||
191 document
.documentElement
.mozRequestFullScreen
||
192 document
.documentElement
.webkitRequestFullscreen
||
193 document
.body
.msRequestFullscreen
)) {
194 document
.getElementById('noVNC_fullscreen_button')
195 .classList
.remove("noVNC_hidden");
196 UI
.addFullscreenHandlers();
200 initSettings: function() {
203 // Logging selection dropdown
204 var llevels
= ['error', 'warn', 'info', 'debug'];
205 for (i
= 0; i
< llevels
.length
; i
+= 1) {
206 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
209 // Settings with immediate effects
210 UI
.initSetting('logging', 'warn');
213 // if port == 80 (or 443) then it won't be present and should be
215 var port
= window
.location
.port
;
217 if (window
.location
.protocol
.substring(0,5) == 'https') {
220 else if (window
.location
.protocol
.substring(0,4) == 'http') {
225 /* Populate the controls if defaults are provided in the URL */
226 UI
.initSetting('host', window
.location
.hostname
);
227 UI
.initSetting('port', port
);
228 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
229 UI
.initSetting('true_color', true);
230 UI
.initSetting('cursor', !Util
.isTouchDevice
);
231 UI
.initSetting('resize', 'off');
232 UI
.initSetting('shared', true);
233 UI
.initSetting('view_only', false);
234 UI
.initSetting('path', 'websockify');
235 UI
.initSetting('repeaterID', '');
236 UI
.initSetting('reconnect', false);
237 UI
.initSetting('reconnect_delay', 5000);
240 initRFB: function() {
242 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
243 'onNotification': UI
.notification
,
244 'onUpdateState': UI
.updateState
,
245 'onDisconnected': UI
.disconnectFinished
,
246 'onPasswordRequired': UI
.passwordRequired
,
247 'onXvpInit': UI
.updateXvpButton
,
248 'onClipboard': UI
.clipboardReceive
,
250 'onFBUComplete': UI
.initialResize
,
251 'onFBResize': UI
.updateSessionSize
,
252 'onDesktopName': UI
.updateDesktopName
});
255 var msg
= "Unable to create RFB client -- " + exc
;
257 UI
.showStatus(msg
, 'error');
268 addResizeHandlers: function() {
269 window
.addEventListener('resize', UI
.applyResizeMode
);
270 window
.addEventListener('resize', UI
.updateViewClip
);
271 window
.addEventListener('resize', UI
.updateViewDrag
);
274 addControlbarHandlers: function() {
275 document
.getElementById("noVNC_control_bar")
276 .addEventListener('mousemove', UI
.activateControlbar
);
277 document
.getElementById("noVNC_control_bar")
278 .addEventListener('mouseup', UI
.activateControlbar
);
279 document
.getElementById("noVNC_control_bar")
280 .addEventListener('mousedown', UI
.activateControlbar
);
281 document
.getElementById("noVNC_control_bar")
282 .addEventListener('keypress', UI
.activateControlbar
);
284 document
.getElementById("noVNC_control_bar")
285 .addEventListener('mousedown', UI
.keepControlbar
);
286 document
.getElementById("noVNC_control_bar")
287 .addEventListener('keypress', UI
.keepControlbar
);
289 document
.getElementById("noVNC_view_drag_button")
290 .addEventListener('click', UI
.toggleViewDrag
);
292 document
.getElementById("noVNC_control_bar_handle")
293 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
294 document
.getElementById("noVNC_control_bar_handle")
295 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
296 document
.getElementById("noVNC_control_bar_handle")
297 .addEventListener('mousemove', UI
.dragControlbarHandle
);
298 // resize events aren't available for elements
299 window
.addEventListener('resize', UI
.updateControlbarHandle
);
301 var exps
= document
.getElementsByClassName("noVNC_expander");
302 for (var i
= 0;i
< exps
.length
;i
++) {
303 exps
[i
].addEventListener('click', UI
.toggleExpander
);
307 addTouchSpecificHandlers: function() {
308 document
.getElementById("noVNC_mouse_button0")
309 .addEventListener('click', function () { UI
.setMouseButton(1); });
310 document
.getElementById("noVNC_mouse_button1")
311 .addEventListener('click', function () { UI
.setMouseButton(2); });
312 document
.getElementById("noVNC_mouse_button2")
313 .addEventListener('click', function () { UI
.setMouseButton(4); });
314 document
.getElementById("noVNC_mouse_button4")
315 .addEventListener('click', function () { UI
.setMouseButton(0); });
316 document
.getElementById("noVNC_keyboard_button")
317 .addEventListener('click', UI
.toggleVirtualKeyboard
);
319 document
.getElementById("noVNC_keyboardinput")
320 .addEventListener('input', UI
.keyInput
);
321 document
.getElementById("noVNC_keyboardinput")
322 .addEventListener('focus', UI
.onfocusVirtualKeyboard
);
323 document
.getElementById("noVNC_keyboardinput")
324 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
325 document
.getElementById("noVNC_keyboardinput")
326 .addEventListener('submit', function () { return false; });
328 document
.documentElement
329 .addEventListener('mousedown', UI
.keepVirtualKeyboard
, true);
331 document
.getElementById("noVNC_control_bar")
332 .addEventListener('touchstart', UI
.activateControlbar
);
333 document
.getElementById("noVNC_control_bar")
334 .addEventListener('touchmove', UI
.activateControlbar
);
335 document
.getElementById("noVNC_control_bar")
336 .addEventListener('touchend', UI
.activateControlbar
);
337 document
.getElementById("noVNC_control_bar")
338 .addEventListener('input', UI
.activateControlbar
);
340 document
.getElementById("noVNC_control_bar")
341 .addEventListener('touchstart', UI
.keepControlbar
);
342 document
.getElementById("noVNC_control_bar")
343 .addEventListener('input', UI
.keepControlbar
);
345 document
.getElementById("noVNC_control_bar_handle")
346 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
347 document
.getElementById("noVNC_control_bar_handle")
348 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
349 document
.getElementById("noVNC_control_bar_handle")
350 .addEventListener('touchmove', UI
.dragControlbarHandle
);
352 window
.addEventListener('load', UI
.keyboardinputReset
);
355 addExtraKeysHandlers: function() {
356 document
.getElementById("noVNC_toggle_extra_keys_button")
357 .addEventListener('click', UI
.toggleExtraKeys
);
358 document
.getElementById("noVNC_toggle_ctrl_button")
359 .addEventListener('click', UI
.toggleCtrl
);
360 document
.getElementById("noVNC_toggle_alt_button")
361 .addEventListener('click', UI
.toggleAlt
);
362 document
.getElementById("noVNC_send_tab_button")
363 .addEventListener('click', UI
.sendTab
);
364 document
.getElementById("noVNC_send_esc_button")
365 .addEventListener('click', UI
.sendEsc
);
366 document
.getElementById("noVNC_send_ctrl_alt_del_button")
367 .addEventListener('click', UI
.sendCtrlAltDel
);
370 addXvpHandlers: function() {
371 document
.getElementById("noVNC_xvp_shutdown_button")
372 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
373 document
.getElementById("noVNC_xvp_reboot_button")
374 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
375 document
.getElementById("noVNC_xvp_reset_button")
376 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
377 document
.getElementById("noVNC_xvp_button")
378 .addEventListener('click', UI
.toggleXvpPanel
);
381 addConnectionControlHandlers: function() {
382 document
.getElementById("noVNC_disconnect_button")
383 .addEventListener('click', UI
.disconnect
);
384 document
.getElementById("noVNC_connect_button")
385 .addEventListener('click', UI
.connect
);
386 document
.getElementById("noVNC_cancel_reconnect_button")
387 .addEventListener('click', UI
.cancelReconnect
);
389 document
.getElementById("noVNC_password_button")
390 .addEventListener('click', UI
.setPassword
);
393 addClipboardHandlers: function() {
394 document
.getElementById("noVNC_clipboard_button")
395 .addEventListener('click', UI
.toggleClipboardPanel
);
396 document
.getElementById("noVNC_clipboard_text")
397 .addEventListener('focus', UI
.displayBlur
);
398 document
.getElementById("noVNC_clipboard_text")
399 .addEventListener('blur', UI
.displayFocus
);
400 document
.getElementById("noVNC_clipboard_text")
401 .addEventListener('change', UI
.clipboardSend
);
402 document
.getElementById("noVNC_clipboard_clear_button")
403 .addEventListener('click', UI
.clipboardClear
);
406 // Add a call to save settings when the element changes,
407 // unless the optional parameter changeFunc is used instead.
408 addSettingChangeHandler: function(name
, changeFunc
) {
409 var settingElem
= document
.getElementById("noVNC_setting_" + name
);
410 if (changeFunc
=== undefined) {
411 changeFunc = function () { UI
.saveSetting(name
); };
413 settingElem
.addEventListener('change', changeFunc
);
416 addSettingsHandlers: function() {
417 document
.getElementById("noVNC_settings_button")
418 .addEventListener('click', UI
.toggleSettingsPanel
);
420 UI
.addSettingChangeHandler('encrypt');
421 UI
.addSettingChangeHandler('true_color');
422 UI
.addSettingChangeHandler('cursor');
423 UI
.addSettingChangeHandler('resize');
424 UI
.addSettingChangeHandler('resize', UI
.enableDisableViewClip
);
425 UI
.addSettingChangeHandler('resize', UI
.applyResizeMode
);
426 UI
.addSettingChangeHandler('clip');
427 UI
.addSettingChangeHandler('shared');
428 UI
.addSettingChangeHandler('view_only');
429 UI
.addSettingChangeHandler('host');
430 UI
.addSettingChangeHandler('port');
431 UI
.addSettingChangeHandler('path');
432 UI
.addSettingChangeHandler('repeaterID');
433 UI
.addSettingChangeHandler('logging');
434 UI
.addSettingChangeHandler('logging', UI
.updateLogging
);
435 UI
.addSettingChangeHandler('reconnect');
436 UI
.addSettingChangeHandler('reconnect_delay');
439 addFullscreenHandlers: function() {
440 document
.getElementById("noVNC_fullscreen_button")
441 .addEventListener('click', UI
.toggleFullscreen
);
443 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
444 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
445 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
446 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
455 updateState: function(rfb
, state
, oldstate
) {
458 document
.documentElement
.classList
.remove("noVNC_connecting");
459 document
.documentElement
.classList
.remove("noVNC_connected");
460 document
.documentElement
.classList
.remove("noVNC_disconnecting");
461 document
.documentElement
.classList
.remove("noVNC_reconnecting");
465 document
.getElementById("noVNC_transition_text").textContent
= _("Connecting...");
466 document
.documentElement
.classList
.add("noVNC_connecting");
470 UI
.inhibit_reconnect
= false;
471 document
.documentElement
.classList
.add("noVNC_connected");
472 if (rfb
&& rfb
.get_encrypt()) {
473 msg
= _("Connected (encrypted) to ") + UI
.desktopName
;
475 msg
= _("Connected (unencrypted) to ") + UI
.desktopName
;
479 case 'disconnecting':
480 UI
.connected
= false;
481 document
.getElementById("noVNC_transition_text").textContent
= _("Disconnecting...");
482 document
.documentElement
.classList
.add("noVNC_disconnecting");
485 UI
.showStatus(_("Disconnected"));
488 msg
= "Invalid UI state";
490 UI
.showStatus(msg
, 'error');
494 UI
.updateVisualState();
497 // Disable/enable controls depending on connection state
498 updateVisualState: function() {
499 //Util.Debug(">> updateVisualState");
500 document
.getElementById('noVNC_setting_encrypt').disabled
= UI
.connected
;
501 document
.getElementById('noVNC_setting_true_color').disabled
= UI
.connected
;
502 if (Util
.browserSupportsCursorURIs()) {
503 document
.getElementById('noVNC_setting_cursor').disabled
= UI
.connected
;
505 UI
.updateSetting('cursor', !Util
.isTouchDevice
);
506 document
.getElementById('noVNC_setting_cursor').disabled
= true;
509 UI
.enableDisableViewClip();
510 document
.getElementById('noVNC_setting_shared').disabled
= UI
.connected
;
511 document
.getElementById('noVNC_setting_view_only').disabled
= UI
.connected
;
512 document
.getElementById('noVNC_setting_host').disabled
= UI
.connected
;
513 document
.getElementById('noVNC_setting_port').disabled
= UI
.connected
;
514 document
.getElementById('noVNC_setting_path').disabled
= UI
.connected
;
515 document
.getElementById('noVNC_setting_repeaterID').disabled
= UI
.connected
;
516 document
.getElementById('noVNC_setting_reconnect').disabled
= UI
.connected
;
517 document
.getElementById('noVNC_setting_reconnect_delay').disabled
= UI
.connected
;
521 UI
.setMouseButton(1);
523 // Hide the controlbar after 2 seconds
524 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
526 UI
.updateXvpButton(0);
530 // Hide input related buttons in view only mode
531 if (UI
.rfb
&& UI
.rfb
.get_view_only()) {
532 document
.getElementById('noVNC_keyboard_button')
533 .classList
.add('noVNC_hidden');
534 document
.getElementById('noVNC_toggle_extra_keys_button')
535 .classList
.add('noVNC_hidden');
537 document
.getElementById('noVNC_keyboard_button')
538 .classList
.remove('noVNC_hidden');
539 document
.getElementById('noVNC_toggle_extra_keys_button')
540 .classList
.remove('noVNC_hidden');
543 // State change disables viewport dragging.
544 // It is enabled (toggled) by direct click on the button
545 UI
.setViewDrag(false);
547 // State change also closes the password dialog
548 document
.getElementById('noVNC_password_dlg')
549 .classList
.remove('noVNC_open');
551 //Util.Debug("<< updateVisualState");
554 showStatus: function(text
, status_type
, time
) {
555 var statusElem
= document
.getElementById('noVNC_status');
557 clearTimeout(UI
.statusTimeout
);
559 if (typeof status_type
=== 'undefined') {
560 status_type
= 'normal';
563 statusElem
.classList
.remove("noVNC_status_normal",
565 "noVNC_status_error");
567 switch (status_type
) {
570 statusElem
.classList
.add("noVNC_status_warn");
573 statusElem
.classList
.add("noVNC_status_error");
578 statusElem
.classList
.add("noVNC_status_normal");
582 statusElem
.textContent
= text
;
583 statusElem
.classList
.add("noVNC_open");
585 // If no time was specified, show the status for 1.5 seconds
586 if (typeof time
=== 'undefined') {
590 // Error messages do not timeout
591 if (status_type
!== 'error') {
592 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
596 hideStatus: function() {
597 clearTimeout(UI
.statusTimeout
);
598 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
601 notification: function (rfb
, msg
, level
, options
) {
602 UI
.showStatus(msg
, level
);
605 activateControlbar: function(event
) {
606 clearTimeout(UI
.idleControlbarTimeout
);
607 // We manipulate the anchor instead of the actual control
608 // bar in order to avoid creating new a stacking group
609 document
.getElementById('noVNC_control_bar_anchor')
610 .classList
.remove("noVNC_idle");
611 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
614 idleControlbar: function() {
615 document
.getElementById('noVNC_control_bar_anchor')
616 .classList
.add("noVNC_idle");
619 keepControlbar: function() {
620 clearTimeout(UI
.closeControlbarTimeout
);
623 openControlbar: function() {
624 document
.getElementById('noVNC_control_bar')
625 .classList
.add("noVNC_open");
628 closeControlbar: function() {
630 document
.getElementById('noVNC_control_bar')
631 .classList
.remove("noVNC_open");
634 toggleControlbar: function() {
635 if (document
.getElementById('noVNC_control_bar')
636 .classList
.contains("noVNC_open")) {
637 UI
.closeControlbar();
643 toggleControlbarSide: function () {
644 // Temporarily disable animation to avoid weird movement
645 var bar
= document
.getElementById('noVNC_control_bar');
646 bar
.style
.transitionDuration
= '0s';
647 bar
.addEventListener('transitionend', function () { this.style
.transitionDuration
= ""; });
649 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
650 if (anchor
.classList
.contains("noVNC_right")) {
651 WebUtil
.writeSetting('controlbar_pos', 'left');
652 anchor
.classList
.remove("noVNC_right");
654 WebUtil
.writeSetting('controlbar_pos', 'right');
655 anchor
.classList
.add("noVNC_right");
658 // Consider this a movement of the handle
659 UI
.controlbarDrag
= true;
662 dragControlbarHandle: function (e
) {
663 if (!UI
.controlbarGrabbed
) return;
665 var ptr
= Util
.getPointerEvent(e
);
667 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
668 if (ptr
.clientX
< (window
.innerWidth
* 0.1)) {
669 if (anchor
.classList
.contains("noVNC_right")) {
670 UI
.toggleControlbarSide();
672 } else if (ptr
.clientX
> (window
.innerWidth
* 0.9)) {
673 if (!anchor
.classList
.contains("noVNC_right")) {
674 UI
.toggleControlbarSide();
678 if (!UI
.controlbarDrag
) {
679 // The goal is to trigger on a certain physical width, the
680 // devicePixelRatio brings us a bit closer but is not optimal.
681 var dragThreshold
= 10 * (window
.devicePixelRatio
|| 1);
682 var dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
684 if (dragDistance
< dragThreshold
) return;
686 UI
.controlbarDrag
= true;
689 var eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
691 UI
.moveControlbarHandle(eventY
);
696 UI
.activateControlbar();
699 // Move the handle but don't allow any position outside the bounds
700 moveControlbarHandle: function (viewportRelativeY
) {
701 var handle
= document
.getElementById("noVNC_control_bar_handle");
702 var handleHeight
= handle
.getBoundingClientRect().height
;
703 var controlbarBounds
= document
.getElementById("noVNC_control_bar")
704 .getBoundingClientRect();
707 // These heights need to be non-zero for the below logic to work
708 if (handleHeight
=== 0 || controlbarBounds
.height
=== 0) {
712 var newY
= viewportRelativeY
;
714 // Check if the coordinates are outside the control bar
715 if (newY
< controlbarBounds
.top
+ margin
) {
716 // Force coordinates to be below the top of the control bar
717 newY
= controlbarBounds
.top
+ margin
;
719 } else if (newY
> controlbarBounds
.top
+
720 controlbarBounds
.height
- handleHeight
- margin
) {
721 // Force coordinates to be above the bottom of the control bar
722 newY
= controlbarBounds
.top
+
723 controlbarBounds
.height
- handleHeight
- margin
;
726 // Corner case: control bar too small for stable position
727 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
728 newY
= controlbarBounds
.top
+
729 (controlbarBounds
.height
- handleHeight
) / 2;
732 // The transform needs coordinates that are relative to the parent
733 var parentRelativeY
= newY
- controlbarBounds
.top
;
734 handle
.style
.transform
= "translateY(" + parentRelativeY
+ "px)";
737 updateControlbarHandle: function () {
738 // Since the control bar is fixed on the viewport and not the page,
739 // the move function expects coordinates relative the the viewport.
740 var handle
= document
.getElementById("noVNC_control_bar_handle");
741 var handleBounds
= handle
.getBoundingClientRect();
742 UI
.moveControlbarHandle(handleBounds
.top
);
745 controlbarHandleMouseUp: function(e
) {
746 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
748 // mouseup and mousedown on the same place toggles the controlbar
749 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
750 UI
.toggleControlbar();
754 UI
.activateControlbar();
756 UI
.controlbarGrabbed
= false;
759 controlbarHandleMouseDown: function(e
) {
760 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
762 var ptr
= Util
.getPointerEvent(e
);
764 var handle
= document
.getElementById("noVNC_control_bar_handle");
765 var bounds
= handle
.getBoundingClientRect();
767 Util
.setCapture(handle
);
768 UI
.controlbarGrabbed
= true;
769 UI
.controlbarDrag
= false;
771 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
772 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
776 UI
.activateControlbar();
779 toggleExpander: function(e
) {
780 if (this.classList
.contains("noVNC_open")) {
781 this.classList
.remove("noVNC_open");
783 this.classList
.add("noVNC_open");
793 // Initial page load read/initialization of settings
794 initSetting: function(name
, defVal
) {
795 // Check Query string followed by cookie
796 var val
= WebUtil
.getConfigVar(name
);
798 val
= WebUtil
.readSetting(name
, defVal
);
800 UI
.updateSetting(name
, val
);
804 // Update cookie and form control setting. If value is not set, then
805 // updates from control to current cookie setting.
806 updateSetting: function(name
, value
) {
808 // Save the cookie for this session
809 if (typeof value
!== 'undefined') {
810 WebUtil
.writeSetting(name
, value
);
813 // Update the settings control
814 value
= UI
.getSetting(name
);
816 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
817 if (ctrl
.type
=== 'checkbox') {
818 ctrl
.checked
= value
;
820 } else if (typeof ctrl
.options
!== 'undefined') {
821 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
822 if (ctrl
.options
[i
].value
=== value
) {
823 ctrl
.selectedIndex
= i
;
828 /*Weird IE9 error leads to 'null' appearring
829 in textboxes instead of ''.*/
830 if (value
=== null) {
837 // Save control setting to cookie
838 saveSetting: function(name
) {
839 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
840 if (ctrl
.type
=== 'checkbox') {
842 } else if (typeof ctrl
.options
!== 'undefined') {
843 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
847 WebUtil
.writeSetting(name
, val
);
848 //Util.Debug("Setting saved '" + name + "=" + val + "'");
852 // Force a setting to be a certain value
853 forceSetting: function(name
, val
) {
854 UI
.updateSetting(name
, val
);
858 // Read form control compatible setting from cookie
859 getSetting: function(name
) {
860 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
861 var val
= WebUtil
.readSetting(name
);
862 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
863 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
878 closeAllPanels: function() {
879 UI
.closeSettingsPanel();
881 UI
.closeClipboardPanel();
891 openSettingsPanel: function() {
895 // Refresh UI elements from saved cookies
896 UI
.updateSetting('encrypt');
897 UI
.updateSetting('true_color');
898 if (Util
.browserSupportsCursorURIs()) {
899 UI
.updateSetting('cursor');
901 UI
.updateSetting('cursor', !Util
.isTouchDevice
);
902 document
.getElementById('noVNC_setting_cursor').disabled
= true;
904 UI
.updateSetting('clip');
905 UI
.updateSetting('resize');
906 UI
.updateSetting('shared');
907 UI
.updateSetting('view_only');
908 UI
.updateSetting('path');
909 UI
.updateSetting('repeaterID');
910 UI
.updateSetting('logging');
911 UI
.updateSetting('reconnect');
912 UI
.updateSetting('reconnect_delay');
914 document
.getElementById('noVNC_settings')
915 .classList
.add("noVNC_open");
916 document
.getElementById('noVNC_settings_button')
917 .classList
.add("noVNC_selected");
920 closeSettingsPanel: function() {
921 document
.getElementById('noVNC_settings')
922 .classList
.remove("noVNC_open");
923 document
.getElementById('noVNC_settings_button')
924 .classList
.remove("noVNC_selected");
927 toggleSettingsPanel: function() {
928 if (document
.getElementById('noVNC_settings')
929 .classList
.contains("noVNC_open")) {
930 UI
.closeSettingsPanel();
932 UI
.openSettingsPanel();
942 openXvpPanel: function() {
946 document
.getElementById('noVNC_xvp')
947 .classList
.add("noVNC_open");
948 document
.getElementById('noVNC_xvp_button')
949 .classList
.add("noVNC_selected");
952 closeXvpPanel: function() {
953 document
.getElementById('noVNC_xvp')
954 .classList
.remove("noVNC_open");
955 document
.getElementById('noVNC_xvp_button')
956 .classList
.remove("noVNC_selected");
959 toggleXvpPanel: function() {
960 if (document
.getElementById('noVNC_xvp')
961 .classList
.contains("noVNC_open")) {
968 // Disable/enable XVP button
969 updateXvpButton: function(ver
) {
970 if (ver
>= 1 && !UI
.rfb
.get_view_only()) {
971 document
.getElementById('noVNC_xvp_button')
972 .classList
.remove("noVNC_hidden");
974 document
.getElementById('noVNC_xvp_button')
975 .classList
.add("noVNC_hidden");
976 // Close XVP panel if open
987 openClipboardPanel: function() {
991 document
.getElementById('noVNC_clipboard')
992 .classList
.add("noVNC_open");
993 document
.getElementById('noVNC_clipboard_button')
994 .classList
.add("noVNC_selected");
997 closeClipboardPanel: function() {
998 document
.getElementById('noVNC_clipboard')
999 .classList
.remove("noVNC_open");
1000 document
.getElementById('noVNC_clipboard_button')
1001 .classList
.remove("noVNC_selected");
1004 toggleClipboardPanel: function() {
1005 if (document
.getElementById('noVNC_clipboard')
1006 .classList
.contains("noVNC_open")) {
1007 UI
.closeClipboardPanel();
1009 UI
.openClipboardPanel();
1013 clipboardReceive: function(rfb
, text
) {
1014 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
1015 document
.getElementById('noVNC_clipboard_text').value
= text
;
1016 Util
.Debug("<< UI.clipboardReceive");
1019 clipboardClear: function() {
1020 document
.getElementById('noVNC_clipboard_text').value
= "";
1021 UI
.rfb
.clipboardPasteFrom("");
1024 clipboardSend: function() {
1025 var text
= document
.getElementById('noVNC_clipboard_text').value
;
1026 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
1027 UI
.rfb
.clipboardPasteFrom(text
);
1028 Util
.Debug("<< UI.clipboardSend");
1037 openConnectPanel: function() {
1038 document
.getElementById('noVNC_connect_dlg')
1039 .classList
.add("noVNC_open");
1042 closeConnectPanel: function() {
1043 document
.getElementById('noVNC_connect_dlg')
1044 .classList
.remove("noVNC_open");
1047 connect: function(event
, password
) {
1048 var host
= UI
.getSetting('host');
1049 var port
= UI
.getSetting('port');
1050 var path
= UI
.getSetting('path');
1052 if (typeof password
=== 'undefined') {
1053 password
= WebUtil
.getConfigVar('password');
1056 if (password
=== null) {
1057 password
= undefined;
1060 if ((!host
) || (!port
)) {
1061 var msg
= _("Must set host and port");
1063 UI
.showStatus(msg
, 'error');
1067 if (!UI
.initRFB()) return;
1069 UI
.closeAllPanels();
1070 UI
.closeConnectPanel();
1072 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
1073 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
1074 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
1075 UI
.rfb
.set_shared(UI
.getSetting('shared'));
1076 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
1077 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
1079 UI
.rfb
.connect(host
, port
, password
, path
);
1082 disconnect: function() {
1083 UI
.closeAllPanels();
1084 UI
.rfb
.disconnect();
1086 // Disable automatic reconnecting
1087 UI
.inhibit_reconnect
= true;
1089 // Restore the callback used for initial resize
1090 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
1092 // Don't display the connection settings until we're actually disconnected
1095 reconnect: function() {
1096 UI
.reconnect_callback
= null;
1098 // if reconnect has been disabled in the meantime, do nothing.
1099 if (UI
.inhibit_reconnect
) {
1103 UI
.connect(null, UI
.reconnect_password
);
1106 disconnectFinished: function (rfb
, reason
) {
1107 if (typeof reason
!== 'undefined') {
1108 UI
.showStatus(reason
, 'error');
1109 } else if (UI
.getSetting('reconnect', false) === true && !UI
.inhibit_reconnect
) {
1110 document
.getElementById("noVNC_transition_text").textContent
= _("Reconnecting...");
1111 document
.documentElement
.classList
.add("noVNC_reconnecting");
1113 var delay
= parseInt(UI
.getSetting('reconnect_delay'));
1114 UI
.reconnect_callback
= setTimeout(UI
.reconnect
, delay
);
1118 UI
.openControlbar();
1119 UI
.openConnectPanel();
1122 cancelReconnect: function() {
1123 if (UI
.reconnect_callback
!== null) {
1124 clearTimeout(UI
.reconnect_callback
);
1125 UI
.reconnect_callback
= null;
1128 document
.documentElement
.classList
.remove("noVNC_reconnecting");
1129 UI
.openControlbar();
1130 UI
.openConnectPanel();
1139 passwordRequired: function(rfb
, msg
) {
1141 document
.getElementById('noVNC_password_dlg')
1142 .classList
.add('noVNC_open');
1144 setTimeout(function () {
1145 document
.getElementById('noVNC_password_input').focus();
1148 if (typeof msg
=== 'undefined') {
1149 msg
= _("Password is required");
1152 UI
.showStatus(msg
, "warning");
1155 setPassword: function(e
) {
1156 var password
= document
.getElementById('noVNC_password_input').value
;
1157 UI
.rfb
.sendPassword(password
);
1158 UI
.reconnect_password
= password
;
1159 document
.getElementById('noVNC_password_dlg')
1160 .classList
.remove('noVNC_open');
1161 // Prevent actually submitting the form
1171 toggleFullscreen: function() {
1172 if (document
.fullscreenElement
|| // alternative standard method
1173 document
.mozFullScreenElement
|| // currently working methods
1174 document
.webkitFullscreenElement
||
1175 document
.msFullscreenElement
) {
1176 if (document
.exitFullscreen
) {
1177 document
.exitFullscreen();
1178 } else if (document
.mozCancelFullScreen
) {
1179 document
.mozCancelFullScreen();
1180 } else if (document
.webkitExitFullscreen
) {
1181 document
.webkitExitFullscreen();
1182 } else if (document
.msExitFullscreen
) {
1183 document
.msExitFullscreen();
1186 if (document
.documentElement
.requestFullscreen
) {
1187 document
.documentElement
.requestFullscreen();
1188 } else if (document
.documentElement
.mozRequestFullScreen
) {
1189 document
.documentElement
.mozRequestFullScreen();
1190 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1191 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1192 } else if (document
.body
.msRequestFullscreen
) {
1193 document
.body
.msRequestFullscreen();
1196 UI
.enableDisableViewClip();
1197 UI
.updateFullscreenButton();
1200 updateFullscreenButton: function() {
1201 if (document
.fullscreenElement
|| // alternative standard method
1202 document
.mozFullScreenElement
|| // currently working methods
1203 document
.webkitFullscreenElement
||
1204 document
.msFullscreenElement
) {
1205 document
.getElementById('noVNC_fullscreen_button')
1206 .classList
.add("noVNC_selected");
1208 document
.getElementById('noVNC_fullscreen_button')
1209 .classList
.remove("noVNC_selected");
1219 // Apply remote resizing or local scaling
1220 applyResizeMode: function() {
1221 if (!UI
.rfb
) return;
1223 var screen
= UI
.screenSize();
1225 if (screen
&& UI
.connected
&& UI
.rfb
.get_display()) {
1227 var display
= UI
.rfb
.get_display();
1228 var resizeMode
= UI
.getSetting('resize');
1229 display
.set_scale(1);
1231 if (resizeMode
=== 'remote') {
1233 // Request changing the resolution of the remote display to
1234 // the size of the local browser viewport.
1236 // In order to not send multiple requests before the browser-resize
1237 // is finished we wait 0.5 seconds before sending the request.
1238 clearTimeout(UI
.resizeTimeout
);
1239 UI
.resizeTimeout
= setTimeout(function(){
1240 // Request a remote size covering the viewport
1241 if (UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
)) {
1242 Util
.Debug('Requested new desktop size: ' +
1243 screen
.w
+ 'x' + screen
.h
);
1247 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
1248 var downscaleOnly
= resizeMode
=== 'downscale';
1249 display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
1254 // Gets the the size of the available viewport in the browser window
1255 screenSize: function() {
1256 var screen
= document
.getElementById('noVNC_screen');
1259 screen
.style
.overflow
= "hidden";
1261 width
= screen
.offsetWidth
;
1262 height
= screen
.offsetHeight
;
1264 screen
.style
.overflow
= "auto";
1266 return {w
: width
, h
: height
};
1269 // Normally we only apply the current resize mode after a window resize
1270 // event. This means that when a new connection is opened, there is no
1271 // resize mode active.
1272 // We have to wait until the first FBU because this is where the client
1273 // will find the supported encodings of the server. Some calls later in
1274 // the chain is dependant on knowing the server-capabilities.
1275 initialResize: function(rfb
, fbu
) {
1276 UI
.applyResizeMode();
1277 // After doing this once, we remove the callback.
1278 UI
.rfb
.set_onFBUComplete(function() { });
1287 // Set and configure viewport clipping
1288 setViewClip: function(clip
) {
1289 UI
.updateSetting('clip', clip
);
1290 UI
.updateViewClip();
1293 // Update parameters that depend on the clip setting
1294 updateViewClip: function() {
1295 if (!UI
.rfb
) return;
1297 var display
= UI
.rfb
.get_display();
1298 var cur_clip
= display
.get_viewport();
1299 var new_clip
= UI
.getSetting('clip');
1301 if (cur_clip
!== new_clip
) {
1302 display
.set_viewport(new_clip
);
1305 var size
= UI
.screenSize();
1307 if (new_clip
&& size
) {
1308 // When clipping is enabled, the screen is limited to
1309 // the size of the browser window.
1310 display
.viewportChangeSize(size
.w
, size
.h
);
1314 // Handle special cases where clipping is forced on/off or locked
1315 enableDisableViewClip: function() {
1316 var resizeSetting
= UI
.getSetting('resize');
1318 if (resizeSetting
=== 'downscale' || resizeSetting
=== 'scale') {
1319 // Disable clipping if we are scaling
1320 UI
.forceSetting('clip', false);
1321 UI
.setViewClip(false);
1322 document
.getElementById('noVNC_setting_clip').disabled
= true;
1324 document
.getElementById('noVNC_setting_clip').disabled
=
1325 UI
.connected
|| Util
.isTouchDevice
;
1326 if (Util
.isTouchDevice
) {
1327 UI
.setViewClip(true);
1338 toggleViewDrag: function() {
1339 if (!UI
.rfb
) return;
1341 var drag
= UI
.rfb
.get_viewportDrag();
1342 UI
.setViewDrag(!drag
);
1345 // Set the view drag mode which moves the viewport on mouse drags
1346 setViewDrag: function(drag
) {
1347 if (!UI
.rfb
) return;
1349 UI
.rfb
.set_viewportDrag(drag
);
1351 UI
.updateViewDrag();
1354 updateViewDrag: function() {
1355 var clipping
= false;
1357 if (!UI
.connected
) return;
1359 // Check if viewport drag is possible. It is only possible
1360 // if the remote display is clipping the client display.
1361 if (UI
.rfb
.get_display().get_viewport() &&
1362 UI
.rfb
.get_display().clippingDisplay()) {
1366 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1369 UI
.rfb
.get_viewportDrag()) {
1370 // The size of the remote display is the same or smaller
1371 // than the client display. Make sure viewport drag isn't
1372 // active when it can't be used.
1373 UI
.rfb
.set_viewportDrag(false);
1376 if (UI
.rfb
.get_viewportDrag()) {
1377 viewDragButton
.classList
.add("noVNC_selected");
1379 viewDragButton
.classList
.remove("noVNC_selected");
1382 // Different behaviour for touch vs non-touch
1383 // The button is disabled instead of hidden on touch devices
1384 if (Util
.isTouchDevice
) {
1385 viewDragButton
.classList
.remove("noVNC_hidden");
1388 viewDragButton
.disabled
= false;
1390 viewDragButton
.disabled
= true;
1393 viewDragButton
.disabled
= false;
1396 viewDragButton
.classList
.remove("noVNC_hidden");
1398 viewDragButton
.classList
.add("noVNC_hidden");
1409 showVirtualKeyboard: function() {
1410 if (!Util
.isTouchDevice
) return;
1412 var input
= document
.getElementById('noVNC_keyboardinput');
1414 if (document
.activeElement
== input
) return;
1419 var l
= input
.value
.length
;
1420 // Move the caret to the end
1421 input
.setSelectionRange(l
, l
);
1422 } catch (err
) {} // setSelectionRange is undefined in Google Chrome
1425 hideVirtualKeyboard: function() {
1426 if (!Util
.isTouchDevice
) return;
1428 var input
= document
.getElementById('noVNC_keyboardinput');
1430 if (document
.activeElement
!= input
) return;
1435 toggleVirtualKeyboard: function () {
1436 if (document
.getElementById('noVNC_keyboard_button')
1437 .classList
.contains("noVNC_selected")) {
1438 UI
.hideVirtualKeyboard();
1440 UI
.showVirtualKeyboard();
1444 onfocusVirtualKeyboard: function(event
) {
1445 document
.getElementById('noVNC_keyboard_button')
1446 .classList
.add("noVNC_selected");
1449 onblurVirtualKeyboard: function(event
) {
1450 document
.getElementById('noVNC_keyboard_button')
1451 .classList
.remove("noVNC_selected");
1454 keepVirtualKeyboard: function(event
) {
1455 var input
= document
.getElementById('noVNC_keyboardinput');
1457 // Only prevent focus change if the virtual keyboard is active
1458 if (document
.activeElement
!= input
) {
1462 // Only allow focus to move to other elements that need
1463 // focus to function properly
1464 if (event
.target
.form
!== undefined) {
1465 switch (event
.target
.type
) {
1474 case 'select-multiple':
1479 event
.preventDefault();
1482 keyboardinputReset: function() {
1483 var kbi
= document
.getElementById('noVNC_keyboardinput');
1484 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1485 UI
.lastKeyboardinput
= kbi
.value
;
1488 // When normal keyboard events are left uncought, use the input events from
1489 // the keyboardinput element instead and generate the corresponding key events.
1490 // This code is required since some browsers on Android are inconsistent in
1491 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1492 keyInput: function(event
) {
1494 if (!UI
.rfb
) return;
1496 var newValue
= event
.target
.value
;
1498 if (!UI
.lastKeyboardinput
) {
1499 UI
.keyboardinputReset();
1501 var oldValue
= UI
.lastKeyboardinput
;
1505 // Try to check caret position since whitespace at the end
1506 // will not be considered by value.length in some browsers
1507 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1509 // selectionStart is undefined in Google Chrome
1510 newLen
= newValue
.length
;
1512 var oldLen
= oldValue
.length
;
1515 var inputs
= newLen
- oldLen
;
1517 backspaces
= -inputs
;
1522 // Compare the old string with the new to account for
1523 // text-corrections or other input that modify existing text
1525 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1526 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1527 inputs
= newLen
- i
;
1528 backspaces
= oldLen
- i
;
1533 // Send the key events
1534 for (i
= 0; i
< backspaces
; i
++) {
1535 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1537 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1538 UI
.rfb
.sendKey(keysyms
.fromUnicode(newValue
.charCodeAt(i
)).keysym
);
1541 // Control the text content length in the keyboardinput element
1542 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1543 UI
.keyboardinputReset();
1544 } else if (newLen
< 1) {
1545 // There always have to be some text in the keyboardinput
1546 // element with which backspace can interact.
1547 UI
.keyboardinputReset();
1548 // This sometimes causes the keyboard to disappear for a second
1549 // but it is required for the android keyboard to recognize that
1550 // text has been added to the field
1551 event
.target
.blur();
1552 // This has to be ran outside of the input handler in order to work
1553 setTimeout(event
.target
.focus
.bind(event
.target
), 0);
1555 UI
.lastKeyboardinput
= newValue
;
1565 openExtraKeys: function() {
1566 UI
.closeAllPanels();
1567 UI
.openControlbar();
1569 document
.getElementById('noVNC_modifiers')
1570 .classList
.add("noVNC_open");
1571 document
.getElementById('noVNC_toggle_extra_keys_button')
1572 .classList
.add("noVNC_selected");
1575 closeExtraKeys: function() {
1576 document
.getElementById('noVNC_modifiers')
1577 .classList
.remove("noVNC_open");
1578 document
.getElementById('noVNC_toggle_extra_keys_button')
1579 .classList
.remove("noVNC_selected");
1582 toggleExtraKeys: function() {
1583 if(document
.getElementById('noVNC_modifiers')
1584 .classList
.contains("noVNC_open")) {
1585 UI
.closeExtraKeys();
1591 sendEsc: function() {
1592 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1595 sendTab: function() {
1596 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1599 toggleCtrl: function() {
1600 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1601 if (btn
.classList
.contains("noVNC_selected")) {
1602 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1603 btn
.classList
.remove("noVNC_selected");
1605 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1606 btn
.classList
.add("noVNC_selected");
1610 toggleAlt: function() {
1611 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1612 if (btn
.classList
.contains("noVNC_selected")) {
1613 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1614 btn
.classList
.remove("noVNC_selected");
1616 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1617 btn
.classList
.add("noVNC_selected");
1621 sendCtrlAltDel: function() {
1622 UI
.rfb
.sendCtrlAltDel();
1631 setMouseButton: function(num
) {
1632 var view_only
= UI
.rfb
.get_view_only();
1633 if (UI
.rfb
&& !view_only
) {
1634 UI
.rfb
.get_mouse().set_touchButton(num
);
1637 var blist
= [0, 1,2,4];
1638 for (var b
= 0; b
< blist
.length
; b
++) {
1639 var button
= document
.getElementById('noVNC_mouse_button' +
1641 if (blist
[b
] === num
&& !view_only
) {
1642 button
.classList
.remove("noVNC_hidden");
1644 button
.classList
.add("noVNC_hidden");
1649 displayBlur: function() {
1650 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1651 UI
.rfb
.get_keyboard().set_focused(false);
1652 UI
.rfb
.get_mouse().set_focused(false);
1656 displayFocus: function() {
1657 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1658 UI
.rfb
.get_keyboard().set_focused(true);
1659 UI
.rfb
.get_mouse().set_focused(true);
1663 updateLogging: function() {
1664 WebUtil
.init_logging(UI
.getSetting('logging'));
1667 updateSessionSize: function(rfb
, width
, height
) {
1668 UI
.updateViewClip();
1669 UI
.updateViewDrag();
1672 updateDesktopName: function(rfb
, name
) {
1673 UI
.desktopName
= name
;
1674 // Display the desktop name in the document title
1675 document
.title
= name
+ " - noVNC";
1678 bell: function(rfb
) {
1679 if (WebUtil
.getConfigVar('bell', 'on') === 'on') {
1680 document
.getElementById('noVNC_bell').play();
1684 //Helper to add options to dropdown.
1685 addOption: function(selectbox
, text
, value
) {
1686 var optn
= document
.createElement("OPTION");
1689 selectbox
.options
.add(optn
);
1698 /* [module] UI.load(); */
1701 /* [module] export default UI; */