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 RFB from "../core/rfb";
18 * import Display from "../core/display";
19 * import WebUtil from "./webutil";
27 /* [begin skip-as-module] */
28 // Load supporting scripts
30 {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
31 "input/xtscancodes.js", "input/util.js", "input/devices.js",
32 "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
34 window
.onscriptsload = function () { UI
.load(); };
35 /* [end skip-as-module] */
44 hideKeyboardTimeout
: null,
45 idleControlbarTimeout
: null,
46 closeControlbarTimeout
: null,
48 controlbarGrabbed
: false,
49 controlbarDrag
: false,
50 controlbarMouseDownClientY
: 0,
51 controlbarMouseDownOffsetY
: 0,
52 keyboardVisible
: false,
56 rememberedClipSetting
: null,
57 lastKeyboardinput
: null,
58 defaultKeyboardinputLen
: 100,
60 // Setup rfb object, load settings from browser storage, then call
61 // UI.init to setup the UI/menus
62 load: function(callback
) {
63 WebUtil
.initSettings(UI
.start
, callback
);
66 // Render default UI and initialize settings menu
67 start: function(callback
) {
69 // Setup global variables first
70 UI
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
71 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
72 navigator
.userAgent
.indexOf('Chrome') === -1);
76 // Adapt the interface for touch screen devices
77 if (UI
.isTouchDevice
) {
78 document
.documentElement
.classList
.add("noVNC_touch");
79 // Remove the address bar
80 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
81 UI
.forceSetting('clip', true);
83 UI
.initSetting('clip', false);
86 // Setup and initialize event handlers
87 UI
.setupWindowEvents();
89 UI
.addControlbarHandlers();
90 UI
.addTouchSpecificHandlers();
91 UI
.addExtraKeysHandlers();
93 UI
.addConnectionControlHandlers();
94 UI
.addClipboardHandlers();
95 UI
.addSettingsHandlers();
97 // Show the connect panel on first load unless autoconnecting
99 UI
.openConnectPanel();
104 UI
.updateVisualState();
106 document
.getElementById('noVNC_setting_host').focus();
108 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
109 if (autoconnect
=== 'true' || autoconnect
== '1') {
116 if (typeof callback
=== "function") {
121 initSettings: function() {
122 // Stylesheet selection dropdown
123 var sheet
= WebUtil
.selectStylesheet();
124 var sheets
= WebUtil
.getStylesheets();
126 for (i
= 0; i
< sheets
.length
; i
+= 1) {
127 UI
.addOption(document
.getElementById('noVNC_setting_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
130 // Logging selection dropdown
131 var llevels
= ['error', 'warn', 'info', 'debug'];
132 for (i
= 0; i
< llevels
.length
; i
+= 1) {
133 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
136 // Settings with immediate effects
137 UI
.initSetting('logging', 'warn');
138 WebUtil
.init_logging(UI
.getSetting('logging'));
140 UI
.initSetting('stylesheet', 'default');
141 WebUtil
.selectStylesheet(null);
142 // call twice to get around webkit bug
143 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
145 // if port == 80 (or 443) then it won't be present and should be
147 var port
= window
.location
.port
;
149 if (window
.location
.protocol
.substring(0,5) == 'https') {
152 else if (window
.location
.protocol
.substring(0,4) == 'http') {
157 /* Populate the controls if defaults are provided in the URL */
158 UI
.initSetting('host', window
.location
.hostname
);
159 UI
.initSetting('port', port
);
160 UI
.initSetting('password', '');
161 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
162 UI
.initSetting('true_color', true);
163 UI
.initSetting('cursor', !UI
.isTouchDevice
);
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('token', '');
172 setupWindowEvents: function() {
173 window
.addEventListener( 'resize', function () {
174 UI
.applyResizeMode();
179 document
.getElementById("noVNC_status")
180 .addEventListener('click', UI
.hideStatus
);
183 setupFullscreen: function() {
184 // Only show the button if fullscreen is properly supported
185 // * Safari doesn't support alphanumerical input while in fullscreen
187 (document
.documentElement
.requestFullscreen
||
188 document
.documentElement
.mozRequestFullScreen
||
189 document
.documentElement
.webkitRequestFullscreen
||
190 document
.body
.msRequestFullscreen
)) {
191 document
.getElementById('noVNC_fullscreen_button')
192 .classList
.remove("noVNC_hidden");
193 UI
.addFullscreenHandlers();
197 addControlbarHandlers: function() {
198 document
.getElementById("noVNC_control_bar")
199 .addEventListener('mousemove', UI
.activateControlbar
);
200 document
.getElementById("noVNC_control_bar")
201 .addEventListener('mouseup', UI
.activateControlbar
);
202 document
.getElementById("noVNC_control_bar")
203 .addEventListener('mousedown', UI
.activateControlbar
);
204 document
.getElementById("noVNC_control_bar")
205 .addEventListener('keypress', UI
.activateControlbar
);
207 document
.getElementById("noVNC_control_bar")
208 .addEventListener('mousedown', UI
.keepControlbar
);
209 document
.getElementById("noVNC_control_bar")
210 .addEventListener('keypress', UI
.keepControlbar
);
212 document
.getElementById("noVNC_view_drag_button")
213 .addEventListener('click', UI
.toggleViewDrag
);
215 document
.getElementById("noVNC_control_bar_handle")
216 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
217 document
.getElementById("noVNC_control_bar_handle")
218 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
219 document
.getElementById("noVNC_control_bar_handle")
220 .addEventListener('mousemove', UI
.dragControlbarHandle
);
221 // resize events aren't available for elements
222 window
.addEventListener('resize', UI
.updateControlbarHandle
);
225 addTouchSpecificHandlers: function() {
226 document
.getElementById("noVNC_mouse_button0")
227 .addEventListener('click', function () { UI
.setMouseButton(1); });
228 document
.getElementById("noVNC_mouse_button1")
229 .addEventListener('click', function () { UI
.setMouseButton(2); });
230 document
.getElementById("noVNC_mouse_button2")
231 .addEventListener('click', function () { UI
.setMouseButton(4); });
232 document
.getElementById("noVNC_mouse_button4")
233 .addEventListener('click', function () { UI
.setMouseButton(0); });
234 document
.getElementById("noVNC_keyboard_button")
235 .addEventListener('click', UI
.toggleVirtualKeyboard
);
237 document
.getElementById("noVNC_keyboardinput")
238 .addEventListener('input', UI
.keyInput
);
239 document
.getElementById("noVNC_keyboardinput")
240 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
241 document
.getElementById("noVNC_keyboardinput")
242 .addEventListener('submit', function () { return false; });
244 document
.getElementById("noVNC_control_bar")
245 .addEventListener('touchstart', UI
.activateControlbar
);
246 document
.getElementById("noVNC_control_bar")
247 .addEventListener('touchmove', UI
.activateControlbar
);
248 document
.getElementById("noVNC_control_bar")
249 .addEventListener('touchend', UI
.activateControlbar
);
250 document
.getElementById("noVNC_control_bar")
251 .addEventListener('input', UI
.activateControlbar
);
253 document
.getElementById("noVNC_control_bar")
254 .addEventListener('touchstart', UI
.keepControlbar
);
255 document
.getElementById("noVNC_control_bar")
256 .addEventListener('input', UI
.keepControlbar
);
258 document
.getElementById("noVNC_control_bar_handle")
259 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
260 document
.getElementById("noVNC_control_bar_handle")
261 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
262 document
.getElementById("noVNC_control_bar_handle")
263 .addEventListener('touchmove', UI
.dragControlbarHandle
);
265 window
.addEventListener('load', UI
.keyboardinputReset
);
268 addExtraKeysHandlers: function() {
269 document
.getElementById("noVNC_toggle_extra_keys_button")
270 .addEventListener('click', UI
.toggleExtraKeys
);
271 document
.getElementById("noVNC_toggle_ctrl_button")
272 .addEventListener('click', UI
.toggleCtrl
);
273 document
.getElementById("noVNC_toggle_alt_button")
274 .addEventListener('click', UI
.toggleAlt
);
275 document
.getElementById("noVNC_send_tab_button")
276 .addEventListener('click', UI
.sendTab
);
277 document
.getElementById("noVNC_send_esc_button")
278 .addEventListener('click', UI
.sendEsc
);
279 document
.getElementById("noVNC_send_ctrl_alt_del_button")
280 .addEventListener('click', UI
.sendCtrlAltDel
);
283 addXvpHandlers: function() {
284 document
.getElementById("noVNC_xvp_shutdown_button")
285 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
286 document
.getElementById("noVNC_xvp_reboot_button")
287 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
288 document
.getElementById("noVNC_xvp_reset_button")
289 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
290 document
.getElementById("noVNC_xvp_button")
291 .addEventListener('click', UI
.toggleXvpPanel
);
294 addConnectionControlHandlers: function() {
295 document
.getElementById("noVNC_connect_controls_button")
296 .addEventListener('click', UI
.toggleConnectPanel
);
297 document
.getElementById("noVNC_disconnect_button")
298 .addEventListener('click', UI
.disconnect
);
299 document
.getElementById("noVNC_connect_button")
300 .addEventListener('click', UI
.connect
);
302 document
.getElementById("noVNC_password_button")
303 .addEventListener('click', UI
.setPassword
);
306 addClipboardHandlers: function() {
307 document
.getElementById("noVNC_clipboard_button")
308 .addEventListener('click', UI
.toggleClipboardPanel
);
309 document
.getElementById("noVNC_clipboard_text")
310 .addEventListener('focus', UI
.displayBlur
);
311 document
.getElementById("noVNC_clipboard_text")
312 .addEventListener('blur', UI
.displayFocus
);
313 document
.getElementById("noVNC_clipboard_text")
314 .addEventListener('change', UI
.clipboardSend
);
315 document
.getElementById("noVNC_clipboard_clear_button")
316 .addEventListener('click', UI
.clipboardClear
);
319 addSettingsHandlers: function() {
320 document
.getElementById("noVNC_settings_button")
321 .addEventListener('click', UI
.toggleSettingsPanel
);
322 document
.getElementById("noVNC_settings_apply")
323 .addEventListener('click', UI
.settingsApply
);
325 document
.getElementById("noVNC_setting_resize")
326 .addEventListener('change', UI
.enableDisableViewClip
);
329 addFullscreenHandlers: function() {
330 document
.getElementById("noVNC_fullscreen_button")
331 .addEventListener('click', UI
.toggleFullscreen
);
333 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
334 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
335 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
336 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
339 initRFB: function() {
341 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
342 'onNotification': UI
.notification
,
343 'onUpdateState': UI
.updateState
,
344 'onDisconnected': UI
.disconnectFinished
,
345 'onPasswordRequired': UI
.passwordRequired
,
346 'onXvpInit': UI
.updateXvpButton
,
347 'onClipboard': UI
.clipboardReceive
,
348 'onFBUComplete': UI
.initialResize
,
349 'onFBResize': UI
.updateViewDrag
,
350 'onDesktopName': UI
.updateDesktopName
});
353 UI
.showStatus('Unable to create RFB client -- ' + exc
, 'error');
364 updateState: function(rfb
, state
, oldstate
) {
367 UI
.showStatus("Connecting");
371 if (rfb
&& rfb
.get_encrypt()) {
372 UI
.showStatus("Connected (encrypted) to " +
375 UI
.showStatus("Connected (unencrypted) to " +
379 case 'disconnecting':
380 UI
.showStatus("Disconnecting");
383 UI
.connected
= false;
384 UI
.showStatus("Disconnected");
387 UI
.showStatus("Invalid state", 'error');
391 UI
.updateVisualState();
394 // Disable/enable controls depending on connection state
395 updateVisualState: function() {
396 //Util.Debug(">> updateVisualState");
397 document
.getElementById('noVNC_setting_encrypt').disabled
= UI
.connected
;
398 document
.getElementById('noVNC_setting_true_color').disabled
= UI
.connected
;
399 if (Util
.browserSupportsCursorURIs()) {
400 document
.getElementById('noVNC_setting_cursor').disabled
= UI
.connected
;
402 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
403 document
.getElementById('noVNC_setting_cursor').disabled
= true;
406 UI
.enableDisableViewClip();
407 document
.getElementById('noVNC_setting_resize').disabled
= UI
.connected
;
408 document
.getElementById('noVNC_setting_shared').disabled
= UI
.connected
;
409 document
.getElementById('noVNC_setting_view_only').disabled
= UI
.connected
;
410 document
.getElementById('noVNC_setting_path').disabled
= UI
.connected
;
411 document
.getElementById('noVNC_setting_repeaterID').disabled
= UI
.connected
;
414 document
.documentElement
.classList
.add("noVNC_connected");
416 UI
.setMouseButton(1);
418 // Hide the controlbar after 2 seconds
419 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
421 document
.documentElement
.classList
.remove("noVNC_connected");
422 UI
.updateXvpButton(0);
426 // State change disables viewport dragging.
427 // It is enabled (toggled) by direct click on the button
428 UI
.setViewDrag(false);
430 // State change also closes the password dialog
431 document
.getElementById('noVNC_password_dlg')
432 .classList
.remove('noVNC_open');
434 //Util.Debug("<< updateVisualState");
437 showStatus: function(text
, status_type
, time
) {
438 var statusElem
= document
.getElementById('noVNC_status');
440 clearTimeout(UI
.statusTimeout
);
442 if (typeof status_type
=== 'undefined') {
443 status_type
= 'normal';
446 statusElem
.classList
.remove("noVNC_status_normal",
448 "noVNC_status_error");
450 switch (status_type
) {
453 statusElem
.classList
.add("noVNC_status_warn");
456 statusElem
.classList
.add("noVNC_status_error");
461 statusElem
.classList
.add("noVNC_status_normal");
465 statusElem
.innerHTML
= text
;
466 statusElem
.classList
.add("noVNC_open");
468 // If no time was specified, show the status for 1.5 seconds
469 if (typeof time
=== 'undefined') {
473 // Error messages do not timeout
474 if (status_type
!== 'error') {
475 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
479 hideStatus: function() {
480 clearTimeout(UI
.statusTimeout
);
481 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
484 notification: function (rfb
, msg
, level
, options
) {
485 UI
.showStatus(msg
, level
);
488 activateControlbar: function(event
) {
489 clearTimeout(UI
.idleControlbarTimeout
);
490 // We manipulate the anchor instead of the actual control
491 // bar in order to avoid creating new a stacking group
492 document
.getElementById('noVNC_control_bar_anchor')
493 .classList
.remove("noVNC_idle");
494 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
497 idleControlbar: function() {
498 document
.getElementById('noVNC_control_bar_anchor')
499 .classList
.add("noVNC_idle");
502 keepControlbar: function() {
503 clearTimeout(UI
.closeControlbarTimeout
);
506 openControlbar: function() {
507 document
.getElementById('noVNC_control_bar')
508 .classList
.add("noVNC_open");
511 closeControlbar: function() {
513 document
.getElementById('noVNC_control_bar')
514 .classList
.remove("noVNC_open");
517 toggleControlbar: function() {
518 if (document
.getElementById('noVNC_control_bar')
519 .classList
.contains("noVNC_open")) {
520 UI
.closeControlbar();
526 dragControlbarHandle: function (e
) {
527 if (!UI
.controlbarGrabbed
) return;
529 var ptr
= Util
.getPointerEvent(e
);
531 if (!UI
.controlbarDrag
) {
532 // The goal is to trigger on a certain physical width, the
533 // devicePixelRatio brings us a bit closer but is not optimal.
534 var dragThreshold
= 10 * (window
.devicePixelRatio
|| 1);
535 var dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
537 if (dragDistance
< dragThreshold
) return;
539 UI
.controlbarDrag
= true;
542 var eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
544 UI
.moveControlbarHandle(eventY
);
550 // Move the handle but don't allow any position outside the bounds
551 moveControlbarHandle: function (posY
) {
552 var handle
= document
.getElementById("noVNC_control_bar_handle");
553 var handleHeight
= Util
.getPosition(handle
).height
;
554 var controlbar
= document
.getElementById("noVNC_control_bar");
555 var controlbarBounds
= Util
.getPosition(controlbar
);
556 var controlbarTop
= controlbarBounds
.y
;
557 var controlbarBottom
= controlbarBounds
.y
+ controlbarBounds
.height
;
560 var viewportY
= posY
;
562 // Refuse coordinates outside the control bar
563 if (viewportY
< controlbarTop
+ margin
) {
564 viewportY
= controlbarTop
+ margin
;
565 } else if (viewportY
> controlbarBottom
- handleHeight
- margin
) {
566 viewportY
= controlbarBottom
- handleHeight
- margin
;
569 // Corner case: control bar too small for stable position
570 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
571 viewportY
= controlbarTop
+ (controlbarBounds
.height
- handleHeight
) / 2;
574 var relativeY
= viewportY
- controlbarTop
;
575 handle
.style
.transform
= "translateY(" + relativeY
+ "px)";
578 updateControlbarHandle: function () {
579 var handle
= document
.getElementById("noVNC_control_bar_handle");
580 var pos
= Util
.getPosition(handle
);
581 UI
.moveControlbarHandle(pos
.y
);
584 controlbarHandleMouseUp: function(e
) {
585 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
587 // mouseup and mousedown on the same place toggles the controlbar
588 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
589 UI
.toggleControlbar();
593 UI
.controlbarGrabbed
= false;
596 controlbarHandleMouseDown: function(e
) {
597 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
599 var ptr
= Util
.getPointerEvent(e
);
601 var handle
= document
.getElementById("noVNC_control_bar_handle");
602 var bounds
= handle
.getBoundingClientRect();
604 WebUtil
.setCapture(handle
);
605 UI
.controlbarGrabbed
= true;
606 UI
.controlbarDrag
= false;
608 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
609 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
620 // Initial page load read/initialization of settings
621 initSetting: function(name
, defVal
) {
622 // Check Query string followed by cookie
623 var val
= WebUtil
.getConfigVar(name
);
625 val
= WebUtil
.readSetting(name
, defVal
);
627 UI
.updateSetting(name
, val
);
631 // Update cookie and form control setting. If value is not set, then
632 // updates from control to current cookie setting.
633 updateSetting: function(name
, value
) {
635 // Save the cookie for this session
636 if (typeof value
!== 'undefined') {
637 WebUtil
.writeSetting(name
, value
);
640 // Update the settings control
641 value
= UI
.getSetting(name
);
643 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
644 if (ctrl
.type
=== 'checkbox') {
645 ctrl
.checked
= value
;
647 } else if (typeof ctrl
.options
!== 'undefined') {
648 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
649 if (ctrl
.options
[i
].value
=== value
) {
650 ctrl
.selectedIndex
= i
;
655 /*Weird IE9 error leads to 'null' appearring
656 in textboxes instead of ''.*/
657 if (value
=== null) {
664 // Save control setting to cookie
665 saveSetting: function(name
) {
666 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
667 if (ctrl
.type
=== 'checkbox') {
669 } else if (typeof ctrl
.options
!== 'undefined') {
670 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
674 WebUtil
.writeSetting(name
, val
);
675 //Util.Debug("Setting saved '" + name + "=" + val + "'");
679 // Force a setting to be a certain value
680 forceSetting: function(name
, val
) {
681 UI
.updateSetting(name
, val
);
685 // Read form control compatible setting from cookie
686 getSetting: function(name
) {
687 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
688 var val
= WebUtil
.readSetting(name
);
689 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
690 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
699 // Save/apply settings when 'Apply' button is pressed
700 settingsApply: function() {
701 //Util.Debug(">> settingsApply");
702 UI
.saveSetting('encrypt');
703 UI
.saveSetting('true_color');
704 if (Util
.browserSupportsCursorURIs()) {
705 UI
.saveSetting('cursor');
708 UI
.saveSetting('resize');
710 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
711 UI
.forceSetting('clip', false);
714 UI
.saveSetting('clip');
715 UI
.saveSetting('shared');
716 UI
.saveSetting('view_only');
717 UI
.saveSetting('path');
718 UI
.saveSetting('repeaterID');
719 UI
.saveSetting('stylesheet');
720 UI
.saveSetting('logging');
722 // Settings with immediate (non-connected related) effect
723 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
724 WebUtil
.init_logging(UI
.getSetting('logging'));
727 //Util.Debug("<< settingsApply");
736 closeAllPanels: function() {
737 UI
.closeSettingsPanel();
739 UI
.closeClipboardPanel();
740 UI
.closeConnectPanel();
750 openSettingsPanel: function() {
754 UI
.updateSetting('encrypt');
755 UI
.updateSetting('true_color');
756 if (Util
.browserSupportsCursorURIs()) {
757 UI
.updateSetting('cursor');
759 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
760 document
.getElementById('noVNC_setting_cursor').disabled
= true;
762 UI
.updateSetting('clip');
763 UI
.updateSetting('resize');
764 UI
.updateSetting('shared');
765 UI
.updateSetting('view_only');
766 UI
.updateSetting('path');
767 UI
.updateSetting('repeaterID');
768 UI
.updateSetting('stylesheet');
769 UI
.updateSetting('logging');
771 document
.getElementById('noVNC_settings')
772 .classList
.add("noVNC_open");
773 document
.getElementById('noVNC_settings_button')
774 .classList
.add("noVNC_selected");
777 closeSettingsPanel: function() {
778 document
.getElementById('noVNC_settings')
779 .classList
.remove("noVNC_open");
780 document
.getElementById('noVNC_settings_button')
781 .classList
.remove("noVNC_selected");
784 // Toggle the settings menu:
785 // On open, settings are refreshed from saved cookies.
786 // On close, settings are applied
787 toggleSettingsPanel: function() {
788 if (document
.getElementById('noVNC_settings')
789 .classList
.contains("noVNC_open")) {
791 UI
.closeSettingsPanel();
793 UI
.openSettingsPanel();
803 openXvpPanel: function() {
807 document
.getElementById('noVNC_xvp')
808 .classList
.add("noVNC_open");
809 document
.getElementById('noVNC_xvp_button')
810 .classList
.add("noVNC_selected");
813 closeXvpPanel: function() {
814 document
.getElementById('noVNC_xvp')
815 .classList
.remove("noVNC_open");
816 document
.getElementById('noVNC_xvp_button')
817 .classList
.remove("noVNC_selected");
820 toggleXvpPanel: function() {
821 if (document
.getElementById('noVNC_xvp')
822 .classList
.contains("noVNC_open")) {
829 // Disable/enable XVP button
830 updateXvpButton: function(ver
) {
832 document
.getElementById('noVNC_xvp_button')
833 .classList
.remove("noVNC_hidden");
835 document
.getElementById('noVNC_xvp_button')
836 .classList
.add("noVNC_hidden");
837 // Close XVP panel if open
848 openClipboardPanel: function() {
852 document
.getElementById('noVNC_clipboard')
853 .classList
.add("noVNC_open");
854 document
.getElementById('noVNC_clipboard_button')
855 .classList
.add("noVNC_selected");
858 closeClipboardPanel: function() {
859 document
.getElementById('noVNC_clipboard')
860 .classList
.remove("noVNC_open");
861 document
.getElementById('noVNC_clipboard_button')
862 .classList
.remove("noVNC_selected");
865 toggleClipboardPanel: function() {
866 if (document
.getElementById('noVNC_clipboard')
867 .classList
.contains("noVNC_open")) {
868 UI
.closeClipboardPanel();
870 UI
.openClipboardPanel();
874 clipboardReceive: function(rfb
, text
) {
875 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
876 document
.getElementById('noVNC_clipboard_text').value
= text
;
877 Util
.Debug("<< UI.clipboardReceive");
880 clipboardClear: function() {
881 document
.getElementById('noVNC_clipboard_text').value
= "";
882 UI
.rfb
.clipboardPasteFrom("");
885 clipboardSend: function() {
886 var text
= document
.getElementById('noVNC_clipboard_text').value
;
887 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
888 UI
.rfb
.clipboardPasteFrom(text
);
889 Util
.Debug("<< UI.clipboardSend");
898 openConnectPanel: function() {
902 document
.getElementById('noVNC_connect_controls')
903 .classList
.add("noVNC_open");
904 document
.getElementById('noVNC_connect_controls_button')
905 .classList
.add("noVNC_selected");
907 document
.getElementById('noVNC_setting_host').focus();
910 closeConnectPanel: function() {
911 document
.getElementById('noVNC_connect_controls')
912 .classList
.remove("noVNC_open");
913 document
.getElementById('noVNC_connect_controls_button')
914 .classList
.remove("noVNC_selected");
916 UI
.saveSetting('host');
917 UI
.saveSetting('port');
918 UI
.saveSetting('token');
919 //UI.saveSetting('password');
922 toggleConnectPanel: function() {
923 if (document
.getElementById('noVNC_connect_controls')
924 .classList
.contains("noVNC_open")) {
925 UI
.closeConnectPanel();
927 UI
.openConnectPanel();
931 connect: function() {
932 var host
= document
.getElementById('noVNC_setting_host').value
;
933 var port
= document
.getElementById('noVNC_setting_port').value
;
934 var password
= document
.getElementById('noVNC_setting_password').value
;
935 var token
= document
.getElementById('noVNC_setting_token').value
;
936 var path
= document
.getElementById('noVNC_setting_path').value
;
938 //if token is in path then ignore the new token variable
940 path
= WebUtil
.injectParamIfMissing(path
, "token", token
);
943 if ((!host
) || (!port
)) {
944 UI
.showStatus("Must set host and port", 'error');
948 if (!UI
.initRFB()) return;
952 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
953 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
954 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
955 UI
.rfb
.set_shared(UI
.getSetting('shared'));
956 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
957 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
959 UI
.rfb
.connect(host
, port
, password
, path
);
962 disconnect: function() {
966 // Restore the callback used for initial resize
967 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
969 // Don't display the connection settings until we're actually disconnected
972 disconnectFinished: function (rfb
, reason
) {
973 if (typeof reason
!== 'undefined') {
974 UI
.showStatus(reason
, 'error');
976 UI
.openConnectPanel();
985 passwordRequired: function(rfb
, msg
) {
987 document
.getElementById('noVNC_password_dlg')
988 .classList
.add('noVNC_open');
990 setTimeout(function () {
991 document
.getElementById('noVNC_password_input').focus();
994 if (typeof msg
=== 'undefined') {
995 msg
= "Password is required";
997 UI
.showStatus(msg
, "warning");
1000 setPassword: function() {
1001 UI
.rfb
.sendPassword(document
.getElementById('noVNC_password_input').value
);
1002 document
.getElementById('noVNC_password_dlg')
1003 .classList
.remove('noVNC_open');
1013 toggleFullscreen: function() {
1014 if (document
.fullscreenElement
|| // alternative standard method
1015 document
.mozFullScreenElement
|| // currently working methods
1016 document
.webkitFullscreenElement
||
1017 document
.msFullscreenElement
) {
1018 if (document
.exitFullscreen
) {
1019 document
.exitFullscreen();
1020 } else if (document
.mozCancelFullScreen
) {
1021 document
.mozCancelFullScreen();
1022 } else if (document
.webkitExitFullscreen
) {
1023 document
.webkitExitFullscreen();
1024 } else if (document
.msExitFullscreen
) {
1025 document
.msExitFullscreen();
1028 if (document
.documentElement
.requestFullscreen
) {
1029 document
.documentElement
.requestFullscreen();
1030 } else if (document
.documentElement
.mozRequestFullScreen
) {
1031 document
.documentElement
.mozRequestFullScreen();
1032 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1033 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1034 } else if (document
.body
.msRequestFullscreen
) {
1035 document
.body
.msRequestFullscreen();
1038 UI
.enableDisableViewClip();
1039 UI
.updateFullscreenButton();
1042 updateFullscreenButton: function() {
1043 if (document
.fullscreenElement
|| // alternative standard method
1044 document
.mozFullScreenElement
|| // currently working methods
1045 document
.webkitFullscreenElement
||
1046 document
.msFullscreenElement
) {
1047 document
.getElementById('noVNC_fullscreen_button')
1048 .classList
.add("noVNC_selected");
1050 document
.getElementById('noVNC_fullscreen_button')
1051 .classList
.remove("noVNC_selected");
1061 // Apply remote resizing or local scaling
1062 applyResizeMode: function() {
1063 if (!UI
.rfb
) return;
1065 var screen
= UI
.screenSize();
1067 if (screen
&& UI
.connected
&& UI
.rfb
.get_display()) {
1069 var display
= UI
.rfb
.get_display();
1070 var resizeMode
= UI
.getSetting('resize');
1072 if (resizeMode
=== 'remote') {
1074 // Request changing the resolution of the remote display to
1075 // the size of the local browser viewport.
1077 // In order to not send multiple requests before the browser-resize
1078 // is finished we wait 0.5 seconds before sending the request.
1079 clearTimeout(UI
.resizeTimeout
);
1080 UI
.resizeTimeout
= setTimeout(function(){
1082 // Limit the viewport to the size of the browser window
1083 display
.set_maxWidth(screen
.w
);
1084 display
.set_maxHeight(screen
.h
);
1086 Util
.Debug('Attempting requestDesktopSize(' +
1087 screen
.w
+ ', ' + screen
.h
+ ')');
1089 // Request a remote size covering the viewport
1090 UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
);
1093 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
1094 var downscaleOnly
= resizeMode
=== 'downscale';
1095 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
1096 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
1097 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
1102 // The screen is always the same size as the available viewport
1103 // in the browser window minus the height of the control bar
1104 screenSize: function() {
1105 var screen
= document
.getElementById('noVNC_screen');
1107 // Hide the scrollbars until the size is calculated
1108 screen
.style
.overflow
= "hidden";
1110 var pos
= Util
.getPosition(screen
);
1114 screen
.style
.overflow
= "visible";
1116 if (isNaN(w
) || isNaN(h
)) {
1119 return {w
: w
, h
: h
};
1123 // Normally we only apply the current resize mode after a window resize
1124 // event. This means that when a new connection is opened, there is no
1125 // resize mode active.
1126 // We have to wait until the first FBU because this is where the client
1127 // will find the supported encodings of the server. Some calls later in
1128 // the chain is dependant on knowing the server-capabilities.
1129 initialResize: function(rfb
, fbu
) {
1130 UI
.applyResizeMode();
1131 // After doing this once, we remove the callback.
1132 UI
.rfb
.set_onFBUComplete(function() { });
1141 // Set and configure viewport clipping
1142 setViewClip: function(clip
) {
1143 UI
.updateSetting('clip', clip
);
1144 UI
.updateViewClip();
1147 // Update parameters that depend on the clip setting
1148 updateViewClip: function() {
1150 if (!UI
.rfb
) return;
1152 var display
= UI
.rfb
.get_display();
1153 var cur_clip
= display
.get_viewport();
1154 var new_clip
= UI
.getSetting('clip');
1156 if (cur_clip
!== new_clip
) {
1157 display
.set_viewport(new_clip
);
1160 var size
= UI
.screenSize();
1162 if (new_clip
&& size
) {
1163 // When clipping is enabled, the screen is limited to
1164 // the size of the browser window.
1165 display
.set_maxWidth(size
.w
);
1166 display
.set_maxHeight(size
.h
);
1168 var screen
= document
.getElementById('noVNC_screen');
1169 var canvas
= document
.getElementById('noVNC_canvas');
1171 // Hide potential scrollbars that can skew the position
1172 screen
.style
.overflow
= "hidden";
1174 // The x position marks the left margin of the canvas,
1175 // remove the margin from both sides to keep it centered.
1176 var new_w
= size
.w
- (2 * Util
.getPosition(canvas
).x
);
1178 screen
.style
.overflow
= "visible";
1180 display
.viewportChangeSize(new_w
, size
.h
);
1182 // Disable max dimensions
1183 display
.set_maxWidth(0);
1184 display
.set_maxHeight(0);
1185 display
.viewportChangeSize();
1189 // Handle special cases where clipping is forced on/off or locked
1190 enableDisableViewClip: function() {
1191 var resizeSetting
= document
.getElementById('noVNC_setting_resize');
1194 // Safari auto-hides the scrollbars which makes them
1195 // impossible to use in most cases
1196 UI
.setViewClip(true);
1197 document
.getElementById('noVNC_setting_clip').disabled
= true;
1198 } else if (resizeSetting
.value
=== 'downscale' || resizeSetting
.value
=== 'scale') {
1199 // Disable clipping if we are scaling
1200 UI
.setViewClip(false);
1201 document
.getElementById('noVNC_setting_clip').disabled
= true;
1202 } else if (document
.msFullscreenElement
) {
1203 // The browser is IE and we are in fullscreen mode.
1204 // - We need to force clipping while in fullscreen since
1205 // scrollbars doesn't work.
1206 UI
.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
1207 UI
.rememberedClipSetting
= UI
.getSetting('clip');
1208 UI
.setViewClip(true);
1209 document
.getElementById('noVNC_setting_clip').disabled
= true;
1210 } else if (document
.body
.msRequestFullscreen
&& UI
.rememberedClip
!== null) {
1211 // Restore view clip to what it was before fullscreen on IE
1212 UI
.setViewClip(UI
.rememberedClipSetting
);
1213 document
.getElementById('noVNC_setting_clip').disabled
=
1214 UI
.connected
|| UI
.isTouchDevice
;
1216 document
.getElementById('noVNC_setting_clip').disabled
=
1217 UI
.connected
|| UI
.isTouchDevice
;
1218 if (UI
.isTouchDevice
) {
1219 UI
.setViewClip(true);
1230 toggleViewDrag: function() {
1231 if (!UI
.rfb
) return;
1233 var drag
= UI
.rfb
.get_viewportDrag();
1234 UI
.setViewDrag(!drag
);
1237 // Set the view drag mode which moves the viewport on mouse drags
1238 setViewDrag: function(drag
) {
1239 if (!UI
.rfb
) return;
1241 UI
.rfb
.set_viewportDrag(drag
);
1243 UI
.updateViewDrag();
1246 updateViewDrag: function() {
1247 var clipping
= false;
1249 if (!UI
.connected
) return;
1251 // Check if viewport drag is possible. It is only possible
1252 // if the remote display is clipping the client display.
1253 if (UI
.rfb
.get_display().get_viewport() &&
1254 UI
.rfb
.get_display().clippingDisplay()) {
1258 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1261 UI
.rfb
.get_viewportDrag()) {
1262 // The size of the remote display is the same or smaller
1263 // than the client display. Make sure viewport drag isn't
1264 // active when it can't be used.
1265 UI
.rfb
.set_viewportDrag(false);
1268 if (UI
.rfb
.get_viewportDrag()) {
1269 viewDragButton
.classList
.add("noVNC_selected");
1271 viewDragButton
.classList
.remove("noVNC_selected");
1274 // Different behaviour for touch vs non-touch
1275 // The button is disabled instead of hidden on touch devices
1276 if (UI
.isTouchDevice
) {
1277 viewDragButton
.classList
.remove("noVNC_hidden");
1280 viewDragButton
.disabled
= false;
1282 viewDragButton
.disabled
= true;
1285 viewDragButton
.disabled
= false;
1288 viewDragButton
.classList
.remove("noVNC_hidden");
1290 viewDragButton
.classList
.add("noVNC_hidden");
1301 showVirtualKeyboard: function() {
1302 if (!UI
.isTouchDevice
) return;
1304 var input
= document
.getElementById('noVNC_keyboardinput');
1306 if (document
.activeElement
== input
) return;
1308 UI
.keyboardVisible
= true;
1309 document
.getElementById('noVNC_keyboard_button')
1310 .classList
.add("noVNC_selected");
1314 var l
= input
.value
.length
;
1315 // Move the caret to the end
1316 input
.setSelectionRange(l
, l
);
1317 } catch (err
) {} // setSelectionRange is undefined in Google Chrome
1320 hideVirtualKeyboard: function() {
1321 if (!UI
.isTouchDevice
) return;
1323 var input
= document
.getElementById('noVNC_keyboardinput');
1325 if (document
.activeElement
!= input
) return;
1330 toggleVirtualKeyboard: function () {
1331 if (UI
.keyboardVisible
) {
1332 UI
.hideVirtualKeyboard();
1334 UI
.showVirtualKeyboard();
1338 onblurVirtualKeyboard: function() {
1339 //Weird bug in iOS if you change keyboardVisible
1340 //here it does not actually occur so next time
1341 //you click keyboard icon it doesnt work.
1342 UI
.hideKeyboardTimeout
= setTimeout(function() {
1343 UI
.keyboardVisible
= false;
1344 document
.getElementById('noVNC_keyboard_button')
1345 .classList
.remove("noVNC_selected");
1349 keepKeyboard: function() {
1350 clearTimeout(UI
.hideKeyboardTimeout
);
1351 if(UI
.keyboardVisible
=== true) {
1352 UI
.showVirtualKeyboard();
1353 } else if(UI
.keyboardVisible
=== false) {
1354 UI
.hideVirtualKeyboard();
1358 keyboardinputReset: function() {
1359 var kbi
= document
.getElementById('noVNC_keyboardinput');
1360 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1361 UI
.lastKeyboardinput
= kbi
.value
;
1364 // When normal keyboard events are left uncought, use the input events from
1365 // the keyboardinput element instead and generate the corresponding key events.
1366 // This code is required since some browsers on Android are inconsistent in
1367 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1368 keyInput: function(event
) {
1370 if (!UI
.rfb
) return;
1372 var newValue
= event
.target
.value
;
1374 if (!UI
.lastKeyboardinput
) {
1375 UI
.keyboardinputReset();
1377 var oldValue
= UI
.lastKeyboardinput
;
1381 // Try to check caret position since whitespace at the end
1382 // will not be considered by value.length in some browsers
1383 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1385 // selectionStart is undefined in Google Chrome
1386 newLen
= newValue
.length
;
1388 var oldLen
= oldValue
.length
;
1391 var inputs
= newLen
- oldLen
;
1393 backspaces
= -inputs
;
1398 // Compare the old string with the new to account for
1399 // text-corrections or other input that modify existing text
1401 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1402 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1403 inputs
= newLen
- i
;
1404 backspaces
= oldLen
- i
;
1409 // Send the key events
1410 for (i
= 0; i
< backspaces
; i
++) {
1411 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1413 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1414 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1417 // Control the text content length in the keyboardinput element
1418 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1419 UI
.keyboardinputReset();
1420 } else if (newLen
< 1) {
1421 // There always have to be some text in the keyboardinput
1422 // element with which backspace can interact.
1423 UI
.keyboardinputReset();
1424 // This sometimes causes the keyboard to disappear for a second
1425 // but it is required for the android keyboard to recognize that
1426 // text has been added to the field
1427 event
.target
.blur();
1428 // This has to be ran outside of the input handler in order to work
1429 setTimeout(UI
.keepKeyboard
, 0);
1431 UI
.lastKeyboardinput
= newValue
;
1441 openExtraKeys: function() {
1442 UI
.closeAllPanels();
1443 UI
.openControlbar();
1445 document
.getElementById('noVNC_modifiers')
1446 .classList
.add("noVNC_open");
1447 document
.getElementById('noVNC_toggle_extra_keys_button')
1448 .classList
.add("noVNC_selected");
1451 closeExtraKeys: function() {
1452 document
.getElementById('noVNC_modifiers')
1453 .classList
.remove("noVNC_open");
1454 document
.getElementById('noVNC_toggle_extra_keys_button')
1455 .classList
.remove("noVNC_selected");
1458 toggleExtraKeys: function() {
1460 if(document
.getElementById('noVNC_modifiers')
1461 .classList
.contains("noVNC_open")) {
1462 UI
.closeExtraKeys();
1468 sendEsc: function() {
1470 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1473 sendTab: function() {
1475 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1478 toggleCtrl: function() {
1480 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1481 if (btn
.classList
.contains("noVNC_selected")) {
1482 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1483 btn
.classList
.remove("noVNC_selected");
1485 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1486 btn
.classList
.add("noVNC_selected");
1490 toggleAlt: function() {
1492 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1493 if (btn
.classList
.contains("noVNC_selected")) {
1494 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1495 btn
.classList
.remove("noVNC_selected");
1497 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1498 btn
.classList
.add("noVNC_selected");
1502 sendCtrlAltDel: function() {
1504 UI
.rfb
.sendCtrlAltDel();
1513 setMouseButton: function(num
) {
1515 UI
.rfb
.get_mouse().set_touchButton(num
);
1518 var blist
= [0, 1,2,4];
1519 for (var b
= 0; b
< blist
.length
; b
++) {
1520 var button
= document
.getElementById('noVNC_mouse_button' + blist
[b
]);
1521 if (blist
[b
] === num
) {
1522 button
.classList
.remove("noVNC_hidden");
1524 button
.classList
.add("noVNC_hidden");
1529 displayBlur: function() {
1530 if (!UI
.rfb
) return;
1532 UI
.rfb
.get_keyboard().set_focused(false);
1533 UI
.rfb
.get_mouse().set_focused(false);
1536 displayFocus: function() {
1537 if (!UI
.rfb
) return;
1539 UI
.rfb
.get_keyboard().set_focused(true);
1540 UI
.rfb
.get_mouse().set_focused(true);
1543 updateDesktopName: function(rfb
, name
) {
1544 UI
.desktopName
= name
;
1545 // Display the desktop name in the document title
1546 document
.title
= name
+ " - noVNC";
1549 //Helper to add options to dropdown.
1550 addOption: function(selectbox
, text
, value
) {
1551 var optn
= document
.createElement("OPTION");
1554 selectbox
.options
.add(optn
);
1563 /* [module] UI.load(); */
1566 /* [module] export default UI; */