]>
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/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", "keysymdef.js",
30 "xtscancodes.js", "keyboard.js", "input.js", "display.js",
31 "inflator.js", "rfb.js", "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
) {
67 UI
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
69 // Stylesheet selection dropdown
70 var sheet
= WebUtil
.selectStylesheet();
71 var sheets
= WebUtil
.getStylesheets();
73 for (i
= 0; i
< sheets
.length
; i
+= 1) {
74 UI
.addOption(document
.getElementById('noVNC_setting_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
77 // Logging selection dropdown
78 var llevels
= ['error', 'warn', 'info', 'debug'];
79 for (i
= 0; i
< llevels
.length
; i
+= 1) {
80 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
83 // Settings with immediate effects
84 UI
.initSetting('logging', 'warn');
85 WebUtil
.init_logging(UI
.getSetting('logging'));
87 UI
.initSetting('stylesheet', 'default');
88 WebUtil
.selectStylesheet(null);
89 // call twice to get around webkit bug
90 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
92 // if port == 80 (or 443) then it won't be present and should be
94 var port
= window
.location
.port
;
96 if (window
.location
.protocol
.substring(0,5) == 'https') {
99 else if (window
.location
.protocol
.substring(0,4) == 'http') {
104 /* Populate the controls if defaults are provided in the URL */
105 UI
.initSetting('host', window
.location
.hostname
);
106 UI
.initSetting('port', port
);
107 UI
.initSetting('password', '');
108 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
109 UI
.initSetting('true_color', true);
110 UI
.initSetting('cursor', !UI
.isTouchDevice
);
111 UI
.initSetting('resize', 'off');
112 UI
.initSetting('shared', true);
113 UI
.initSetting('view_only', false);
114 UI
.initSetting('path', 'websockify');
115 UI
.initSetting('repeaterID', '');
116 UI
.initSetting('token', '');
118 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
119 if (autoconnect
=== 'true' || autoconnect
== '1') {
126 UI
.updateVisualState();
128 document
.getElementById('noVNC_setting_host').focus();
130 // Show mouse selector buttons on touch screen devices
131 if (UI
.isTouchDevice
) {
132 // Show mobile buttons
133 document
.getElementById('noVNC_mobile_buttons').style
.display
= "inline";
135 // Remove the address bar
136 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
137 UI
.forceSetting('clip', true);
139 UI
.initSetting('clip', false);
145 Util
.addEvent(window
, 'resize', function () {
146 UI
.applyResizeMode();
152 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') != -1 &&
153 navigator
.userAgent
.indexOf('Chrome') == -1);
155 // Only show the button if fullscreen is properly supported
156 // * Safari doesn't support alphanumerical input while in fullscreen
158 (document
.documentElement
.requestFullscreen
||
159 document
.documentElement
.mozRequestFullScreen
||
160 document
.documentElement
.webkitRequestFullscreen
||
161 document
.body
.msRequestFullscreen
)) {
162 document
.getElementById('noVNC_fullscreen_button').style
.display
= "inline";
163 Util
.addEvent(window
, 'fullscreenchange', UI
.updateFullscreenButton
);
164 Util
.addEvent(window
, 'mozfullscreenchange', UI
.updateFullscreenButton
);
165 Util
.addEvent(window
, 'webkitfullscreenchange', UI
.updateFullscreenButton
);
166 Util
.addEvent(window
, 'msfullscreenchange', UI
.updateFullscreenButton
);
169 Util
.addEvent(window
, 'load', UI
.keyboardinputReset
);
171 // While connected we want to display a confirmation dialogue
172 // if the user tries to leave the page
173 Util
.addEvent(window
, 'beforeunload', function (e
) {
174 if (UI
.rfb
&& UI
.rfb_state
=== 'normal') {
175 var msg
= "You are currently connected.";
179 return void 0; // To prevent the dialogue when disconnected
183 // Show description by default when hosted at for kanaka.github.com
184 if (location
.host
=== "kanaka.github.io") {
185 // Open the description dialog
186 document
.getElementById('noVNC_description').style
.display
= "block";
188 // Show the connect panel on first load unless autoconnecting
189 if (autoconnect
=== UI
.connSettingsOpen
) {
190 UI
.toggleConnectPanel();
194 // Add mouse event click/focus/blur event handlers to the UI
195 UI
.addMouseHandlers();
197 if (typeof callback
=== "function") {
202 initRFB: function() {
204 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
205 'onUpdateState': UI
.updateState
,
206 'onXvpInit': UI
.updateXvpButton
,
207 'onClipboard': UI
.clipboardReceive
,
208 'onFBUComplete': UI
.initialResize
,
209 'onFBResize': UI
.updateViewDrag
,
210 'onDesktopName': UI
.updateDocumentTitle
});
213 UI
.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc
);
218 addMouseHandlers: function() {
219 // Setup interface handlers that can't be inline
220 document
.getElementById("noVNC_view_drag_button").onclick
= UI
.toggleViewDrag
;
221 document
.getElementById("noVNC_mouse_button0").onclick = function () { UI
.setMouseButton(1); };
222 document
.getElementById("noVNC_mouse_button1").onclick = function () { UI
.setMouseButton(2); };
223 document
.getElementById("noVNC_mouse_button2").onclick = function () { UI
.setMouseButton(4); };
224 document
.getElementById("noVNC_mouse_button4").onclick = function () { UI
.setMouseButton(0); };
225 document
.getElementById("noVNC_keyboard_button").onclick
= UI
.showKeyboard
;
227 document
.getElementById("noVNC_keyboardinput").oninput
= UI
.keyInput
;
228 document
.getElementById("noVNC_keyboardinput").onblur
= UI
.hideKeyboard
;
229 document
.getElementById("noVNC_keyboardinput").onsubmit = function () { return false; };
231 document
.getElementById("noVNC_toggleExtraKeys_button").onclick
= UI
.toggleExtraKeys
;
232 document
.getElementById("noVNC_toggleCtrl_button").onclick
= UI
.toggleCtrl
;
233 document
.getElementById("noVNC_toggleAlt_button").onclick
= UI
.toggleAlt
;
234 document
.getElementById("noVNC_sendTab_button").onclick
= UI
.sendTab
;
235 document
.getElementById("noVNC_sendEsc_button").onclick
= UI
.sendEsc
;
237 document
.getElementById("noVNC_sendCtrlAltDel_button").onclick
= UI
.sendCtrlAltDel
;
238 document
.getElementById("noVNC_xvpShutdown_button").onclick = function() { UI
.rfb
.xvpShutdown(); },
239 document
.getElementById("noVNC_xvpReboot_button").onclick = function() { UI
.rfb
.xvpReboot(); },
240 document
.getElementById("noVNC_xvpReset_button").onclick = function() { UI
.rfb
.xvpReset(); },
241 document
.getElementById("noVNC_status").onclick
= UI
.popupStatus
;
242 document
.getElementById("noVNC_popup_status").onclick
= UI
.closePopup
;
243 document
.getElementById("noVNC_toggleXvp_button").onclick
= UI
.toggleXvpPanel
;
244 document
.getElementById("noVNC_clipboard_button").onclick
= UI
.toggleClipboardPanel
;
245 document
.getElementById("noVNC_fullscreen_button").onclick
= UI
.toggleFullscreen
;
246 document
.getElementById("noVNC_settings_button").onclick
= UI
.toggleSettingsPanel
;
247 document
.getElementById("noVNC_connectPanel_button").onclick
= UI
.toggleConnectPanel
;
248 document
.getElementById("noVNC_disconnect_button").onclick
= UI
.disconnect
;
249 document
.getElementById("noVNC_description_button").onclick
= UI
.toggleConnectPanel
;
251 document
.getElementById("noVNC_clipboard_text").onfocus
= UI
.displayBlur
;
252 document
.getElementById("noVNC_clipboard_text").onblur
= UI
.displayFocus
;
253 document
.getElementById("noVNC_clipboard_text").onchange
= UI
.clipboardSend
;
254 document
.getElementById("noVNC_clipboard_clear_button").onclick
= UI
.clipboardClear
;
256 document
.getElementById("noVNC_settings_menu").onmouseover
= UI
.displayBlur
;
257 document
.getElementById("noVNC_settings_menu").onmouseover
= UI
.displayFocus
;
258 document
.getElementById("noVNC_settings_apply").onclick
= UI
.settingsApply
;
260 document
.getElementById("noVNC_connect_button").onclick
= UI
.connect
;
262 document
.getElementById("noVNC_setting_resize").onchange
= UI
.enableDisableViewClip
;
271 updateState: function(rfb
, state
, oldstate
, msg
) {
272 UI
.rfb_state
= state
;
277 klass
= "noVNC_status_error";
280 klass
= "noVNC_status_normal";
283 document
.getElementById('noVNC_logo').style
.display
= "block";
284 document
.getElementById('noVNC_screen').style
.display
= "none";
287 klass
= "noVNC_status_normal";
290 UI
.toggleConnectPanel();
292 document
.getElementById('noVNC_connect_button').value
= "Send Password";
293 document
.getElementById('noVNC_connect_button').onclick
= UI
.setPassword
;
294 document
.getElementById('noVNC_setting_password').focus();
296 klass
= "noVNC_status_warn";
299 klass
= "noVNC_status_warn";
303 if (typeof(msg
) !== 'undefined') {
304 document
.getElementById('noVNC_control_bar').setAttribute("class", klass
);
305 document
.getElementById('noVNC_status').innerHTML
= msg
;
308 UI
.updateVisualState();
311 // Disable/enable controls depending on connection state
312 updateVisualState: function() {
313 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
315 //Util.Debug(">> updateVisualState");
316 document
.getElementById('noVNC_setting_encrypt').disabled
= connected
;
317 document
.getElementById('noVNC_setting_true_color').disabled
= connected
;
318 if (Util
.browserSupportsCursorURIs()) {
319 document
.getElementById('noVNC_setting_cursor').disabled
= connected
;
321 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
322 document
.getElementById('noVNC_setting_cursor').disabled
= true;
325 UI
.enableDisableViewClip();
326 document
.getElementById('noVNC_setting_resize').disabled
= connected
;
327 document
.getElementById('noVNC_setting_shared').disabled
= connected
;
328 document
.getElementById('noVNC_setting_view_only').disabled
= connected
;
329 document
.getElementById('noVNC_setting_path').disabled
= connected
;
330 document
.getElementById('noVNC_setting_repeaterID').disabled
= connected
;
334 UI
.setMouseButton(1);
335 document
.getElementById('noVNC_clipboard_button').style
.display
= "inline";
336 document
.getElementById('noVNC_keyboard_button').style
.display
= "inline";
337 document
.getElementById('noVNC_extra_keys').style
.display
= "";
338 document
.getElementById('noVNC_sendCtrlAltDel_button').style
.display
= "inline";
341 document
.getElementById('noVNC_clipboard_button').style
.display
= "none";
342 document
.getElementById('noVNC_keyboard_button').style
.display
= "none";
343 document
.getElementById('noVNC_extra_keys').style
.display
= "none";
344 document
.getElementById('noVNC_sendCtrlAltDel_button').style
.display
= "none";
345 UI
.updateXvpButton(0);
348 // State change disables viewport dragging.
349 // It is enabled (toggled) by direct click on the button
350 UI
.updateViewDrag(false);
352 switch (UI
.rfb_state
) {
356 document
.getElementById('noVNC_connectPanel_button').style
.display
= "";
357 document
.getElementById('noVNC_disconnect_button').style
.display
= "none";
358 UI
.connSettingsOpen
= false;
359 UI
.toggleConnectPanel();
362 document
.getElementById('noVNC_connectPanel_button').style
.display
= "";
363 document
.getElementById('noVNC_disconnect_button').style
.display
= "none";
366 document
.getElementById('noVNC_connectPanel_button').style
.display
= "none";
367 document
.getElementById('noVNC_disconnect_button').style
.display
= "";
371 //Util.Debug("<< updateVisualState");
374 popupStatus: function(text
) {
375 var psp
= document
.getElementById('noVNC_popup_status');
377 clearTimeout(UI
.popupStatusTimeout
);
379 if (typeof text
=== 'string') {
380 psp
.innerHTML
= text
;
382 psp
.innerHTML
= document
.getElementById('noVNC_status').innerHTML
;
384 psp
.style
.display
= "block";
385 psp
.style
.left
= window
.innerWidth
/2 -
386 parseInt(window
.getComputedStyle(psp
).width
)/2 -30 + "px";
388 // Show the popup for a maximum of 1.5 seconds
389 UI
.popupStatusTimeout
= setTimeout(UI
.closePopup
, 1500);
392 closePopup: function() {
393 clearTimeout(UI
.popupStatusTimeout
);
394 document
.getElementById('noVNC_popup_status').style
.display
= "none";
403 // Initial page load read/initialization of settings
404 initSetting: function(name
, defVal
) {
405 // Check Query string followed by cookie
406 var val
= WebUtil
.getConfigVar(name
);
408 val
= WebUtil
.readSetting(name
, defVal
);
410 UI
.updateSetting(name
, val
);
414 // Update cookie and form control setting. If value is not set, then
415 // updates from control to current cookie setting.
416 updateSetting: function(name
, value
) {
418 // Save the cookie for this session
419 if (typeof value
!== 'undefined') {
420 WebUtil
.writeSetting(name
, value
);
423 // Update the settings control
424 value
= UI
.getSetting(name
);
426 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
427 if (ctrl
.type
=== 'checkbox') {
428 ctrl
.checked
= value
;
430 } else if (typeof ctrl
.options
!== 'undefined') {
431 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
432 if (ctrl
.options
[i
].value
=== value
) {
433 ctrl
.selectedIndex
= i
;
438 /*Weird IE9 error leads to 'null' appearring
439 in textboxes instead of ''.*/
440 if (value
=== null) {
447 // Save control setting to cookie
448 saveSetting: function(name
) {
449 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
450 if (ctrl
.type
=== 'checkbox') {
452 } else if (typeof ctrl
.options
!== 'undefined') {
453 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
457 WebUtil
.writeSetting(name
, val
);
458 //Util.Debug("Setting saved '" + name + "=" + val + "'");
462 // Force a setting to be a certain value
463 forceSetting: function(name
, val
) {
464 UI
.updateSetting(name
, val
);
468 // Read form control compatible setting from cookie
469 getSetting: function(name
) {
470 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
471 var val
= WebUtil
.readSetting(name
);
472 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
473 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
482 // Save/apply settings when 'Apply' button is pressed
483 settingsApply: function() {
484 //Util.Debug(">> settingsApply");
485 UI
.saveSetting('encrypt');
486 UI
.saveSetting('true_color');
487 if (Util
.browserSupportsCursorURIs()) {
488 UI
.saveSetting('cursor');
491 UI
.saveSetting('resize');
493 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
494 UI
.forceSetting('clip', false);
497 UI
.saveSetting('clip');
498 UI
.saveSetting('shared');
499 UI
.saveSetting('view_only');
500 UI
.saveSetting('path');
501 UI
.saveSetting('repeaterID');
502 UI
.saveSetting('stylesheet');
503 UI
.saveSetting('logging');
505 // Settings with immediate (non-connected related) effect
506 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
507 WebUtil
.init_logging(UI
.getSetting('logging'));
510 //Util.Debug("<< settingsApply");
514 openSettingsMenu: function() {
515 // Close the description panel
516 document
.getElementById('noVNC_description').style
.display
= "none";
517 // Close clipboard panel if open
518 if (UI
.clipboardOpen
=== true) {
519 UI
.toggleClipboardPanel();
521 // Close connection settings if open
522 if (UI
.connSettingsOpen
=== true) {
523 UI
.toggleConnectPanel();
525 // Close XVP panel if open
526 if (UI
.xvpOpen
=== true) {
529 document
.getElementById('noVNC_settings').style
.display
= "block";
530 document
.getElementById('noVNC_settings_button').className
= "noVNC_status_button_selected";
531 UI
.settingsOpen
= true;
534 // Close menu (without applying settings)
535 closeSettingsMenu: function() {
536 document
.getElementById('noVNC_settings').style
.display
= "none";
537 document
.getElementById('noVNC_settings_button').className
= "noVNC_status_button";
538 UI
.settingsOpen
= false;
541 // Toggle the settings menu:
542 // On open, settings are refreshed from saved cookies.
543 // On close, settings are applied
544 toggleSettingsPanel: function() {
545 // Close the description panel
546 document
.getElementById('noVNC_description').style
.display
= "none";
547 if (UI
.settingsOpen
) {
549 UI
.closeSettingsMenu();
551 UI
.updateSetting('encrypt');
552 UI
.updateSetting('true_color');
553 if (Util
.browserSupportsCursorURIs()) {
554 UI
.updateSetting('cursor');
556 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
557 document
.getElementById('noVNC_setting_cursor').disabled
= true;
559 UI
.updateSetting('clip');
560 UI
.updateSetting('resize');
561 UI
.updateSetting('shared');
562 UI
.updateSetting('view_only');
563 UI
.updateSetting('path');
564 UI
.updateSetting('repeaterID');
565 UI
.updateSetting('stylesheet');
566 UI
.updateSetting('logging');
568 UI
.openSettingsMenu();
578 // Show the XVP panel
579 toggleXvpPanel: function() {
580 // Close the description panel
581 document
.getElementById('noVNC_description').style
.display
= "none";
582 // Close settings if open
583 if (UI
.settingsOpen
=== true) {
585 UI
.closeSettingsMenu();
587 // Close connection settings if open
588 if (UI
.connSettingsOpen
=== true) {
589 UI
.toggleConnectPanel();
591 // Close clipboard panel if open
592 if (UI
.clipboardOpen
=== true) {
593 UI
.toggleClipboardPanel();
596 if (UI
.xvpOpen
=== true) {
597 document
.getElementById('noVNC_xvp').style
.display
= "none";
598 document
.getElementById('noVNC_toggleXvp_button').className
= "noVNC_status_button";
601 document
.getElementById('noVNC_xvp').style
.display
= "block";
602 document
.getElementById('noVNC_toggleXvp_button').className
= "noVNC_status_button_selected";
607 // Disable/enable XVP button
608 updateXvpButton: function(ver
) {
610 document
.getElementById('noVNC_toggleXvp_button').style
.display
= 'inline';
612 document
.getElementById('noVNC_toggleXvp_button').style
.display
= 'none';
613 // Close XVP panel if open
614 if (UI
.xvpOpen
=== true) {
626 // Show the clipboard panel
627 toggleClipboardPanel: function() {
628 // Close the description panel
629 document
.getElementById('noVNC_description').style
.display
= "none";
630 // Close settings if open
631 if (UI
.settingsOpen
=== true) {
633 UI
.closeSettingsMenu();
635 // Close connection settings if open
636 if (UI
.connSettingsOpen
=== true) {
637 UI
.toggleConnectPanel();
639 // Close XVP panel if open
640 if (UI
.xvpOpen
=== true) {
643 // Toggle Clipboard Panel
644 if (UI
.clipboardOpen
=== true) {
645 document
.getElementById('noVNC_clipboard').style
.display
= "none";
646 document
.getElementById('noVNC_clipboard_button').className
= "noVNC_status_button";
647 UI
.clipboardOpen
= false;
649 document
.getElementById('noVNC_clipboard').style
.display
= "block";
650 document
.getElementById('noVNC_clipboard_button').className
= "noVNC_status_button_selected";
651 UI
.clipboardOpen
= true;
655 clipboardReceive: function(rfb
, text
) {
656 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
657 document
.getElementById('noVNC_clipboard_text').value
= text
;
658 Util
.Debug("<< UI.clipboardReceive");
661 clipboardClear: function() {
662 document
.getElementById('noVNC_clipboard_text').value
= "";
663 UI
.rfb
.clipboardPasteFrom("");
666 clipboardSend: function() {
667 var text
= document
.getElementById('noVNC_clipboard_text').value
;
668 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
669 UI
.rfb
.clipboardPasteFrom(text
);
670 Util
.Debug("<< UI.clipboardSend");
679 // Show the connection settings panel/menu
680 toggleConnectPanel: function() {
681 // Close the description panel
682 document
.getElementById('noVNC_description').style
.display
= "none";
683 // Close connection settings if open
684 if (UI
.settingsOpen
=== true) {
686 UI
.closeSettingsMenu();
687 document
.getElementById('noVNC_connectPanel_button').className
= "noVNC_status_button";
689 // Close clipboard panel if open
690 if (UI
.clipboardOpen
=== true) {
691 UI
.toggleClipboardPanel();
693 // Close XVP panel if open
694 if (UI
.xvpOpen
=== true) {
698 // Toggle Connection Panel
699 if (UI
.connSettingsOpen
=== true) {
700 document
.getElementById('noVNC_controls').style
.display
= "none";
701 document
.getElementById('noVNC_connectPanel_button').className
= "noVNC_status_button";
702 UI
.connSettingsOpen
= false;
703 UI
.saveSetting('host');
704 UI
.saveSetting('port');
705 UI
.saveSetting('token');
706 //UI.saveSetting('password');
708 document
.getElementById('noVNC_controls').style
.display
= "block";
709 document
.getElementById('noVNC_connectPanel_button').className
= "noVNC_status_button_selected";
710 UI
.connSettingsOpen
= true;
711 document
.getElementById('noVNC_setting_host').focus();
715 connect: function() {
716 UI
.closeSettingsMenu();
717 UI
.toggleConnectPanel();
719 var host
= document
.getElementById('noVNC_setting_host').value
;
720 var port
= document
.getElementById('noVNC_setting_port').value
;
721 var password
= document
.getElementById('noVNC_setting_password').value
;
722 var token
= document
.getElementById('noVNC_setting_token').value
;
723 var path
= document
.getElementById('noVNC_setting_path').value
;
725 //if token is in path then ignore the new token variable
727 path
= WebUtil
.injectParamIfMissing(path
, "token", token
);
730 if ((!host
) || (!port
)) {
731 throw new Error("Must set host and port");
734 if (!UI
.initRFB()) return;
736 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
737 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
738 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
739 UI
.rfb
.set_shared(UI
.getSetting('shared'));
740 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
741 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
743 UI
.rfb
.connect(host
, port
, password
, path
);
746 setTimeout(UI
.setBarPosition
, 100);
747 document
.getElementById('noVNC_logo').style
.display
= "none";
748 document
.getElementById('noVNC_screen').style
.display
= "inline";
751 disconnect: function() {
752 UI
.closeSettingsMenu();
755 // Restore the callback used for initial resize
756 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
758 document
.getElementById('noVNC_logo').style
.display
= "block";
759 document
.getElementById('noVNC_screen').style
.display
= "none";
761 // Don't display the connection settings until we're actually disconnected
764 setPassword: function() {
765 UI
.rfb
.sendPassword(document
.getElementById('noVNC_setting_password').value
);
766 //Reset connect button.
767 document
.getElementById('noVNC_connect_button').value
= "Connect";
768 document
.getElementById('noVNC_connect_button').onclick
= UI
.connect
;
769 //Hide connection panel.
770 UI
.toggleConnectPanel();
780 toggleFullscreen: function() {
781 if (document
.fullscreenElement
|| // alternative standard method
782 document
.mozFullScreenElement
|| // currently working methods
783 document
.webkitFullscreenElement
||
784 document
.msFullscreenElement
) {
785 if (document
.exitFullscreen
) {
786 document
.exitFullscreen();
787 } else if (document
.mozCancelFullScreen
) {
788 document
.mozCancelFullScreen();
789 } else if (document
.webkitExitFullscreen
) {
790 document
.webkitExitFullscreen();
791 } else if (document
.msExitFullscreen
) {
792 document
.msExitFullscreen();
795 if (document
.documentElement
.requestFullscreen
) {
796 document
.documentElement
.requestFullscreen();
797 } else if (document
.documentElement
.mozRequestFullScreen
) {
798 document
.documentElement
.mozRequestFullScreen();
799 } else if (document
.documentElement
.webkitRequestFullscreen
) {
800 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
801 } else if (document
.body
.msRequestFullscreen
) {
802 document
.body
.msRequestFullscreen();
805 UI
.enableDisableViewClip();
806 UI
.updateFullscreenButton();
809 updateFullscreenButton: function() {
810 if (document
.fullscreenElement
|| // alternative standard method
811 document
.mozFullScreenElement
|| // currently working methods
812 document
.webkitFullscreenElement
||
813 document
.msFullscreenElement
) {
814 document
.getElementById('noVNC_fullscreen_button').className
= "noVNC_status_button_selected";
816 document
.getElementById('noVNC_fullscreen_button').className
= "noVNC_status_button";
826 // Apply remote resizing or local scaling
827 applyResizeMode: function() {
830 var screen
= UI
.screenSize();
832 if (screen
&& UI
.rfb_state
=== 'normal' && UI
.rfb
.get_display()) {
834 var display
= UI
.rfb
.get_display();
835 var resizeMode
= UI
.getSetting('resize');
837 if (resizeMode
=== 'remote') {
839 // Request changing the resolution of the remote display to
840 // the size of the local browser viewport.
842 // In order to not send multiple requests before the browser-resize
843 // is finished we wait 0.5 seconds before sending the request.
844 clearTimeout(UI
.resizeTimeout
);
845 UI
.resizeTimeout
= setTimeout(function(){
847 // Limit the viewport to the size of the browser window
848 display
.set_maxWidth(screen
.w
);
849 display
.set_maxHeight(screen
.h
);
851 Util
.Debug('Attempting requestDesktopSize(' +
852 screen
.w
+ ', ' + screen
.h
+ ')');
854 // Request a remote size covering the viewport
855 UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
);
858 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
859 var downscaleOnly
= resizeMode
=== 'downscale';
860 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
861 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
862 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
867 // The screen is always the same size as the available viewport
868 // in the browser window minus the height of the control bar
869 screenSize: function() {
870 var screen
= document
.getElementById('noVNC_screen');
872 // Hide the scrollbars until the size is calculated
873 screen
.style
.overflow
= "hidden";
875 var pos
= Util
.getPosition(screen
);
879 screen
.style
.overflow
= "visible";
881 if (isNaN(w
) || isNaN(h
)) {
888 // Normally we only apply the current resize mode after a window resize
889 // event. This means that when a new connection is opened, there is no
890 // resize mode active.
891 // We have to wait until the first FBU because this is where the client
892 // will find the supported encodings of the server. Some calls later in
893 // the chain is dependant on knowing the server-capabilities.
894 initialResize: function(rfb
, fbu
) {
895 UI
.applyResizeMode();
896 // After doing this once, we remove the callback.
897 UI
.rfb
.set_onFBUComplete(function() { });
906 // Set and configure viewport clipping
907 setViewClip: function(clip
) {
910 display
= UI
.rfb
.get_display();
912 UI
.forceSetting('clip', clip
);
916 var cur_clip
= display
.get_viewport();
918 if (typeof(clip
) !== 'boolean') {
919 // Use current setting
920 clip
= UI
.getSetting('clip');
923 if (clip
&& !cur_clip
) {
925 UI
.updateSetting('clip', true);
926 } else if (!clip
&& cur_clip
) {
928 UI
.updateSetting('clip', false);
929 display
.set_viewport(false);
930 // Disable max dimensions
931 display
.set_maxWidth(0);
932 display
.set_maxHeight(0);
933 display
.viewportChangeSize();
935 if (UI
.getSetting('clip')) {
936 // If clipping, update clipping settings
937 display
.set_viewport(true);
939 var size
= UI
.screenSize();
941 display
.set_maxWidth(size
.w
);
942 display
.set_maxHeight(size
.h
);
944 // Hide potential scrollbars that can skew the position
945 document
.getElementById('noVNC_screen').style
.overflow
= "hidden";
947 // The x position marks the left margin of the canvas,
948 // remove the margin from both sides to keep it centered
949 var new_w
= size
.w
- (2 * Util
.getPosition(document
.getElementById('noVNC_canvas')).x
);
951 document
.getElementById('noVNC_screen').style
.overflow
= "visible";
953 display
.viewportChangeSize(new_w
, size
.h
);
958 // Handle special cases where clipping is forced on/off or locked
959 enableDisableViewClip: function() {
960 var resizeSetting
= document
.getElementById('noVNC_setting_resize');
961 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
964 // Safari auto-hides the scrollbars which makes them
965 // impossible to use in most cases
966 UI
.setViewClip(true);
967 document
.getElementById('noVNC_setting_clip').disabled
= true;
968 } else if (resizeSetting
.value
=== 'downscale' || resizeSetting
.value
=== 'scale') {
969 // Disable clipping if we are scaling
970 UI
.setViewClip(false);
971 document
.getElementById('noVNC_setting_clip').disabled
= true;
972 } else if (document
.msFullscreenElement
) {
973 // The browser is IE and we are in fullscreen mode.
974 // - We need to force clipping while in fullscreen since
975 // scrollbars doesn't work.
976 UI
.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
977 UI
.rememberedClipSetting
= UI
.getSetting('clip');
978 UI
.setViewClip(true);
979 document
.getElementById('noVNC_setting_clip').disabled
= true;
980 } else if (document
.body
.msRequestFullscreen
&& UI
.rememberedClip
!== null) {
981 // Restore view clip to what it was before fullscreen on IE
982 UI
.setViewClip(UI
.rememberedClipSetting
);
983 document
.getElementById('noVNC_setting_clip').disabled
= connected
|| UI
.isTouchDevice
;
985 document
.getElementById('noVNC_setting_clip').disabled
= connected
|| UI
.isTouchDevice
;
986 if (UI
.isTouchDevice
) {
987 UI
.setViewClip(true);
998 // Update the viewport drag state
999 updateViewDrag: function(drag
) {
1000 if (!UI
.rfb
) return;
1002 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1004 // Check if viewport drag is possible. It is only possible
1005 // if the remote display is clipping the client display.
1006 if (UI
.rfb_state
=== 'normal' &&
1007 UI
.rfb
.get_display().get_viewport() &&
1008 UI
.rfb
.get_display().clippingDisplay()) {
1010 viewDragButton
.style
.display
= "inline";
1011 viewDragButton
.disabled
= false;
1014 // The size of the remote display is the same or smaller
1015 // than the client display. Make sure viewport drag isn't
1016 // active when it can't be used.
1017 if (UI
.rfb
.get_viewportDrag
) {
1018 viewDragButton
.className
= "noVNC_status_button";
1019 UI
.rfb
.set_viewportDrag(false);
1022 // The button is disabled instead of hidden on touch devices
1023 if (UI
.rfb_state
=== 'normal' && UI
.isTouchDevice
) {
1024 viewDragButton
.style
.display
= "inline";
1025 viewDragButton
.disabled
= true;
1027 viewDragButton
.style
.display
= "none";
1032 if (typeof(drag
) !== "undefined" &&
1033 typeof(drag
) !== "object") {
1035 viewDragButton
.className
= "noVNC_status_button_selected";
1036 UI
.rfb
.set_viewportDrag(true);
1038 viewDragButton
.className
= "noVNC_status_button";
1039 UI
.rfb
.set_viewportDrag(false);
1044 toggleViewDrag: function() {
1045 if (!UI
.rfb
) return;
1047 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1048 if (UI
.rfb
.get_viewportDrag()) {
1049 viewDragButton
.className
= "noVNC_status_button";
1050 UI
.rfb
.set_viewportDrag(false);
1052 viewDragButton
.className
= "noVNC_status_button_selected";
1053 UI
.rfb
.set_viewportDrag(true);
1063 // On touch devices, show the OS keyboard
1064 showKeyboard: function() {
1065 var kbi
= document
.getElementById('noVNC_keyboardinput');
1066 var skb
= document
.getElementById('noVNC_keyboard_button');
1067 var l
= kbi
.value
.length
;
1068 if(UI
.keyboardVisible
=== false) {
1070 try { kbi
.setSelectionRange(l
, l
); } // Move the caret to the end
1071 catch (err
) {} // setSelectionRange is undefined in Google Chrome
1072 UI
.keyboardVisible
= true;
1073 skb
.className
= "noVNC_status_button_selected";
1074 } else if(UI
.keyboardVisible
=== true) {
1076 skb
.className
= "noVNC_status_button";
1077 UI
.keyboardVisible
= false;
1081 hideKeyboard: function() {
1082 document
.getElementById('noVNC_keyboard_button').className
= "noVNC_status_button";
1083 //Weird bug in iOS if you change keyboardVisible
1084 //here it does not actually occur so next time
1085 //you click keyboard icon it doesnt work.
1086 UI
.hideKeyboardTimeout
= setTimeout(function() {
1087 UI
.keyboardVisible
= false;
1091 keepKeyboard: function() {
1092 clearTimeout(UI
.hideKeyboardTimeout
);
1093 if(UI
.keyboardVisible
=== true) {
1094 document
.getElementById('noVNC_keyboardinput').focus();
1095 document
.getElementById('noVNC_keyboard_button').className
= "noVNC_status_button_selected";
1096 } else if(UI
.keyboardVisible
=== false) {
1097 document
.getElementById('noVNC_keyboardinput').blur();
1098 document
.getElementById('noVNC_keyboard_button').className
= "noVNC_status_button";
1102 keyboardinputReset: function() {
1103 var kbi
= document
.getElementById('noVNC_keyboardinput');
1104 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1105 UI
.lastKeyboardinput
= kbi
.value
;
1108 // When normal keyboard events are left uncought, use the input events from
1109 // the keyboardinput element instead and generate the corresponding key events.
1110 // This code is required since some browsers on Android are inconsistent in
1111 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1112 keyInput: function(event
) {
1114 if (!UI
.rfb
) return;
1116 var newValue
= event
.target
.value
;
1118 if (!UI
.lastKeyboardinput
) {
1119 UI
.keyboardinputReset();
1121 var oldValue
= UI
.lastKeyboardinput
;
1125 // Try to check caret position since whitespace at the end
1126 // will not be considered by value.length in some browsers
1127 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1129 // selectionStart is undefined in Google Chrome
1130 newLen
= newValue
.length
;
1132 var oldLen
= oldValue
.length
;
1135 var inputs
= newLen
- oldLen
;
1137 backspaces
= -inputs
;
1142 // Compare the old string with the new to account for
1143 // text-corrections or other input that modify existing text
1145 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1146 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1147 inputs
= newLen
- i
;
1148 backspaces
= oldLen
- i
;
1153 // Send the key events
1154 for (i
= 0; i
< backspaces
; i
++) {
1155 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1157 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1158 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1161 // Control the text content length in the keyboardinput element
1162 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1163 UI
.keyboardinputReset();
1164 } else if (newLen
< 1) {
1165 // There always have to be some text in the keyboardinput
1166 // element with which backspace can interact.
1167 UI
.keyboardinputReset();
1168 // This sometimes causes the keyboard to disappear for a second
1169 // but it is required for the android keyboard to recognize that
1170 // text has been added to the field
1171 event
.target
.blur();
1172 // This has to be ran outside of the input handler in order to work
1173 setTimeout(UI
.keepKeyboard
, 0);
1175 UI
.lastKeyboardinput
= newValue
;
1179 toggleExtraKeys: function() {
1181 if(UI
.extraKeysVisible
=== false) {
1182 document
.getElementById('noVNC_toggleCtrl_button').style
.display
= "inline";
1183 document
.getElementById('noVNC_toggleAlt_button').style
.display
= "inline";
1184 document
.getElementById('noVNC_sendTab_button').style
.display
= "inline";
1185 document
.getElementById('noVNC_sendEsc_button').style
.display
= "inline";
1186 document
.getElementById('noVNC_toggleExtraKeys_button').className
= "noVNC_status_button_selected";
1187 UI
.extraKeysVisible
= true;
1188 } else if(UI
.extraKeysVisible
=== true) {
1189 document
.getElementById('noVNC_toggleCtrl_button').style
.display
= "";
1190 document
.getElementById('noVNC_toggleAlt_button').style
.display
= "";
1191 document
.getElementById('noVNC_sendTab_button').style
.display
= "";
1192 document
.getElementById('noVNC_sendEsc_button').style
.display
= "";
1193 document
.getElementById('noVNC_toggleExtraKeys_button').className
= "noVNC_status_button";
1194 UI
.extraKeysVisible
= false;
1198 sendEsc: function() {
1200 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1203 sendTab: function() {
1205 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1208 toggleCtrl: function() {
1210 if(UI
.ctrlOn
=== false) {
1211 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1212 document
.getElementById('noVNC_toggleCtrl_button').className
= "noVNC_status_button_selected";
1214 } else if(UI
.ctrlOn
=== true) {
1215 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1216 document
.getElementById('noVNC_toggleCtrl_button').className
= "noVNC_status_button";
1221 toggleAlt: function() {
1223 if(UI
.altOn
=== false) {
1224 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1225 document
.getElementById('noVNC_toggleAlt_button').className
= "noVNC_status_button_selected";
1227 } else if(UI
.altOn
=== true) {
1228 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1229 document
.getElementById('noVNC_toggleAlt_button').className
= "noVNC_status_button";
1234 sendCtrlAltDel: function() {
1235 UI
.rfb
.sendCtrlAltDel();
1244 setMouseButton: function(num
) {
1245 if (typeof num
=== 'undefined') {
1246 // Disable mouse buttons
1250 UI
.rfb
.get_mouse().set_touchButton(num
);
1253 var blist
= [0, 1,2,4];
1254 for (var b
= 0; b
< blist
.length
; b
++) {
1255 var button
= document
.getElementById('noVNC_mouse_button' + blist
[b
]);
1256 if (blist
[b
] === num
) {
1257 button
.style
.display
= "";
1259 button
.style
.display
= "none";
1264 displayBlur: function() {
1265 if (!UI
.rfb
) return;
1267 UI
.rfb
.get_keyboard().set_focused(false);
1268 UI
.rfb
.get_mouse().set_focused(false);
1271 displayFocus: function() {
1272 if (!UI
.rfb
) return;
1274 UI
.rfb
.get_keyboard().set_focused(true);
1275 UI
.rfb
.get_mouse().set_focused(true);
1278 // Display the desktop name in the document title
1279 updateDocumentTitle: function(rfb
, name
) {
1280 document
.title
= name
+ " - noVNC";
1283 //Helper to add options to dropdown.
1284 addOption: function(selectbox
, text
, value
) {
1285 var optn
= document
.createElement("OPTION");
1288 selectbox
.options
.add(optn
);
1291 setBarPosition: function() {
1292 document
.getElementById('noVNC_control_bar').style
.top
= (window
.pageYOffset
) + 'px';
1293 document
.getElementById('noVNC_mobile_buttons').style
.left
= (window
.pageXOffset
) + 'px';
1295 var vncwidth
= document
.getElementById('noVNC_container').style
.offsetWidth
;
1296 document
.getElementById('noVNC_control_bar').style
.width
= vncwidth
+ 'px';
1305 /* [module] UI.load(); */
1308 /* [module] export default UI; */