]>
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 * Licensed under MPL 2.0 (see LICENSE.txt)
7 * See README.md for usage and integration instructions.
10 /* jslint white: false, browser: true */
11 /* global window, document.getElementById, Util, WebUtil, RFB, Display */
14 * import Util from "../core/util";
15 * import KeyTable from "../core/input/keysym";
16 * import RFB from "../core/rfb";
17 * import Display from "../core/display";
18 * import WebUtil from "./webutil";
26 /* [begin skip-as-module] */
27 // Load supporting scripts
29 {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
30 "input/xtscancodes.js", "input/util.js", "input/devices.js",
31 "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
33 window
.onscriptsload = function () { UI
.load(); };
34 /* [end skip-as-module] */
41 popupStatusTimeout
: null,
42 hideKeyboardTimeout
: null,
45 connSettingsOpen
: false,
47 keyboardVisible
: false,
48 extraKeysVisible
: false,
52 rememberedClipSetting
: null,
53 lastKeyboardinput
: null,
54 defaultKeyboardinputLen
: 100,
59 // Setup rfb object, load settings from browser storage, then call
60 // UI.init to setup the UI/menus
61 load: function(callback
) {
62 WebUtil
.initSettings(UI
.start
, callback
);
65 // Render default UI and initialize settings menu
66 start: function(callback
) {
68 // Setup global variables first
69 UI
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
70 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
71 navigator
.userAgent
.indexOf('Chrome') === -1);
75 // Show mouse selector buttons on touch screen devices
76 if (UI
.isTouchDevice
) {
77 // Show mobile buttons
78 document
.getElementById('noVNC_mobile_buttons').style
.display
= "inline";
80 // Remove the address bar
81 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
82 UI
.forceSetting('clip', true);
84 UI
.initSetting('clip', false);
87 // Setup and initialize event handlers
88 UI
.setupWindowEvents();
90 UI
.addControlbarHandlers();
91 UI
.addTouchSpecificHandlers();
93 UI
.addConnectionControlHandlers();
94 UI
.addClipboardHandlers();
95 UI
.addSettingsHandlers();
97 // Show description by default when hosted at for kanaka.github.com
98 if (location
.host
=== "kanaka.github.io") {
99 // Open the description dialog
100 document
.getElementById('noVNC_description').style
.display
= "block";
102 // Show the connect panel on first load unless autoconnecting
103 if (autoconnect
=== UI
.connSettingsOpen
) {
104 UI
.toggleConnectPanel();
111 UI
.updateVisualState();
113 document
.getElementById('noVNC_setting_host').focus();
115 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
116 if (autoconnect
=== 'true' || autoconnect
== '1') {
123 if (typeof callback
=== "function") {
128 initSettings: function() {
129 // Stylesheet selection dropdown
130 var sheet
= WebUtil
.selectStylesheet();
131 var sheets
= WebUtil
.getStylesheets();
133 for (i
= 0; i
< sheets
.length
; i
+= 1) {
134 UI
.addOption(document
.getElementById('noVNC_setting_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
137 // Logging selection dropdown
138 var llevels
= ['error', 'warn', 'info', 'debug'];
139 for (i
= 0; i
< llevels
.length
; i
+= 1) {
140 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
143 // Settings with immediate effects
144 UI
.initSetting('logging', 'warn');
145 WebUtil
.init_logging(UI
.getSetting('logging'));
147 UI
.initSetting('stylesheet', 'default');
148 WebUtil
.selectStylesheet(null);
149 // call twice to get around webkit bug
150 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
152 // if port == 80 (or 443) then it won't be present and should be
154 var port
= window
.location
.port
;
156 if (window
.location
.protocol
.substring(0,5) == 'https') {
159 else if (window
.location
.protocol
.substring(0,4) == 'http') {
164 /* Populate the controls if defaults are provided in the URL */
165 UI
.initSetting('host', window
.location
.hostname
);
166 UI
.initSetting('port', port
);
167 UI
.initSetting('password', '');
168 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
169 UI
.initSetting('true_color', true);
170 UI
.initSetting('cursor', !UI
.isTouchDevice
);
171 UI
.initSetting('resize', 'off');
172 UI
.initSetting('shared', true);
173 UI
.initSetting('view_only', false);
174 UI
.initSetting('path', 'websockify');
175 UI
.initSetting('repeaterID', '');
176 UI
.initSetting('token', '');
179 setupWindowEvents: function() {
180 window
.addEventListener( 'resize', function () {
181 UI
.applyResizeMode();
188 setupFullscreen: function() {
189 // Only show the button if fullscreen is properly supported
190 // * Safari doesn't support alphanumerical input while in fullscreen
192 (document
.documentElement
.requestFullscreen
||
193 document
.documentElement
.mozRequestFullScreen
||
194 document
.documentElement
.webkitRequestFullscreen
||
195 document
.body
.msRequestFullscreen
)) {
196 document
.getElementById('noVNC_fullscreen_button').style
.display
= "inline";
197 UI
.addFullscreenHandlers();
201 addControlbarHandlers: function() {
202 document
.getElementById("noVNC_view_drag_button")
203 .addEventListener('click', UI
.toggleViewDrag
);
204 document
.getElementById("noVNC_sendCtrlAltDel_button")
205 .addEventListener('click', UI
.sendCtrlAltDel
);
206 document
.getElementById("noVNC_status")
207 .addEventListener('click', UI
.popupStatus
);
208 document
.getElementById("noVNC_popup_status")
209 .addEventListener('click', UI
.closePopup
);
210 document
.getElementById("noVNC_description_button")
211 .addEventListener('click', UI
.toggleConnectPanel
);
214 addTouchSpecificHandlers: function() {
215 document
.getElementById("noVNC_mouse_button0")
216 .addEventListener('click', function () { UI
.setMouseButton(1); });
217 document
.getElementById("noVNC_mouse_button1")
218 .addEventListener('click', function () { UI
.setMouseButton(2); });
219 document
.getElementById("noVNC_mouse_button2")
220 .addEventListener('click', function () { UI
.setMouseButton(4); });
221 document
.getElementById("noVNC_mouse_button4")
222 .addEventListener('click', function () { UI
.setMouseButton(0); });
223 document
.getElementById("noVNC_keyboard_button")
224 .addEventListener('click', UI
.showKeyboard
);
226 document
.getElementById("noVNC_keyboardinput")
227 .addEventListener('input', UI
.keyInput
);
228 document
.getElementById("noVNC_keyboardinput")
229 .addEventListener('blur', UI
.hideKeyboard
);
230 document
.getElementById("noVNC_keyboardinput")
231 .addEventListener('submit', function () { return false; });
233 window
.addEventListener('load', UI
.keyboardinputReset
);
235 document
.getElementById("noVNC_toggleExtraKeys_button")
236 .addEventListener('click', UI
.toggleExtraKeys
);
237 document
.getElementById("noVNC_toggleCtrl_button")
238 .addEventListener('click', UI
.toggleCtrl
);
239 document
.getElementById("noVNC_toggleAlt_button")
240 .addEventListener('click', UI
.toggleAlt
);
241 document
.getElementById("noVNC_sendTab_button")
242 .addEventListener('click', UI
.sendTab
);
243 document
.getElementById("noVNC_sendEsc_button")
244 .addEventListener('click', UI
.sendEsc
);
247 addXvpHandlers: function() {
248 document
.getElementById("noVNC_xvpShutdown_button")
249 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
250 document
.getElementById("noVNC_xvpReboot_button")
251 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
252 document
.getElementById("noVNC_xvpReset_button")
253 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
254 document
.getElementById("noVNC_toggleXvp_button")
255 .addEventListener('click', UI
.toggleXvpPanel
);
258 addConnectionControlHandlers: function() {
259 document
.getElementById("noVNC_connectPanel_button")
260 .addEventListener('click', UI
.toggleConnectPanel
);
261 document
.getElementById("noVNC_disconnect_button")
262 .addEventListener('click', UI
.disconnect
);
263 document
.getElementById("noVNC_connect_button")
264 .addEventListener('click', UI
.connect
);
267 addClipboardHandlers: function() {
268 document
.getElementById("noVNC_clipboard_button")
269 .addEventListener('click', UI
.toggleClipboardPanel
);
270 document
.getElementById("noVNC_clipboard_text")
271 .addEventListener('focus', UI
.displayBlur
);
272 document
.getElementById("noVNC_clipboard_text")
273 .addEventListener('blur', UI
.displayFocus
);
274 document
.getElementById("noVNC_clipboard_text")
275 .addEventListener('change', UI
.clipboardSend
);
276 document
.getElementById("noVNC_clipboard_clear_button")
277 .addEventListener('click', UI
.clipboardClear
);
280 addSettingsHandlers: function() {
281 document
.getElementById("noVNC_settings_button")
282 .addEventListener('click', UI
.toggleSettingsPanel
);
283 document
.getElementById("noVNC_settings_apply")
284 .addEventListener('click', UI
.settingsApply
);
286 document
.getElementById("noVNC_setting_resize")
287 .addEventListener('change', UI
.enableDisableViewClip
);
290 addFullscreenHandlers: function() {
291 document
.getElementById("noVNC_fullscreen_button")
292 .addEventListener('click', UI
.toggleFullscreen
);
294 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
295 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
296 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
297 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
300 initRFB: function() {
302 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
303 'onUpdateState': UI
.updateState
,
304 'onXvpInit': UI
.updateXvpButton
,
305 'onClipboard': UI
.clipboardReceive
,
306 'onFBUComplete': UI
.initialResize
,
307 'onFBResize': UI
.updateViewDrag
,
308 'onDesktopName': UI
.updateDocumentTitle
});
311 UI
.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc
);
322 updateState: function(rfb
, state
, oldstate
, msg
) {
323 UI
.rfb_state
= state
;
328 klass
= "noVNC_status_error";
331 klass
= "noVNC_status_normal";
334 document
.getElementById('noVNC_logo').style
.display
= "block";
335 document
.getElementById('noVNC_screen').style
.display
= "none";
338 klass
= "noVNC_status_normal";
341 UI
.toggleConnectPanel();
343 document
.getElementById('noVNC_connect_button').value
= "Send Password";
344 document
.getElementById('noVNC_connect_button').onclick
= UI
.setPassword
;
345 document
.getElementById('noVNC_setting_password').focus();
347 klass
= "noVNC_status_warn";
350 klass
= "noVNC_status_warn";
354 if (typeof(msg
) !== 'undefined') {
355 document
.getElementById('noVNC_control_bar').setAttribute("class", klass
);
356 document
.getElementById('noVNC_status').innerHTML
= msg
;
359 UI
.updateVisualState();
362 // Disable/enable controls depending on connection state
363 updateVisualState: function() {
364 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
366 //Util.Debug(">> updateVisualState");
367 document
.getElementById('noVNC_setting_encrypt').disabled
= connected
;
368 document
.getElementById('noVNC_setting_true_color').disabled
= connected
;
369 if (Util
.browserSupportsCursorURIs()) {
370 document
.getElementById('noVNC_setting_cursor').disabled
= connected
;
372 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
373 document
.getElementById('noVNC_setting_cursor').disabled
= true;
376 UI
.enableDisableViewClip();
377 document
.getElementById('noVNC_setting_resize').disabled
= connected
;
378 document
.getElementById('noVNC_setting_shared').disabled
= connected
;
379 document
.getElementById('noVNC_setting_view_only').disabled
= connected
;
380 document
.getElementById('noVNC_setting_path').disabled
= connected
;
381 document
.getElementById('noVNC_setting_repeaterID').disabled
= connected
;
385 UI
.setMouseButton(1);
386 document
.getElementById('noVNC_clipboard_button').style
.display
= "inline";
387 document
.getElementById('noVNC_keyboard_button').style
.display
= "inline";
388 document
.getElementById('noVNC_extra_keys').style
.display
= "";
389 document
.getElementById('noVNC_sendCtrlAltDel_button').style
.display
= "inline";
392 document
.getElementById('noVNC_clipboard_button').style
.display
= "none";
393 document
.getElementById('noVNC_keyboard_button').style
.display
= "none";
394 document
.getElementById('noVNC_extra_keys').style
.display
= "none";
395 document
.getElementById('noVNC_sendCtrlAltDel_button').style
.display
= "none";
396 UI
.updateXvpButton(0);
399 // State change disables viewport dragging.
400 // It is enabled (toggled) by direct click on the button
401 UI
.updateViewDrag(false);
403 switch (UI
.rfb_state
) {
407 document
.getElementById('noVNC_connectPanel_button').style
.display
= "";
408 document
.getElementById('noVNC_disconnect_button').style
.display
= "none";
409 UI
.connSettingsOpen
= false;
410 UI
.toggleConnectPanel();
413 document
.getElementById('noVNC_connectPanel_button').style
.display
= "";
414 document
.getElementById('noVNC_disconnect_button').style
.display
= "none";
417 document
.getElementById('noVNC_connectPanel_button').style
.display
= "none";
418 document
.getElementById('noVNC_disconnect_button').style
.display
= "";
422 //Util.Debug("<< updateVisualState");
425 popupStatus: function(text
) {
426 var psp
= document
.getElementById('noVNC_popup_status');
428 clearTimeout(UI
.popupStatusTimeout
);
430 if (typeof text
=== 'string') {
431 psp
.innerHTML
= text
;
433 psp
.innerHTML
= document
.getElementById('noVNC_status').innerHTML
;
435 psp
.style
.display
= "block";
436 psp
.style
.left
= window
.innerWidth
/2 -
437 parseInt(window
.getComputedStyle(psp
).width
)/2 -30 + "px";
439 // Show the popup for a maximum of 1.5 seconds
440 UI
.popupStatusTimeout
= setTimeout(UI
.closePopup
, 1500);
443 closePopup: function() {
444 clearTimeout(UI
.popupStatusTimeout
);
445 document
.getElementById('noVNC_popup_status').style
.display
= "none";
454 // Initial page load read/initialization of settings
455 initSetting: function(name
, defVal
) {
456 // Check Query string followed by cookie
457 var val
= WebUtil
.getConfigVar(name
);
459 val
= WebUtil
.readSetting(name
, defVal
);
461 UI
.updateSetting(name
, val
);
465 // Update cookie and form control setting. If value is not set, then
466 // updates from control to current cookie setting.
467 updateSetting: function(name
, value
) {
469 // Save the cookie for this session
470 if (typeof value
!== 'undefined') {
471 WebUtil
.writeSetting(name
, value
);
474 // Update the settings control
475 value
= UI
.getSetting(name
);
477 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
478 if (ctrl
.type
=== 'checkbox') {
479 ctrl
.checked
= value
;
481 } else if (typeof ctrl
.options
!== 'undefined') {
482 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
483 if (ctrl
.options
[i
].value
=== value
) {
484 ctrl
.selectedIndex
= i
;
489 /*Weird IE9 error leads to 'null' appearring
490 in textboxes instead of ''.*/
491 if (value
=== null) {
498 // Save control setting to cookie
499 saveSetting: function(name
) {
500 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
501 if (ctrl
.type
=== 'checkbox') {
503 } else if (typeof ctrl
.options
!== 'undefined') {
504 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
508 WebUtil
.writeSetting(name
, val
);
509 //Util.Debug("Setting saved '" + name + "=" + val + "'");
513 // Force a setting to be a certain value
514 forceSetting: function(name
, val
) {
515 UI
.updateSetting(name
, val
);
519 // Read form control compatible setting from cookie
520 getSetting: function(name
) {
521 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
522 var val
= WebUtil
.readSetting(name
);
523 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
524 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
533 // Save/apply settings when 'Apply' button is pressed
534 settingsApply: function() {
535 //Util.Debug(">> settingsApply");
536 UI
.saveSetting('encrypt');
537 UI
.saveSetting('true_color');
538 if (Util
.browserSupportsCursorURIs()) {
539 UI
.saveSetting('cursor');
542 UI
.saveSetting('resize');
544 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
545 UI
.forceSetting('clip', false);
548 UI
.saveSetting('clip');
549 UI
.saveSetting('shared');
550 UI
.saveSetting('view_only');
551 UI
.saveSetting('path');
552 UI
.saveSetting('repeaterID');
553 UI
.saveSetting('stylesheet');
554 UI
.saveSetting('logging');
556 // Settings with immediate (non-connected related) effect
557 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
558 WebUtil
.init_logging(UI
.getSetting('logging'));
561 //Util.Debug("<< settingsApply");
565 openSettingsMenu: function() {
566 // Close the description panel
567 document
.getElementById('noVNC_description').style
.display
= "none";
568 // Close clipboard panel if open
569 if (UI
.clipboardOpen
=== true) {
570 UI
.toggleClipboardPanel();
572 // Close connection settings if open
573 if (UI
.connSettingsOpen
=== true) {
574 UI
.toggleConnectPanel();
576 // Close XVP panel if open
577 if (UI
.xvpOpen
=== true) {
580 document
.getElementById('noVNC_settings').style
.display
= "block";
581 document
.getElementById('noVNC_settings_button').className
= "noVNC_status_button_selected";
582 UI
.settingsOpen
= true;
585 // Close menu (without applying settings)
586 closeSettingsMenu: function() {
587 document
.getElementById('noVNC_settings').style
.display
= "none";
588 document
.getElementById('noVNC_settings_button').className
= "noVNC_status_button";
589 UI
.settingsOpen
= false;
592 // Toggle the settings menu:
593 // On open, settings are refreshed from saved cookies.
594 // On close, settings are applied
595 toggleSettingsPanel: function() {
596 // Close the description panel
597 document
.getElementById('noVNC_description').style
.display
= "none";
598 if (UI
.settingsOpen
) {
600 UI
.closeSettingsMenu();
602 UI
.updateSetting('encrypt');
603 UI
.updateSetting('true_color');
604 if (Util
.browserSupportsCursorURIs()) {
605 UI
.updateSetting('cursor');
607 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
608 document
.getElementById('noVNC_setting_cursor').disabled
= true;
610 UI
.updateSetting('clip');
611 UI
.updateSetting('resize');
612 UI
.updateSetting('shared');
613 UI
.updateSetting('view_only');
614 UI
.updateSetting('path');
615 UI
.updateSetting('repeaterID');
616 UI
.updateSetting('stylesheet');
617 UI
.updateSetting('logging');
619 UI
.openSettingsMenu();
629 // Show the XVP panel
630 toggleXvpPanel: function() {
631 // Close the description panel
632 document
.getElementById('noVNC_description').style
.display
= "none";
633 // Close settings if open
634 if (UI
.settingsOpen
=== true) {
636 UI
.closeSettingsMenu();
638 // Close connection settings if open
639 if (UI
.connSettingsOpen
=== true) {
640 UI
.toggleConnectPanel();
642 // Close clipboard panel if open
643 if (UI
.clipboardOpen
=== true) {
644 UI
.toggleClipboardPanel();
647 if (UI
.xvpOpen
=== true) {
648 document
.getElementById('noVNC_xvp').style
.display
= "none";
649 document
.getElementById('noVNC_toggleXvp_button').className
= "noVNC_status_button";
652 document
.getElementById('noVNC_xvp').style
.display
= "block";
653 document
.getElementById('noVNC_toggleXvp_button').className
= "noVNC_status_button_selected";
658 // Disable/enable XVP button
659 updateXvpButton: function(ver
) {
661 document
.getElementById('noVNC_toggleXvp_button').style
.display
= 'inline';
663 document
.getElementById('noVNC_toggleXvp_button').style
.display
= 'none';
664 // Close XVP panel if open
665 if (UI
.xvpOpen
=== true) {
677 // Show the clipboard panel
678 toggleClipboardPanel: function() {
679 // Close the description panel
680 document
.getElementById('noVNC_description').style
.display
= "none";
681 // Close settings if open
682 if (UI
.settingsOpen
=== true) {
684 UI
.closeSettingsMenu();
686 // Close connection settings if open
687 if (UI
.connSettingsOpen
=== true) {
688 UI
.toggleConnectPanel();
690 // Close XVP panel if open
691 if (UI
.xvpOpen
=== true) {
694 // Toggle Clipboard Panel
695 if (UI
.clipboardOpen
=== true) {
696 document
.getElementById('noVNC_clipboard').style
.display
= "none";
697 document
.getElementById('noVNC_clipboard_button').className
= "noVNC_status_button";
698 UI
.clipboardOpen
= false;
700 document
.getElementById('noVNC_clipboard').style
.display
= "block";
701 document
.getElementById('noVNC_clipboard_button').className
= "noVNC_status_button_selected";
702 UI
.clipboardOpen
= true;
706 clipboardReceive: function(rfb
, text
) {
707 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
708 document
.getElementById('noVNC_clipboard_text').value
= text
;
709 Util
.Debug("<< UI.clipboardReceive");
712 clipboardClear: function() {
713 document
.getElementById('noVNC_clipboard_text').value
= "";
714 UI
.rfb
.clipboardPasteFrom("");
717 clipboardSend: function() {
718 var text
= document
.getElementById('noVNC_clipboard_text').value
;
719 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
720 UI
.rfb
.clipboardPasteFrom(text
);
721 Util
.Debug("<< UI.clipboardSend");
730 // Show the connection settings panel/menu
731 toggleConnectPanel: function() {
732 // Close the description panel
733 document
.getElementById('noVNC_description').style
.display
= "none";
734 // Close connection settings if open
735 if (UI
.settingsOpen
=== true) {
737 UI
.closeSettingsMenu();
738 document
.getElementById('noVNC_connectPanel_button').className
= "noVNC_status_button";
740 // Close clipboard panel if open
741 if (UI
.clipboardOpen
=== true) {
742 UI
.toggleClipboardPanel();
744 // Close XVP panel if open
745 if (UI
.xvpOpen
=== true) {
749 // Toggle Connection Panel
750 if (UI
.connSettingsOpen
=== true) {
751 document
.getElementById('noVNC_controls').style
.display
= "none";
752 document
.getElementById('noVNC_connectPanel_button').className
= "noVNC_status_button";
753 UI
.connSettingsOpen
= false;
754 UI
.saveSetting('host');
755 UI
.saveSetting('port');
756 UI
.saveSetting('token');
757 //UI.saveSetting('password');
759 document
.getElementById('noVNC_controls').style
.display
= "block";
760 document
.getElementById('noVNC_connectPanel_button').className
= "noVNC_status_button_selected";
761 UI
.connSettingsOpen
= true;
762 document
.getElementById('noVNC_setting_host').focus();
766 connect: function() {
767 UI
.closeSettingsMenu();
768 UI
.toggleConnectPanel();
770 var host
= document
.getElementById('noVNC_setting_host').value
;
771 var port
= document
.getElementById('noVNC_setting_port').value
;
772 var password
= document
.getElementById('noVNC_setting_password').value
;
773 var token
= document
.getElementById('noVNC_setting_token').value
;
774 var path
= document
.getElementById('noVNC_setting_path').value
;
776 //if token is in path then ignore the new token variable
778 path
= WebUtil
.injectParamIfMissing(path
, "token", token
);
781 if ((!host
) || (!port
)) {
782 throw new Error("Must set host and port");
785 if (!UI
.initRFB()) return;
787 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
788 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
789 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
790 UI
.rfb
.set_shared(UI
.getSetting('shared'));
791 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
792 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
794 UI
.rfb
.connect(host
, port
, password
, path
);
797 setTimeout(UI
.setBarPosition
, 100);
798 document
.getElementById('noVNC_logo').style
.display
= "none";
799 document
.getElementById('noVNC_screen').style
.display
= "inline";
802 disconnect: function() {
803 UI
.closeSettingsMenu();
806 // Restore the callback used for initial resize
807 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
809 document
.getElementById('noVNC_logo').style
.display
= "block";
810 document
.getElementById('noVNC_screen').style
.display
= "none";
812 // Don't display the connection settings until we're actually disconnected
815 setPassword: function() {
816 UI
.rfb
.sendPassword(document
.getElementById('noVNC_setting_password').value
);
817 //Reset connect button.
818 document
.getElementById('noVNC_connect_button').value
= "Connect";
819 document
.getElementById('noVNC_connect_button').onclick
= UI
.connect
;
820 //Hide connection panel.
821 UI
.toggleConnectPanel();
831 toggleFullscreen: function() {
832 if (document
.fullscreenElement
|| // alternative standard method
833 document
.mozFullScreenElement
|| // currently working methods
834 document
.webkitFullscreenElement
||
835 document
.msFullscreenElement
) {
836 if (document
.exitFullscreen
) {
837 document
.exitFullscreen();
838 } else if (document
.mozCancelFullScreen
) {
839 document
.mozCancelFullScreen();
840 } else if (document
.webkitExitFullscreen
) {
841 document
.webkitExitFullscreen();
842 } else if (document
.msExitFullscreen
) {
843 document
.msExitFullscreen();
846 if (document
.documentElement
.requestFullscreen
) {
847 document
.documentElement
.requestFullscreen();
848 } else if (document
.documentElement
.mozRequestFullScreen
) {
849 document
.documentElement
.mozRequestFullScreen();
850 } else if (document
.documentElement
.webkitRequestFullscreen
) {
851 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
852 } else if (document
.body
.msRequestFullscreen
) {
853 document
.body
.msRequestFullscreen();
856 UI
.enableDisableViewClip();
857 UI
.updateFullscreenButton();
860 updateFullscreenButton: function() {
861 if (document
.fullscreenElement
|| // alternative standard method
862 document
.mozFullScreenElement
|| // currently working methods
863 document
.webkitFullscreenElement
||
864 document
.msFullscreenElement
) {
865 document
.getElementById('noVNC_fullscreen_button').className
= "noVNC_status_button_selected";
867 document
.getElementById('noVNC_fullscreen_button').className
= "noVNC_status_button";
877 // Apply remote resizing or local scaling
878 applyResizeMode: function() {
881 var screen
= UI
.screenSize();
883 if (screen
&& UI
.rfb_state
=== 'normal' && UI
.rfb
.get_display()) {
885 var display
= UI
.rfb
.get_display();
886 var resizeMode
= UI
.getSetting('resize');
888 if (resizeMode
=== 'remote') {
890 // Request changing the resolution of the remote display to
891 // the size of the local browser viewport.
893 // In order to not send multiple requests before the browser-resize
894 // is finished we wait 0.5 seconds before sending the request.
895 clearTimeout(UI
.resizeTimeout
);
896 UI
.resizeTimeout
= setTimeout(function(){
898 // Limit the viewport to the size of the browser window
899 display
.set_maxWidth(screen
.w
);
900 display
.set_maxHeight(screen
.h
);
902 Util
.Debug('Attempting requestDesktopSize(' +
903 screen
.w
+ ', ' + screen
.h
+ ')');
905 // Request a remote size covering the viewport
906 UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
);
909 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
910 var downscaleOnly
= resizeMode
=== 'downscale';
911 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
912 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
913 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
918 // The screen is always the same size as the available viewport
919 // in the browser window minus the height of the control bar
920 screenSize: function() {
921 var screen
= document
.getElementById('noVNC_screen');
923 // Hide the scrollbars until the size is calculated
924 screen
.style
.overflow
= "hidden";
926 var pos
= Util
.getPosition(screen
);
930 screen
.style
.overflow
= "visible";
932 if (isNaN(w
) || isNaN(h
)) {
939 // Normally we only apply the current resize mode after a window resize
940 // event. This means that when a new connection is opened, there is no
941 // resize mode active.
942 // We have to wait until the first FBU because this is where the client
943 // will find the supported encodings of the server. Some calls later in
944 // the chain is dependant on knowing the server-capabilities.
945 initialResize: function(rfb
, fbu
) {
946 UI
.applyResizeMode();
947 // After doing this once, we remove the callback.
948 UI
.rfb
.set_onFBUComplete(function() { });
957 // Set and configure viewport clipping
958 setViewClip: function(clip
) {
961 display
= UI
.rfb
.get_display();
963 UI
.forceSetting('clip', clip
);
967 var cur_clip
= display
.get_viewport();
969 if (typeof(clip
) !== 'boolean') {
970 // Use current setting
971 clip
= UI
.getSetting('clip');
974 if (clip
&& !cur_clip
) {
976 UI
.updateSetting('clip', true);
977 } else if (!clip
&& cur_clip
) {
979 UI
.updateSetting('clip', false);
980 display
.set_viewport(false);
981 // Disable max dimensions
982 display
.set_maxWidth(0);
983 display
.set_maxHeight(0);
984 display
.viewportChangeSize();
986 if (UI
.getSetting('clip')) {
987 // If clipping, update clipping settings
988 display
.set_viewport(true);
990 var size
= UI
.screenSize();
992 display
.set_maxWidth(size
.w
);
993 display
.set_maxHeight(size
.h
);
995 // Hide potential scrollbars that can skew the position
996 document
.getElementById('noVNC_screen').style
.overflow
= "hidden";
998 // The x position marks the left margin of the canvas,
999 // remove the margin from both sides to keep it centered
1000 var new_w
= size
.w
- (2 * Util
.getPosition(document
.getElementById('noVNC_canvas')).x
);
1002 document
.getElementById('noVNC_screen').style
.overflow
= "visible";
1004 display
.viewportChangeSize(new_w
, size
.h
);
1009 // Handle special cases where clipping is forced on/off or locked
1010 enableDisableViewClip: function() {
1011 var resizeSetting
= document
.getElementById('noVNC_setting_resize');
1012 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
1015 // Safari auto-hides the scrollbars which makes them
1016 // impossible to use in most cases
1017 UI
.setViewClip(true);
1018 document
.getElementById('noVNC_setting_clip').disabled
= true;
1019 } else if (resizeSetting
.value
=== 'downscale' || resizeSetting
.value
=== 'scale') {
1020 // Disable clipping if we are scaling
1021 UI
.setViewClip(false);
1022 document
.getElementById('noVNC_setting_clip').disabled
= true;
1023 } else if (document
.msFullscreenElement
) {
1024 // The browser is IE and we are in fullscreen mode.
1025 // - We need to force clipping while in fullscreen since
1026 // scrollbars doesn't work.
1027 UI
.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
1028 UI
.rememberedClipSetting
= UI
.getSetting('clip');
1029 UI
.setViewClip(true);
1030 document
.getElementById('noVNC_setting_clip').disabled
= true;
1031 } else if (document
.body
.msRequestFullscreen
&& UI
.rememberedClip
!== null) {
1032 // Restore view clip to what it was before fullscreen on IE
1033 UI
.setViewClip(UI
.rememberedClipSetting
);
1034 document
.getElementById('noVNC_setting_clip').disabled
= connected
|| UI
.isTouchDevice
;
1036 document
.getElementById('noVNC_setting_clip').disabled
= connected
|| UI
.isTouchDevice
;
1037 if (UI
.isTouchDevice
) {
1038 UI
.setViewClip(true);
1049 // Update the viewport drag state
1050 updateViewDrag: function(drag
) {
1051 if (!UI
.rfb
) return;
1053 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1055 // Check if viewport drag is possible. It is only possible
1056 // if the remote display is clipping the client display.
1057 if (UI
.rfb_state
=== 'normal' &&
1058 UI
.rfb
.get_display().get_viewport() &&
1059 UI
.rfb
.get_display().clippingDisplay()) {
1061 viewDragButton
.style
.display
= "inline";
1062 viewDragButton
.disabled
= false;
1065 // The size of the remote display is the same or smaller
1066 // than the client display. Make sure viewport drag isn't
1067 // active when it can't be used.
1068 if (UI
.rfb
.get_viewportDrag
) {
1069 viewDragButton
.className
= "noVNC_status_button";
1070 UI
.rfb
.set_viewportDrag(false);
1073 // The button is disabled instead of hidden on touch devices
1074 if (UI
.rfb_state
=== 'normal' && UI
.isTouchDevice
) {
1075 viewDragButton
.style
.display
= "inline";
1076 viewDragButton
.disabled
= true;
1078 viewDragButton
.style
.display
= "none";
1083 if (typeof(drag
) !== "undefined" &&
1084 typeof(drag
) !== "object") {
1086 viewDragButton
.className
= "noVNC_status_button_selected";
1087 UI
.rfb
.set_viewportDrag(true);
1089 viewDragButton
.className
= "noVNC_status_button";
1090 UI
.rfb
.set_viewportDrag(false);
1095 toggleViewDrag: function() {
1096 if (!UI
.rfb
) return;
1098 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1099 if (UI
.rfb
.get_viewportDrag()) {
1100 viewDragButton
.className
= "noVNC_status_button";
1101 UI
.rfb
.set_viewportDrag(false);
1103 viewDragButton
.className
= "noVNC_status_button_selected";
1104 UI
.rfb
.set_viewportDrag(true);
1114 // On touch devices, show the OS keyboard
1115 showKeyboard: function() {
1116 var kbi
= document
.getElementById('noVNC_keyboardinput');
1117 var skb
= document
.getElementById('noVNC_keyboard_button');
1118 var l
= kbi
.value
.length
;
1119 if(UI
.keyboardVisible
=== false) {
1121 try { kbi
.setSelectionRange(l
, l
); } // Move the caret to the end
1122 catch (err
) {} // setSelectionRange is undefined in Google Chrome
1123 UI
.keyboardVisible
= true;
1124 skb
.className
= "noVNC_status_button_selected";
1125 } else if(UI
.keyboardVisible
=== true) {
1127 skb
.className
= "noVNC_status_button";
1128 UI
.keyboardVisible
= false;
1132 hideKeyboard: function() {
1133 document
.getElementById('noVNC_keyboard_button').className
= "noVNC_status_button";
1134 //Weird bug in iOS if you change keyboardVisible
1135 //here it does not actually occur so next time
1136 //you click keyboard icon it doesnt work.
1137 UI
.hideKeyboardTimeout
= setTimeout(function() {
1138 UI
.keyboardVisible
= false;
1142 keepKeyboard: function() {
1143 clearTimeout(UI
.hideKeyboardTimeout
);
1144 if(UI
.keyboardVisible
=== true) {
1145 document
.getElementById('noVNC_keyboardinput').focus();
1146 document
.getElementById('noVNC_keyboard_button').className
= "noVNC_status_button_selected";
1147 } else if(UI
.keyboardVisible
=== false) {
1148 document
.getElementById('noVNC_keyboardinput').blur();
1149 document
.getElementById('noVNC_keyboard_button').className
= "noVNC_status_button";
1153 keyboardinputReset: function() {
1154 var kbi
= document
.getElementById('noVNC_keyboardinput');
1155 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1156 UI
.lastKeyboardinput
= kbi
.value
;
1159 // When normal keyboard events are left uncought, use the input events from
1160 // the keyboardinput element instead and generate the corresponding key events.
1161 // This code is required since some browsers on Android are inconsistent in
1162 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1163 keyInput: function(event
) {
1165 if (!UI
.rfb
) return;
1167 var newValue
= event
.target
.value
;
1169 if (!UI
.lastKeyboardinput
) {
1170 UI
.keyboardinputReset();
1172 var oldValue
= UI
.lastKeyboardinput
;
1176 // Try to check caret position since whitespace at the end
1177 // will not be considered by value.length in some browsers
1178 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1180 // selectionStart is undefined in Google Chrome
1181 newLen
= newValue
.length
;
1183 var oldLen
= oldValue
.length
;
1186 var inputs
= newLen
- oldLen
;
1188 backspaces
= -inputs
;
1193 // Compare the old string with the new to account for
1194 // text-corrections or other input that modify existing text
1196 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1197 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1198 inputs
= newLen
- i
;
1199 backspaces
= oldLen
- i
;
1204 // Send the key events
1205 for (i
= 0; i
< backspaces
; i
++) {
1206 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1208 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1209 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1212 // Control the text content length in the keyboardinput element
1213 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1214 UI
.keyboardinputReset();
1215 } else if (newLen
< 1) {
1216 // There always have to be some text in the keyboardinput
1217 // element with which backspace can interact.
1218 UI
.keyboardinputReset();
1219 // This sometimes causes the keyboard to disappear for a second
1220 // but it is required for the android keyboard to recognize that
1221 // text has been added to the field
1222 event
.target
.blur();
1223 // This has to be ran outside of the input handler in order to work
1224 setTimeout(UI
.keepKeyboard
, 0);
1226 UI
.lastKeyboardinput
= newValue
;
1230 toggleExtraKeys: function() {
1232 if(UI
.extraKeysVisible
=== false) {
1233 document
.getElementById('noVNC_toggleCtrl_button').style
.display
= "inline";
1234 document
.getElementById('noVNC_toggleAlt_button').style
.display
= "inline";
1235 document
.getElementById('noVNC_sendTab_button').style
.display
= "inline";
1236 document
.getElementById('noVNC_sendEsc_button').style
.display
= "inline";
1237 document
.getElementById('noVNC_toggleExtraKeys_button').className
= "noVNC_status_button_selected";
1238 UI
.extraKeysVisible
= true;
1239 } else if(UI
.extraKeysVisible
=== true) {
1240 document
.getElementById('noVNC_toggleCtrl_button').style
.display
= "";
1241 document
.getElementById('noVNC_toggleAlt_button').style
.display
= "";
1242 document
.getElementById('noVNC_sendTab_button').style
.display
= "";
1243 document
.getElementById('noVNC_sendEsc_button').style
.display
= "";
1244 document
.getElementById('noVNC_toggleExtraKeys_button').className
= "noVNC_status_button";
1245 UI
.extraKeysVisible
= false;
1249 sendEsc: function() {
1251 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1254 sendTab: function() {
1256 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1259 toggleCtrl: function() {
1261 if(UI
.ctrlOn
=== false) {
1262 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1263 document
.getElementById('noVNC_toggleCtrl_button').className
= "noVNC_status_button_selected";
1265 } else if(UI
.ctrlOn
=== true) {
1266 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1267 document
.getElementById('noVNC_toggleCtrl_button').className
= "noVNC_status_button";
1272 toggleAlt: function() {
1274 if(UI
.altOn
=== false) {
1275 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1276 document
.getElementById('noVNC_toggleAlt_button').className
= "noVNC_status_button_selected";
1278 } else if(UI
.altOn
=== true) {
1279 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1280 document
.getElementById('noVNC_toggleAlt_button').className
= "noVNC_status_button";
1285 sendCtrlAltDel: function() {
1286 UI
.rfb
.sendCtrlAltDel();
1295 setMouseButton: function(num
) {
1296 if (typeof num
=== 'undefined') {
1297 // Disable mouse buttons
1301 UI
.rfb
.get_mouse().set_touchButton(num
);
1304 var blist
= [0, 1,2,4];
1305 for (var b
= 0; b
< blist
.length
; b
++) {
1306 var button
= document
.getElementById('noVNC_mouse_button' + blist
[b
]);
1307 if (blist
[b
] === num
) {
1308 button
.style
.display
= "";
1310 button
.style
.display
= "none";
1315 displayBlur: function() {
1316 if (!UI
.rfb
) return;
1318 UI
.rfb
.get_keyboard().set_focused(false);
1319 UI
.rfb
.get_mouse().set_focused(false);
1322 displayFocus: function() {
1323 if (!UI
.rfb
) return;
1325 UI
.rfb
.get_keyboard().set_focused(true);
1326 UI
.rfb
.get_mouse().set_focused(true);
1329 // Display the desktop name in the document title
1330 updateDocumentTitle: function(rfb
, name
) {
1331 document
.title
= name
+ " - noVNC";
1334 //Helper to add options to dropdown.
1335 addOption: function(selectbox
, text
, value
) {
1336 var optn
= document
.createElement("OPTION");
1339 selectbox
.options
.add(optn
);
1342 setBarPosition: function() {
1343 document
.getElementById('noVNC_control_bar').style
.top
= (window
.pageYOffset
) + 'px';
1344 document
.getElementById('noVNC_mobile_buttons').style
.left
= (window
.pageXOffset
) + 'px';
1346 var vncwidth
= document
.getElementById('noVNC_container').style
.offsetWidth
;
1347 document
.getElementById('noVNC_control_bar').style
.width
= vncwidth
+ 'px';
1356 /* [module] UI.load(); */
1359 /* [module] export default UI; */