2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Copyright (C) 2016 Samuel Mannehed for Cendio AB
5 * Copyright (C) 2016 Pierre Ossman for Cendio AB
6 * Licensed under MPL 2.0 (see LICENSE.txt)
8 * See README.md for usage and integration instructions.
11 /* jslint white: false, browser: true */
12 /* global window, document.getElementById, Util, WebUtil, RFB, Display */
15 * import Util from "../core/util";
16 * import KeyTable from "../core/input/keysym";
17 * import keysyms from "./keysymdef";
18 * import RFB from "../core/rfb";
19 * import Display from "../core/display";
20 * import WebUtil from "./webutil";
28 // Fallback for all uncought errors
29 window
.addEventListener('error', function(event
) {
37 msg
+= " <div class=\"noVNC_location\">";
38 msg
+= event
.filename
;
39 msg
+= ":" + event
.lineno
+ ":" + event
.colno
;
42 if ((event
.error
!== undefined) &&
43 (event
.error
.stack
!== undefined)) {
44 msg
+= "<div class=\"noVNC_stack\">";
45 msg
+= event
.error
.stack
;
49 document
.getElementById('noVNC_fallback_error')
50 .classList
.add("noVNC_open");
51 document
.getElementById('noVNC_fallback_errormsg').textContent
= msg
;
53 document
.write("noVNC encountered an error.");
55 // Don't return true since this would prevent the error
56 // from being printed to the browser console.
60 // Set up translations
61 var LINGUAS
= ["de", "el", "nl", "sv"];
62 Util
.Localisation
.setup(LINGUAS
);
63 if (Util
.Localisation
.language
!== "en") {
65 {'app': ["locale/" + Util
.Localisation
.language
+ ".js"]});
68 /* [begin skip-as-module] */
69 // Load supporting scripts
71 {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
72 "input/xtscancodes.js", "input/util.js", "input/devices.js",
73 "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
75 window
.onscriptsload = function () { UI
.load(); };
76 /* [end skip-as-module] */
78 var _
= Util
.Localisation
.get;
87 hideKeyboardTimeout
: null,
88 idleControlbarTimeout
: null,
89 closeControlbarTimeout
: null,
91 controlbarGrabbed
: false,
92 controlbarDrag
: false,
93 controlbarMouseDownClientY
: 0,
94 controlbarMouseDownOffsetY
: 0,
97 rememberedClipSetting
: null,
98 lastKeyboardinput
: null,
99 defaultKeyboardinputLen
: 100,
101 inhibit_reconnect
: true,
102 reconnect_callback
: null,
103 reconnect_password
: null,
105 // Setup rfb object, load settings from browser storage, then call
106 // UI.init to setup the UI/menus
107 load: function(callback
) {
108 WebUtil
.initSettings(UI
.start
, callback
);
111 // Render default UI and initialize settings menu
112 start: function(callback
) {
114 // Setup global variables first
115 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
116 navigator
.userAgent
.indexOf('Chrome') === -1);
121 Util
.Localisation
.translateDOM();
123 // Adapt the interface for touch screen devices
124 if (Util
.isTouchDevice
) {
125 document
.documentElement
.classList
.add("noVNC_touch");
126 // Remove the address bar
127 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
128 UI
.forceSetting('clip', true);
130 UI
.initSetting('clip', false);
133 // Restore control bar position
134 if (WebUtil
.readSetting('controlbar_pos') === 'right') {
135 UI
.toggleControlbarSide();
138 // Setup and initialize event handlers
139 UI
.setupWindowEvents();
140 UI
.setupFullscreen();
141 UI
.addControlbarHandlers();
142 UI
.addTouchSpecificHandlers();
143 UI
.addExtraKeysHandlers();
145 UI
.addConnectionControlHandlers();
146 UI
.addClipboardHandlers();
147 UI
.addSettingsHandlers();
151 // Show the connect panel on first load unless autoconnecting
153 UI
.openConnectPanel();
158 UI
.updateVisualState();
160 document
.getElementById('noVNC_setting_host').focus();
162 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
163 if (autoconnect
=== 'true' || autoconnect
== '1') {
170 if (typeof callback
=== "function") {
175 initSettings: function() {
178 // Logging selection dropdown
179 var llevels
= ['error', 'warn', 'info', 'debug'];
180 for (i
= 0; i
< llevels
.length
; i
+= 1) {
181 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
184 // Settings with immediate effects
185 UI
.initSetting('logging', 'warn');
186 WebUtil
.init_logging(UI
.getSetting('logging'));
188 // if port == 80 (or 443) then it won't be present and should be
190 var port
= window
.location
.port
;
192 if (window
.location
.protocol
.substring(0,5) == 'https') {
195 else if (window
.location
.protocol
.substring(0,4) == 'http') {
200 /* Populate the controls if defaults are provided in the URL */
201 UI
.initSetting('host', window
.location
.hostname
);
202 UI
.initSetting('port', port
);
203 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
204 UI
.initSetting('true_color', true);
205 UI
.initSetting('cursor', !Util
.isTouchDevice
);
206 UI
.initSetting('resize', 'off');
207 UI
.initSetting('shared', true);
208 UI
.initSetting('view_only', false);
209 UI
.initSetting('path', 'websockify');
210 UI
.initSetting('repeaterID', '');
211 UI
.initSetting('reconnect', false);
212 UI
.initSetting('reconnect_delay', 5000);
215 setupWindowEvents: function() {
216 window
.addEventListener('resize', UI
.applyResizeMode
);
217 window
.addEventListener('resize', UI
.updateViewClip
);
218 window
.addEventListener('resize', UI
.updateViewDrag
);
220 document
.getElementById("noVNC_status")
221 .addEventListener('click', UI
.hideStatus
);
224 setupFullscreen: function() {
225 // Only show the button if fullscreen is properly supported
226 // * Safari doesn't support alphanumerical input while in fullscreen
228 (document
.documentElement
.requestFullscreen
||
229 document
.documentElement
.mozRequestFullScreen
||
230 document
.documentElement
.webkitRequestFullscreen
||
231 document
.body
.msRequestFullscreen
)) {
232 document
.getElementById('noVNC_fullscreen_button')
233 .classList
.remove("noVNC_hidden");
234 UI
.addFullscreenHandlers();
238 addControlbarHandlers: function() {
239 document
.getElementById("noVNC_control_bar")
240 .addEventListener('mousemove', UI
.activateControlbar
);
241 document
.getElementById("noVNC_control_bar")
242 .addEventListener('mouseup', UI
.activateControlbar
);
243 document
.getElementById("noVNC_control_bar")
244 .addEventListener('mousedown', UI
.activateControlbar
);
245 document
.getElementById("noVNC_control_bar")
246 .addEventListener('keypress', UI
.activateControlbar
);
248 document
.getElementById("noVNC_control_bar")
249 .addEventListener('mousedown', UI
.keepControlbar
);
250 document
.getElementById("noVNC_control_bar")
251 .addEventListener('keypress', UI
.keepControlbar
);
253 document
.getElementById("noVNC_view_drag_button")
254 .addEventListener('click', UI
.toggleViewDrag
);
256 document
.getElementById("noVNC_control_bar_handle")
257 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
258 document
.getElementById("noVNC_control_bar_handle")
259 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
260 document
.getElementById("noVNC_control_bar_handle")
261 .addEventListener('mousemove', UI
.dragControlbarHandle
);
262 // resize events aren't available for elements
263 window
.addEventListener('resize', UI
.updateControlbarHandle
);
265 var exps
= document
.getElementsByClassName("noVNC_expander");
266 for (var i
= 0;i
< exps
.length
;i
++) {
267 exps
[i
].addEventListener('click', UI
.toggleExpander
);
271 addTouchSpecificHandlers: function() {
272 document
.getElementById("noVNC_mouse_button0")
273 .addEventListener('click', function () { UI
.setMouseButton(1); });
274 document
.getElementById("noVNC_mouse_button1")
275 .addEventListener('click', function () { UI
.setMouseButton(2); });
276 document
.getElementById("noVNC_mouse_button2")
277 .addEventListener('click', function () { UI
.setMouseButton(4); });
278 document
.getElementById("noVNC_mouse_button4")
279 .addEventListener('click', function () { UI
.setMouseButton(0); });
280 document
.getElementById("noVNC_keyboard_button")
281 .addEventListener('click', UI
.toggleVirtualKeyboard
);
283 document
.getElementById("noVNC_keyboardinput")
284 .addEventListener('input', UI
.keyInput
);
285 document
.getElementById("noVNC_keyboardinput")
286 .addEventListener('focus', UI
.onfocusVirtualKeyboard
);
287 document
.getElementById("noVNC_keyboardinput")
288 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
289 document
.getElementById("noVNC_keyboardinput")
290 .addEventListener('submit', function () { return false; });
292 document
.documentElement
293 .addEventListener('mousedown', UI
.keepVirtualKeyboard
, true);
295 document
.getElementById("noVNC_control_bar")
296 .addEventListener('touchstart', UI
.activateControlbar
);
297 document
.getElementById("noVNC_control_bar")
298 .addEventListener('touchmove', UI
.activateControlbar
);
299 document
.getElementById("noVNC_control_bar")
300 .addEventListener('touchend', UI
.activateControlbar
);
301 document
.getElementById("noVNC_control_bar")
302 .addEventListener('input', UI
.activateControlbar
);
304 document
.getElementById("noVNC_control_bar")
305 .addEventListener('touchstart', UI
.keepControlbar
);
306 document
.getElementById("noVNC_control_bar")
307 .addEventListener('input', UI
.keepControlbar
);
309 document
.getElementById("noVNC_control_bar_handle")
310 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
311 document
.getElementById("noVNC_control_bar_handle")
312 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
313 document
.getElementById("noVNC_control_bar_handle")
314 .addEventListener('touchmove', UI
.dragControlbarHandle
);
316 window
.addEventListener('load', UI
.keyboardinputReset
);
319 addExtraKeysHandlers: function() {
320 document
.getElementById("noVNC_toggle_extra_keys_button")
321 .addEventListener('click', UI
.toggleExtraKeys
);
322 document
.getElementById("noVNC_toggle_ctrl_button")
323 .addEventListener('click', UI
.toggleCtrl
);
324 document
.getElementById("noVNC_toggle_alt_button")
325 .addEventListener('click', UI
.toggleAlt
);
326 document
.getElementById("noVNC_send_tab_button")
327 .addEventListener('click', UI
.sendTab
);
328 document
.getElementById("noVNC_send_esc_button")
329 .addEventListener('click', UI
.sendEsc
);
330 document
.getElementById("noVNC_send_ctrl_alt_del_button")
331 .addEventListener('click', UI
.sendCtrlAltDel
);
334 addXvpHandlers: function() {
335 document
.getElementById("noVNC_xvp_shutdown_button")
336 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
337 document
.getElementById("noVNC_xvp_reboot_button")
338 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
339 document
.getElementById("noVNC_xvp_reset_button")
340 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
341 document
.getElementById("noVNC_xvp_button")
342 .addEventListener('click', UI
.toggleXvpPanel
);
345 addConnectionControlHandlers: function() {
346 document
.getElementById("noVNC_disconnect_button")
347 .addEventListener('click', UI
.disconnect
);
348 document
.getElementById("noVNC_connect_button")
349 .addEventListener('click', UI
.connect
);
350 document
.getElementById("noVNC_cancel_reconnect_button")
351 .addEventListener('click', UI
.cancelReconnect
);
353 document
.getElementById("noVNC_password_button")
354 .addEventListener('click', UI
.setPassword
);
357 addClipboardHandlers: function() {
358 document
.getElementById("noVNC_clipboard_button")
359 .addEventListener('click', UI
.toggleClipboardPanel
);
360 document
.getElementById("noVNC_clipboard_text")
361 .addEventListener('focus', UI
.displayBlur
);
362 document
.getElementById("noVNC_clipboard_text")
363 .addEventListener('blur', UI
.displayFocus
);
364 document
.getElementById("noVNC_clipboard_text")
365 .addEventListener('change', UI
.clipboardSend
);
366 document
.getElementById("noVNC_clipboard_clear_button")
367 .addEventListener('click', UI
.clipboardClear
);
370 addSettingsHandlers: function() {
371 document
.getElementById("noVNC_settings_button")
372 .addEventListener('click', UI
.toggleSettingsPanel
);
373 document
.getElementById("noVNC_settings_apply")
374 .addEventListener('click', UI
.settingsApply
);
376 document
.getElementById("noVNC_setting_resize")
377 .addEventListener('change', UI
.enableDisableViewClip
);
380 addFullscreenHandlers: function() {
381 document
.getElementById("noVNC_fullscreen_button")
382 .addEventListener('click', UI
.toggleFullscreen
);
384 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
385 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
386 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
387 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
390 initRFB: function() {
392 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
393 'onNotification': UI
.notification
,
394 'onUpdateState': UI
.updateState
,
395 'onDisconnected': UI
.disconnectFinished
,
396 'onPasswordRequired': UI
.passwordRequired
,
397 'onXvpInit': UI
.updateXvpButton
,
398 'onClipboard': UI
.clipboardReceive
,
400 'onFBUComplete': UI
.initialResize
,
401 'onFBResize': UI
.updateSessionSize
,
402 'onDesktopName': UI
.updateDesktopName
});
405 var msg
= "Unable to create RFB client -- " + exc
;
407 UI
.showStatus(msg
, 'error');
418 updateState: function(rfb
, state
, oldstate
) {
421 document
.documentElement
.classList
.remove("noVNC_connecting");
422 document
.documentElement
.classList
.remove("noVNC_connected");
423 document
.documentElement
.classList
.remove("noVNC_disconnecting");
424 document
.documentElement
.classList
.remove("noVNC_reconnecting");
428 document
.getElementById("noVNC_transition_text").textContent
= _("Connecting...");
429 document
.documentElement
.classList
.add("noVNC_connecting");
433 UI
.inhibit_reconnect
= false;
434 document
.documentElement
.classList
.add("noVNC_connected");
435 if (rfb
&& rfb
.get_encrypt()) {
436 msg
= _("Connected (encrypted) to ") + UI
.desktopName
;
438 msg
= _("Connected (unencrypted) to ") + UI
.desktopName
;
442 case 'disconnecting':
443 UI
.connected
= false;
444 document
.getElementById("noVNC_transition_text").textContent
= _("Disconnecting...");
445 document
.documentElement
.classList
.add("noVNC_disconnecting");
448 UI
.showStatus(_("Disconnected"));
451 msg
= "Invalid UI state";
453 UI
.showStatus(msg
, 'error');
457 UI
.updateVisualState();
460 // Disable/enable controls depending on connection state
461 updateVisualState: function() {
462 //Util.Debug(">> updateVisualState");
463 document
.getElementById('noVNC_setting_encrypt').disabled
= UI
.connected
;
464 document
.getElementById('noVNC_setting_true_color').disabled
= UI
.connected
;
465 if (Util
.browserSupportsCursorURIs()) {
466 document
.getElementById('noVNC_setting_cursor').disabled
= UI
.connected
;
468 UI
.updateSetting('cursor', !Util
.isTouchDevice
);
469 document
.getElementById('noVNC_setting_cursor').disabled
= true;
472 UI
.enableDisableViewClip();
473 document
.getElementById('noVNC_setting_resize').disabled
= UI
.connected
;
474 document
.getElementById('noVNC_setting_shared').disabled
= UI
.connected
;
475 document
.getElementById('noVNC_setting_view_only').disabled
= UI
.connected
;
476 document
.getElementById('noVNC_setting_host').disabled
= UI
.connected
;
477 document
.getElementById('noVNC_setting_port').disabled
= UI
.connected
;
478 document
.getElementById('noVNC_setting_path').disabled
= UI
.connected
;
479 document
.getElementById('noVNC_setting_repeaterID').disabled
= UI
.connected
;
480 document
.getElementById('noVNC_setting_reconnect').disabled
= UI
.connected
;
481 document
.getElementById('noVNC_setting_reconnect_delay').disabled
= UI
.connected
;
485 UI
.setMouseButton(1);
487 // Hide the controlbar after 2 seconds
488 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
490 UI
.updateXvpButton(0);
494 // Hide input related buttons in view only mode
495 if (UI
.rfb
&& UI
.rfb
.get_view_only()) {
496 document
.getElementById('noVNC_keyboard_button')
497 .classList
.add('noVNC_hidden');
498 document
.getElementById('noVNC_toggle_extra_keys_button')
499 .classList
.add('noVNC_hidden');
501 document
.getElementById('noVNC_keyboard_button')
502 .classList
.remove('noVNC_hidden');
503 document
.getElementById('noVNC_toggle_extra_keys_button')
504 .classList
.remove('noVNC_hidden');
507 // State change disables viewport dragging.
508 // It is enabled (toggled) by direct click on the button
509 UI
.setViewDrag(false);
511 // State change also closes the password dialog
512 document
.getElementById('noVNC_password_dlg')
513 .classList
.remove('noVNC_open');
515 //Util.Debug("<< updateVisualState");
518 showStatus: function(text
, status_type
, time
) {
519 var statusElem
= document
.getElementById('noVNC_status');
521 clearTimeout(UI
.statusTimeout
);
523 if (typeof status_type
=== 'undefined') {
524 status_type
= 'normal';
527 statusElem
.classList
.remove("noVNC_status_normal",
529 "noVNC_status_error");
531 switch (status_type
) {
534 statusElem
.classList
.add("noVNC_status_warn");
537 statusElem
.classList
.add("noVNC_status_error");
542 statusElem
.classList
.add("noVNC_status_normal");
546 statusElem
.textContent
= text
;
547 statusElem
.classList
.add("noVNC_open");
549 // If no time was specified, show the status for 1.5 seconds
550 if (typeof time
=== 'undefined') {
554 // Error messages do not timeout
555 if (status_type
!== 'error') {
556 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
560 hideStatus: function() {
561 clearTimeout(UI
.statusTimeout
);
562 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
565 notification: function (rfb
, msg
, level
, options
) {
566 UI
.showStatus(msg
, level
);
569 activateControlbar: function(event
) {
570 clearTimeout(UI
.idleControlbarTimeout
);
571 // We manipulate the anchor instead of the actual control
572 // bar in order to avoid creating new a stacking group
573 document
.getElementById('noVNC_control_bar_anchor')
574 .classList
.remove("noVNC_idle");
575 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
578 idleControlbar: function() {
579 document
.getElementById('noVNC_control_bar_anchor')
580 .classList
.add("noVNC_idle");
583 keepControlbar: function() {
584 clearTimeout(UI
.closeControlbarTimeout
);
587 openControlbar: function() {
588 document
.getElementById('noVNC_control_bar')
589 .classList
.add("noVNC_open");
592 closeControlbar: function() {
594 document
.getElementById('noVNC_control_bar')
595 .classList
.remove("noVNC_open");
598 toggleControlbar: function() {
599 if (document
.getElementById('noVNC_control_bar')
600 .classList
.contains("noVNC_open")) {
601 UI
.closeControlbar();
607 toggleControlbarSide: function () {
608 // Temporarily disable animation to avoid weird movement
609 var bar
= document
.getElementById('noVNC_control_bar');
610 bar
.style
.transitionDuration
= '0s';
611 bar
.addEventListener('transitionend', function () { this.style
.transitionDuration
= ""; });
613 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
614 if (anchor
.classList
.contains("noVNC_right")) {
615 WebUtil
.writeSetting('controlbar_pos', 'left');
616 anchor
.classList
.remove("noVNC_right");
618 WebUtil
.writeSetting('controlbar_pos', 'right');
619 anchor
.classList
.add("noVNC_right");
622 // Consider this a movement of the handle
623 UI
.controlbarDrag
= true;
626 dragControlbarHandle: function (e
) {
627 if (!UI
.controlbarGrabbed
) return;
629 var ptr
= Util
.getPointerEvent(e
);
631 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
632 if (ptr
.clientX
< (window
.innerWidth
* 0.1)) {
633 if (anchor
.classList
.contains("noVNC_right")) {
634 UI
.toggleControlbarSide();
636 } else if (ptr
.clientX
> (window
.innerWidth
* 0.9)) {
637 if (!anchor
.classList
.contains("noVNC_right")) {
638 UI
.toggleControlbarSide();
642 if (!UI
.controlbarDrag
) {
643 // The goal is to trigger on a certain physical width, the
644 // devicePixelRatio brings us a bit closer but is not optimal.
645 var dragThreshold
= 10 * (window
.devicePixelRatio
|| 1);
646 var dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
648 if (dragDistance
< dragThreshold
) return;
650 UI
.controlbarDrag
= true;
653 var eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
655 UI
.moveControlbarHandle(eventY
);
660 UI
.activateControlbar();
663 // Move the handle but don't allow any position outside the bounds
664 moveControlbarHandle: function (viewportRelativeY
) {
665 var handle
= document
.getElementById("noVNC_control_bar_handle");
666 var handleHeight
= handle
.getBoundingClientRect().height
;
667 var controlbarBounds
= document
.getElementById("noVNC_control_bar")
668 .getBoundingClientRect();
671 // These heights need to be non-zero for the below logic to work
672 if (handleHeight
=== 0 || controlbarBounds
.height
=== 0) {
676 var newY
= viewportRelativeY
;
678 // Check if the coordinates are outside the control bar
679 if (newY
< controlbarBounds
.top
+ margin
) {
680 // Force coordinates to be below the top of the control bar
681 newY
= controlbarBounds
.top
+ margin
;
683 } else if (newY
> controlbarBounds
.top
+
684 controlbarBounds
.height
- handleHeight
- margin
) {
685 // Force coordinates to be above the bottom of the control bar
686 newY
= controlbarBounds
.top
+
687 controlbarBounds
.height
- handleHeight
- margin
;
690 // Corner case: control bar too small for stable position
691 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
692 newY
= controlbarBounds
.top
+
693 (controlbarBounds
.height
- handleHeight
) / 2;
696 // The transform needs coordinates that are relative to the parent
697 var parentRelativeY
= newY
- controlbarBounds
.top
;
698 handle
.style
.transform
= "translateY(" + parentRelativeY
+ "px)";
701 updateControlbarHandle: function () {
702 // Since the control bar is fixed on the viewport and not the page,
703 // the move function expects coordinates relative the the viewport.
704 var handle
= document
.getElementById("noVNC_control_bar_handle");
705 var handleBounds
= handle
.getBoundingClientRect();
706 UI
.moveControlbarHandle(handleBounds
.top
);
709 controlbarHandleMouseUp: function(e
) {
710 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
712 // mouseup and mousedown on the same place toggles the controlbar
713 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
714 UI
.toggleControlbar();
718 UI
.activateControlbar();
720 UI
.controlbarGrabbed
= false;
723 controlbarHandleMouseDown: function(e
) {
724 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
726 var ptr
= Util
.getPointerEvent(e
);
728 var handle
= document
.getElementById("noVNC_control_bar_handle");
729 var bounds
= handle
.getBoundingClientRect();
731 WebUtil
.setCapture(handle
);
732 UI
.controlbarGrabbed
= true;
733 UI
.controlbarDrag
= false;
735 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
736 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
740 UI
.activateControlbar();
743 toggleExpander: function(e
) {
744 if (this.classList
.contains("noVNC_open")) {
745 this.classList
.remove("noVNC_open");
747 this.classList
.add("noVNC_open");
757 // Initial page load read/initialization of settings
758 initSetting: function(name
, defVal
) {
759 // Check Query string followed by cookie
760 var val
= WebUtil
.getConfigVar(name
);
762 val
= WebUtil
.readSetting(name
, defVal
);
764 UI
.updateSetting(name
, val
);
768 // Update cookie and form control setting. If value is not set, then
769 // updates from control to current cookie setting.
770 updateSetting: function(name
, value
) {
772 // Save the cookie for this session
773 if (typeof value
!== 'undefined') {
774 WebUtil
.writeSetting(name
, value
);
777 // Update the settings control
778 value
= UI
.getSetting(name
);
780 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
781 if (ctrl
.type
=== 'checkbox') {
782 ctrl
.checked
= value
;
784 } else if (typeof ctrl
.options
!== 'undefined') {
785 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
786 if (ctrl
.options
[i
].value
=== value
) {
787 ctrl
.selectedIndex
= i
;
792 /*Weird IE9 error leads to 'null' appearring
793 in textboxes instead of ''.*/
794 if (value
=== null) {
801 // Save control setting to cookie
802 saveSetting: function(name
) {
803 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
804 if (ctrl
.type
=== 'checkbox') {
806 } else if (typeof ctrl
.options
!== 'undefined') {
807 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
811 WebUtil
.writeSetting(name
, val
);
812 //Util.Debug("Setting saved '" + name + "=" + val + "'");
816 // Force a setting to be a certain value
817 forceSetting: function(name
, val
) {
818 UI
.updateSetting(name
, val
);
822 // Read form control compatible setting from cookie
823 getSetting: function(name
) {
824 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
825 var val
= WebUtil
.readSetting(name
);
826 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
827 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
836 // Save/apply settings when 'Apply' button is pressed
837 settingsApply: function() {
838 //Util.Debug(">> settingsApply");
839 UI
.saveSetting('encrypt');
840 UI
.saveSetting('true_color');
841 if (Util
.browserSupportsCursorURIs()) {
842 UI
.saveSetting('cursor');
845 UI
.saveSetting('resize');
847 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
848 UI
.forceSetting('clip', false);
851 UI
.saveSetting('clip');
852 UI
.saveSetting('shared');
853 UI
.saveSetting('view_only');
854 UI
.saveSetting('host');
855 UI
.saveSetting('port');
856 UI
.saveSetting('path');
857 UI
.saveSetting('repeaterID');
858 UI
.saveSetting('logging');
859 UI
.saveSetting('reconnect');
860 UI
.saveSetting('reconnect_delay');
862 // Settings with immediate (non-connected related) effect
863 WebUtil
.init_logging(UI
.getSetting('logging'));
866 //Util.Debug("<< settingsApply");
875 closeAllPanels: function() {
876 UI
.closeSettingsPanel();
878 UI
.closeClipboardPanel();
888 openSettingsPanel: function() {
892 UI
.updateSetting('encrypt');
893 UI
.updateSetting('true_color');
894 if (Util
.browserSupportsCursorURIs()) {
895 UI
.updateSetting('cursor');
897 UI
.updateSetting('cursor', !Util
.isTouchDevice
);
898 document
.getElementById('noVNC_setting_cursor').disabled
= true;
900 UI
.updateSetting('clip');
901 UI
.updateSetting('resize');
902 UI
.updateSetting('shared');
903 UI
.updateSetting('view_only');
904 UI
.updateSetting('path');
905 UI
.updateSetting('repeaterID');
906 UI
.updateSetting('logging');
907 UI
.updateSetting('reconnect');
908 UI
.updateSetting('reconnect_delay');
910 document
.getElementById('noVNC_settings')
911 .classList
.add("noVNC_open");
912 document
.getElementById('noVNC_settings_button')
913 .classList
.add("noVNC_selected");
916 closeSettingsPanel: function() {
917 document
.getElementById('noVNC_settings')
918 .classList
.remove("noVNC_open");
919 document
.getElementById('noVNC_settings_button')
920 .classList
.remove("noVNC_selected");
923 // Toggle the settings menu:
924 // On open, settings are refreshed from saved cookies.
925 // On close, settings are applied
926 toggleSettingsPanel: function() {
927 if (document
.getElementById('noVNC_settings')
928 .classList
.contains("noVNC_open")) {
930 UI
.closeSettingsPanel();
932 UI
.openSettingsPanel();
942 openXvpPanel: function() {
946 document
.getElementById('noVNC_xvp')
947 .classList
.add("noVNC_open");
948 document
.getElementById('noVNC_xvp_button')
949 .classList
.add("noVNC_selected");
952 closeXvpPanel: function() {
953 document
.getElementById('noVNC_xvp')
954 .classList
.remove("noVNC_open");
955 document
.getElementById('noVNC_xvp_button')
956 .classList
.remove("noVNC_selected");
959 toggleXvpPanel: function() {
960 if (document
.getElementById('noVNC_xvp')
961 .classList
.contains("noVNC_open")) {
968 // Disable/enable XVP button
969 updateXvpButton: function(ver
) {
970 if (ver
>= 1 && !UI
.rfb
.get_view_only()) {
971 document
.getElementById('noVNC_xvp_button')
972 .classList
.remove("noVNC_hidden");
974 document
.getElementById('noVNC_xvp_button')
975 .classList
.add("noVNC_hidden");
976 // Close XVP panel if open
987 openClipboardPanel: function() {
991 document
.getElementById('noVNC_clipboard')
992 .classList
.add("noVNC_open");
993 document
.getElementById('noVNC_clipboard_button')
994 .classList
.add("noVNC_selected");
997 closeClipboardPanel: function() {
998 document
.getElementById('noVNC_clipboard')
999 .classList
.remove("noVNC_open");
1000 document
.getElementById('noVNC_clipboard_button')
1001 .classList
.remove("noVNC_selected");
1004 toggleClipboardPanel: function() {
1005 if (document
.getElementById('noVNC_clipboard')
1006 .classList
.contains("noVNC_open")) {
1007 UI
.closeClipboardPanel();
1009 UI
.openClipboardPanel();
1013 clipboardReceive: function(rfb
, text
) {
1014 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
1015 document
.getElementById('noVNC_clipboard_text').value
= text
;
1016 Util
.Debug("<< UI.clipboardReceive");
1019 clipboardClear: function() {
1020 document
.getElementById('noVNC_clipboard_text').value
= "";
1021 UI
.rfb
.clipboardPasteFrom("");
1024 clipboardSend: function() {
1025 var text
= document
.getElementById('noVNC_clipboard_text').value
;
1026 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
1027 UI
.rfb
.clipboardPasteFrom(text
);
1028 Util
.Debug("<< UI.clipboardSend");
1037 openConnectPanel: function() {
1038 document
.getElementById('noVNC_connect_dlg')
1039 .classList
.add("noVNC_open");
1042 closeConnectPanel: function() {
1043 document
.getElementById('noVNC_connect_dlg')
1044 .classList
.remove("noVNC_open");
1047 toggleConnectPanel: function() {
1048 if (document
.getElementById('noVNC_connect_dlg')
1049 .classList
.contains("noVNC_open")) {
1050 UI
.closeConnectPanel();
1052 UI
.openConnectPanel();
1056 connect: function(event
, password
) {
1057 var host
= document
.getElementById('noVNC_setting_host').value
;
1058 var port
= document
.getElementById('noVNC_setting_port').value
;
1059 var path
= document
.getElementById('noVNC_setting_path').value
;
1061 if (typeof password
=== 'undefined') {
1062 password
= WebUtil
.getConfigVar('password');
1065 if (password
=== null) {
1066 password
= undefined;
1069 if ((!host
) || (!port
)) {
1070 var msg
= _("Must set host and port");
1072 UI
.showStatus(msg
, 'error');
1076 if (!UI
.initRFB()) return;
1078 UI
.closeAllPanels();
1079 UI
.closeConnectPanel();
1081 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
1082 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
1083 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
1084 UI
.rfb
.set_shared(UI
.getSetting('shared'));
1085 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
1086 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
1088 UI
.rfb
.connect(host
, port
, password
, path
);
1091 disconnect: function() {
1092 UI
.closeAllPanels();
1093 UI
.rfb
.disconnect();
1095 // Disable automatic reconnecting
1096 UI
.inhibit_reconnect
= true;
1098 // Restore the callback used for initial resize
1099 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
1101 // Don't display the connection settings until we're actually disconnected
1104 reconnect: function() {
1105 UI
.reconnect_callback
= null;
1107 // if reconnect has been disabled in the meantime, do nothing.
1108 if (UI
.inhibit_reconnect
) {
1112 UI
.connect(null, UI
.reconnect_password
);
1115 disconnectFinished: function (rfb
, reason
) {
1116 if (typeof reason
!== 'undefined') {
1117 UI
.showStatus(reason
, 'error');
1118 } else if (UI
.getSetting('reconnect', false) === true && !UI
.inhibit_reconnect
) {
1119 document
.getElementById("noVNC_transition_text").textContent
= _("Reconnecting...");
1120 document
.documentElement
.classList
.add("noVNC_reconnecting");
1122 var delay
= parseInt(UI
.getSetting('reconnect_delay'));
1123 UI
.reconnect_callback
= setTimeout(UI
.reconnect
, delay
);
1127 UI
.openControlbar();
1128 UI
.openConnectPanel();
1131 cancelReconnect: function() {
1132 if (UI
.reconnect_callback
!== null) {
1133 clearTimeout(UI
.reconnect_callback
);
1134 UI
.reconnect_callback
= null;
1137 document
.documentElement
.classList
.remove("noVNC_reconnecting");
1138 UI
.openControlbar();
1139 UI
.openConnectPanel();
1148 passwordRequired: function(rfb
, msg
) {
1150 document
.getElementById('noVNC_password_dlg')
1151 .classList
.add('noVNC_open');
1153 setTimeout(function () {
1154 document
.getElementById('noVNC_password_input').focus();
1157 if (typeof msg
=== 'undefined') {
1158 msg
= _("Password is required");
1161 UI
.showStatus(msg
, "warning");
1164 setPassword: function() {
1165 var password
= document
.getElementById('noVNC_password_input').value
;
1166 UI
.rfb
.sendPassword(password
);
1167 UI
.reconnect_password
= password
;
1168 document
.getElementById('noVNC_password_dlg')
1169 .classList
.remove('noVNC_open');
1179 toggleFullscreen: function() {
1180 if (document
.fullscreenElement
|| // alternative standard method
1181 document
.mozFullScreenElement
|| // currently working methods
1182 document
.webkitFullscreenElement
||
1183 document
.msFullscreenElement
) {
1184 if (document
.exitFullscreen
) {
1185 document
.exitFullscreen();
1186 } else if (document
.mozCancelFullScreen
) {
1187 document
.mozCancelFullScreen();
1188 } else if (document
.webkitExitFullscreen
) {
1189 document
.webkitExitFullscreen();
1190 } else if (document
.msExitFullscreen
) {
1191 document
.msExitFullscreen();
1194 if (document
.documentElement
.requestFullscreen
) {
1195 document
.documentElement
.requestFullscreen();
1196 } else if (document
.documentElement
.mozRequestFullScreen
) {
1197 document
.documentElement
.mozRequestFullScreen();
1198 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1199 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1200 } else if (document
.body
.msRequestFullscreen
) {
1201 document
.body
.msRequestFullscreen();
1204 UI
.enableDisableViewClip();
1205 UI
.updateFullscreenButton();
1208 updateFullscreenButton: function() {
1209 if (document
.fullscreenElement
|| // alternative standard method
1210 document
.mozFullScreenElement
|| // currently working methods
1211 document
.webkitFullscreenElement
||
1212 document
.msFullscreenElement
) {
1213 document
.getElementById('noVNC_fullscreen_button')
1214 .classList
.add("noVNC_selected");
1216 document
.getElementById('noVNC_fullscreen_button')
1217 .classList
.remove("noVNC_selected");
1227 // Apply remote resizing or local scaling
1228 applyResizeMode: function() {
1229 if (!UI
.rfb
) return;
1231 var screen
= UI
.screenSize();
1233 if (screen
&& UI
.connected
&& UI
.rfb
.get_display()) {
1235 var display
= UI
.rfb
.get_display();
1236 var resizeMode
= UI
.getSetting('resize');
1238 if (resizeMode
=== 'remote') {
1240 // Request changing the resolution of the remote display to
1241 // the size of the local browser viewport.
1243 // In order to not send multiple requests before the browser-resize
1244 // is finished we wait 0.5 seconds before sending the request.
1245 clearTimeout(UI
.resizeTimeout
);
1246 UI
.resizeTimeout
= setTimeout(function(){
1247 // Request a remote size covering the viewport
1248 if (UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
)) {
1249 Util
.Debug('Requested new desktop size: ' +
1250 screen
.w
+ 'x' + screen
.h
);
1254 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
1255 var downscaleOnly
= resizeMode
=== 'downscale';
1256 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
1258 if (!UI
.rfb
.get_view_only()) {
1259 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
1260 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
1266 // Gets the the size of the available viewport in the browser window
1267 screenSize: function() {
1268 var screen
= document
.getElementById('noVNC_screen');
1270 // Hide the scrollbars until the size is calculated
1271 screen
.style
.overflow
= "hidden";
1273 var pos
= Util
.getPosition(screen
);
1277 screen
.style
.overflow
= "visible";
1279 if (isNaN(w
) || isNaN(h
)) {
1282 return {w
: w
, h
: h
};
1286 // Normally we only apply the current resize mode after a window resize
1287 // event. This means that when a new connection is opened, there is no
1288 // resize mode active.
1289 // We have to wait until the first FBU because this is where the client
1290 // will find the supported encodings of the server. Some calls later in
1291 // the chain is dependant on knowing the server-capabilities.
1292 initialResize: function(rfb
, fbu
) {
1293 UI
.applyResizeMode();
1294 // After doing this once, we remove the callback.
1295 UI
.rfb
.set_onFBUComplete(function() { });
1304 // Set and configure viewport clipping
1305 setViewClip: function(clip
) {
1306 UI
.updateSetting('clip', clip
);
1307 UI
.updateViewClip();
1310 // Update parameters that depend on the clip setting
1311 updateViewClip: function() {
1312 if (!UI
.rfb
) return;
1314 var display
= UI
.rfb
.get_display();
1315 var cur_clip
= display
.get_viewport();
1316 var new_clip
= UI
.getSetting('clip');
1318 if (cur_clip
!== new_clip
) {
1319 display
.set_viewport(new_clip
);
1322 var size
= UI
.screenSize();
1324 if (new_clip
&& size
) {
1325 // When clipping is enabled, the screen is limited to
1326 // the size of the browser window.
1327 display
.viewportChangeSize(size
.w
, size
.h
);
1331 // Handle special cases where clipping is forced on/off or locked
1332 enableDisableViewClip: function() {
1333 var resizeSetting
= document
.getElementById('noVNC_setting_resize');
1336 // Safari auto-hides the scrollbars which makes them
1337 // impossible to use in most cases
1338 UI
.setViewClip(true);
1339 document
.getElementById('noVNC_setting_clip').disabled
= true;
1340 } else if (resizeSetting
.value
=== 'downscale' || resizeSetting
.value
=== 'scale') {
1341 // Disable clipping if we are scaling
1342 UI
.setViewClip(false);
1343 document
.getElementById('noVNC_setting_clip').disabled
= true;
1344 } else if (document
.msFullscreenElement
) {
1345 // The browser is IE and we are in fullscreen mode.
1346 // - We need to force clipping while in fullscreen since
1347 // scrollbars doesn't work.
1348 var msg
= _("Forcing clipping mode since " +
1349 "scrollbars aren't supported " +
1350 "by IE in fullscreen");
1353 UI
.rememberedClipSetting
= UI
.getSetting('clip');
1354 UI
.setViewClip(true);
1355 document
.getElementById('noVNC_setting_clip').disabled
= true;
1356 } else if (document
.body
.msRequestFullscreen
&&
1357 UI
.rememberedClipSetting
!== null) {
1358 // Restore view clip to what it was before fullscreen on IE
1359 UI
.setViewClip(UI
.rememberedClipSetting
);
1360 document
.getElementById('noVNC_setting_clip').disabled
=
1361 UI
.connected
|| Util
.isTouchDevice
;
1363 document
.getElementById('noVNC_setting_clip').disabled
=
1364 UI
.connected
|| Util
.isTouchDevice
;
1365 if (Util
.isTouchDevice
) {
1366 UI
.setViewClip(true);
1377 toggleViewDrag: function() {
1378 if (!UI
.rfb
) return;
1380 var drag
= UI
.rfb
.get_viewportDrag();
1381 UI
.setViewDrag(!drag
);
1384 // Set the view drag mode which moves the viewport on mouse drags
1385 setViewDrag: function(drag
) {
1386 if (!UI
.rfb
) return;
1388 UI
.rfb
.set_viewportDrag(drag
);
1390 UI
.updateViewDrag();
1393 updateViewDrag: function() {
1394 var clipping
= false;
1396 if (!UI
.connected
) return;
1398 // Check if viewport drag is possible. It is only possible
1399 // if the remote display is clipping the client display.
1400 if (UI
.rfb
.get_display().get_viewport() &&
1401 UI
.rfb
.get_display().clippingDisplay()) {
1405 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1408 UI
.rfb
.get_viewportDrag()) {
1409 // The size of the remote display is the same or smaller
1410 // than the client display. Make sure viewport drag isn't
1411 // active when it can't be used.
1412 UI
.rfb
.set_viewportDrag(false);
1415 if (UI
.rfb
.get_viewportDrag()) {
1416 viewDragButton
.classList
.add("noVNC_selected");
1418 viewDragButton
.classList
.remove("noVNC_selected");
1421 // Different behaviour for touch vs non-touch
1422 // The button is disabled instead of hidden on touch devices
1423 if (Util
.isTouchDevice
) {
1424 viewDragButton
.classList
.remove("noVNC_hidden");
1427 viewDragButton
.disabled
= false;
1429 viewDragButton
.disabled
= true;
1432 viewDragButton
.disabled
= false;
1435 viewDragButton
.classList
.remove("noVNC_hidden");
1437 viewDragButton
.classList
.add("noVNC_hidden");
1448 showVirtualKeyboard: function() {
1449 if (!Util
.isTouchDevice
) return;
1451 var input
= document
.getElementById('noVNC_keyboardinput');
1453 if (document
.activeElement
== input
) return;
1458 var l
= input
.value
.length
;
1459 // Move the caret to the end
1460 input
.setSelectionRange(l
, l
);
1461 } catch (err
) {} // setSelectionRange is undefined in Google Chrome
1464 hideVirtualKeyboard: function() {
1465 if (!Util
.isTouchDevice
) return;
1467 var input
= document
.getElementById('noVNC_keyboardinput');
1469 if (document
.activeElement
!= input
) return;
1474 toggleVirtualKeyboard: function () {
1475 if (document
.getElementById('noVNC_keyboard_button')
1476 .classList
.contains("noVNC_selected")) {
1477 UI
.hideVirtualKeyboard();
1479 UI
.showVirtualKeyboard();
1483 onfocusVirtualKeyboard: function(event
) {
1484 document
.getElementById('noVNC_keyboard_button')
1485 .classList
.add("noVNC_selected");
1488 onblurVirtualKeyboard: function(event
) {
1489 document
.getElementById('noVNC_keyboard_button')
1490 .classList
.remove("noVNC_selected");
1493 keepVirtualKeyboard: function(event
) {
1494 var input
= document
.getElementById('noVNC_keyboardinput');
1496 // Only prevent focus change if the virtual keyboard is active
1497 if (document
.activeElement
!= input
) {
1501 // Allow clicking on links
1502 if (event
.target
.tagName
=== "A") {
1506 // And form elements, except standard noVNC buttons
1507 if ((event
.target
.form
!== undefined) &&
1508 !event
.target
.classList
.contains("noVNC_button")) {
1512 event
.preventDefault();
1515 keyboardinputReset: function() {
1516 var kbi
= document
.getElementById('noVNC_keyboardinput');
1517 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1518 UI
.lastKeyboardinput
= kbi
.value
;
1521 // When normal keyboard events are left uncought, use the input events from
1522 // the keyboardinput element instead and generate the corresponding key events.
1523 // This code is required since some browsers on Android are inconsistent in
1524 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1525 keyInput: function(event
) {
1527 if (!UI
.rfb
) return;
1529 var newValue
= event
.target
.value
;
1531 if (!UI
.lastKeyboardinput
) {
1532 UI
.keyboardinputReset();
1534 var oldValue
= UI
.lastKeyboardinput
;
1538 // Try to check caret position since whitespace at the end
1539 // will not be considered by value.length in some browsers
1540 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1542 // selectionStart is undefined in Google Chrome
1543 newLen
= newValue
.length
;
1545 var oldLen
= oldValue
.length
;
1548 var inputs
= newLen
- oldLen
;
1550 backspaces
= -inputs
;
1555 // Compare the old string with the new to account for
1556 // text-corrections or other input that modify existing text
1558 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1559 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1560 inputs
= newLen
- i
;
1561 backspaces
= oldLen
- i
;
1566 // Send the key events
1567 for (i
= 0; i
< backspaces
; i
++) {
1568 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1570 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1571 UI
.rfb
.sendKey(keysyms
.fromUnicode(newValue
.charCodeAt(i
)).keysym
);
1574 // Control the text content length in the keyboardinput element
1575 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1576 UI
.keyboardinputReset();
1577 } else if (newLen
< 1) {
1578 // There always have to be some text in the keyboardinput
1579 // element with which backspace can interact.
1580 UI
.keyboardinputReset();
1581 // This sometimes causes the keyboard to disappear for a second
1582 // but it is required for the android keyboard to recognize that
1583 // text has been added to the field
1584 event
.target
.blur();
1585 // This has to be ran outside of the input handler in order to work
1586 setTimeout(event
.target
.focus
.bind(event
.target
), 0);
1588 UI
.lastKeyboardinput
= newValue
;
1598 openExtraKeys: function() {
1599 UI
.closeAllPanels();
1600 UI
.openControlbar();
1602 document
.getElementById('noVNC_modifiers')
1603 .classList
.add("noVNC_open");
1604 document
.getElementById('noVNC_toggle_extra_keys_button')
1605 .classList
.add("noVNC_selected");
1608 closeExtraKeys: function() {
1609 document
.getElementById('noVNC_modifiers')
1610 .classList
.remove("noVNC_open");
1611 document
.getElementById('noVNC_toggle_extra_keys_button')
1612 .classList
.remove("noVNC_selected");
1615 toggleExtraKeys: function() {
1616 if(document
.getElementById('noVNC_modifiers')
1617 .classList
.contains("noVNC_open")) {
1618 UI
.closeExtraKeys();
1624 sendEsc: function() {
1625 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1628 sendTab: function() {
1629 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1632 toggleCtrl: function() {
1633 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1634 if (btn
.classList
.contains("noVNC_selected")) {
1635 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1636 btn
.classList
.remove("noVNC_selected");
1638 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1639 btn
.classList
.add("noVNC_selected");
1643 toggleAlt: function() {
1644 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1645 if (btn
.classList
.contains("noVNC_selected")) {
1646 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1647 btn
.classList
.remove("noVNC_selected");
1649 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1650 btn
.classList
.add("noVNC_selected");
1654 sendCtrlAltDel: function() {
1655 UI
.rfb
.sendCtrlAltDel();
1664 setMouseButton: function(num
) {
1665 var view_only
= UI
.rfb
.get_view_only();
1666 if (UI
.rfb
&& !view_only
) {
1667 UI
.rfb
.get_mouse().set_touchButton(num
);
1670 var blist
= [0, 1,2,4];
1671 for (var b
= 0; b
< blist
.length
; b
++) {
1672 var button
= document
.getElementById('noVNC_mouse_button' +
1674 if (blist
[b
] === num
&& !view_only
) {
1675 button
.classList
.remove("noVNC_hidden");
1677 button
.classList
.add("noVNC_hidden");
1682 displayBlur: function() {
1683 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1684 UI
.rfb
.get_keyboard().set_focused(false);
1685 UI
.rfb
.get_mouse().set_focused(false);
1689 displayFocus: function() {
1690 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1691 UI
.rfb
.get_keyboard().set_focused(true);
1692 UI
.rfb
.get_mouse().set_focused(true);
1696 updateSessionSize: function(rfb
, width
, height
) {
1697 UI
.updateViewClip();
1698 UI
.updateViewDrag();
1701 updateDesktopName: function(rfb
, name
) {
1702 UI
.desktopName
= name
;
1703 // Display the desktop name in the document title
1704 document
.title
= name
+ " - noVNC";
1707 bell: function(rfb
) {
1708 if (WebUtil
.getConfigVar('bell', 'on') === 'on') {
1709 document
.getElementById('noVNC_bell').play();
1713 //Helper to add options to dropdown.
1714 addOption: function(selectbox
, text
, value
) {
1715 var optn
= document
.createElement("OPTION");
1718 selectbox
.options
.add(optn
);
1727 /* [module] UI.load(); */
1730 /* [module] export default UI; */