]>
git.proxmox.com Git - mirror_novnc.git/blob - app/ui.js
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] */
43 hideKeyboardTimeout
: null,
45 keyboardVisible
: false,
49 rememberedClipSetting
: null,
50 lastKeyboardinput
: null,
51 defaultKeyboardinputLen
: 100,
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
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
64 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
65 navigator
.userAgent
.indexOf('Chrome') === -1);
69 // Show mouse selector buttons on touch screen devices
70 if (UI
.isTouchDevice
) {
71 // Show mobile buttons
72 document
.getElementById('noVNC_mobile_buttons')
73 .classList
.remove("noVNC_hidden");
75 // Remove the address bar
76 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
77 UI
.forceSetting('clip', true);
79 UI
.initSetting('clip', false);
82 // Setup and initialize event handlers
83 UI
.setupWindowEvents();
85 UI
.addControlbarHandlers();
86 UI
.addTouchSpecificHandlers();
87 UI
.addExtraKeysHandlers();
89 UI
.addConnectionControlHandlers();
90 UI
.addClipboardHandlers();
91 UI
.addSettingsHandlers();
93 // Show the connect panel on first load unless autoconnecting
95 UI
.openConnectPanel();
101 UI
.updateVisualState();
103 document
.getElementById('noVNC_setting_host').focus();
105 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
106 if (autoconnect
=== 'true' || autoconnect
== '1') {
113 if (typeof callback
=== "function") {
118 initSettings: function() {
119 // Stylesheet selection dropdown
120 var sheet
= WebUtil
.selectStylesheet();
121 var sheets
= WebUtil
.getStylesheets();
123 for (i
= 0; i
< sheets
.length
; i
+= 1) {
124 UI
.addOption(document
.getElementById('noVNC_setting_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
127 // Logging selection dropdown
128 var llevels
= ['error', 'warn', 'info', 'debug'];
129 for (i
= 0; i
< llevels
.length
; i
+= 1) {
130 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
133 // Settings with immediate effects
134 UI
.initSetting('logging', 'warn');
135 WebUtil
.init_logging(UI
.getSetting('logging'));
137 UI
.initSetting('stylesheet', 'default');
138 WebUtil
.selectStylesheet(null);
139 // call twice to get around webkit bug
140 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
142 // if port == 80 (or 443) then it won't be present and should be
144 var port
= window
.location
.port
;
146 if (window
.location
.protocol
.substring(0,5) == 'https') {
149 else if (window
.location
.protocol
.substring(0,4) == 'http') {
154 /* Populate the controls if defaults are provided in the URL */
155 UI
.initSetting('host', window
.location
.hostname
);
156 UI
.initSetting('port', port
);
157 UI
.initSetting('password', '');
158 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
159 UI
.initSetting('true_color', true);
160 UI
.initSetting('cursor', !UI
.isTouchDevice
);
161 UI
.initSetting('resize', 'off');
162 UI
.initSetting('shared', true);
163 UI
.initSetting('view_only', false);
164 UI
.initSetting('path', 'websockify');
165 UI
.initSetting('repeaterID', '');
166 UI
.initSetting('token', '');
169 setupWindowEvents: function() {
170 window
.addEventListener( 'resize', function () {
171 UI
.applyResizeMode();
177 document
.getElementById("noVNC_status")
178 .addEventListener('click', UI
.hideStatus
);
181 setupFullscreen: function() {
182 // Only show the button if fullscreen is properly supported
183 // * Safari doesn't support alphanumerical input while in fullscreen
185 (document
.documentElement
.requestFullscreen
||
186 document
.documentElement
.mozRequestFullScreen
||
187 document
.documentElement
.webkitRequestFullscreen
||
188 document
.body
.msRequestFullscreen
)) {
189 document
.getElementById('noVNC_fullscreen_button')
190 .classList
.remove("noVNC_hidden");
191 UI
.addFullscreenHandlers();
195 addControlbarHandlers: function() {
196 document
.getElementById("noVNC_view_drag_button")
197 .addEventListener('click', UI
.toggleViewDrag
);
198 document
.getElementById("noVNC_send_ctrl_alt_del_button")
199 .addEventListener('click', UI
.sendCtrlAltDel
);
202 addTouchSpecificHandlers: function() {
203 document
.getElementById("noVNC_mouse_button0")
204 .addEventListener('click', function () { UI
.setMouseButton(1); });
205 document
.getElementById("noVNC_mouse_button1")
206 .addEventListener('click', function () { UI
.setMouseButton(2); });
207 document
.getElementById("noVNC_mouse_button2")
208 .addEventListener('click', function () { UI
.setMouseButton(4); });
209 document
.getElementById("noVNC_mouse_button4")
210 .addEventListener('click', function () { UI
.setMouseButton(0); });
211 document
.getElementById("noVNC_keyboard_button")
212 .addEventListener('click', UI
.showKeyboard
);
214 document
.getElementById("noVNC_keyboardinput")
215 .addEventListener('input', UI
.keyInput
);
216 document
.getElementById("noVNC_keyboardinput")
217 .addEventListener('blur', UI
.hideKeyboard
);
218 document
.getElementById("noVNC_keyboardinput")
219 .addEventListener('submit', function () { return false; });
221 window
.addEventListener('load', UI
.keyboardinputReset
);
224 addExtraKeysHandlers: function() {
225 document
.getElementById("noVNC_toggle_extra_keys_button")
226 .addEventListener('click', UI
.toggleExtraKeys
);
227 document
.getElementById("noVNC_toggle_ctrl_button")
228 .addEventListener('click', UI
.toggleCtrl
);
229 document
.getElementById("noVNC_toggle_alt_button")
230 .addEventListener('click', UI
.toggleAlt
);
231 document
.getElementById("noVNC_send_tab_button")
232 .addEventListener('click', UI
.sendTab
);
233 document
.getElementById("noVNC_send_esc_button")
234 .addEventListener('click', UI
.sendEsc
);
237 addXvpHandlers: function() {
238 document
.getElementById("noVNC_xvp_shutdown_button")
239 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
240 document
.getElementById("noVNC_xvp_reboot_button")
241 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
242 document
.getElementById("noVNC_xvp_reset_button")
243 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
244 document
.getElementById("noVNC_xvp_button")
245 .addEventListener('click', UI
.toggleXvpPanel
);
248 addConnectionControlHandlers: function() {
249 document
.getElementById("noVNC_connect_controls_button")
250 .addEventListener('click', UI
.toggleConnectPanel
);
251 document
.getElementById("noVNC_disconnect_button")
252 .addEventListener('click', UI
.disconnect
);
253 document
.getElementById("noVNC_connect_button")
254 .addEventListener('click', UI
.connect
);
256 document
.getElementById("noVNC_password_button")
257 .addEventListener('click', UI
.setPassword
);
260 addClipboardHandlers: function() {
261 document
.getElementById("noVNC_clipboard_button")
262 .addEventListener('click', UI
.toggleClipboardPanel
);
263 document
.getElementById("noVNC_clipboard_text")
264 .addEventListener('focus', UI
.displayBlur
);
265 document
.getElementById("noVNC_clipboard_text")
266 .addEventListener('blur', UI
.displayFocus
);
267 document
.getElementById("noVNC_clipboard_text")
268 .addEventListener('change', UI
.clipboardSend
);
269 document
.getElementById("noVNC_clipboard_clear_button")
270 .addEventListener('click', UI
.clipboardClear
);
273 addSettingsHandlers: function() {
274 document
.getElementById("noVNC_settings_button")
275 .addEventListener('click', UI
.toggleSettingsPanel
);
276 document
.getElementById("noVNC_settings_apply")
277 .addEventListener('click', UI
.settingsApply
);
279 document
.getElementById("noVNC_setting_resize")
280 .addEventListener('change', UI
.enableDisableViewClip
);
283 addFullscreenHandlers: function() {
284 document
.getElementById("noVNC_fullscreen_button")
285 .addEventListener('click', UI
.toggleFullscreen
);
287 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
288 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
289 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
290 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
293 initRFB: function() {
295 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
296 'onUpdateState': UI
.updateState
,
297 'onXvpInit': UI
.updateXvpButton
,
298 'onClipboard': UI
.clipboardReceive
,
299 'onFBUComplete': UI
.initialResize
,
300 'onFBResize': UI
.updateViewDrag
,
301 'onDesktopName': UI
.updateDocumentTitle
});
304 UI
.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc
);
315 updateState: function(rfb
, state
, oldstate
, msg
) {
316 UI
.rfb_state
= state
;
318 if (typeof(msg
) !== 'undefined') {
322 // zero means no timeout
323 UI
.showStatus(msg
, 'error', 0);
329 UI
.showStatus(msg
, 'normal');
332 document
.getElementById('noVNC_password_dlg')
333 .classList
.add('noVNC_open');
334 setTimeout(function () {
335 document
.getElementById(('noVNC_password_input').focus());
338 UI
.showStatus(msg
, 'warn');
341 UI
.showStatus(msg
, 'warn');
346 UI
.updateVisualState();
349 // Disable/enable controls depending on connection state
350 updateVisualState: function() {
351 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
353 //Util.Debug(">> updateVisualState");
354 document
.getElementById('noVNC_setting_encrypt').disabled
= connected
;
355 document
.getElementById('noVNC_setting_true_color').disabled
= connected
;
356 if (Util
.browserSupportsCursorURIs()) {
357 document
.getElementById('noVNC_setting_cursor').disabled
= connected
;
359 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
360 document
.getElementById('noVNC_setting_cursor').disabled
= true;
363 UI
.enableDisableViewClip();
364 document
.getElementById('noVNC_setting_resize').disabled
= connected
;
365 document
.getElementById('noVNC_setting_shared').disabled
= connected
;
366 document
.getElementById('noVNC_setting_view_only').disabled
= connected
;
367 document
.getElementById('noVNC_setting_path').disabled
= connected
;
368 document
.getElementById('noVNC_setting_repeaterID').disabled
= connected
;
371 document
.getElementById('noVNC_logo')
372 .classList
.add("noVNC_hidden");
373 document
.getElementById('noVNC_screen')
374 .classList
.remove("noVNC_hidden");
376 UI
.setMouseButton(1);
377 document
.getElementById('noVNC_clipboard_button')
378 .classList
.remove("noVNC_hidden");
379 document
.getElementById('noVNC_keyboard_button')
380 .classList
.remove("noVNC_hidden");
381 document
.getElementById('noVNC_extra_keys')
382 .classList
.remove("noVNC_hidden");
383 document
.getElementById('noVNC_send_ctrl_alt_del_button')
384 .classList
.remove("noVNC_hidden");
386 document
.getElementById('noVNC_logo')
387 .classList
.remove("noVNC_hidden");
388 document
.getElementById('noVNC_screen')
389 .classList
.add("noVNC_hidden");
390 UI
.hideMouseButton();
391 document
.getElementById('noVNC_clipboard_button')
392 .classList
.add("noVNC_hidden");
393 document
.getElementById('noVNC_keyboard_button')
394 .classList
.add("noVNC_hidden");
395 document
.getElementById('noVNC_extra_keys')
396 .classList
.add("noVNC_hidden");
397 document
.getElementById('noVNC_send_ctrl_alt_del_button')
398 .classList
.add("noVNC_hidden");
399 UI
.updateXvpButton(0);
402 // State change disables viewport dragging.
403 // It is enabled (toggled) by direct click on the button
404 UI
.setViewDrag(false);
406 // State change also closes the password dialog
407 document
.getElementById('noVNC_password_dlg')
408 .classList
.remove('noVNC_open');
410 switch (UI
.rfb_state
) {
414 document
.getElementById('noVNC_connect_controls_button')
415 .classList
.remove("noVNC_hidden");
416 document
.getElementById('noVNC_disconnect_button')
417 .classList
.add("noVNC_hidden");
418 UI
.openConnectPanel();
421 document
.getElementById('noVNC_connect_controls_button')
422 .classList
.remove("noVNC_hidden");
423 document
.getElementById('noVNC_disconnect_button')
424 .classList
.add("noVNC_hidden");
427 document
.getElementById('noVNC_connect_controls_button')
428 .classList
.add("noVNC_hidden");
429 document
.getElementById('noVNC_disconnect_button')
430 .classList
.remove("noVNC_hidden");
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 // A specified time of zero means no timeout
475 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
479 hideStatus: function() {
480 clearTimeout(UI
.statusTimeout
);
481 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
490 // Initial page load read/initialization of settings
491 initSetting: function(name
, defVal
) {
492 // Check Query string followed by cookie
493 var val
= WebUtil
.getConfigVar(name
);
495 val
= WebUtil
.readSetting(name
, defVal
);
497 UI
.updateSetting(name
, val
);
501 // Update cookie and form control setting. If value is not set, then
502 // updates from control to current cookie setting.
503 updateSetting: function(name
, value
) {
505 // Save the cookie for this session
506 if (typeof value
!== 'undefined') {
507 WebUtil
.writeSetting(name
, value
);
510 // Update the settings control
511 value
= UI
.getSetting(name
);
513 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
514 if (ctrl
.type
=== 'checkbox') {
515 ctrl
.checked
= value
;
517 } else if (typeof ctrl
.options
!== 'undefined') {
518 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
519 if (ctrl
.options
[i
].value
=== value
) {
520 ctrl
.selectedIndex
= i
;
525 /*Weird IE9 error leads to 'null' appearring
526 in textboxes instead of ''.*/
527 if (value
=== null) {
534 // Save control setting to cookie
535 saveSetting: function(name
) {
536 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
537 if (ctrl
.type
=== 'checkbox') {
539 } else if (typeof ctrl
.options
!== 'undefined') {
540 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
544 WebUtil
.writeSetting(name
, val
);
545 //Util.Debug("Setting saved '" + name + "=" + val + "'");
549 // Force a setting to be a certain value
550 forceSetting: function(name
, val
) {
551 UI
.updateSetting(name
, val
);
555 // Read form control compatible setting from cookie
556 getSetting: function(name
) {
557 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
558 var val
= WebUtil
.readSetting(name
);
559 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
560 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
569 // Save/apply settings when 'Apply' button is pressed
570 settingsApply: function() {
571 //Util.Debug(">> settingsApply");
572 UI
.saveSetting('encrypt');
573 UI
.saveSetting('true_color');
574 if (Util
.browserSupportsCursorURIs()) {
575 UI
.saveSetting('cursor');
578 UI
.saveSetting('resize');
580 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
581 UI
.forceSetting('clip', false);
584 UI
.saveSetting('clip');
585 UI
.saveSetting('shared');
586 UI
.saveSetting('view_only');
587 UI
.saveSetting('path');
588 UI
.saveSetting('repeaterID');
589 UI
.saveSetting('stylesheet');
590 UI
.saveSetting('logging');
592 // Settings with immediate (non-connected related) effect
593 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
594 WebUtil
.init_logging(UI
.getSetting('logging'));
597 //Util.Debug("<< settingsApply");
606 closeAllPanels: function() {
607 UI
.closeSettingsPanel();
609 UI
.closeClipboardPanel();
610 UI
.closeConnectPanel();
619 openSettingsPanel: function() {
622 UI
.updateSetting('encrypt');
623 UI
.updateSetting('true_color');
624 if (Util
.browserSupportsCursorURIs()) {
625 UI
.updateSetting('cursor');
627 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
628 document
.getElementById('noVNC_setting_cursor').disabled
= true;
630 UI
.updateSetting('clip');
631 UI
.updateSetting('resize');
632 UI
.updateSetting('shared');
633 UI
.updateSetting('view_only');
634 UI
.updateSetting('path');
635 UI
.updateSetting('repeaterID');
636 UI
.updateSetting('stylesheet');
637 UI
.updateSetting('logging');
639 document
.getElementById('noVNC_settings')
640 .classList
.add("noVNC_open");
641 document
.getElementById('noVNC_settings_button')
642 .classList
.add("noVNC_selected");
645 closeSettingsPanel: function() {
646 document
.getElementById('noVNC_settings')
647 .classList
.remove("noVNC_open");
648 document
.getElementById('noVNC_settings_button')
649 .classList
.remove("noVNC_selected");
652 // Toggle the settings menu:
653 // On open, settings are refreshed from saved cookies.
654 // On close, settings are applied
655 toggleSettingsPanel: function() {
656 if (document
.getElementById('noVNC_settings')
657 .classList
.contains("noVNC_open")) {
659 UI
.closeSettingsPanel();
661 UI
.openSettingsPanel();
671 openXvpPanel: function() {
674 document
.getElementById('noVNC_xvp')
675 .classList
.add("noVNC_open");
676 document
.getElementById('noVNC_xvp_button')
677 .classList
.add("noVNC_selected");
680 closeXvpPanel: function() {
681 document
.getElementById('noVNC_xvp')
682 .classList
.remove("noVNC_open");
683 document
.getElementById('noVNC_xvp_button')
684 .classList
.remove("noVNC_selected");
687 toggleXvpPanel: function() {
688 if (document
.getElementById('noVNC_xvp')
689 .classList
.contains("noVNC_open")) {
696 // Disable/enable XVP button
697 updateXvpButton: function(ver
) {
699 document
.getElementById('noVNC_xvp_button')
700 .classList
.remove("noVNC_hidden");
702 document
.getElementById('noVNC_xvp_button')
703 .classList
.add("noVNC_hidden");
704 // Close XVP panel if open
715 openClipboardPanel: function() {
718 document
.getElementById('noVNC_clipboard')
719 .classList
.add("noVNC_open");
720 document
.getElementById('noVNC_clipboard_button')
721 .classList
.add("noVNC_selected");
724 closeClipboardPanel: function() {
725 document
.getElementById('noVNC_clipboard')
726 .classList
.remove("noVNC_open");
727 document
.getElementById('noVNC_clipboard_button')
728 .classList
.remove("noVNC_selected");
731 toggleClipboardPanel: function() {
732 if (document
.getElementById('noVNC_clipboard')
733 .classList
.contains("noVNC_open")) {
734 UI
.closeClipboardPanel();
736 UI
.openClipboardPanel();
740 clipboardReceive: function(rfb
, text
) {
741 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
742 document
.getElementById('noVNC_clipboard_text').value
= text
;
743 Util
.Debug("<< UI.clipboardReceive");
746 clipboardClear: function() {
747 document
.getElementById('noVNC_clipboard_text').value
= "";
748 UI
.rfb
.clipboardPasteFrom("");
751 clipboardSend: function() {
752 var text
= document
.getElementById('noVNC_clipboard_text').value
;
753 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
754 UI
.rfb
.clipboardPasteFrom(text
);
755 Util
.Debug("<< UI.clipboardSend");
764 openConnectPanel: function() {
767 document
.getElementById('noVNC_connect_controls')
768 .classList
.add("noVNC_open");
769 document
.getElementById('noVNC_connect_controls_button')
770 .classList
.add("noVNC_selected");
772 document
.getElementById('noVNC_setting_host').focus();
775 closeConnectPanel: function() {
776 document
.getElementById('noVNC_connect_controls')
777 .classList
.remove("noVNC_open");
778 document
.getElementById('noVNC_connect_controls_button')
779 .classList
.remove("noVNC_selected");
781 UI
.saveSetting('host');
782 UI
.saveSetting('port');
783 UI
.saveSetting('token');
784 //UI.saveSetting('password');
787 toggleConnectPanel: function() {
788 if (document
.getElementById('noVNC_connect_controls')
789 .classList
.contains("noVNC_open")) {
790 UI
.closeConnectPanel();
792 UI
.openConnectPanel();
796 connect: function() {
799 var host
= document
.getElementById('noVNC_setting_host').value
;
800 var port
= document
.getElementById('noVNC_setting_port').value
;
801 var password
= document
.getElementById('noVNC_setting_password').value
;
802 var token
= document
.getElementById('noVNC_setting_token').value
;
803 var path
= document
.getElementById('noVNC_setting_path').value
;
805 //if token is in path then ignore the new token variable
807 path
= WebUtil
.injectParamIfMissing(path
, "token", token
);
810 if ((!host
) || (!port
)) {
811 throw new Error("Must set host and port");
814 if (!UI
.initRFB()) return;
816 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
817 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
818 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
819 UI
.rfb
.set_shared(UI
.getSetting('shared'));
820 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
821 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
823 UI
.rfb
.connect(host
, port
, password
, path
);
826 setTimeout(UI
.setBarPosition
, 100);
829 disconnect: function() {
833 // Restore the callback used for initial resize
834 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
836 // Don't display the connection settings until we're actually disconnected
839 setPassword: function() {
840 UI
.rfb
.sendPassword(document
.getElementById('noVNC_password_input').value
);
841 document
.getElementById('noVNC_password_dlg')
842 .classList
.remove('noVNC_open');
852 toggleFullscreen: function() {
853 if (document
.fullscreenElement
|| // alternative standard method
854 document
.mozFullScreenElement
|| // currently working methods
855 document
.webkitFullscreenElement
||
856 document
.msFullscreenElement
) {
857 if (document
.exitFullscreen
) {
858 document
.exitFullscreen();
859 } else if (document
.mozCancelFullScreen
) {
860 document
.mozCancelFullScreen();
861 } else if (document
.webkitExitFullscreen
) {
862 document
.webkitExitFullscreen();
863 } else if (document
.msExitFullscreen
) {
864 document
.msExitFullscreen();
867 if (document
.documentElement
.requestFullscreen
) {
868 document
.documentElement
.requestFullscreen();
869 } else if (document
.documentElement
.mozRequestFullScreen
) {
870 document
.documentElement
.mozRequestFullScreen();
871 } else if (document
.documentElement
.webkitRequestFullscreen
) {
872 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
873 } else if (document
.body
.msRequestFullscreen
) {
874 document
.body
.msRequestFullscreen();
877 UI
.enableDisableViewClip();
878 UI
.updateFullscreenButton();
881 updateFullscreenButton: function() {
882 if (document
.fullscreenElement
|| // alternative standard method
883 document
.mozFullScreenElement
|| // currently working methods
884 document
.webkitFullscreenElement
||
885 document
.msFullscreenElement
) {
886 document
.getElementById('noVNC_fullscreen_button')
887 .classList
.add("noVNC_selected");
889 document
.getElementById('noVNC_fullscreen_button')
890 .classList
.remove("noVNC_selected");
900 // Apply remote resizing or local scaling
901 applyResizeMode: function() {
904 var screen
= UI
.screenSize();
906 if (screen
&& UI
.rfb_state
=== 'normal' && UI
.rfb
.get_display()) {
908 var display
= UI
.rfb
.get_display();
909 var resizeMode
= UI
.getSetting('resize');
911 if (resizeMode
=== 'remote') {
913 // Request changing the resolution of the remote display to
914 // the size of the local browser viewport.
916 // In order to not send multiple requests before the browser-resize
917 // is finished we wait 0.5 seconds before sending the request.
918 clearTimeout(UI
.resizeTimeout
);
919 UI
.resizeTimeout
= setTimeout(function(){
921 // Limit the viewport to the size of the browser window
922 display
.set_maxWidth(screen
.w
);
923 display
.set_maxHeight(screen
.h
);
925 Util
.Debug('Attempting requestDesktopSize(' +
926 screen
.w
+ ', ' + screen
.h
+ ')');
928 // Request a remote size covering the viewport
929 UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
);
932 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
933 var downscaleOnly
= resizeMode
=== 'downscale';
934 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
935 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
936 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
941 // The screen is always the same size as the available viewport
942 // in the browser window minus the height of the control bar
943 screenSize: function() {
944 var screen
= document
.getElementById('noVNC_screen');
946 // Hide the scrollbars until the size is calculated
947 screen
.style
.overflow
= "hidden";
949 var pos
= Util
.getPosition(screen
);
953 screen
.style
.overflow
= "visible";
955 if (isNaN(w
) || isNaN(h
)) {
962 // Normally we only apply the current resize mode after a window resize
963 // event. This means that when a new connection is opened, there is no
964 // resize mode active.
965 // We have to wait until the first FBU because this is where the client
966 // will find the supported encodings of the server. Some calls later in
967 // the chain is dependant on knowing the server-capabilities.
968 initialResize: function(rfb
, fbu
) {
969 UI
.applyResizeMode();
970 // After doing this once, we remove the callback.
971 UI
.rfb
.set_onFBUComplete(function() { });
980 // Set and configure viewport clipping
981 setViewClip: function(clip
) {
982 UI
.updateSetting('clip', clip
);
986 // Update parameters that depend on the clip setting
987 updateViewClip: function() {
993 var display
= UI
.rfb
.get_display();
994 var cur_clip
= display
.get_viewport();
995 var new_clip
= UI
.getSetting('clip');
997 if (cur_clip
!== new_clip
) {
998 display
.set_viewport(new_clip
);
1001 var size
= UI
.screenSize();
1003 if (new_clip
&& size
) {
1004 // When clipping is enabled, the screen is limited to
1005 // the size of the browser window.
1006 display
.set_maxWidth(size
.w
);
1007 display
.set_maxHeight(size
.h
);
1009 var screen
= document
.getElementById('noVNC_screen');
1010 var canvas
= document
.getElementById('noVNC_canvas');
1012 // Hide potential scrollbars that can skew the position
1013 screen
.style
.overflow
= "hidden";
1015 // The x position marks the left margin of the canvas,
1016 // remove the margin from both sides to keep it centered.
1017 var new_w
= size
.w
- (2 * Util
.getPosition(canvas
).x
);
1019 screen
.style
.overflow
= "visible";
1021 display
.viewportChangeSize(new_w
, size
.h
);
1023 // Disable max dimensions
1024 display
.set_maxWidth(0);
1025 display
.set_maxHeight(0);
1026 display
.viewportChangeSize();
1030 // Handle special cases where clipping is forced on/off or locked
1031 enableDisableViewClip: function() {
1032 var resizeSetting
= document
.getElementById('noVNC_setting_resize');
1033 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
1036 // Safari auto-hides the scrollbars which makes them
1037 // impossible to use in most cases
1038 UI
.setViewClip(true);
1039 document
.getElementById('noVNC_setting_clip').disabled
= true;
1040 } else if (resizeSetting
.value
=== 'downscale' || resizeSetting
.value
=== 'scale') {
1041 // Disable clipping if we are scaling
1042 UI
.setViewClip(false);
1043 document
.getElementById('noVNC_setting_clip').disabled
= true;
1044 } else if (document
.msFullscreenElement
) {
1045 // The browser is IE and we are in fullscreen mode.
1046 // - We need to force clipping while in fullscreen since
1047 // scrollbars doesn't work.
1048 UI
.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
1049 UI
.rememberedClipSetting
= UI
.getSetting('clip');
1050 UI
.setViewClip(true);
1051 document
.getElementById('noVNC_setting_clip').disabled
= true;
1052 } else if (document
.body
.msRequestFullscreen
&& UI
.rememberedClip
!== null) {
1053 // Restore view clip to what it was before fullscreen on IE
1054 UI
.setViewClip(UI
.rememberedClipSetting
);
1055 document
.getElementById('noVNC_setting_clip').disabled
= connected
|| UI
.isTouchDevice
;
1057 document
.getElementById('noVNC_setting_clip').disabled
= connected
|| UI
.isTouchDevice
;
1058 if (UI
.isTouchDevice
) {
1059 UI
.setViewClip(true);
1070 toggleViewDrag: function() {
1071 if (!UI
.rfb
) return;
1073 var drag
= UI
.rfb
.get_viewportDrag();
1074 UI
.setViewDrag(!drag
);
1077 // Set the view drag mode which moves the viewport on mouse drags
1078 setViewDrag: function(drag
) {
1079 if (!UI
.rfb
) return;
1081 UI
.rfb
.set_viewportDrag(drag
);
1083 UI
.updateViewDrag();
1086 updateViewDrag: function() {
1087 var clipping
= false;
1089 // Check if viewport drag is possible. It is only possible
1090 // if the remote display is clipping the client display.
1091 if (UI
.rfb_state
=== 'normal' &&
1092 UI
.rfb
.get_display().get_viewport() &&
1093 UI
.rfb
.get_display().clippingDisplay()) {
1097 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1099 if (UI
.rfb_state
!== 'normal') {
1100 // Always hide when not connected
1101 viewDragButton
.classList
.add("noVNC_hidden");
1104 UI
.rfb
.get_viewportDrag()) {
1105 // The size of the remote display is the same or smaller
1106 // than the client display. Make sure viewport drag isn't
1107 // active when it can't be used.
1108 UI
.rfb
.set_viewportDrag(false);
1111 if (UI
.rfb
.get_viewportDrag()) {
1112 viewDragButton
.classList
.add("noVNC_selected");
1114 viewDragButton
.classList
.remove("noVNC_selected");
1117 // Different behaviour for touch vs non-touch
1118 // The button is disabled instead of hidden on touch devices
1119 if (UI
.isTouchDevice
) {
1120 viewDragButton
.classList
.remove("noVNC_hidden");
1123 viewDragButton
.disabled
= false;
1125 viewDragButton
.disabled
= true;
1128 viewDragButton
.disabled
= false;
1131 viewDragButton
.classList
.remove("noVNC_hidden");
1133 viewDragButton
.classList
.add("noVNC_hidden");
1145 // On touch devices, show the OS keyboard
1146 showKeyboard: function() {
1147 var kbi
= document
.getElementById('noVNC_keyboardinput');
1148 var skb
= document
.getElementById('noVNC_keyboard_button');
1149 var l
= kbi
.value
.length
;
1150 if(UI
.keyboardVisible
=== false) {
1152 try { kbi
.setSelectionRange(l
, l
); } // Move the caret to the end
1153 catch (err
) {} // setSelectionRange is undefined in Google Chrome
1154 UI
.keyboardVisible
= true;
1155 skb
.classList
.add("noVNC_selected");
1156 } else if(UI
.keyboardVisible
=== true) {
1158 skb
.classList
.remove("noVNC_selected");
1159 UI
.keyboardVisible
= false;
1163 hideKeyboard: function() {
1164 document
.getElementById('noVNC_keyboard_button')
1165 .classList
.remove("noVNC_selected");
1166 //Weird bug in iOS if you change keyboardVisible
1167 //here it does not actually occur so next time
1168 //you click keyboard icon it doesnt work.
1169 UI
.hideKeyboardTimeout
= setTimeout(function() {
1170 UI
.keyboardVisible
= false;
1174 keepKeyboard: function() {
1175 clearTimeout(UI
.hideKeyboardTimeout
);
1176 if(UI
.keyboardVisible
=== true) {
1177 document
.getElementById('noVNC_keyboardinput').focus();
1178 document
.getElementById('noVNC_keyboard_button')
1179 .classList
.add("noVNC_selected");
1180 } else if(UI
.keyboardVisible
=== false) {
1181 document
.getElementById('noVNC_keyboardinput').blur();
1182 document
.getElementById('noVNC_keyboard_button')
1183 .classList
.remove("noVNC_selected");
1187 keyboardinputReset: function() {
1188 var kbi
= document
.getElementById('noVNC_keyboardinput');
1189 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1190 UI
.lastKeyboardinput
= kbi
.value
;
1193 // When normal keyboard events are left uncought, use the input events from
1194 // the keyboardinput element instead and generate the corresponding key events.
1195 // This code is required since some browsers on Android are inconsistent in
1196 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1197 keyInput: function(event
) {
1199 if (!UI
.rfb
) return;
1201 var newValue
= event
.target
.value
;
1203 if (!UI
.lastKeyboardinput
) {
1204 UI
.keyboardinputReset();
1206 var oldValue
= UI
.lastKeyboardinput
;
1210 // Try to check caret position since whitespace at the end
1211 // will not be considered by value.length in some browsers
1212 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1214 // selectionStart is undefined in Google Chrome
1215 newLen
= newValue
.length
;
1217 var oldLen
= oldValue
.length
;
1220 var inputs
= newLen
- oldLen
;
1222 backspaces
= -inputs
;
1227 // Compare the old string with the new to account for
1228 // text-corrections or other input that modify existing text
1230 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1231 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1232 inputs
= newLen
- i
;
1233 backspaces
= oldLen
- i
;
1238 // Send the key events
1239 for (i
= 0; i
< backspaces
; i
++) {
1240 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1242 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1243 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1246 // Control the text content length in the keyboardinput element
1247 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1248 UI
.keyboardinputReset();
1249 } else if (newLen
< 1) {
1250 // There always have to be some text in the keyboardinput
1251 // element with which backspace can interact.
1252 UI
.keyboardinputReset();
1253 // This sometimes causes the keyboard to disappear for a second
1254 // but it is required for the android keyboard to recognize that
1255 // text has been added to the field
1256 event
.target
.blur();
1257 // This has to be ran outside of the input handler in order to work
1258 setTimeout(UI
.keepKeyboard
, 0);
1260 UI
.lastKeyboardinput
= newValue
;
1264 openExtraKeys: function() {
1265 document
.getElementById('noVNC_modifiers')
1266 .classList
.add("noVNC_open");
1267 document
.getElementById('noVNC_toggle_extra_keys_button')
1268 .classList
.add("noVNC_selected");
1271 closeExtraKeys: function() {
1272 document
.getElementById('noVNC_modifiers')
1273 .classList
.remove("noVNC_open");
1274 document
.getElementById('noVNC_toggle_extra_keys_button')
1275 .classList
.remove("noVNC_selected");
1278 toggleExtraKeys: function() {
1280 if(document
.getElementById('noVNC_modifiers')
1281 .classList
.contains("noVNC_open")) {
1282 UI
.closeExtraKeys();
1288 sendEsc: function() {
1290 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1293 sendTab: function() {
1295 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1298 toggleCtrl: function() {
1300 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1301 if (btn
.classList
.contains("noVNC_selected")) {
1302 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1303 btn
.classList
.remove("noVNC_selected");
1305 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1306 btn
.classList
.add("noVNC_selected");
1310 toggleAlt: function() {
1312 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1313 if (btn
.classList
.contains("noVNC_selected")) {
1314 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1315 btn
.classList
.remove("noVNC_selected");
1317 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1318 btn
.classList
.add("noVNC_selected");
1322 sendCtrlAltDel: function() {
1323 UI
.rfb
.sendCtrlAltDel();
1332 hideMouseButton: function() {
1333 UI
.setMouseButton(-1);
1336 setMouseButton: function(num
) {
1338 UI
.rfb
.get_mouse().set_touchButton(num
);
1341 var blist
= [0, 1,2,4];
1342 for (var b
= 0; b
< blist
.length
; b
++) {
1343 var button
= document
.getElementById('noVNC_mouse_button' + blist
[b
]);
1344 if (blist
[b
] === num
) {
1345 button
.classList
.remove("noVNC_hidden");
1347 button
.classList
.add("noVNC_hidden");
1352 displayBlur: function() {
1353 if (!UI
.rfb
) return;
1355 UI
.rfb
.get_keyboard().set_focused(false);
1356 UI
.rfb
.get_mouse().set_focused(false);
1359 displayFocus: function() {
1360 if (!UI
.rfb
) return;
1362 UI
.rfb
.get_keyboard().set_focused(true);
1363 UI
.rfb
.get_mouse().set_focused(true);
1366 // Display the desktop name in the document title
1367 updateDocumentTitle: function(rfb
, name
) {
1368 document
.title
= name
+ " - noVNC";
1371 //Helper to add options to dropdown.
1372 addOption: function(selectbox
, text
, value
) {
1373 var optn
= document
.createElement("OPTION");
1376 selectbox
.options
.add(optn
);
1379 setBarPosition: function() {
1380 document
.getElementById('noVNC_control_bar').style
.top
= (window
.pageYOffset
) + 'px';
1381 document
.getElementById('noVNC_mobile_buttons').style
.left
= (window
.pageXOffset
) + 'px';
1383 var vncwidth
= document
.getElementById('noVNC_container').style
.offsetWidth
;
1384 document
.getElementById('noVNC_control_bar').style
.width
= vncwidth
+ 'px';
1393 /* [module] UI.load(); */
1396 /* [module] export default UI; */