]>
git.proxmox.com Git - mirror_novnc.git/blob - include/ui.js
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Copyright (C) 2013 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, $D, Util, WebUtil, RFB, Display */
20 // Load supporting scripts
21 window
.onscriptsload = function () { UI
.load(); };
22 Util
.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
23 "keysymdef.js", "keyboard.js", "input.js", "display.js",
24 "jsunzip.js", "rfb.js", "keysym.js"]);
30 connSettingsOpen
: false,
31 popupStatusOpen
: false,
33 keyboardVisible
: false,
34 hideKeyboardTimeout
: null,
35 lastKeyboardinput
: null,
36 defaultKeyboardinputLen
: 100,
37 extraKeysVisible
: false,
42 // Setup rfb object, load settings from browser storage, then call
43 // UI.init to setup the UI/menus
44 load: function (callback
) {
45 WebUtil
.initSettings(UI
.start
, callback
);
48 onresize: function (callback
) {
49 var innerW
= window
.innerWidth
;
50 var innerH
= window
.innerHeight
;
51 var controlbarH
= $D('noVNC-control-bar').offsetHeight
;
52 // For some unknown reason the container is higher than the canvas,
53 // 5px higher in Firefox and 4px higher in Chrome
55 var effectiveH
= innerH
- controlbarH
- padding
;
57 var display
= UI
.rfb
.get_display();
59 if (innerW
!== undefined && innerH
!== undefined) {
60 var scaleType
= UI
.getSetting('resize');
61 if (scaleType
=== 'remote') {
62 // use remote resizing
63 Util
.Debug('Attempting setDesktopSize(' + innerW
+ ', ' + effectiveH
+ ')');
64 UI
.rfb
.setDesktopSize(innerW
, effectiveH
);
65 } else if (scaleType
=== 'scale' || scaleType
=== 'downscale') {
67 var downscaleOnly
= scaleType
=== 'downscale';
68 var scaleRatio
= display
.autoscale(innerW
, effectiveH
, downscaleOnly
);
69 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
70 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
75 // Render default UI and initialize settings menu
76 start: function(callback
) {
77 UI
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
79 // Stylesheet selection dropdown
80 var sheet
= WebUtil
.selectStylesheet();
81 var sheets
= WebUtil
.getStylesheets();
83 for (i
= 0; i
< sheets
.length
; i
+= 1) {
84 UI
.addOption($D('noVNC_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
87 // Logging selection dropdown
88 var llevels
= ['error', 'warn', 'info', 'debug'];
89 for (i
= 0; i
< llevels
.length
; i
+= 1) {
90 UI
.addOption($D('noVNC_logging'),llevels
[i
], llevels
[i
]);
93 // Settings with immediate effects
94 UI
.initSetting('logging', 'warn');
95 WebUtil
.init_logging(UI
.getSetting('logging'));
97 UI
.initSetting('stylesheet', 'default');
98 WebUtil
.selectStylesheet(null);
99 // call twice to get around webkit bug
100 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
102 // if port == 80 (or 443) then it won't be present and should be
104 var port
= window
.location
.port
;
106 if (window
.location
.protocol
.substring(0,5) == 'https') {
109 else if (window
.location
.protocol
.substring(0,4) == 'http') {
114 /* Populate the controls if defaults are provided in the URL */
115 UI
.initSetting('host', window
.location
.hostname
);
116 UI
.initSetting('port', port
);
117 UI
.initSetting('password', '');
118 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
119 UI
.initSetting('true_color', true);
120 UI
.initSetting('cursor', !UI
.isTouchDevice
);
121 UI
.initSetting('resize', 'off');
122 UI
.initSetting('shared', true);
123 UI
.initSetting('view_only', false);
124 UI
.initSetting('path', 'websockify');
125 UI
.initSetting('repeaterID', '');
129 var autoconnect
= WebUtil
.getQueryVar('autoconnect', false);
130 if (autoconnect
=== 'true' || autoconnect
== '1') {
137 UI
.updateVisualState();
139 // Show mouse selector buttons on touch screen devices
140 if (UI
.isTouchDevice
) {
141 // Show mobile buttons
142 $D('noVNC_mobile_buttons').style
.display
= "inline";
144 // Remove the address bar
145 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
146 UI
.forceSetting('clip', true);
148 UI
.initSetting('clip', false);
151 //iOS Safari does not support CSS position:fixed.
152 //This detects iOS devices and enables javascript workaround.
153 if ((navigator
.userAgent
.match(/iPhone/i)) ||
154 (navigator
.userAgent
.match(/iPod/i)) ||
155 (navigator
.userAgent
.match(/iPad/i))) {
161 $D('noVNC_host').focus();
165 Util
.addEvent(window
, 'resize', function () {
167 // When the window has been resized, wait until the size remains
168 // the same for 0.5 seconds before sending the request for changing
169 // the resolution of the session
170 clearTimeout(resizeTimeout
);
171 resizeTimeout
= setTimeout(function(){
176 Util
.addEvent(window
, 'load', UI
.keyboardinputReset
);
178 Util
.addEvent(window
, 'beforeunload', function () {
179 if (UI
.rfb_state
=== 'normal') {
180 return "You are currently connected.";
184 // Show description by default when hosted at for kanaka.github.com
185 if (location
.host
=== "kanaka.github.io") {
186 // Open the description dialog
187 $D('noVNC_description').style
.display
= "block";
189 // Show the connect panel on first load unless autoconnecting
190 if (autoconnect
=== UI
.connSettingsOpen
) {
191 UI
.toggleConnectPanel();
195 // Add mouse event click/focus/blur event handlers to the UI
196 UI
.addMouseHandlers();
198 if (typeof callback
=== "function") {
203 initRFB: function () {
204 UI
.rfb
= new RFB({'target': $D('noVNC_canvas'),
205 'onUpdateState': UI
.updateState
,
206 'onXvpInit': UI
.updateXvpVisualState
,
207 'onClipboard': UI
.clipReceive
,
208 'onFBUComplete': UI
.FBUComplete
,
209 'onFBResize': UI
.updateViewDragButton
,
210 'onDesktopName': UI
.updateDocumentTitle
});
213 addMouseHandlers: function() {
214 // Setup interface handlers that can't be inline
215 $D("noVNC_view_drag_button").onclick
= UI
.setViewDrag
;
216 $D("noVNC_mouse_button0").onclick = function () { UI
.setMouseButton(1); };
217 $D("noVNC_mouse_button1").onclick = function () { UI
.setMouseButton(2); };
218 $D("noVNC_mouse_button2").onclick = function () { UI
.setMouseButton(4); };
219 $D("noVNC_mouse_button4").onclick = function () { UI
.setMouseButton(0); };
220 $D("showKeyboard").onclick
= UI
.showKeyboard
;
222 $D("keyboardinput").oninput
= UI
.keyInput
;
223 $D("keyboardinput").onblur
= UI
.keyInputBlur
;
225 $D("showExtraKeysButton").onclick
= UI
.showExtraKeys
;
226 $D("toggleCtrlButton").onclick
= UI
.toggleCtrl
;
227 $D("toggleAltButton").onclick
= UI
.toggleAlt
;
228 $D("sendTabButton").onclick
= UI
.sendTab
;
229 $D("sendEscButton").onclick
= UI
.sendEsc
;
231 $D("sendCtrlAltDelButton").onclick
= UI
.sendCtrlAltDel
;
232 $D("xvpShutdownButton").onclick
= UI
.xvpShutdown
;
233 $D("xvpRebootButton").onclick
= UI
.xvpReboot
;
234 $D("xvpResetButton").onclick
= UI
.xvpReset
;
235 $D("noVNC_status").onclick
= UI
.togglePopupStatusPanel
;
236 $D("noVNC_popup_status_panel").onclick
= UI
.togglePopupStatusPanel
;
237 $D("xvpButton").onclick
= UI
.toggleXvpPanel
;
238 $D("clipboardButton").onclick
= UI
.toggleClipboardPanel
;
239 $D("settingsButton").onclick
= UI
.toggleSettingsPanel
;
240 $D("connectButton").onclick
= UI
.toggleConnectPanel
;
241 $D("disconnectButton").onclick
= UI
.disconnect
;
242 $D("descriptionButton").onclick
= UI
.toggleConnectPanel
;
244 $D("noVNC_clipboard_text").onfocus
= UI
.displayBlur
;
245 $D("noVNC_clipboard_text").onblur
= UI
.displayFocus
;
246 $D("noVNC_clipboard_text").onchange
= UI
.clipSend
;
247 $D("noVNC_clipboard_clear_button").onclick
= UI
.clipClear
;
249 $D("noVNC_settings_menu").onmouseover
= UI
.displayBlur
;
250 $D("noVNC_settings_menu").onmouseover
= UI
.displayFocus
;
251 $D("noVNC_apply").onclick
= UI
.settingsApply
;
253 $D("noVNC_connect_button").onclick
= UI
.connect
;
255 $D("noVNC_resize").onchange = function () {
256 var connected
= UI
.rfb_state
=== 'normal' ? true : false;
257 UI
.enableDisableClip(connected
);
261 // Read form control compatible setting from cookie
262 getSetting: function(name
) {
263 var ctrl
= $D('noVNC_' + name
);
264 var val
= WebUtil
.readSetting(name
);
265 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
266 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
275 // Update cookie and form control setting. If value is not set, then
276 // updates from control to current cookie setting.
277 updateSetting: function(name
, value
) {
279 // Save the cookie for this session
280 if (typeof value
!== 'undefined') {
281 WebUtil
.writeSetting(name
, value
);
284 // Update the settings control
285 value
= UI
.getSetting(name
);
287 var ctrl
= $D('noVNC_' + name
);
288 if (ctrl
.type
=== 'checkbox') {
289 ctrl
.checked
= value
;
291 } else if (typeof ctrl
.options
!== 'undefined') {
292 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
293 if (ctrl
.options
[i
].value
=== value
) {
294 ctrl
.selectedIndex
= i
;
299 /*Weird IE9 error leads to 'null' appearring
300 in textboxes instead of ''.*/
301 if (value
=== null) {
308 // Save control setting to cookie
309 saveSetting: function(name
) {
310 var val
, ctrl
= $D('noVNC_' + name
);
311 if (ctrl
.type
=== 'checkbox') {
313 } else if (typeof ctrl
.options
!== 'undefined') {
314 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
318 WebUtil
.writeSetting(name
, val
);
319 //Util.Debug("Setting saved '" + name + "=" + val + "'");
323 // Initial page load read/initialization of settings
324 initSetting: function(name
, defVal
) {
325 // Check Query string followed by cookie
326 var val
= WebUtil
.getQueryVar(name
);
328 val
= WebUtil
.readSetting(name
, defVal
);
330 UI
.updateSetting(name
, val
);
334 // Force a setting to be a certain value
335 forceSetting: function(name
, val
) {
336 UI
.updateSetting(name
, val
);
341 // Show the popup status panel
342 togglePopupStatusPanel: function() {
343 var psp
= $D('noVNC_popup_status_panel');
344 if (UI
.popupStatusOpen
=== true) {
345 psp
.style
.display
= "none";
346 UI
.popupStatusOpen
= false;
348 psp
.innerHTML
= $D('noVNC_status').innerHTML
;
349 psp
.style
.display
= "block";
350 psp
.style
.left
= window
.innerWidth
/2 -
351 parseInt(window
.getComputedStyle(psp
, false).width
)/2 -30 + "px";
352 UI
.popupStatusOpen
= true;
356 // Show the XVP panel
357 toggleXvpPanel: function() {
358 // Close the description panel
359 $D('noVNC_description').style
.display
= "none";
360 // Close settings if open
361 if (UI
.settingsOpen
=== true) {
363 UI
.closeSettingsMenu();
365 // Close connection settings if open
366 if (UI
.connSettingsOpen
=== true) {
367 UI
.toggleConnectPanel();
369 // Close popup status panel if open
370 if (UI
.popupStatusOpen
=== true) {
371 UI
.togglePopupStatusPanel();
373 // Close clipboard panel if open
374 if (UI
.clipboardOpen
=== true) {
375 UI
.toggleClipboardPanel();
378 if (UI
.xvpOpen
=== true) {
379 $D('noVNC_xvp').style
.display
= "none";
380 $D('xvpButton').className
= "noVNC_status_button";
383 $D('noVNC_xvp').style
.display
= "block";
384 $D('xvpButton').className
= "noVNC_status_button_selected";
389 // Show the clipboard panel
390 toggleClipboardPanel: function() {
391 // Close the description panel
392 $D('noVNC_description').style
.display
= "none";
393 // Close settings if open
394 if (UI
.settingsOpen
=== true) {
396 UI
.closeSettingsMenu();
398 // Close connection settings if open
399 if (UI
.connSettingsOpen
=== true) {
400 UI
.toggleConnectPanel();
402 // Close popup status panel if open
403 if (UI
.popupStatusOpen
=== true) {
404 UI
.togglePopupStatusPanel();
406 // Close XVP panel if open
407 if (UI
.xvpOpen
=== true) {
410 // Toggle Clipboard Panel
411 if (UI
.clipboardOpen
=== true) {
412 $D('noVNC_clipboard').style
.display
= "none";
413 $D('clipboardButton').className
= "noVNC_status_button";
414 UI
.clipboardOpen
= false;
416 $D('noVNC_clipboard').style
.display
= "block";
417 $D('clipboardButton').className
= "noVNC_status_button_selected";
418 UI
.clipboardOpen
= true;
422 // Show the connection settings panel/menu
423 toggleConnectPanel: function() {
424 // Close the description panel
425 $D('noVNC_description').style
.display
= "none";
426 // Close connection settings if open
427 if (UI
.settingsOpen
=== true) {
429 UI
.closeSettingsMenu();
430 $D('connectButton').className
= "noVNC_status_button";
432 // Close clipboard panel if open
433 if (UI
.clipboardOpen
=== true) {
434 UI
.toggleClipboardPanel();
436 // Close popup status panel if open
437 if (UI
.popupStatusOpen
=== true) {
438 UI
.togglePopupStatusPanel();
440 // Close XVP panel if open
441 if (UI
.xvpOpen
=== true) {
445 // Toggle Connection Panel
446 if (UI
.connSettingsOpen
=== true) {
447 $D('noVNC_controls').style
.display
= "none";
448 $D('connectButton').className
= "noVNC_status_button";
449 UI
.connSettingsOpen
= false;
450 UI
.saveSetting('host');
451 UI
.saveSetting('port');
452 //UI.saveSetting('password');
454 $D('noVNC_controls').style
.display
= "block";
455 $D('connectButton').className
= "noVNC_status_button_selected";
456 UI
.connSettingsOpen
= true;
457 $D('noVNC_host').focus();
461 // Toggle the settings menu:
462 // On open, settings are refreshed from saved cookies.
463 // On close, settings are applied
464 toggleSettingsPanel: function() {
465 // Close the description panel
466 $D('noVNC_description').style
.display
= "none";
467 if (UI
.settingsOpen
) {
469 UI
.closeSettingsMenu();
471 UI
.updateSetting('encrypt');
472 UI
.updateSetting('true_color');
473 if (UI
.rfb
.get_display().get_cursor_uri()) {
474 UI
.updateSetting('cursor');
476 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
477 $D('noVNC_cursor').disabled
= true;
479 UI
.updateSetting('clip');
480 UI
.updateSetting('resize');
481 UI
.updateSetting('shared');
482 UI
.updateSetting('view_only');
483 UI
.updateSetting('path');
484 UI
.updateSetting('repeaterID');
485 UI
.updateSetting('stylesheet');
486 UI
.updateSetting('logging');
488 UI
.openSettingsMenu();
493 openSettingsMenu: function() {
494 // Close the description panel
495 $D('noVNC_description').style
.display
= "none";
496 // Close clipboard panel if open
497 if (UI
.clipboardOpen
=== true) {
498 UI
.toggleClipboardPanel();
500 // Close connection settings if open
501 if (UI
.connSettingsOpen
=== true) {
502 UI
.toggleConnectPanel();
504 // Close popup status panel if open
505 if (UI
.popupStatusOpen
=== true) {
506 UI
.togglePopupStatusPanel();
508 // Close XVP panel if open
509 if (UI
.xvpOpen
=== true) {
512 $D('noVNC_settings').style
.display
= "block";
513 $D('settingsButton').className
= "noVNC_status_button_selected";
514 UI
.settingsOpen
= true;
517 // Close menu (without applying settings)
518 closeSettingsMenu: function() {
519 $D('noVNC_settings').style
.display
= "none";
520 $D('settingsButton').className
= "noVNC_status_button";
521 UI
.settingsOpen
= false;
524 // Save/apply settings when 'Apply' button is pressed
525 settingsApply: function() {
526 //Util.Debug(">> settingsApply");
527 UI
.saveSetting('encrypt');
528 UI
.saveSetting('true_color');
529 if (UI
.rfb
.get_display().get_cursor_uri()) {
530 UI
.saveSetting('cursor');
533 UI
.saveSetting('resize');
535 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
536 UI
.forceSetting('clip', false);
539 UI
.saveSetting('clip');
540 UI
.saveSetting('shared');
541 UI
.saveSetting('view_only');
542 UI
.saveSetting('path');
543 UI
.saveSetting('repeaterID');
544 UI
.saveSetting('stylesheet');
545 UI
.saveSetting('logging');
547 // Settings with immediate (non-connected related) effect
548 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
549 WebUtil
.init_logging(UI
.getSetting('logging'));
551 UI
.setViewDrag(UI
.rfb
.get_viewportDrag());
552 //Util.Debug("<< settingsApply");
557 setPassword: function() {
558 UI
.rfb
.sendPassword($D('noVNC_password').value
);
559 //Reset connect button.
560 $D('noVNC_connect_button').value
= "Connect";
561 $D('noVNC_connect_button').onclick
= UI
.Connect
;
562 //Hide connection panel.
563 UI
.toggleConnectPanel();
567 sendCtrlAltDel: function() {
568 UI
.rfb
.sendCtrlAltDel();
571 xvpShutdown: function() {
572 UI
.rfb
.xvpShutdown();
575 xvpReboot: function() {
579 xvpReset: function() {
583 setMouseButton: function(num
) {
584 if (typeof num
=== 'undefined') {
585 // Disable mouse buttons
589 UI
.rfb
.get_mouse().set_touchButton(num
);
592 var blist
= [0, 1,2,4];
593 for (var b
= 0; b
< blist
.length
; b
++) {
594 var button
= $D('noVNC_mouse_button' + blist
[b
]);
595 if (blist
[b
] === num
) {
596 button
.style
.display
= "";
598 button
.style
.display
= "none";
603 updateState: function(rfb
, state
, oldstate
, msg
) {
604 UI
.rfb_state
= state
;
609 klass
= "noVNC_status_error";
612 klass
= "noVNC_status_normal";
615 $D('noVNC_logo').style
.display
= "block";
618 klass
= "noVNC_status_normal";
621 UI
.toggleConnectPanel();
623 $D('noVNC_connect_button').value
= "Send Password";
624 $D('noVNC_connect_button').onclick
= UI
.setPassword
;
625 $D('noVNC_password').focus();
627 klass
= "noVNC_status_warn";
630 klass
= "noVNC_status_warn";
641 if (typeof(msg
) !== 'undefined') {
642 $D('noVNC-control-bar').setAttribute("class", klass
);
643 $D('noVNC_status').innerHTML
= msg
;
646 UI
.updateVisualState();
649 // Disable/enable controls depending on connection state
650 updateVisualState: function() {
651 var connected
= UI
.rfb_state
=== 'normal' ? true : false;
653 //Util.Debug(">> updateVisualState");
654 $D('noVNC_encrypt').disabled
= connected
;
655 $D('noVNC_true_color').disabled
= connected
;
656 if (UI
.rfb
&& UI
.rfb
.get_display() &&
657 UI
.rfb
.get_display().get_cursor_uri()) {
658 $D('noVNC_cursor').disabled
= connected
;
660 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
661 $D('noVNC_cursor').disabled
= true;
664 UI
.enableDisableClip(connected
);
665 $D('noVNC_resize').disabled
= connected
;
666 $D('noVNC_shared').disabled
= connected
;
667 $D('noVNC_view_only').disabled
= connected
;
668 $D('noVNC_path').disabled
= connected
;
669 $D('noVNC_repeaterID').disabled
= connected
;
673 UI
.setMouseButton(1);
674 $D('clipboardButton').style
.display
= "inline";
675 $D('showKeyboard').style
.display
= "inline";
676 $D('noVNC_extra_keys').style
.display
= "";
677 $D('sendCtrlAltDelButton').style
.display
= "inline";
680 $D('clipboardButton').style
.display
= "none";
681 $D('showKeyboard').style
.display
= "none";
682 $D('noVNC_extra_keys').style
.display
= "none";
683 $D('sendCtrlAltDelButton').style
.display
= "none";
684 UI
.updateXvpVisualState(0);
687 // State change disables viewport dragging.
688 // It is enabled (toggled) by direct click on the button
689 UI
.setViewDrag(false);
691 switch (UI
.rfb_state
) {
695 $D('connectButton').style
.display
= "";
696 $D('disconnectButton').style
.display
= "none";
697 UI
.connSettingsOpen
= false;
698 UI
.toggleConnectPanel();
701 $D('connectButton').style
.display
= "";
702 $D('disconnectButton').style
.display
= "none";
705 $D('connectButton').style
.display
= "none";
706 $D('disconnectButton').style
.display
= "";
710 //Util.Debug("<< updateVisualState");
713 // Disable/enable XVP button
714 updateXvpVisualState: function(ver
) {
716 $D('xvpButton').style
.display
= 'inline';
718 $D('xvpButton').style
.display
= 'none';
719 // Close XVP panel if open
720 if (UI
.xvpOpen
=== true) {
726 enableDisableClip: function (connected
) {
727 var resizeElem
= $D('noVNC_resize');
728 if (resizeElem
.value
=== 'downscale' || resizeElem
.value
=== 'scale') {
729 UI
.forceSetting('clip', false);
730 $D('noVNC_clip').disabled
= true;
732 $D('noVNC_clip').disabled
= connected
|| UI
.isTouchDevice
;
733 if (UI
.isTouchDevice
) {
734 UI
.forceSetting('clip', true);
739 // This resize can not be done until we know from the first Frame Buffer Update
740 // if it is supported or not.
741 // The resize is needed to make sure the server desktop size is updated to the
742 // corresponding size of the current local window when reconnecting to an
744 FBUComplete: function(rfb
, fbu
) {
746 UI
.rfb
.set_onFBUComplete(function() { });
749 // Display the desktop name in the document title
750 updateDocumentTitle: function(rfb
, name
) {
751 document
.title
= name
+ " - noVNC";
754 clipReceive: function(rfb
, text
) {
755 Util
.Debug(">> UI.clipReceive: " + text
.substr(0,40) + "...");
756 $D('noVNC_clipboard_text').value
= text
;
757 Util
.Debug("<< UI.clipReceive");
760 connect: function() {
761 UI
.closeSettingsMenu();
762 UI
.toggleConnectPanel();
764 var host
= $D('noVNC_host').value
;
765 var port
= $D('noVNC_port').value
;
766 var password
= $D('noVNC_password').value
;
767 var path
= $D('noVNC_path').value
;
768 if ((!host
) || (!port
)) {
769 throw new Error("Must set host and port");
772 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
773 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
774 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
775 UI
.rfb
.set_shared(UI
.getSetting('shared'));
776 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
777 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
779 UI
.rfb
.connect(host
, port
, password
, path
);
782 setTimeout(UI
.setBarPosition
, 100);
783 $D('noVNC_logo').style
.display
= "none";
786 disconnect: function() {
787 UI
.closeSettingsMenu();
790 // Restore the callback used for initial resize
791 UI
.rfb
.set_onFBUComplete(UI
.FBUComplete
);
793 $D('noVNC_logo').style
.display
= "block";
794 // Don't display the connection settings until we're actually disconnected
797 displayBlur: function() {
798 UI
.rfb
.get_keyboard().set_focused(false);
799 UI
.rfb
.get_mouse().set_focused(false);
802 displayFocus: function() {
803 UI
.rfb
.get_keyboard().set_focused(true);
804 UI
.rfb
.get_mouse().set_focused(true);
807 clipClear: function() {
808 $D('noVNC_clipboard_text').value
= "";
809 UI
.rfb
.clipboardPasteFrom("");
812 clipSend: function() {
813 var text
= $D('noVNC_clipboard_text').value
;
814 Util
.Debug(">> UI.clipSend: " + text
.substr(0,40) + "...");
815 UI
.rfb
.clipboardPasteFrom(text
);
816 Util
.Debug("<< UI.clipSend");
819 // Enable/disable and configure viewport clipping
820 setViewClip: function(clip
) {
823 display
= UI
.rfb
.get_display();
828 var cur_clip
= display
.get_viewport();
830 if (typeof(clip
) !== 'boolean') {
831 // Use current setting
832 clip
= UI
.getSetting('clip');
835 if (clip
&& !cur_clip
) {
837 UI
.updateSetting('clip', true);
838 } else if (!clip
&& cur_clip
) {
840 UI
.updateSetting('clip', false);
841 display
.set_viewport(false);
842 $D('noVNC_canvas').style
.position
= 'static';
843 display
.viewportChangeSize();
845 if (UI
.getSetting('clip')) {
846 // If clipping, update clipping settings
847 $D('noVNC_canvas').style
.position
= 'absolute';
848 var pos
= Util
.getPosition($D('noVNC_canvas'));
849 var new_w
= window
.innerWidth
- pos
.x
;
850 var new_h
= window
.innerHeight
- pos
.y
;
851 display
.set_viewport(true);
852 display
.viewportChangeSize(new_w
, new_h
);
856 // Toggle/set/unset the viewport drag/move button
857 setViewDrag: function(drag
) {
858 if (!UI
.rfb
) { return; }
860 UI
.updateViewDragButton();
862 if (typeof(drag
) === "undefined" ||
863 typeof(drag
) === "object") {
864 // If not specified, then toggle
865 drag
= !UI
.rfb
.get_viewportDrag();
867 var vmb
= $D('noVNC_view_drag_button');
869 vmb
.className
= "noVNC_status_button_selected";
870 UI
.rfb
.set_viewportDrag(true);
872 vmb
.className
= "noVNC_status_button";
873 UI
.rfb
.set_viewportDrag(false);
877 updateViewDragButton: function() {
878 var vmb
= $D('noVNC_view_drag_button');
879 if (UI
.rfb_state
=== 'normal' &&
880 UI
.rfb
.get_display().get_viewport() &&
881 UI
.rfb
.get_display().fbuClip()) {
882 vmb
.style
.display
= "inline";
884 vmb
.style
.display
= "none";
888 // On touch devices, show the OS keyboard
889 showKeyboard: function() {
890 var kbi
= $D('keyboardinput');
891 var skb
= $D('showKeyboard');
892 var l
= kbi
.value
.length
;
893 if(UI
.keyboardVisible
=== false) {
895 try { kbi
.setSelectionRange(l
, l
); } // Move the caret to the end
896 catch (err
) {} // setSelectionRange is undefined in Google Chrome
897 UI
.keyboardVisible
= true;
898 skb
.className
= "noVNC_status_button_selected";
899 } else if(UI
.keyboardVisible
=== true) {
901 skb
.className
= "noVNC_status_button";
902 UI
.keyboardVisible
= false;
906 keepKeyboard: function() {
907 clearTimeout(UI
.hideKeyboardTimeout
);
908 if(UI
.keyboardVisible
=== true) {
909 $D('keyboardinput').focus();
910 $D('showKeyboard').className
= "noVNC_status_button_selected";
911 } else if(UI
.keyboardVisible
=== false) {
912 $D('keyboardinput').blur();
913 $D('showKeyboard').className
= "noVNC_status_button";
917 keyboardinputReset: function() {
918 var kbi
= $D('keyboardinput');
919 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
920 UI
.lastKeyboardinput
= kbi
.value
;
923 // When normal keyboard events are left uncought, use the input events from
924 // the keyboardinput element instead and generate the corresponding key events.
925 // This code is required since some browsers on Android are inconsistent in
926 // sending keyCodes in the normal keyboard events when using on screen keyboards.
927 keyInput: function(event
) {
928 var newValue
= event
.target
.value
;
929 var oldValue
= UI
.lastKeyboardinput
;
933 // Try to check caret position since whitespace at the end
934 // will not be considered by value.length in some browsers
935 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
937 // selectionStart is undefined in Google Chrome
938 newLen
= newValue
.length
;
940 var oldLen
= oldValue
.length
;
943 var inputs
= newLen
- oldLen
;
945 backspaces
= -inputs
;
950 // Compare the old string with the new to account for
951 // text-corrections or other input that modify existing text
953 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
954 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
956 backspaces
= oldLen
- i
;
961 // Send the key events
962 for (i
= 0; i
< backspaces
; i
++) {
963 UI
.rfb
.sendKey(XK_BackSpace
);
965 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
966 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
969 // Control the text content length in the keyboardinput element
970 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
971 UI
.keyboardinputReset();
972 } else if (newLen
< 1) {
973 // There always have to be some text in the keyboardinput
974 // element with which backspace can interact.
975 UI
.keyboardinputReset();
976 // This sometimes causes the keyboard to disappear for a second
977 // but it is required for the android keyboard to recognize that
978 // text has been added to the field
980 // This has to be ran outside of the input handler in order to work
981 setTimeout(function() { UI
.keepKeyboard(); }, 0);
983 UI
.lastKeyboardinput
= newValue
;
987 keyInputBlur: function() {
988 $D('showKeyboard').className
= "noVNC_status_button";
989 //Weird bug in iOS if you change keyboardVisible
990 //here it does not actually occur so next time
991 //you click keyboard icon it doesnt work.
992 UI
.hideKeyboardTimeout
= setTimeout(function() { UI
.setKeyboard(); },100);
995 showExtraKeys: function() {
997 if(UI
.extraKeysVisible
=== false) {
998 $D('toggleCtrlButton').style
.display
= "inline";
999 $D('toggleAltButton').style
.display
= "inline";
1000 $D('sendTabButton').style
.display
= "inline";
1001 $D('sendEscButton').style
.display
= "inline";
1002 $D('showExtraKeysButton').className
= "noVNC_status_button_selected";
1003 UI
.extraKeysVisible
= true;
1004 } else if(UI
.extraKeysVisible
=== true) {
1005 $D('toggleCtrlButton').style
.display
= "";
1006 $D('toggleAltButton').style
.display
= "";
1007 $D('sendTabButton').style
.display
= "";
1008 $D('sendEscButton').style
.display
= "";
1009 $D('showExtraKeysButton').className
= "noVNC_status_button";
1010 UI
.extraKeysVisible
= false;
1014 toggleCtrl: function() {
1016 if(UI
.ctrlOn
=== false) {
1017 UI
.rfb
.sendKey(XK_Control_L
, true);
1018 $D('toggleCtrlButton').className
= "noVNC_status_button_selected";
1020 } else if(UI
.ctrlOn
=== true) {
1021 UI
.rfb
.sendKey(XK_Control_L
, false);
1022 $D('toggleCtrlButton').className
= "noVNC_status_button";
1027 toggleAlt: function() {
1029 if(UI
.altOn
=== false) {
1030 UI
.rfb
.sendKey(XK_Alt_L
, true);
1031 $D('toggleAltButton').className
= "noVNC_status_button_selected";
1033 } else if(UI
.altOn
=== true) {
1034 UI
.rfb
.sendKey(XK_Alt_L
, false);
1035 $D('toggleAltButton').className
= "noVNC_status_button";
1040 sendTab: function() {
1042 UI
.rfb
.sendKey(XK_Tab
);
1045 sendEsc: function() {
1047 UI
.rfb
.sendKey(XK_Escape
);
1050 setKeyboard: function() {
1051 UI
.keyboardVisible
= false;
1054 // iOS < Version 5 does not support position fixed. Javascript workaround:
1055 setOnscroll: function() {
1056 window
.onscroll = function() {
1057 UI
.setBarPosition();
1061 setResize: function () {
1062 window
.onResize = function() {
1063 UI
.setBarPosition();
1067 //Helper to add options to dropdown.
1068 addOption: function(selectbox
, text
, value
) {
1069 var optn
= document
.createElement("OPTION");
1072 selectbox
.options
.add(optn
);
1075 setBarPosition: function() {
1076 $D('noVNC-control-bar').style
.top
= (window
.pageYOffset
) + 'px';
1077 $D('noVNC_mobile_buttons').style
.left
= (window
.pageXOffset
) + 'px';
1079 var vncwidth
= $D('noVNC_screen').style
.offsetWidth
;
1080 $D('noVNC-control-bar').style
.width
= vncwidth
+ 'px';