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 */
14 import * as Log
from '../core/util/logging.js';
15 import _
, { l10n
} from '../core/util/localization.js'
16 import { isTouchDevice
, browserSupportsCursorURIs as cursorURIsSupported
} from '../core/util/browsers.js';
17 import { setCapture
, getPointerEvent
} from '../core/util/events.js';
18 import KeyTable
from "../core/input/keysym.js";
19 import keysyms
from "../core/input/keysymdef.js";
20 import RFB
from "../core/rfb.js";
21 import Display
from "../core/display.js";
22 import * as WebUtil
from "./webutil.js";
24 // Fallback for all uncought errors
25 window
.addEventListener('error', function(event
) {
29 msg
= document
.getElementById('noVNC_fallback_errormsg');
31 // Only show the initial error
32 if (msg
.hasChildNodes()) {
36 div
= document
.createElement("div");
37 div
.appendChild(document
.createTextNode(event
.message
));
40 div
= document
.createElement("div");
41 div
.className
= 'noVNC_location';
42 text
= event
.filename
+ ":" + event
.lineno
+ ":" + event
.colno
;
43 div
.appendChild(document
.createTextNode(text
));
46 if ((event
.error
!== undefined) &&
47 (event
.error
.stack
!== undefined)) {
48 div
= document
.createElement("div");
49 div
.className
= 'noVNC_stack';
50 div
.appendChild(document
.createTextNode(event
.error
.stack
));
54 document
.getElementById('noVNC_fallback_error')
55 .classList
.add("noVNC_open");
57 document
.write("noVNC encountered an error.");
59 // Don't return true since this would prevent the error
60 // from being printed to the browser console.
71 hideKeyboardTimeout
: null,
72 idleControlbarTimeout
: null,
73 closeControlbarTimeout
: null,
75 controlbarGrabbed
: false,
76 controlbarDrag
: false,
77 controlbarMouseDownClientY
: 0,
78 controlbarMouseDownOffsetY
: 0,
81 rememberedClipSetting
: null,
82 lastKeyboardinput
: null,
83 defaultKeyboardinputLen
: 100,
85 inhibit_reconnect
: true,
86 reconnect_callback
: null,
87 reconnect_password
: null,
89 prime: function(callback
) {
90 if (document
.readyState
=== "interactive" || document
.readyState
=== "complete") {
93 document
.addEventListener('DOMContentLoaded', UI
.load
.bind(UI
, callback
));
97 // Setup rfb object, load settings from browser storage, then call
98 // UI.init to setup the UI/menus
99 load: function(callback
) {
100 WebUtil
.initSettings(UI
.start
, callback
);
103 // Render default UI and initialize settings menu
104 start: function(callback
) {
106 // Setup global variables first
107 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
108 navigator
.userAgent
.indexOf('Chrome') === -1);
115 // Adapt the interface for touch screen devices
117 document
.documentElement
.classList
.add("noVNC_touch");
118 // Remove the address bar
119 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
122 // Restore control bar position
123 if (WebUtil
.readSetting('controlbar_pos') === 'right') {
124 UI
.toggleControlbarSide();
129 // Setup event handlers
130 UI
.addResizeHandlers();
131 UI
.addControlbarHandlers();
132 UI
.addTouchSpecificHandlers();
133 UI
.addExtraKeysHandlers();
135 UI
.addConnectionControlHandlers();
136 UI
.addClipboardHandlers();
137 UI
.addSettingsHandlers();
138 document
.getElementById("noVNC_status")
139 .addEventListener('click', UI
.hideStatus
);
143 // Show the connect panel on first load unless autoconnecting
145 UI
.openConnectPanel();
150 UI
.updateVisualState();
152 document
.getElementById('noVNC_setting_host').focus();
154 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
155 if (autoconnect
=== 'true' || autoconnect
== '1') {
162 if (typeof callback
=== "function") {
167 initFullscreen: function() {
168 // Only show the button if fullscreen is properly supported
169 // * Safari doesn't support alphanumerical input while in fullscreen
171 (document
.documentElement
.requestFullscreen
||
172 document
.documentElement
.mozRequestFullScreen
||
173 document
.documentElement
.webkitRequestFullscreen
||
174 document
.body
.msRequestFullscreen
)) {
175 document
.getElementById('noVNC_fullscreen_button')
176 .classList
.remove("noVNC_hidden");
177 UI
.addFullscreenHandlers();
181 initSettings: function() {
184 // Logging selection dropdown
185 var llevels
= ['error', 'warn', 'info', 'debug'];
186 for (i
= 0; i
< llevels
.length
; i
+= 1) {
187 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
190 // Settings with immediate effects
191 UI
.initSetting('logging', 'warn');
194 // if port == 80 (or 443) then it won't be present and should be
196 var port
= window
.location
.port
;
198 if (window
.location
.protocol
.substring(0,5) == 'https') {
201 else if (window
.location
.protocol
.substring(0,4) == 'http') {
206 /* Populate the controls if defaults are provided in the URL */
207 UI
.initSetting('host', window
.location
.hostname
);
208 UI
.initSetting('port', port
);
209 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
210 UI
.initSetting('true_color', true);
211 UI
.initSetting('cursor', !isTouchDevice
);
212 UI
.initSetting('clip', false);
213 UI
.initSetting('resize', 'off');
214 UI
.initSetting('shared', true);
215 UI
.initSetting('view_only', false);
216 UI
.initSetting('path', 'websockify');
217 UI
.initSetting('repeaterID', '');
218 UI
.initSetting('reconnect', false);
219 UI
.initSetting('reconnect_delay', 5000);
221 UI
.setupSettingLabels();
223 // Adds a link to the label elements on the corresponding input elements
224 setupSettingLabels: function() {
225 var labels
= document
.getElementsByTagName('LABEL');
226 for (var i
= 0; i
< labels
.length
; i
++) {
227 var htmlFor
= labels
[i
].htmlFor
;
229 var elem
= document
.getElementById(htmlFor
);
230 if (elem
) elem
.label
= labels
[i
];
232 // If 'for' isn't set, use the first input element child
233 var children
= labels
[i
].children
;
234 for (var j
= 0; j
< children
.length
; j
++) {
235 if (children
[j
].form
!== undefined) {
236 children
[j
].label
= labels
[i
];
244 initRFB: function() {
246 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
247 'onNotification': UI
.notification
,
248 'onUpdateState': UI
.updateState
,
249 'onDisconnected': UI
.disconnectFinished
,
250 'onPasswordRequired': UI
.passwordRequired
,
251 'onXvpInit': UI
.updateXvpButton
,
252 'onClipboard': UI
.clipboardReceive
,
254 'onFBUComplete': UI
.initialResize
,
255 'onFBResize': UI
.updateSessionSize
,
256 'onDesktopName': UI
.updateDesktopName
});
259 var msg
= "Unable to create RFB client -- " + exc
;
261 UI
.showStatus(msg
, 'error');
272 addResizeHandlers: function() {
273 window
.addEventListener('resize', UI
.applyResizeMode
);
274 window
.addEventListener('resize', UI
.updateViewClip
);
277 addControlbarHandlers: function() {
278 document
.getElementById("noVNC_control_bar")
279 .addEventListener('mousemove', UI
.activateControlbar
);
280 document
.getElementById("noVNC_control_bar")
281 .addEventListener('mouseup', UI
.activateControlbar
);
282 document
.getElementById("noVNC_control_bar")
283 .addEventListener('mousedown', UI
.activateControlbar
);
284 document
.getElementById("noVNC_control_bar")
285 .addEventListener('keypress', UI
.activateControlbar
);
287 document
.getElementById("noVNC_control_bar")
288 .addEventListener('mousedown', UI
.keepControlbar
);
289 document
.getElementById("noVNC_control_bar")
290 .addEventListener('keypress', UI
.keepControlbar
);
292 document
.getElementById("noVNC_view_drag_button")
293 .addEventListener('click', UI
.toggleViewDrag
);
295 document
.getElementById("noVNC_control_bar_handle")
296 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
297 document
.getElementById("noVNC_control_bar_handle")
298 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
299 document
.getElementById("noVNC_control_bar_handle")
300 .addEventListener('mousemove', UI
.dragControlbarHandle
);
301 // resize events aren't available for elements
302 window
.addEventListener('resize', UI
.updateControlbarHandle
);
304 var exps
= document
.getElementsByClassName("noVNC_expander");
305 for (var i
= 0;i
< exps
.length
;i
++) {
306 exps
[i
].addEventListener('click', UI
.toggleExpander
);
310 addTouchSpecificHandlers: function() {
311 document
.getElementById("noVNC_mouse_button0")
312 .addEventListener('click', function () { UI
.setMouseButton(1); });
313 document
.getElementById("noVNC_mouse_button1")
314 .addEventListener('click', function () { UI
.setMouseButton(2); });
315 document
.getElementById("noVNC_mouse_button2")
316 .addEventListener('click', function () { UI
.setMouseButton(4); });
317 document
.getElementById("noVNC_mouse_button4")
318 .addEventListener('click', function () { UI
.setMouseButton(0); });
319 document
.getElementById("noVNC_keyboard_button")
320 .addEventListener('click', UI
.toggleVirtualKeyboard
);
322 document
.getElementById("noVNC_keyboardinput")
323 .addEventListener('input', UI
.keyInput
);
324 document
.getElementById("noVNC_keyboardinput")
325 .addEventListener('focus', UI
.onfocusVirtualKeyboard
);
326 document
.getElementById("noVNC_keyboardinput")
327 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
328 document
.getElementById("noVNC_keyboardinput")
329 .addEventListener('submit', function () { return false; });
331 document
.documentElement
332 .addEventListener('mousedown', UI
.keepVirtualKeyboard
, true);
334 document
.getElementById("noVNC_control_bar")
335 .addEventListener('touchstart', UI
.activateControlbar
);
336 document
.getElementById("noVNC_control_bar")
337 .addEventListener('touchmove', UI
.activateControlbar
);
338 document
.getElementById("noVNC_control_bar")
339 .addEventListener('touchend', UI
.activateControlbar
);
340 document
.getElementById("noVNC_control_bar")
341 .addEventListener('input', UI
.activateControlbar
);
343 document
.getElementById("noVNC_control_bar")
344 .addEventListener('touchstart', UI
.keepControlbar
);
345 document
.getElementById("noVNC_control_bar")
346 .addEventListener('input', UI
.keepControlbar
);
348 document
.getElementById("noVNC_control_bar_handle")
349 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
350 document
.getElementById("noVNC_control_bar_handle")
351 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
352 document
.getElementById("noVNC_control_bar_handle")
353 .addEventListener('touchmove', UI
.dragControlbarHandle
);
355 window
.addEventListener('load', UI
.keyboardinputReset
);
358 addExtraKeysHandlers: function() {
359 document
.getElementById("noVNC_toggle_extra_keys_button")
360 .addEventListener('click', UI
.toggleExtraKeys
);
361 document
.getElementById("noVNC_toggle_ctrl_button")
362 .addEventListener('click', UI
.toggleCtrl
);
363 document
.getElementById("noVNC_toggle_alt_button")
364 .addEventListener('click', UI
.toggleAlt
);
365 document
.getElementById("noVNC_send_tab_button")
366 .addEventListener('click', UI
.sendTab
);
367 document
.getElementById("noVNC_send_esc_button")
368 .addEventListener('click', UI
.sendEsc
);
369 document
.getElementById("noVNC_send_ctrl_alt_del_button")
370 .addEventListener('click', UI
.sendCtrlAltDel
);
373 addXvpHandlers: function() {
374 document
.getElementById("noVNC_xvp_shutdown_button")
375 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
376 document
.getElementById("noVNC_xvp_reboot_button")
377 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
378 document
.getElementById("noVNC_xvp_reset_button")
379 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
380 document
.getElementById("noVNC_xvp_button")
381 .addEventListener('click', UI
.toggleXvpPanel
);
384 addConnectionControlHandlers: function() {
385 document
.getElementById("noVNC_disconnect_button")
386 .addEventListener('click', UI
.disconnect
);
387 document
.getElementById("noVNC_connect_button")
388 .addEventListener('click', UI
.connect
);
389 document
.getElementById("noVNC_cancel_reconnect_button")
390 .addEventListener('click', UI
.cancelReconnect
);
392 document
.getElementById("noVNC_password_button")
393 .addEventListener('click', UI
.setPassword
);
396 addClipboardHandlers: function() {
397 document
.getElementById("noVNC_clipboard_button")
398 .addEventListener('click', UI
.toggleClipboardPanel
);
399 document
.getElementById("noVNC_clipboard_text")
400 .addEventListener('focus', UI
.displayBlur
);
401 document
.getElementById("noVNC_clipboard_text")
402 .addEventListener('blur', UI
.displayFocus
);
403 document
.getElementById("noVNC_clipboard_text")
404 .addEventListener('change', UI
.clipboardSend
);
405 document
.getElementById("noVNC_clipboard_clear_button")
406 .addEventListener('click', UI
.clipboardClear
);
409 // Add a call to save settings when the element changes,
410 // unless the optional parameter changeFunc is used instead.
411 addSettingChangeHandler: function(name
, changeFunc
) {
412 var settingElem
= document
.getElementById("noVNC_setting_" + name
);
413 if (changeFunc
=== undefined) {
414 changeFunc = function () { UI
.saveSetting(name
); };
416 settingElem
.addEventListener('change', changeFunc
);
419 addSettingsHandlers: function() {
420 document
.getElementById("noVNC_settings_button")
421 .addEventListener('click', UI
.toggleSettingsPanel
);
423 UI
.addSettingChangeHandler('encrypt');
424 UI
.addSettingChangeHandler('true_color');
425 UI
.addSettingChangeHandler('cursor');
426 UI
.addSettingChangeHandler('cursor', UI
.updateLocalCursor
);
427 UI
.addSettingChangeHandler('resize');
428 UI
.addSettingChangeHandler('resize', UI
.enableDisableViewClip
);
429 UI
.addSettingChangeHandler('resize', UI
.applyResizeMode
);
430 UI
.addSettingChangeHandler('clip');
431 UI
.addSettingChangeHandler('clip', UI
.updateViewClip
);
432 UI
.addSettingChangeHandler('shared');
433 UI
.addSettingChangeHandler('view_only');
434 UI
.addSettingChangeHandler('view_only', UI
.updateViewOnly
);
435 UI
.addSettingChangeHandler('host');
436 UI
.addSettingChangeHandler('port');
437 UI
.addSettingChangeHandler('path');
438 UI
.addSettingChangeHandler('repeaterID');
439 UI
.addSettingChangeHandler('logging');
440 UI
.addSettingChangeHandler('logging', UI
.updateLogging
);
441 UI
.addSettingChangeHandler('reconnect');
442 UI
.addSettingChangeHandler('reconnect_delay');
445 addFullscreenHandlers: function() {
446 document
.getElementById("noVNC_fullscreen_button")
447 .addEventListener('click', UI
.toggleFullscreen
);
449 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
450 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
451 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
452 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
461 updateState: function(rfb
, state
, oldstate
) {
464 document
.documentElement
.classList
.remove("noVNC_connecting");
465 document
.documentElement
.classList
.remove("noVNC_connected");
466 document
.documentElement
.classList
.remove("noVNC_disconnecting");
467 document
.documentElement
.classList
.remove("noVNC_reconnecting");
471 document
.getElementById("noVNC_transition_text").textContent
= _("Connecting...");
472 document
.documentElement
.classList
.add("noVNC_connecting");
476 UI
.inhibit_reconnect
= false;
477 document
.documentElement
.classList
.add("noVNC_connected");
478 if (rfb
&& rfb
.get_encrypt()) {
479 msg
= _("Connected (encrypted) to ") + UI
.desktopName
;
481 msg
= _("Connected (unencrypted) to ") + UI
.desktopName
;
485 case 'disconnecting':
486 UI
.connected
= false;
487 document
.getElementById("noVNC_transition_text").textContent
= _("Disconnecting...");
488 document
.documentElement
.classList
.add("noVNC_disconnecting");
491 UI
.showStatus(_("Disconnected"));
494 msg
= "Invalid UI state";
496 UI
.showStatus(msg
, 'error');
500 UI
.updateVisualState();
503 // Disable/enable controls depending on connection state
504 updateVisualState: function() {
505 //Log.Debug(">> updateVisualState");
507 UI
.enableDisableViewClip();
509 if (cursorURIsSupported() && !isTouchDevice
) {
510 UI
.enableSetting('cursor');
512 UI
.disableSetting('cursor');
516 UI
.disableSetting('encrypt');
517 UI
.disableSetting('true_color');
518 UI
.disableSetting('shared');
519 UI
.disableSetting('host');
520 UI
.disableSetting('port');
521 UI
.disableSetting('path');
522 UI
.disableSetting('repeaterID');
524 UI
.setMouseButton(1);
526 // Hide the controlbar after 2 seconds
527 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
529 UI
.enableSetting('encrypt');
530 UI
.enableSetting('true_color');
531 UI
.enableSetting('shared');
532 UI
.enableSetting('host');
533 UI
.enableSetting('port');
534 UI
.enableSetting('path');
535 UI
.enableSetting('repeaterID');
536 UI
.updateXvpButton(0);
540 // Hide input related buttons in view only mode
541 if (UI
.rfb
&& UI
.rfb
.get_view_only()) {
542 document
.getElementById('noVNC_keyboard_button')
543 .classList
.add('noVNC_hidden');
544 document
.getElementById('noVNC_toggle_extra_keys_button')
545 .classList
.add('noVNC_hidden');
547 document
.getElementById('noVNC_keyboard_button')
548 .classList
.remove('noVNC_hidden');
549 document
.getElementById('noVNC_toggle_extra_keys_button')
550 .classList
.remove('noVNC_hidden');
553 // State change disables viewport dragging.
554 // It is enabled (toggled) by direct click on the button
555 UI
.setViewDrag(false);
557 // State change also closes the password dialog
558 document
.getElementById('noVNC_password_dlg')
559 .classList
.remove('noVNC_open');
561 //Log.Debug("<< updateVisualState");
564 showStatus: function(text
, status_type
, time
) {
565 var statusElem
= document
.getElementById('noVNC_status');
567 clearTimeout(UI
.statusTimeout
);
569 if (typeof status_type
=== 'undefined') {
570 status_type
= 'normal';
573 statusElem
.classList
.remove("noVNC_status_normal");
574 statusElem
.classList
.remove("noVNC_status_warn");
575 statusElem
.classList
.remove("noVNC_status_error");
577 switch (status_type
) {
580 statusElem
.classList
.add("noVNC_status_warn");
583 statusElem
.classList
.add("noVNC_status_error");
588 statusElem
.classList
.add("noVNC_status_normal");
592 statusElem
.textContent
= text
;
593 statusElem
.classList
.add("noVNC_open");
595 // If no time was specified, show the status for 1.5 seconds
596 if (typeof time
=== 'undefined') {
600 // Error messages do not timeout
601 if (status_type
!== 'error') {
602 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
606 hideStatus: function() {
607 clearTimeout(UI
.statusTimeout
);
608 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
611 notification: function (rfb
, msg
, level
, options
) {
612 UI
.showStatus(msg
, level
);
615 activateControlbar: function(event
) {
616 clearTimeout(UI
.idleControlbarTimeout
);
617 // We manipulate the anchor instead of the actual control
618 // bar in order to avoid creating new a stacking group
619 document
.getElementById('noVNC_control_bar_anchor')
620 .classList
.remove("noVNC_idle");
621 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
624 idleControlbar: function() {
625 document
.getElementById('noVNC_control_bar_anchor')
626 .classList
.add("noVNC_idle");
629 keepControlbar: function() {
630 clearTimeout(UI
.closeControlbarTimeout
);
633 openControlbar: function() {
634 document
.getElementById('noVNC_control_bar')
635 .classList
.add("noVNC_open");
638 closeControlbar: function() {
640 document
.getElementById('noVNC_control_bar')
641 .classList
.remove("noVNC_open");
644 toggleControlbar: function() {
645 if (document
.getElementById('noVNC_control_bar')
646 .classList
.contains("noVNC_open")) {
647 UI
.closeControlbar();
653 toggleControlbarSide: function () {
654 // Temporarily disable animation to avoid weird movement
655 var bar
= document
.getElementById('noVNC_control_bar');
656 bar
.style
.transitionDuration
= '0s';
657 bar
.addEventListener('transitionend', function () { this.style
.transitionDuration
= ""; });
659 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
660 if (anchor
.classList
.contains("noVNC_right")) {
661 WebUtil
.writeSetting('controlbar_pos', 'left');
662 anchor
.classList
.remove("noVNC_right");
664 WebUtil
.writeSetting('controlbar_pos', 'right');
665 anchor
.classList
.add("noVNC_right");
668 // Consider this a movement of the handle
669 UI
.controlbarDrag
= true;
672 dragControlbarHandle: function (e
) {
673 if (!UI
.controlbarGrabbed
) return;
675 var ptr
= getPointerEvent(e
);
677 var anchor
= document
.getElementById('noVNC_control_bar_anchor');
678 if (ptr
.clientX
< (window
.innerWidth
* 0.1)) {
679 if (anchor
.classList
.contains("noVNC_right")) {
680 UI
.toggleControlbarSide();
682 } else if (ptr
.clientX
> (window
.innerWidth
* 0.9)) {
683 if (!anchor
.classList
.contains("noVNC_right")) {
684 UI
.toggleControlbarSide();
688 if (!UI
.controlbarDrag
) {
689 // The goal is to trigger on a certain physical width, the
690 // devicePixelRatio brings us a bit closer but is not optimal.
691 var dragThreshold
= 10 * (window
.devicePixelRatio
|| 1);
692 var dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
694 if (dragDistance
< dragThreshold
) return;
696 UI
.controlbarDrag
= true;
699 var eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
701 UI
.moveControlbarHandle(eventY
);
706 UI
.activateControlbar();
709 // Move the handle but don't allow any position outside the bounds
710 moveControlbarHandle: function (viewportRelativeY
) {
711 var handle
= document
.getElementById("noVNC_control_bar_handle");
712 var handleHeight
= handle
.getBoundingClientRect().height
;
713 var controlbarBounds
= document
.getElementById("noVNC_control_bar")
714 .getBoundingClientRect();
717 // These heights need to be non-zero for the below logic to work
718 if (handleHeight
=== 0 || controlbarBounds
.height
=== 0) {
722 var newY
= viewportRelativeY
;
724 // Check if the coordinates are outside the control bar
725 if (newY
< controlbarBounds
.top
+ margin
) {
726 // Force coordinates to be below the top of the control bar
727 newY
= controlbarBounds
.top
+ margin
;
729 } else if (newY
> controlbarBounds
.top
+
730 controlbarBounds
.height
- handleHeight
- margin
) {
731 // Force coordinates to be above the bottom of the control bar
732 newY
= controlbarBounds
.top
+
733 controlbarBounds
.height
- handleHeight
- margin
;
736 // Corner case: control bar too small for stable position
737 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
738 newY
= controlbarBounds
.top
+
739 (controlbarBounds
.height
- handleHeight
) / 2;
742 // The transform needs coordinates that are relative to the parent
743 var parentRelativeY
= newY
- controlbarBounds
.top
;
744 handle
.style
.transform
= "translateY(" + parentRelativeY
+ "px)";
747 updateControlbarHandle: function () {
748 // Since the control bar is fixed on the viewport and not the page,
749 // the move function expects coordinates relative the the viewport.
750 var handle
= document
.getElementById("noVNC_control_bar_handle");
751 var handleBounds
= handle
.getBoundingClientRect();
752 UI
.moveControlbarHandle(handleBounds
.top
);
755 controlbarHandleMouseUp: function(e
) {
756 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
758 // mouseup and mousedown on the same place toggles the controlbar
759 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
760 UI
.toggleControlbar();
764 UI
.activateControlbar();
766 UI
.controlbarGrabbed
= false;
769 controlbarHandleMouseDown: function(e
) {
770 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
772 var ptr
= getPointerEvent(e
);
774 var handle
= document
.getElementById("noVNC_control_bar_handle");
775 var bounds
= handle
.getBoundingClientRect();
778 UI
.controlbarGrabbed
= true;
779 UI
.controlbarDrag
= false;
781 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
782 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
786 UI
.activateControlbar();
789 toggleExpander: function(e
) {
790 if (this.classList
.contains("noVNC_open")) {
791 this.classList
.remove("noVNC_open");
793 this.classList
.add("noVNC_open");
803 // Initial page load read/initialization of settings
804 initSetting: function(name
, defVal
) {
805 // Check Query string followed by cookie
806 var val
= WebUtil
.getConfigVar(name
);
808 val
= WebUtil
.readSetting(name
, defVal
);
810 UI
.updateSetting(name
, val
);
814 // Update cookie and form control setting. If value is not set, then
815 // updates from control to current cookie setting.
816 updateSetting: function(name
, value
) {
818 // Save the cookie for this session
819 if (typeof value
!== 'undefined') {
820 WebUtil
.writeSetting(name
, value
);
823 // Update the settings control
824 value
= UI
.getSetting(name
);
826 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
827 if (ctrl
.type
=== 'checkbox') {
828 ctrl
.checked
= value
;
830 } else if (typeof ctrl
.options
!== 'undefined') {
831 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
832 if (ctrl
.options
[i
].value
=== value
) {
833 ctrl
.selectedIndex
= i
;
838 /*Weird IE9 error leads to 'null' appearring
839 in textboxes instead of ''.*/
840 if (value
=== null) {
847 // Save control setting to cookie
848 saveSetting: function(name
) {
849 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
850 if (ctrl
.type
=== 'checkbox') {
852 } else if (typeof ctrl
.options
!== 'undefined') {
853 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
857 WebUtil
.writeSetting(name
, val
);
858 //Log.Debug("Setting saved '" + name + "=" + val + "'");
862 // Read form control compatible setting from cookie
863 getSetting: function(name
) {
864 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
865 var val
= WebUtil
.readSetting(name
);
866 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
867 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
876 // These helpers compensate for the lack of parent-selectors and
877 // previous-sibling-selectors in CSS which are needed when we want to
878 // disable the labels that belong to disabled input elements.
879 disableSetting: function(name
) {
880 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
881 ctrl
.disabled
= true;
882 ctrl
.label
.classList
.add('noVNC_disabled');
885 enableSetting: function(name
) {
886 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
887 ctrl
.disabled
= false;
888 ctrl
.label
.classList
.remove('noVNC_disabled');
897 closeAllPanels: function() {
898 UI
.closeSettingsPanel();
900 UI
.closeClipboardPanel();
910 openSettingsPanel: function() {
914 // Refresh UI elements from saved cookies
915 UI
.updateSetting('encrypt');
916 UI
.updateSetting('true_color');
917 if (cursorURIsSupported()) {
918 UI
.updateSetting('cursor');
920 UI
.updateSetting('cursor', !isTouchDevice
);
921 UI
.disableSetting('cursor');
923 UI
.updateSetting('clip');
924 UI
.updateSetting('resize');
925 UI
.updateSetting('shared');
926 UI
.updateSetting('view_only');
927 UI
.updateSetting('path');
928 UI
.updateSetting('repeaterID');
929 UI
.updateSetting('logging');
930 UI
.updateSetting('reconnect');
931 UI
.updateSetting('reconnect_delay');
933 document
.getElementById('noVNC_settings')
934 .classList
.add("noVNC_open");
935 document
.getElementById('noVNC_settings_button')
936 .classList
.add("noVNC_selected");
939 closeSettingsPanel: function() {
940 document
.getElementById('noVNC_settings')
941 .classList
.remove("noVNC_open");
942 document
.getElementById('noVNC_settings_button')
943 .classList
.remove("noVNC_selected");
946 toggleSettingsPanel: function() {
947 if (document
.getElementById('noVNC_settings')
948 .classList
.contains("noVNC_open")) {
949 UI
.closeSettingsPanel();
951 UI
.openSettingsPanel();
961 openXvpPanel: function() {
965 document
.getElementById('noVNC_xvp')
966 .classList
.add("noVNC_open");
967 document
.getElementById('noVNC_xvp_button')
968 .classList
.add("noVNC_selected");
971 closeXvpPanel: function() {
972 document
.getElementById('noVNC_xvp')
973 .classList
.remove("noVNC_open");
974 document
.getElementById('noVNC_xvp_button')
975 .classList
.remove("noVNC_selected");
978 toggleXvpPanel: function() {
979 if (document
.getElementById('noVNC_xvp')
980 .classList
.contains("noVNC_open")) {
987 // Disable/enable XVP button
988 updateXvpButton: function(ver
) {
989 if (ver
>= 1 && !UI
.rfb
.get_view_only()) {
990 document
.getElementById('noVNC_xvp_button')
991 .classList
.remove("noVNC_hidden");
993 document
.getElementById('noVNC_xvp_button')
994 .classList
.add("noVNC_hidden");
995 // Close XVP panel if open
1006 openClipboardPanel: function() {
1007 UI
.closeAllPanels();
1008 UI
.openControlbar();
1010 document
.getElementById('noVNC_clipboard')
1011 .classList
.add("noVNC_open");
1012 document
.getElementById('noVNC_clipboard_button')
1013 .classList
.add("noVNC_selected");
1016 closeClipboardPanel: function() {
1017 document
.getElementById('noVNC_clipboard')
1018 .classList
.remove("noVNC_open");
1019 document
.getElementById('noVNC_clipboard_button')
1020 .classList
.remove("noVNC_selected");
1023 toggleClipboardPanel: function() {
1024 if (document
.getElementById('noVNC_clipboard')
1025 .classList
.contains("noVNC_open")) {
1026 UI
.closeClipboardPanel();
1028 UI
.openClipboardPanel();
1032 clipboardReceive: function(rfb
, text
) {
1033 Log
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
1034 document
.getElementById('noVNC_clipboard_text').value
= text
;
1035 Log
.Debug("<< UI.clipboardReceive");
1038 clipboardClear: function() {
1039 document
.getElementById('noVNC_clipboard_text').value
= "";
1040 UI
.rfb
.clipboardPasteFrom("");
1043 clipboardSend: function() {
1044 var text
= document
.getElementById('noVNC_clipboard_text').value
;
1045 Log
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
1046 UI
.rfb
.clipboardPasteFrom(text
);
1047 Log
.Debug("<< UI.clipboardSend");
1056 openConnectPanel: function() {
1057 document
.getElementById('noVNC_connect_dlg')
1058 .classList
.add("noVNC_open");
1061 closeConnectPanel: function() {
1062 document
.getElementById('noVNC_connect_dlg')
1063 .classList
.remove("noVNC_open");
1066 connect: function(event
, password
) {
1067 var host
= UI
.getSetting('host');
1068 var port
= UI
.getSetting('port');
1069 var path
= UI
.getSetting('path');
1071 if (typeof password
=== 'undefined') {
1072 password
= WebUtil
.getConfigVar('password');
1075 if (password
=== null) {
1076 password
= undefined;
1079 if ((!host
) || (!port
)) {
1080 var msg
= _("Must set host and port");
1082 UI
.showStatus(msg
, 'error');
1086 if (!UI
.initRFB()) return;
1088 UI
.closeAllPanels();
1089 UI
.closeConnectPanel();
1091 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
1092 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
1093 UI
.rfb
.set_shared(UI
.getSetting('shared'));
1094 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
1096 UI
.updateLocalCursor();
1097 UI
.updateViewOnly();
1099 UI
.rfb
.connect(host
, port
, password
, path
);
1102 disconnect: function() {
1103 UI
.closeAllPanels();
1104 UI
.rfb
.disconnect();
1106 // Disable automatic reconnecting
1107 UI
.inhibit_reconnect
= true;
1109 // Restore the callback used for initial resize
1110 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
1112 // Don't display the connection settings until we're actually disconnected
1115 reconnect: function() {
1116 UI
.reconnect_callback
= null;
1118 // if reconnect has been disabled in the meantime, do nothing.
1119 if (UI
.inhibit_reconnect
) {
1123 UI
.connect(null, UI
.reconnect_password
);
1126 disconnectFinished: function (rfb
, reason
) {
1127 if (typeof reason
!== 'undefined') {
1128 UI
.showStatus(reason
, 'error');
1129 } else if (UI
.getSetting('reconnect', false) === true && !UI
.inhibit_reconnect
) {
1130 document
.getElementById("noVNC_transition_text").textContent
= _("Reconnecting...");
1131 document
.documentElement
.classList
.add("noVNC_reconnecting");
1133 var delay
= parseInt(UI
.getSetting('reconnect_delay'));
1134 UI
.reconnect_callback
= setTimeout(UI
.reconnect
, delay
);
1138 UI
.openControlbar();
1139 UI
.openConnectPanel();
1142 cancelReconnect: function() {
1143 if (UI
.reconnect_callback
!== null) {
1144 clearTimeout(UI
.reconnect_callback
);
1145 UI
.reconnect_callback
= null;
1148 document
.documentElement
.classList
.remove("noVNC_reconnecting");
1149 UI
.openControlbar();
1150 UI
.openConnectPanel();
1159 passwordRequired: function(rfb
, msg
) {
1161 document
.getElementById('noVNC_password_dlg')
1162 .classList
.add('noVNC_open');
1164 setTimeout(function () {
1165 document
.getElementById('noVNC_password_input').focus();
1168 if (typeof msg
=== 'undefined') {
1169 msg
= _("Password is required");
1172 UI
.showStatus(msg
, "warning");
1175 setPassword: function(e
) {
1176 var password
= document
.getElementById('noVNC_password_input').value
;
1177 UI
.rfb
.sendPassword(password
);
1178 UI
.reconnect_password
= password
;
1179 document
.getElementById('noVNC_password_dlg')
1180 .classList
.remove('noVNC_open');
1181 // Prevent actually submitting the form
1191 toggleFullscreen: function() {
1192 if (document
.fullscreenElement
|| // alternative standard method
1193 document
.mozFullScreenElement
|| // currently working methods
1194 document
.webkitFullscreenElement
||
1195 document
.msFullscreenElement
) {
1196 if (document
.exitFullscreen
) {
1197 document
.exitFullscreen();
1198 } else if (document
.mozCancelFullScreen
) {
1199 document
.mozCancelFullScreen();
1200 } else if (document
.webkitExitFullscreen
) {
1201 document
.webkitExitFullscreen();
1202 } else if (document
.msExitFullscreen
) {
1203 document
.msExitFullscreen();
1206 if (document
.documentElement
.requestFullscreen
) {
1207 document
.documentElement
.requestFullscreen();
1208 } else if (document
.documentElement
.mozRequestFullScreen
) {
1209 document
.documentElement
.mozRequestFullScreen();
1210 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1211 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1212 } else if (document
.body
.msRequestFullscreen
) {
1213 document
.body
.msRequestFullscreen();
1216 UI
.enableDisableViewClip();
1217 UI
.updateFullscreenButton();
1220 updateFullscreenButton: function() {
1221 if (document
.fullscreenElement
|| // alternative standard method
1222 document
.mozFullScreenElement
|| // currently working methods
1223 document
.webkitFullscreenElement
||
1224 document
.msFullscreenElement
) {
1225 document
.getElementById('noVNC_fullscreen_button')
1226 .classList
.add("noVNC_selected");
1228 document
.getElementById('noVNC_fullscreen_button')
1229 .classList
.remove("noVNC_selected");
1239 // Apply remote resizing or local scaling
1240 applyResizeMode: function() {
1241 if (!UI
.rfb
) return;
1243 var screen
= UI
.screenSize();
1245 if (screen
&& UI
.connected
&& UI
.rfb
.get_display()) {
1247 var display
= UI
.rfb
.get_display();
1248 var resizeMode
= UI
.getSetting('resize');
1249 display
.set_scale(1);
1251 // Make sure the viewport is adjusted first
1252 UI
.updateViewClip();
1254 if (resizeMode
=== 'remote') {
1256 // Request changing the resolution of the remote display to
1257 // the size of the local browser viewport.
1259 // In order to not send multiple requests before the browser-resize
1260 // is finished we wait 0.5 seconds before sending the request.
1261 clearTimeout(UI
.resizeTimeout
);
1262 UI
.resizeTimeout
= setTimeout(function(){
1263 // Request a remote size covering the viewport
1264 if (UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
)) {
1265 Log
.Debug('Requested new desktop size: ' +
1266 screen
.w
+ 'x' + screen
.h
);
1270 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
1271 var downscaleOnly
= resizeMode
=== 'downscale';
1272 display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
1278 // Gets the the size of the available viewport in the browser window
1279 screenSize: function() {
1280 var screen
= document
.getElementById('noVNC_screen');
1281 return {w
: screen
.offsetWidth
, h
: screen
.offsetHeight
};
1284 // Normally we only apply the current resize mode after a window resize
1285 // event. This means that when a new connection is opened, there is no
1286 // resize mode active.
1287 // We have to wait until the first FBU because this is where the client
1288 // will find the supported encodings of the server. Some calls later in
1289 // the chain is dependant on knowing the server-capabilities.
1290 initialResize: function(rfb
, fbu
) {
1291 UI
.applyResizeMode();
1292 // After doing this once, we remove the callback.
1293 UI
.rfb
.set_onFBUComplete(function() { });
1302 // Set and configure viewport clipping
1303 setViewClip: function(clip
) {
1304 UI
.updateSetting('clip', clip
);
1305 UI
.updateViewClip();
1308 // Update parameters that depend on the clip setting
1309 updateViewClip: function() {
1310 if (!UI
.rfb
) return;
1312 var display
= UI
.rfb
.get_display();
1313 var cur_clip
= display
.get_viewport();
1314 var new_clip
= UI
.getSetting('clip');
1316 var resizeSetting
= UI
.getSetting('resize');
1317 if (resizeSetting
=== 'downscale' || resizeSetting
=== 'scale') {
1318 // Disable clipping if we are scaling
1320 } else if (isTouchDevice
) {
1321 // Touch devices usually have shit scrollbars
1325 if (cur_clip
!== new_clip
) {
1326 display
.set_viewport(new_clip
);
1329 var size
= UI
.screenSize();
1331 if (new_clip
&& size
) {
1332 // When clipping is enabled, the screen is limited to
1333 // the size of the browser window.
1334 display
.viewportChangeSize(size
.w
, size
.h
);
1338 // Changing the viewport may change the state of
1339 // the dragging button
1340 UI
.updateViewDrag();
1343 // Handle special cases where clipping is forced on/off or locked
1344 enableDisableViewClip: function() {
1345 var resizeSetting
= UI
.getSetting('resize');
1346 // Disable clipping if we are scaling, connected or on touch
1347 if (resizeSetting
=== 'downscale' || resizeSetting
=== 'scale' ||
1349 UI
.disableSetting('clip');
1351 UI
.enableSetting('clip');
1361 toggleViewDrag: function() {
1362 if (!UI
.rfb
) return;
1364 var drag
= UI
.rfb
.get_viewportDrag();
1365 UI
.setViewDrag(!drag
);
1368 // Set the view drag mode which moves the viewport on mouse drags
1369 setViewDrag: function(drag
) {
1370 if (!UI
.rfb
) return;
1372 UI
.rfb
.set_viewportDrag(drag
);
1374 UI
.updateViewDrag();
1377 updateViewDrag: function() {
1378 var clipping
= false;
1380 if (!UI
.connected
) return;
1382 // Check if viewport drag is possible. It is only possible
1383 // if the remote display is clipping the client display.
1384 if (UI
.rfb
.get_display().get_viewport() &&
1385 UI
.rfb
.get_display().clippingDisplay()) {
1389 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1392 UI
.rfb
.get_viewportDrag()) {
1393 // The size of the remote display is the same or smaller
1394 // than the client display. Make sure viewport drag isn't
1395 // active when it can't be used.
1396 UI
.rfb
.set_viewportDrag(false);
1399 if (UI
.rfb
.get_viewportDrag()) {
1400 viewDragButton
.classList
.add("noVNC_selected");
1402 viewDragButton
.classList
.remove("noVNC_selected");
1405 // Different behaviour for touch vs non-touch
1406 // The button is disabled instead of hidden on touch devices
1407 if (isTouchDevice
) {
1408 viewDragButton
.classList
.remove("noVNC_hidden");
1411 viewDragButton
.disabled
= false;
1413 viewDragButton
.disabled
= true;
1416 viewDragButton
.disabled
= false;
1419 viewDragButton
.classList
.remove("noVNC_hidden");
1421 viewDragButton
.classList
.add("noVNC_hidden");
1432 showVirtualKeyboard: function() {
1433 if (!isTouchDevice
) return;
1435 var input
= document
.getElementById('noVNC_keyboardinput');
1437 if (document
.activeElement
== input
) return;
1442 var l
= input
.value
.length
;
1443 // Move the caret to the end
1444 input
.setSelectionRange(l
, l
);
1445 } catch (err
) {} // setSelectionRange is undefined in Google Chrome
1448 hideVirtualKeyboard: function() {
1449 if (!isTouchDevice
) return;
1451 var input
= document
.getElementById('noVNC_keyboardinput');
1453 if (document
.activeElement
!= input
) return;
1458 toggleVirtualKeyboard: function () {
1459 if (document
.getElementById('noVNC_keyboard_button')
1460 .classList
.contains("noVNC_selected")) {
1461 UI
.hideVirtualKeyboard();
1463 UI
.showVirtualKeyboard();
1467 onfocusVirtualKeyboard: function(event
) {
1468 document
.getElementById('noVNC_keyboard_button')
1469 .classList
.add("noVNC_selected");
1472 onblurVirtualKeyboard: function(event
) {
1473 document
.getElementById('noVNC_keyboard_button')
1474 .classList
.remove("noVNC_selected");
1477 keepVirtualKeyboard: function(event
) {
1478 var input
= document
.getElementById('noVNC_keyboardinput');
1480 // Only prevent focus change if the virtual keyboard is active
1481 if (document
.activeElement
!= input
) {
1485 // Only allow focus to move to other elements that need
1486 // focus to function properly
1487 if (event
.target
.form
!== undefined) {
1488 switch (event
.target
.type
) {
1497 case 'select-multiple':
1502 event
.preventDefault();
1505 keyboardinputReset: function() {
1506 var kbi
= document
.getElementById('noVNC_keyboardinput');
1507 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1508 UI
.lastKeyboardinput
= kbi
.value
;
1511 // When normal keyboard events are left uncought, use the input events from
1512 // the keyboardinput element instead and generate the corresponding key events.
1513 // This code is required since some browsers on Android are inconsistent in
1514 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1515 keyInput: function(event
) {
1517 if (!UI
.rfb
) return;
1519 var newValue
= event
.target
.value
;
1521 if (!UI
.lastKeyboardinput
) {
1522 UI
.keyboardinputReset();
1524 var oldValue
= UI
.lastKeyboardinput
;
1528 // Try to check caret position since whitespace at the end
1529 // will not be considered by value.length in some browsers
1530 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1532 // selectionStart is undefined in Google Chrome
1533 newLen
= newValue
.length
;
1535 var oldLen
= oldValue
.length
;
1538 var inputs
= newLen
- oldLen
;
1540 backspaces
= -inputs
;
1545 // Compare the old string with the new to account for
1546 // text-corrections or other input that modify existing text
1548 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1549 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1550 inputs
= newLen
- i
;
1551 backspaces
= oldLen
- i
;
1556 // Send the key events
1557 for (i
= 0; i
< backspaces
; i
++) {
1558 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1560 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1561 UI
.rfb
.sendKey(keysyms
.fromUnicode(newValue
.charCodeAt(i
)).keysym
);
1564 // Control the text content length in the keyboardinput element
1565 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1566 UI
.keyboardinputReset();
1567 } else if (newLen
< 1) {
1568 // There always have to be some text in the keyboardinput
1569 // element with which backspace can interact.
1570 UI
.keyboardinputReset();
1571 // This sometimes causes the keyboard to disappear for a second
1572 // but it is required for the android keyboard to recognize that
1573 // text has been added to the field
1574 event
.target
.blur();
1575 // This has to be ran outside of the input handler in order to work
1576 setTimeout(event
.target
.focus
.bind(event
.target
), 0);
1578 UI
.lastKeyboardinput
= newValue
;
1588 openExtraKeys: function() {
1589 UI
.closeAllPanels();
1590 UI
.openControlbar();
1592 document
.getElementById('noVNC_modifiers')
1593 .classList
.add("noVNC_open");
1594 document
.getElementById('noVNC_toggle_extra_keys_button')
1595 .classList
.add("noVNC_selected");
1598 closeExtraKeys: function() {
1599 document
.getElementById('noVNC_modifiers')
1600 .classList
.remove("noVNC_open");
1601 document
.getElementById('noVNC_toggle_extra_keys_button')
1602 .classList
.remove("noVNC_selected");
1605 toggleExtraKeys: function() {
1606 if(document
.getElementById('noVNC_modifiers')
1607 .classList
.contains("noVNC_open")) {
1608 UI
.closeExtraKeys();
1614 sendEsc: function() {
1615 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1618 sendTab: function() {
1619 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1622 toggleCtrl: function() {
1623 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1624 if (btn
.classList
.contains("noVNC_selected")) {
1625 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1626 btn
.classList
.remove("noVNC_selected");
1628 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1629 btn
.classList
.add("noVNC_selected");
1633 toggleAlt: function() {
1634 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1635 if (btn
.classList
.contains("noVNC_selected")) {
1636 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1637 btn
.classList
.remove("noVNC_selected");
1639 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1640 btn
.classList
.add("noVNC_selected");
1644 sendCtrlAltDel: function() {
1645 UI
.rfb
.sendCtrlAltDel();
1654 setMouseButton: function(num
) {
1655 var view_only
= UI
.rfb
.get_view_only();
1656 if (UI
.rfb
&& !view_only
) {
1657 UI
.rfb
.get_mouse().set_touchButton(num
);
1660 var blist
= [0, 1,2,4];
1661 for (var b
= 0; b
< blist
.length
; b
++) {
1662 var button
= document
.getElementById('noVNC_mouse_button' +
1664 if (blist
[b
] === num
&& !view_only
) {
1665 button
.classList
.remove("noVNC_hidden");
1667 button
.classList
.add("noVNC_hidden");
1672 displayBlur: function() {
1673 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1674 UI
.rfb
.get_keyboard().set_focused(false);
1675 UI
.rfb
.get_mouse().set_focused(false);
1679 displayFocus: function() {
1680 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1681 UI
.rfb
.get_keyboard().set_focused(true);
1682 UI
.rfb
.get_mouse().set_focused(true);
1686 updateLocalCursor: function() {
1687 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
1690 updateViewOnly: function() {
1691 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
1694 updateLogging: function() {
1695 WebUtil
.init_logging(UI
.getSetting('logging'));
1698 updateSessionSize: function(rfb
, width
, height
) {
1699 UI
.updateViewClip();
1703 fixScrollbars: function() {
1704 // This is a hack because Chrome screws up the calculation
1705 // for when scrollbars are needed. So to fix it we temporarily
1706 // toggle them off and on.
1707 var screen
= document
.getElementById('noVNC_screen');
1708 screen
.style
.overflow
= 'hidden';
1709 // Force Chrome to recalculate the layout by asking for
1710 // an element's dimensions
1711 screen
.getBoundingClientRect();
1712 screen
.style
.overflow
= null;
1715 updateDesktopName: function(rfb
, name
) {
1716 UI
.desktopName
= name
;
1717 // Display the desktop name in the document title
1718 document
.title
= name
+ " - noVNC";
1721 bell: function(rfb
) {
1722 if (WebUtil
.getConfigVar('bell', 'on') === 'on') {
1723 document
.getElementById('noVNC_bell').play();
1727 //Helper to add options to dropdown.
1728 addOption: function(selectbox
, text
, value
) {
1729 var optn
= document
.createElement("OPTION");
1732 selectbox
.options
.add(optn
);
1741 // Set up translations
1742 var LINGUAS
= ["de", "el", "nl", "sv"];
1743 l10n
.setup(LINGUAS
);
1744 if (l10n
.language
!== "en" && l10n
.dictionary
=== undefined) {
1745 WebUtil
.fetchJSON('app/locale/' + l10n
.language
+ '.json', function (translations
) {
1746 l10n
.dictionary
= translations
;
1748 // wait for translations to load before loading the UI