2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2019 The noVNC Authors
4 * Licensed under MPL 2.0 (see LICENSE.txt)
6 * See README.md for usage and integration instructions.
9 import * as Log
from '../core/util/logging.js';
10 import _
, { l10n
} from './localization.js';
11 import { isTouchDevice
, isSafari
, hasScrollbarGutter
, dragThreshold
}
12 from '../core/util/browser.js';
13 import { setCapture
, getPointerEvent
} from '../core/util/events.js';
14 import KeyTable
from "../core/input/keysym.js";
15 import keysyms
from "../core/input/keysymdef.js";
16 import Keyboard
from "../core/input/keyboard.js";
17 import RFB
from "../core/rfb.js";
18 import * as WebUtil
from "./webutil.js";
20 const PAGE_TITLE
= "noVNC";
28 hideKeyboardTimeout
: null,
29 idleControlbarTimeout
: null,
30 closeControlbarTimeout
: null,
32 controlbarGrabbed
: false,
33 controlbarDrag
: false,
34 controlbarMouseDownClientY
: 0,
35 controlbarMouseDownOffsetY
: 0,
37 lastKeyboardinput
: null,
38 defaultKeyboardinputLen
: 100,
40 inhibit_reconnect
: true,
41 reconnect_callback
: null,
42 reconnect_password
: null,
45 return WebUtil
.initSettings().then(() => {
46 if (document
.readyState
=== "interactive" || document
.readyState
=== "complete") {
50 return new Promise((resolve
, reject
) => {
51 document
.addEventListener('DOMContentLoaded', () => UI
.start().then(resolve
).catch(reject
));
56 // Render default UI and initialize settings menu
64 WebUtil
.fetchJSON('./package.json')
65 .then((packageInfo
) => {
66 Array
.from(document
.getElementsByClassName('noVNC_version')).forEach(el
=> el
.innerText
= packageInfo
.version
);
69 Log
.Error("Couldn't fetch package.json: " + err
);
70 Array
.from(document
.getElementsByClassName('noVNC_version_wrapper'))
71 .concat(Array
.from(document
.getElementsByClassName('noVNC_version_separator')))
72 .forEach(el
=> el
.style
.display
= 'none');
75 // Adapt the interface for touch screen devices
77 document
.documentElement
.classList
.add("noVNC_touch");
78 // Remove the address bar
79 setTimeout(() => window
.scrollTo(0, 1), 100);
82 // Restore control bar position
83 if (WebUtil
.readSetting('controlbar_pos') === 'right') {
84 UI
.toggleControlbarSide();
89 // Setup event handlers
90 UI
.addControlbarHandlers();
91 UI
.addTouchSpecificHandlers();
92 UI
.addExtraKeysHandlers();
93 UI
.addMachineHandlers();
94 UI
.addConnectionControlHandlers();
95 UI
.addClipboardHandlers();
96 UI
.addSettingsHandlers();
97 document
.getElementById("noVNC_status")
98 .addEventListener('click', UI
.hideStatus
);
100 // Bootstrap fallback input handler
101 UI
.keyboardinputReset();
105 UI
.updateVisualState('init');
107 document
.documentElement
.classList
.remove("noVNC_loading");
109 let autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
110 if (autoconnect
=== 'true' || autoconnect
== '1') {
115 // Show the connect panel on first load unless autoconnecting
116 UI
.openConnectPanel();
119 return Promise
.resolve(UI
.rfb
);
123 // Only show the button if fullscreen is properly supported
124 // * Safari doesn't support alphanumerical input while in fullscreen
126 (document
.documentElement
.requestFullscreen
||
127 document
.documentElement
.mozRequestFullScreen
||
128 document
.documentElement
.webkitRequestFullscreen
||
129 document
.body
.msRequestFullscreen
)) {
130 document
.getElementById('noVNC_fullscreen_button')
131 .classList
.remove("noVNC_hidden");
132 UI
.addFullscreenHandlers();
137 // Logging selection dropdown
138 const llevels
= ['error', 'warn', 'info', 'debug'];
139 for (let i
= 0; i
< llevels
.length
; i
+= 1) {
140 UI
.addOption(document
.getElementById('noVNC_setting_logging'), llevels
[i
], llevels
[i
]);
143 // Settings with immediate effects
144 UI
.initSetting('logging', 'warn');
147 // if port == 80 (or 443) then it won't be present and should be
149 let port
= window
.location
.port
;
151 if (window
.location
.protocol
.substring(0, 5) == 'https') {
153 } else if (window
.location
.protocol
.substring(0, 4) == 'http') {
158 /* Populate the controls if defaults are provided in the URL */
159 UI
.initSetting('host', window
.location
.hostname
);
160 UI
.initSetting('port', port
);
161 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
162 UI
.initSetting('view_clip', false);
163 UI
.initSetting('resize', 'off');
164 UI
.initSetting('quality', 6);
165 UI
.initSetting('shared', true);
166 UI
.initSetting('view_only', false);
167 UI
.initSetting('show_dot', false);
168 UI
.initSetting('path', 'websockify');
169 UI
.initSetting('repeaterID', '');
170 UI
.initSetting('reconnect', false);
171 UI
.initSetting('reconnect_delay', 5000);
173 UI
.setupSettingLabels();
175 // Adds a link to the label elements on the corresponding input elements
176 setupSettingLabels() {
177 const labels
= document
.getElementsByTagName('LABEL');
178 for (let i
= 0; i
< labels
.length
; i
++) {
179 const htmlFor
= labels
[i
].htmlFor
;
181 const elem
= document
.getElementById(htmlFor
);
182 if (elem
) elem
.label
= labels
[i
];
184 // If 'for' isn't set, use the first input element child
185 const children
= labels
[i
].children
;
186 for (let j
= 0; j
< children
.length
; j
++) {
187 if (children
[j
].form
!== undefined) {
188 children
[j
].label
= labels
[i
];
202 addControlbarHandlers() {
203 document
.getElementById("noVNC_control_bar")
204 .addEventListener('mousemove', UI
.activateControlbar
);
205 document
.getElementById("noVNC_control_bar")
206 .addEventListener('mouseup', UI
.activateControlbar
);
207 document
.getElementById("noVNC_control_bar")
208 .addEventListener('mousedown', UI
.activateControlbar
);
209 document
.getElementById("noVNC_control_bar")
210 .addEventListener('keydown', UI
.activateControlbar
);
212 document
.getElementById("noVNC_control_bar")
213 .addEventListener('mousedown', UI
.keepControlbar
);
214 document
.getElementById("noVNC_control_bar")
215 .addEventListener('keydown', UI
.keepControlbar
);
217 document
.getElementById("noVNC_view_drag_button")
218 .addEventListener('click', UI
.toggleViewDrag
);
220 document
.getElementById("noVNC_control_bar_handle")
221 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
222 document
.getElementById("noVNC_control_bar_handle")
223 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
224 document
.getElementById("noVNC_control_bar_handle")
225 .addEventListener('mousemove', UI
.dragControlbarHandle
);
226 // resize events aren't available for elements
227 window
.addEventListener('resize', UI
.updateControlbarHandle
);
229 const exps
= document
.getElementsByClassName("noVNC_expander");
230 for (let i
= 0;i
< exps
.length
;i
++) {
231 exps
[i
].addEventListener('click', UI
.toggleExpander
);
235 addTouchSpecificHandlers() {
236 document
.getElementById("noVNC_mouse_button0")
237 .addEventListener('click', () => UI
.setMouseButton(1));
238 document
.getElementById("noVNC_mouse_button1")
239 .addEventListener('click', () => UI
.setMouseButton(2));
240 document
.getElementById("noVNC_mouse_button2")
241 .addEventListener('click', () => UI
.setMouseButton(4));
242 document
.getElementById("noVNC_mouse_button4")
243 .addEventListener('click', () => UI
.setMouseButton(0));
244 document
.getElementById("noVNC_keyboard_button")
245 .addEventListener('click', UI
.toggleVirtualKeyboard
);
247 UI
.touchKeyboard
= new Keyboard(document
.getElementById('noVNC_keyboardinput'));
248 UI
.touchKeyboard
.onkeyevent
= UI
.keyEvent
;
249 UI
.touchKeyboard
.grab();
250 document
.getElementById("noVNC_keyboardinput")
251 .addEventListener('input', UI
.keyInput
);
252 document
.getElementById("noVNC_keyboardinput")
253 .addEventListener('focus', UI
.onfocusVirtualKeyboard
);
254 document
.getElementById("noVNC_keyboardinput")
255 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
256 document
.getElementById("noVNC_keyboardinput")
257 .addEventListener('submit', () => false);
259 document
.documentElement
260 .addEventListener('mousedown', UI
.keepVirtualKeyboard
, true);
262 document
.getElementById("noVNC_control_bar")
263 .addEventListener('touchstart', UI
.activateControlbar
);
264 document
.getElementById("noVNC_control_bar")
265 .addEventListener('touchmove', UI
.activateControlbar
);
266 document
.getElementById("noVNC_control_bar")
267 .addEventListener('touchend', UI
.activateControlbar
);
268 document
.getElementById("noVNC_control_bar")
269 .addEventListener('input', UI
.activateControlbar
);
271 document
.getElementById("noVNC_control_bar")
272 .addEventListener('touchstart', UI
.keepControlbar
);
273 document
.getElementById("noVNC_control_bar")
274 .addEventListener('input', UI
.keepControlbar
);
276 document
.getElementById("noVNC_control_bar_handle")
277 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
278 document
.getElementById("noVNC_control_bar_handle")
279 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
280 document
.getElementById("noVNC_control_bar_handle")
281 .addEventListener('touchmove', UI
.dragControlbarHandle
);
284 addExtraKeysHandlers() {
285 document
.getElementById("noVNC_toggle_extra_keys_button")
286 .addEventListener('click', UI
.toggleExtraKeys
);
287 document
.getElementById("noVNC_toggle_ctrl_button")
288 .addEventListener('click', UI
.toggleCtrl
);
289 document
.getElementById("noVNC_toggle_windows_button")
290 .addEventListener('click', UI
.toggleWindows
);
291 document
.getElementById("noVNC_toggle_alt_button")
292 .addEventListener('click', UI
.toggleAlt
);
293 document
.getElementById("noVNC_send_tab_button")
294 .addEventListener('click', UI
.sendTab
);
295 document
.getElementById("noVNC_send_esc_button")
296 .addEventListener('click', UI
.sendEsc
);
297 document
.getElementById("noVNC_send_ctrl_alt_del_button")
298 .addEventListener('click', UI
.sendCtrlAltDel
);
301 addMachineHandlers() {
302 document
.getElementById("noVNC_shutdown_button")
303 .addEventListener('click', () => UI
.rfb
.machineShutdown());
304 document
.getElementById("noVNC_reboot_button")
305 .addEventListener('click', () => UI
.rfb
.machineReboot());
306 document
.getElementById("noVNC_reset_button")
307 .addEventListener('click', () => UI
.rfb
.machineReset());
308 document
.getElementById("noVNC_power_button")
309 .addEventListener('click', UI
.togglePowerPanel
);
312 addConnectionControlHandlers() {
313 document
.getElementById("noVNC_disconnect_button")
314 .addEventListener('click', UI
.disconnect
);
315 document
.getElementById("noVNC_connect_button")
316 .addEventListener('click', UI
.connect
);
317 document
.getElementById("noVNC_cancel_reconnect_button")
318 .addEventListener('click', UI
.cancelReconnect
);
320 document
.getElementById("noVNC_credentials_button")
321 .addEventListener('click', UI
.setCredentials
);
324 addClipboardHandlers() {
325 document
.getElementById("noVNC_clipboard_button")
326 .addEventListener('click', UI
.toggleClipboardPanel
);
327 document
.getElementById("noVNC_clipboard_text")
328 .addEventListener('change', UI
.clipboardSend
);
329 document
.getElementById("noVNC_clipboard_clear_button")
330 .addEventListener('click', UI
.clipboardClear
);
333 // Add a call to save settings when the element changes,
334 // unless the optional parameter changeFunc is used instead.
335 addSettingChangeHandler(name
, changeFunc
) {
336 const settingElem
= document
.getElementById("noVNC_setting_" + name
);
337 if (changeFunc
=== undefined) {
338 changeFunc
= () => UI
.saveSetting(name
);
340 settingElem
.addEventListener('change', changeFunc
);
343 addSettingsHandlers() {
344 document
.getElementById("noVNC_settings_button")
345 .addEventListener('click', UI
.toggleSettingsPanel
);
347 UI
.addSettingChangeHandler('encrypt');
348 UI
.addSettingChangeHandler('resize');
349 UI
.addSettingChangeHandler('resize', UI
.applyResizeMode
);
350 UI
.addSettingChangeHandler('resize', UI
.updateViewClip
);
351 UI
.addSettingChangeHandler('quality');
352 UI
.addSettingChangeHandler('quality', UI
.updateQuality
);
353 UI
.addSettingChangeHandler('view_clip');
354 UI
.addSettingChangeHandler('view_clip', UI
.updateViewClip
);
355 UI
.addSettingChangeHandler('shared');
356 UI
.addSettingChangeHandler('view_only');
357 UI
.addSettingChangeHandler('view_only', UI
.updateViewOnly
);
358 UI
.addSettingChangeHandler('show_dot');
359 UI
.addSettingChangeHandler('show_dot', UI
.updateShowDotCursor
);
360 UI
.addSettingChangeHandler('host');
361 UI
.addSettingChangeHandler('port');
362 UI
.addSettingChangeHandler('path');
363 UI
.addSettingChangeHandler('repeaterID');
364 UI
.addSettingChangeHandler('logging');
365 UI
.addSettingChangeHandler('logging', UI
.updateLogging
);
366 UI
.addSettingChangeHandler('reconnect');
367 UI
.addSettingChangeHandler('reconnect_delay');
370 addFullscreenHandlers() {
371 document
.getElementById("noVNC_fullscreen_button")
372 .addEventListener('click', UI
.toggleFullscreen
);
374 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
375 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
376 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
377 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
386 // Disable/enable controls depending on connection state
387 updateVisualState(state
) {
389 document
.documentElement
.classList
.remove("noVNC_connecting");
390 document
.documentElement
.classList
.remove("noVNC_connected");
391 document
.documentElement
.classList
.remove("noVNC_disconnecting");
392 document
.documentElement
.classList
.remove("noVNC_reconnecting");
394 const transition_elem
= document
.getElementById("noVNC_transition_text");
399 transition_elem
.textContent
= _("Connecting...");
400 document
.documentElement
.classList
.add("noVNC_connecting");
403 document
.documentElement
.classList
.add("noVNC_connected");
405 case 'disconnecting':
406 transition_elem
.textContent
= _("Disconnecting...");
407 document
.documentElement
.classList
.add("noVNC_disconnecting");
412 transition_elem
.textContent
= _("Reconnecting...");
413 document
.documentElement
.classList
.add("noVNC_reconnecting");
416 Log
.Error("Invalid visual state: " + state
);
417 UI
.showStatus(_("Internal error"), 'error');
424 UI
.disableSetting('encrypt');
425 UI
.disableSetting('shared');
426 UI
.disableSetting('host');
427 UI
.disableSetting('port');
428 UI
.disableSetting('path');
429 UI
.disableSetting('repeaterID');
430 UI
.setMouseButton(1);
432 // Hide the controlbar after 2 seconds
433 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
435 UI
.enableSetting('encrypt');
436 UI
.enableSetting('shared');
437 UI
.enableSetting('host');
438 UI
.enableSetting('port');
439 UI
.enableSetting('path');
440 UI
.enableSetting('repeaterID');
441 UI
.updatePowerButton();
445 // State change closes the password dialog
446 document
.getElementById('noVNC_credentials_dlg')
447 .classList
.remove('noVNC_open');
450 showStatus(text
, status_type
, time
) {
451 const statusElem
= document
.getElementById('noVNC_status');
453 if (typeof status_type
=== 'undefined') {
454 status_type
= 'normal';
457 // Don't overwrite more severe visible statuses and never
458 // errors. Only shows the first error.
459 if (statusElem
.classList
.contains("noVNC_open")) {
460 if (statusElem
.classList
.contains("noVNC_status_error")) {
463 if (statusElem
.classList
.contains("noVNC_status_warn") &&
464 status_type
=== 'normal') {
469 clearTimeout(UI
.statusTimeout
);
471 switch (status_type
) {
473 statusElem
.classList
.remove("noVNC_status_warn");
474 statusElem
.classList
.remove("noVNC_status_normal");
475 statusElem
.classList
.add("noVNC_status_error");
479 statusElem
.classList
.remove("noVNC_status_error");
480 statusElem
.classList
.remove("noVNC_status_normal");
481 statusElem
.classList
.add("noVNC_status_warn");
486 statusElem
.classList
.remove("noVNC_status_error");
487 statusElem
.classList
.remove("noVNC_status_warn");
488 statusElem
.classList
.add("noVNC_status_normal");
492 statusElem
.textContent
= text
;
493 statusElem
.classList
.add("noVNC_open");
495 // If no time was specified, show the status for 1.5 seconds
496 if (typeof time
=== 'undefined') {
500 // Error messages do not timeout
501 if (status_type
!== 'error') {
502 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
507 clearTimeout(UI
.statusTimeout
);
508 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
511 activateControlbar(event
) {
512 clearTimeout(UI
.idleControlbarTimeout
);
513 // We manipulate the anchor instead of the actual control
514 // bar in order to avoid creating new a stacking group
515 document
.getElementById('noVNC_control_bar_anchor')
516 .classList
.remove("noVNC_idle");
517 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
521 // Don't fade if a child of the control bar has focus
522 if (document
.getElementById('noVNC_control_bar')
523 .contains(document
.activeElement
) && document
.hasFocus()) {
524 UI
.activateControlbar();
528 document
.getElementById('noVNC_control_bar_anchor')
529 .classList
.add("noVNC_idle");
533 clearTimeout(UI
.closeControlbarTimeout
);
537 document
.getElementById('noVNC_control_bar')
538 .classList
.add("noVNC_open");
543 document
.getElementById('noVNC_control_bar')
544 .classList
.remove("noVNC_open");
549 if (document
.getElementById('noVNC_control_bar')
550 .classList
.contains("noVNC_open")) {
551 UI
.closeControlbar();
557 toggleControlbarSide() {
558 // Temporarily disable animation, if bar is displayed, to avoid weird
559 // movement. The transitionend-event will not fire when display=none.
560 const bar
= document
.getElementById('noVNC_control_bar');
561 const barDisplayStyle
= window
.getComputedStyle(bar
).display
;
562 if (barDisplayStyle
!== 'none') {
563 bar
.style
.transitionDuration
= '0s';
564 bar
.addEventListener('transitionend', () => bar
.style
.transitionDuration
= '');
567 const anchor
= document
.getElementById('noVNC_control_bar_anchor');
568 if (anchor
.classList
.contains("noVNC_right")) {
569 WebUtil
.writeSetting('controlbar_pos', 'left');
570 anchor
.classList
.remove("noVNC_right");
572 WebUtil
.writeSetting('controlbar_pos', 'right');
573 anchor
.classList
.add("noVNC_right");
576 // Consider this a movement of the handle
577 UI
.controlbarDrag
= true;
580 showControlbarHint(show
) {
581 const hint
= document
.getElementById('noVNC_control_bar_hint');
583 hint
.classList
.add("noVNC_active");
585 hint
.classList
.remove("noVNC_active");
589 dragControlbarHandle(e
) {
590 if (!UI
.controlbarGrabbed
) return;
592 const ptr
= getPointerEvent(e
);
594 const anchor
= document
.getElementById('noVNC_control_bar_anchor');
595 if (ptr
.clientX
< (window
.innerWidth
* 0.1)) {
596 if (anchor
.classList
.contains("noVNC_right")) {
597 UI
.toggleControlbarSide();
599 } else if (ptr
.clientX
> (window
.innerWidth
* 0.9)) {
600 if (!anchor
.classList
.contains("noVNC_right")) {
601 UI
.toggleControlbarSide();
605 if (!UI
.controlbarDrag
) {
606 const dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
608 if (dragDistance
< dragThreshold
) return;
610 UI
.controlbarDrag
= true;
613 const eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
615 UI
.moveControlbarHandle(eventY
);
620 UI
.activateControlbar();
623 // Move the handle but don't allow any position outside the bounds
624 moveControlbarHandle(viewportRelativeY
) {
625 const handle
= document
.getElementById("noVNC_control_bar_handle");
626 const handleHeight
= handle
.getBoundingClientRect().height
;
627 const controlbarBounds
= document
.getElementById("noVNC_control_bar")
628 .getBoundingClientRect();
631 // These heights need to be non-zero for the below logic to work
632 if (handleHeight
=== 0 || controlbarBounds
.height
=== 0) {
636 let newY
= viewportRelativeY
;
638 // Check if the coordinates are outside the control bar
639 if (newY
< controlbarBounds
.top
+ margin
) {
640 // Force coordinates to be below the top of the control bar
641 newY
= controlbarBounds
.top
+ margin
;
643 } else if (newY
> controlbarBounds
.top
+
644 controlbarBounds
.height
- handleHeight
- margin
) {
645 // Force coordinates to be above the bottom of the control bar
646 newY
= controlbarBounds
.top
+
647 controlbarBounds
.height
- handleHeight
- margin
;
650 // Corner case: control bar too small for stable position
651 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
652 newY
= controlbarBounds
.top
+
653 (controlbarBounds
.height
- handleHeight
) / 2;
656 // The transform needs coordinates that are relative to the parent
657 const parentRelativeY
= newY
- controlbarBounds
.top
;
658 handle
.style
.transform
= "translateY(" + parentRelativeY
+ "px)";
661 updateControlbarHandle() {
662 // Since the control bar is fixed on the viewport and not the page,
663 // the move function expects coordinates relative the the viewport.
664 const handle
= document
.getElementById("noVNC_control_bar_handle");
665 const handleBounds
= handle
.getBoundingClientRect();
666 UI
.moveControlbarHandle(handleBounds
.top
);
669 controlbarHandleMouseUp(e
) {
670 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
672 // mouseup and mousedown on the same place toggles the controlbar
673 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
674 UI
.toggleControlbar();
678 UI
.activateControlbar();
680 UI
.controlbarGrabbed
= false;
681 UI
.showControlbarHint(false);
684 controlbarHandleMouseDown(e
) {
685 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
687 const ptr
= getPointerEvent(e
);
689 const handle
= document
.getElementById("noVNC_control_bar_handle");
690 const bounds
= handle
.getBoundingClientRect();
692 // Touch events have implicit capture
693 if (e
.type
=== "mousedown") {
697 UI
.controlbarGrabbed
= true;
698 UI
.controlbarDrag
= false;
700 UI
.showControlbarHint(true);
702 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
703 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
707 UI
.activateControlbar();
711 if (this.classList
.contains("noVNC_open")) {
712 this.classList
.remove("noVNC_open");
714 this.classList
.add("noVNC_open");
724 // Initial page load read/initialization of settings
725 initSetting(name
, defVal
) {
726 // Check Query string followed by cookie
727 let val
= WebUtil
.getConfigVar(name
);
729 val
= WebUtil
.readSetting(name
, defVal
);
731 WebUtil
.setSetting(name
, val
);
732 UI
.updateSetting(name
);
736 // Set the new value, update and disable form control setting
737 forceSetting(name
, val
) {
738 WebUtil
.setSetting(name
, val
);
739 UI
.updateSetting(name
);
740 UI
.disableSetting(name
);
743 // Update cookie and form control setting. If value is not set, then
744 // updates from control to current cookie setting.
745 updateSetting(name
) {
747 // Update the settings control
748 let value
= UI
.getSetting(name
);
750 const ctrl
= document
.getElementById('noVNC_setting_' + name
);
751 if (ctrl
.type
=== 'checkbox') {
752 ctrl
.checked
= value
;
754 } else if (typeof ctrl
.options
!== 'undefined') {
755 for (let i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
756 if (ctrl
.options
[i
].value
=== value
) {
757 ctrl
.selectedIndex
= i
;
762 /*Weird IE9 error leads to 'null' appearring
763 in textboxes instead of ''.*/
764 if (value
=== null) {
771 // Save control setting to cookie
773 const ctrl
= document
.getElementById('noVNC_setting_' + name
);
775 if (ctrl
.type
=== 'checkbox') {
777 } else if (typeof ctrl
.options
!== 'undefined') {
778 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
782 WebUtil
.writeSetting(name
, val
);
783 //Log.Debug("Setting saved '" + name + "=" + val + "'");
787 // Read form control compatible setting from cookie
789 const ctrl
= document
.getElementById('noVNC_setting_' + name
);
790 let val
= WebUtil
.readSetting(name
);
791 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
792 if (val
.toString().toLowerCase() in {'0': 1, 'no': 1, 'false': 1}) {
801 // These helpers compensate for the lack of parent-selectors and
802 // previous-sibling-selectors in CSS which are needed when we want to
803 // disable the labels that belong to disabled input elements.
804 disableSetting(name
) {
805 const ctrl
= document
.getElementById('noVNC_setting_' + name
);
806 ctrl
.disabled
= true;
807 ctrl
.label
.classList
.add('noVNC_disabled');
810 enableSetting(name
) {
811 const ctrl
= document
.getElementById('noVNC_setting_' + name
);
812 ctrl
.disabled
= false;
813 ctrl
.label
.classList
.remove('noVNC_disabled');
823 UI
.closeSettingsPanel();
824 UI
.closePowerPanel();
825 UI
.closeClipboardPanel();
835 openSettingsPanel() {
839 // Refresh UI elements from saved cookies
840 UI
.updateSetting('encrypt');
841 UI
.updateSetting('view_clip');
842 UI
.updateSetting('resize');
843 UI
.updateSetting('quality');
844 UI
.updateSetting('shared');
845 UI
.updateSetting('view_only');
846 UI
.updateSetting('path');
847 UI
.updateSetting('repeaterID');
848 UI
.updateSetting('logging');
849 UI
.updateSetting('reconnect');
850 UI
.updateSetting('reconnect_delay');
852 document
.getElementById('noVNC_settings')
853 .classList
.add("noVNC_open");
854 document
.getElementById('noVNC_settings_button')
855 .classList
.add("noVNC_selected");
858 closeSettingsPanel() {
859 document
.getElementById('noVNC_settings')
860 .classList
.remove("noVNC_open");
861 document
.getElementById('noVNC_settings_button')
862 .classList
.remove("noVNC_selected");
865 toggleSettingsPanel() {
866 if (document
.getElementById('noVNC_settings')
867 .classList
.contains("noVNC_open")) {
868 UI
.closeSettingsPanel();
870 UI
.openSettingsPanel();
884 document
.getElementById('noVNC_power')
885 .classList
.add("noVNC_open");
886 document
.getElementById('noVNC_power_button')
887 .classList
.add("noVNC_selected");
891 document
.getElementById('noVNC_power')
892 .classList
.remove("noVNC_open");
893 document
.getElementById('noVNC_power_button')
894 .classList
.remove("noVNC_selected");
898 if (document
.getElementById('noVNC_power')
899 .classList
.contains("noVNC_open")) {
900 UI
.closePowerPanel();
906 // Disable/enable power button
907 updatePowerButton() {
909 UI
.rfb
.capabilities
.power
&&
911 document
.getElementById('noVNC_power_button')
912 .classList
.remove("noVNC_hidden");
914 document
.getElementById('noVNC_power_button')
915 .classList
.add("noVNC_hidden");
916 // Close power panel if open
917 UI
.closePowerPanel();
927 openClipboardPanel() {
931 document
.getElementById('noVNC_clipboard')
932 .classList
.add("noVNC_open");
933 document
.getElementById('noVNC_clipboard_button')
934 .classList
.add("noVNC_selected");
937 closeClipboardPanel() {
938 document
.getElementById('noVNC_clipboard')
939 .classList
.remove("noVNC_open");
940 document
.getElementById('noVNC_clipboard_button')
941 .classList
.remove("noVNC_selected");
944 toggleClipboardPanel() {
945 if (document
.getElementById('noVNC_clipboard')
946 .classList
.contains("noVNC_open")) {
947 UI
.closeClipboardPanel();
949 UI
.openClipboardPanel();
953 clipboardReceive(e
) {
954 Log
.Debug(">> UI.clipboardReceive: " + e
.detail
.text
.substr(0, 40) + "...");
955 document
.getElementById('noVNC_clipboard_text').value
= e
.detail
.text
;
956 Log
.Debug("<< UI.clipboardReceive");
960 document
.getElementById('noVNC_clipboard_text').value
= "";
961 UI
.rfb
.clipboardPasteFrom("");
965 const text
= document
.getElementById('noVNC_clipboard_text').value
;
966 Log
.Debug(">> UI.clipboardSend: " + text
.substr(0, 40) + "...");
967 UI
.rfb
.clipboardPasteFrom(text
);
968 Log
.Debug("<< UI.clipboardSend");
978 document
.getElementById('noVNC_connect_dlg')
979 .classList
.add("noVNC_open");
982 closeConnectPanel() {
983 document
.getElementById('noVNC_connect_dlg')
984 .classList
.remove("noVNC_open");
987 connect(event
, password
) {
989 // Ignore when rfb already exists
990 if (typeof UI
.rfb
!== 'undefined') {
994 const host
= UI
.getSetting('host');
995 const port
= UI
.getSetting('port');
996 const path
= UI
.getSetting('path');
998 if (typeof password
=== 'undefined') {
999 password
= WebUtil
.getConfigVar('password');
1000 UI
.reconnect_password
= password
;
1003 if (password
=== null) {
1004 password
= undefined;
1010 Log
.Error("Can't connect when host is: " + host
);
1011 UI
.showStatus(_("Must set host"), 'error');
1015 UI
.closeAllPanels();
1016 UI
.closeConnectPanel();
1018 UI
.updateVisualState('connecting');
1022 url
= UI
.getSetting('encrypt') ? 'wss' : 'ws';
1024 url
+= '://' + host
;
1030 UI
.rfb
= new RFB(document
.getElementById('noVNC_container'), url
,
1031 { shared
: UI
.getSetting('shared'),
1032 repeaterID
: UI
.getSetting('repeaterID'),
1033 credentials
: { password
: password
} });
1034 UI
.rfb
.addEventListener("connect", UI
.connectFinished
);
1035 UI
.rfb
.addEventListener("disconnect", UI
.disconnectFinished
);
1036 UI
.rfb
.addEventListener("credentialsrequired", UI
.credentials
);
1037 UI
.rfb
.addEventListener("securityfailure", UI
.securityFailed
);
1038 UI
.rfb
.addEventListener("capabilities", UI
.updatePowerButton
);
1039 UI
.rfb
.addEventListener("clipboard", UI
.clipboardReceive
);
1040 UI
.rfb
.addEventListener("bell", UI
.bell
);
1041 UI
.rfb
.addEventListener("desktopname", UI
.updateDesktopName
);
1042 UI
.rfb
.clipViewport
= UI
.getSetting('view_clip');
1043 UI
.rfb
.scaleViewport
= UI
.getSetting('resize') === 'scale';
1044 UI
.rfb
.resizeSession
= UI
.getSetting('resize') === 'remote';
1045 UI
.rfb
.qualityLevel
= parseInt(UI
.getSetting('quality'));
1046 UI
.rfb
.showDotCursor
= UI
.getSetting('show_dot');
1048 UI
.updateViewOnly(); // requires UI.rfb
1052 UI
.closeAllPanels();
1053 UI
.rfb
.disconnect();
1055 UI
.connected
= false;
1057 // Disable automatic reconnecting
1058 UI
.inhibit_reconnect
= true;
1060 UI
.updateVisualState('disconnecting');
1062 // Don't display the connection settings until we're actually disconnected
1066 UI
.reconnect_callback
= null;
1068 // if reconnect has been disabled in the meantime, do nothing.
1069 if (UI
.inhibit_reconnect
) {
1073 UI
.connect(null, UI
.reconnect_password
);
1077 if (UI
.reconnect_callback
!== null) {
1078 clearTimeout(UI
.reconnect_callback
);
1079 UI
.reconnect_callback
= null;
1082 UI
.updateVisualState('disconnected');
1084 UI
.openControlbar();
1085 UI
.openConnectPanel();
1088 connectFinished(e
) {
1089 UI
.connected
= true;
1090 UI
.inhibit_reconnect
= false;
1093 if (UI
.getSetting('encrypt')) {
1094 msg
= _("Connected (encrypted) to ") + UI
.desktopName
;
1096 msg
= _("Connected (unencrypted) to ") + UI
.desktopName
;
1099 UI
.updateVisualState('connected');
1101 // Do this last because it can only be used on rendered elements
1105 disconnectFinished(e
) {
1106 const wasConnected
= UI
.connected
;
1108 // This variable is ideally set when disconnection starts, but
1109 // when the disconnection isn't clean or if it is initiated by
1110 // the server, we need to do it here as well since
1111 // UI.disconnect() won't be used in those cases.
1112 UI
.connected
= false;
1116 if (!e
.detail
.clean
) {
1117 UI
.updateVisualState('disconnected');
1119 UI
.showStatus(_("Something went wrong, connection is closed"),
1122 UI
.showStatus(_("Failed to connect to server"), 'error');
1124 } else if (UI
.getSetting('reconnect', false) === true && !UI
.inhibit_reconnect
) {
1125 UI
.updateVisualState('reconnecting');
1127 const delay
= parseInt(UI
.getSetting('reconnect_delay'));
1128 UI
.reconnect_callback
= setTimeout(UI
.reconnect
, delay
);
1131 UI
.updateVisualState('disconnected');
1132 UI
.showStatus(_("Disconnected"), 'normal');
1135 document
.title
= PAGE_TITLE
;
1137 UI
.openControlbar();
1138 UI
.openConnectPanel();
1143 // On security failures we might get a string with a reason
1144 // directly from the server. Note that we can't control if
1145 // this string is translated or not.
1146 if ('reason' in e
.detail
) {
1147 msg
= _("New connection has been rejected with reason: ") +
1150 msg
= _("New connection has been rejected");
1152 UI
.showStatus(msg
, 'error');
1162 // FIXME: handle more types
1164 document
.getElementById("noVNC_username_block").classList
.remove("noVNC_hidden");
1165 document
.getElementById("noVNC_password_block").classList
.remove("noVNC_hidden");
1167 let inputFocus
= "none";
1168 if (e
.detail
.types
.indexOf("username") === -1) {
1169 document
.getElementById("noVNC_username_block").classList
.add("noVNC_hidden");
1171 inputFocus
= inputFocus
=== "none" ? "noVNC_username_input" : inputFocus
;
1173 if (e
.detail
.types
.indexOf("password") === -1) {
1174 document
.getElementById("noVNC_password_block").classList
.add("noVNC_hidden");
1176 inputFocus
= inputFocus
=== "none" ? "noVNC_password_input" : inputFocus
;
1178 document
.getElementById('noVNC_credentials_dlg')
1179 .classList
.add('noVNC_open');
1181 setTimeout(() => document
1182 .getElementById(inputFocus
).focus(), 100);
1184 Log
.Warn("Server asked for credentials");
1185 UI
.showStatus(_("Credentials are required"), "warning");
1189 // Prevent actually submitting the form
1192 let inputElemUsername
= document
.getElementById('noVNC_username_input');
1193 const username
= inputElemUsername
.value
;
1195 let inputElemPassword
= document
.getElementById('noVNC_password_input');
1196 const password
= inputElemPassword
.value
;
1197 // Clear the input after reading the password
1198 inputElemPassword
.value
= "";
1200 UI
.rfb
.sendCredentials({ username
: username
, password
: password
});
1201 UI
.reconnect_password
= password
;
1202 document
.getElementById('noVNC_credentials_dlg')
1203 .classList
.remove('noVNC_open');
1212 toggleFullscreen() {
1213 if (document
.fullscreenElement
|| // alternative standard method
1214 document
.mozFullScreenElement
|| // currently working methods
1215 document
.webkitFullscreenElement
||
1216 document
.msFullscreenElement
) {
1217 if (document
.exitFullscreen
) {
1218 document
.exitFullscreen();
1219 } else if (document
.mozCancelFullScreen
) {
1220 document
.mozCancelFullScreen();
1221 } else if (document
.webkitExitFullscreen
) {
1222 document
.webkitExitFullscreen();
1223 } else if (document
.msExitFullscreen
) {
1224 document
.msExitFullscreen();
1227 if (document
.documentElement
.requestFullscreen
) {
1228 document
.documentElement
.requestFullscreen();
1229 } else if (document
.documentElement
.mozRequestFullScreen
) {
1230 document
.documentElement
.mozRequestFullScreen();
1231 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1232 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1233 } else if (document
.body
.msRequestFullscreen
) {
1234 document
.body
.msRequestFullscreen();
1237 UI
.updateFullscreenButton();
1240 updateFullscreenButton() {
1241 if (document
.fullscreenElement
|| // alternative standard method
1242 document
.mozFullScreenElement
|| // currently working methods
1243 document
.webkitFullscreenElement
||
1244 document
.msFullscreenElement
) {
1245 document
.getElementById('noVNC_fullscreen_button')
1246 .classList
.add("noVNC_selected");
1248 document
.getElementById('noVNC_fullscreen_button')
1249 .classList
.remove("noVNC_selected");
1259 // Apply remote resizing or local scaling
1261 if (!UI
.rfb
) return;
1263 UI
.rfb
.scaleViewport
= UI
.getSetting('resize') === 'scale';
1264 UI
.rfb
.resizeSession
= UI
.getSetting('resize') === 'remote';
1273 // Update viewport clipping property for the connection. The normal
1274 // case is to get the value from the setting. There are special cases
1275 // for when the viewport is scaled or when a touch device is used.
1277 if (!UI
.rfb
) return;
1279 const scaling
= UI
.getSetting('resize') === 'scale';
1282 // Can't be clipping if viewport is scaled to fit
1283 UI
.forceSetting('view_clip', false);
1284 UI
.rfb
.clipViewport
= false;
1285 } else if (!hasScrollbarGutter
) {
1286 // Some platforms have scrollbars that are difficult
1287 // to use in our case, so we always use our own panning
1288 UI
.forceSetting('view_clip', true);
1289 UI
.rfb
.clipViewport
= true;
1291 UI
.enableSetting('view_clip');
1292 UI
.rfb
.clipViewport
= UI
.getSetting('view_clip');
1295 // Changing the viewport may change the state of
1296 // the dragging button
1297 UI
.updateViewDrag();
1307 if (!UI
.rfb
) return;
1309 UI
.rfb
.dragViewport
= !UI
.rfb
.dragViewport
;
1310 UI
.updateViewDrag();
1314 if (!UI
.connected
) return;
1316 const viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1318 if (!UI
.rfb
.clipViewport
&& UI
.rfb
.dragViewport
) {
1319 // We are no longer clipping the viewport. Make sure
1320 // viewport drag isn't active when it can't be used.
1321 UI
.rfb
.dragViewport
= false;
1324 if (UI
.rfb
.dragViewport
) {
1325 viewDragButton
.classList
.add("noVNC_selected");
1327 viewDragButton
.classList
.remove("noVNC_selected");
1330 if (UI
.rfb
.clipViewport
) {
1331 viewDragButton
.classList
.remove("noVNC_hidden");
1333 viewDragButton
.classList
.add("noVNC_hidden");
1344 if (!UI
.rfb
) return;
1346 UI
.rfb
.qualityLevel
= parseInt(UI
.getSetting('quality'));
1355 showVirtualKeyboard() {
1356 if (!isTouchDevice
) return;
1358 const input
= document
.getElementById('noVNC_keyboardinput');
1360 if (document
.activeElement
== input
) return;
1365 const l
= input
.value
.length
;
1366 // Move the caret to the end
1367 input
.setSelectionRange(l
, l
);
1369 // setSelectionRange is undefined in Google Chrome
1373 hideVirtualKeyboard() {
1374 if (!isTouchDevice
) return;
1376 const input
= document
.getElementById('noVNC_keyboardinput');
1378 if (document
.activeElement
!= input
) return;
1383 toggleVirtualKeyboard() {
1384 if (document
.getElementById('noVNC_keyboard_button')
1385 .classList
.contains("noVNC_selected")) {
1386 UI
.hideVirtualKeyboard();
1388 UI
.showVirtualKeyboard();
1392 onfocusVirtualKeyboard(event
) {
1393 document
.getElementById('noVNC_keyboard_button')
1394 .classList
.add("noVNC_selected");
1396 UI
.rfb
.focusOnClick
= false;
1400 onblurVirtualKeyboard(event
) {
1401 document
.getElementById('noVNC_keyboard_button')
1402 .classList
.remove("noVNC_selected");
1404 UI
.rfb
.focusOnClick
= true;
1408 keepVirtualKeyboard(event
) {
1409 const input
= document
.getElementById('noVNC_keyboardinput');
1411 // Only prevent focus change if the virtual keyboard is active
1412 if (document
.activeElement
!= input
) {
1416 // Only allow focus to move to other elements that need
1417 // focus to function properly
1418 if (event
.target
.form
!== undefined) {
1419 switch (event
.target
.type
) {
1428 case 'select-multiple':
1433 event
.preventDefault();
1436 keyboardinputReset() {
1437 const kbi
= document
.getElementById('noVNC_keyboardinput');
1438 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1439 UI
.lastKeyboardinput
= kbi
.value
;
1442 keyEvent(keysym
, code
, down
) {
1443 if (!UI
.rfb
) return;
1445 UI
.rfb
.sendKey(keysym
, code
, down
);
1448 // When normal keyboard events are left uncought, use the input events from
1449 // the keyboardinput element instead and generate the corresponding key events.
1450 // This code is required since some browsers on Android are inconsistent in
1451 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1454 if (!UI
.rfb
) return;
1456 const newValue
= event
.target
.value
;
1458 if (!UI
.lastKeyboardinput
) {
1459 UI
.keyboardinputReset();
1461 const oldValue
= UI
.lastKeyboardinput
;
1465 // Try to check caret position since whitespace at the end
1466 // will not be considered by value.length in some browsers
1467 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1469 // selectionStart is undefined in Google Chrome
1470 newLen
= newValue
.length
;
1472 const oldLen
= oldValue
.length
;
1474 let inputs
= newLen
- oldLen
;
1475 let backspaces
= inputs
< 0 ? -inputs
: 0;
1477 // Compare the old string with the new to account for
1478 // text-corrections or other input that modify existing text
1479 for (let i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1480 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1481 inputs
= newLen
- i
;
1482 backspaces
= oldLen
- i
;
1487 // Send the key events
1488 for (let i
= 0; i
< backspaces
; i
++) {
1489 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
, "Backspace");
1491 for (let i
= newLen
- inputs
; i
< newLen
; i
++) {
1492 UI
.rfb
.sendKey(keysyms
.lookup(newValue
.charCodeAt(i
)));
1495 // Control the text content length in the keyboardinput element
1496 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1497 UI
.keyboardinputReset();
1498 } else if (newLen
< 1) {
1499 // There always have to be some text in the keyboardinput
1500 // element with which backspace can interact.
1501 UI
.keyboardinputReset();
1502 // This sometimes causes the keyboard to disappear for a second
1503 // but it is required for the android keyboard to recognize that
1504 // text has been added to the field
1505 event
.target
.blur();
1506 // This has to be ran outside of the input handler in order to work
1507 setTimeout(event
.target
.focus
.bind(event
.target
), 0);
1509 UI
.lastKeyboardinput
= newValue
;
1520 UI
.closeAllPanels();
1521 UI
.openControlbar();
1523 document
.getElementById('noVNC_modifiers')
1524 .classList
.add("noVNC_open");
1525 document
.getElementById('noVNC_toggle_extra_keys_button')
1526 .classList
.add("noVNC_selected");
1530 document
.getElementById('noVNC_modifiers')
1531 .classList
.remove("noVNC_open");
1532 document
.getElementById('noVNC_toggle_extra_keys_button')
1533 .classList
.remove("noVNC_selected");
1537 if (document
.getElementById('noVNC_modifiers')
1538 .classList
.contains("noVNC_open")) {
1539 UI
.closeExtraKeys();
1546 UI
.sendKey(KeyTable
.XK_Escape
, "Escape");
1550 UI
.sendKey(KeyTable
.XK_Tab
, "Tab");
1554 const btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1555 if (btn
.classList
.contains("noVNC_selected")) {
1556 UI
.sendKey(KeyTable
.XK_Control_L
, "ControlLeft", false);
1557 btn
.classList
.remove("noVNC_selected");
1559 UI
.sendKey(KeyTable
.XK_Control_L
, "ControlLeft", true);
1560 btn
.classList
.add("noVNC_selected");
1565 const btn
= document
.getElementById('noVNC_toggle_windows_button');
1566 if (btn
.classList
.contains("noVNC_selected")) {
1567 UI
.sendKey(KeyTable
.XK_Super_L
, "MetaLeft", false);
1568 btn
.classList
.remove("noVNC_selected");
1570 UI
.sendKey(KeyTable
.XK_Super_L
, "MetaLeft", true);
1571 btn
.classList
.add("noVNC_selected");
1576 const btn
= document
.getElementById('noVNC_toggle_alt_button');
1577 if (btn
.classList
.contains("noVNC_selected")) {
1578 UI
.sendKey(KeyTable
.XK_Alt_L
, "AltLeft", false);
1579 btn
.classList
.remove("noVNC_selected");
1581 UI
.sendKey(KeyTable
.XK_Alt_L
, "AltLeft", true);
1582 btn
.classList
.add("noVNC_selected");
1587 UI
.rfb
.sendCtrlAltDel();
1590 UI
.idleControlbar();
1593 sendKey(keysym
, code
, down
) {
1594 UI
.rfb
.sendKey(keysym
, code
, down
);
1596 // Move focus to the screen in order to be able to use the
1597 // keyboard right after these extra keys.
1598 // The exception is when a virtual keyboard is used, because
1599 // if we focus the screen the virtual keyboard would be closed.
1600 // In this case we focus our special virtual keyboard input
1602 if (document
.getElementById('noVNC_keyboard_button')
1603 .classList
.contains("noVNC_selected")) {
1604 document
.getElementById('noVNC_keyboardinput').focus();
1608 // fade out the controlbar to highlight that
1609 // the focus has been moved to the screen
1610 UI
.idleControlbar();
1619 setMouseButton(num
) {
1620 const view_only
= UI
.rfb
.viewOnly
;
1621 if (UI
.rfb
&& !view_only
) {
1622 UI
.rfb
.touchButton
= num
;
1625 const blist
= [0, 1, 2, 4];
1626 for (let b
= 0; b
< blist
.length
; b
++) {
1627 const button
= document
.getElementById('noVNC_mouse_button' +
1629 if (blist
[b
] === num
&& !view_only
) {
1630 button
.classList
.remove("noVNC_hidden");
1632 button
.classList
.add("noVNC_hidden");
1638 if (!UI
.rfb
) return;
1639 UI
.rfb
.viewOnly
= UI
.getSetting('view_only');
1641 // Hide input related buttons in view only mode
1642 if (UI
.rfb
.viewOnly
) {
1643 document
.getElementById('noVNC_keyboard_button')
1644 .classList
.add('noVNC_hidden');
1645 document
.getElementById('noVNC_toggle_extra_keys_button')
1646 .classList
.add('noVNC_hidden');
1647 document
.getElementById('noVNC_mouse_button' + UI
.rfb
.touchButton
)
1648 .classList
.add('noVNC_hidden');
1649 document
.getElementById('noVNC_clipboard_button')
1650 .classList
.add('noVNC_hidden');
1652 document
.getElementById('noVNC_keyboard_button')
1653 .classList
.remove('noVNC_hidden');
1654 document
.getElementById('noVNC_toggle_extra_keys_button')
1655 .classList
.remove('noVNC_hidden');
1656 document
.getElementById('noVNC_mouse_button' + UI
.rfb
.touchButton
)
1657 .classList
.remove('noVNC_hidden');
1658 document
.getElementById('noVNC_clipboard_button')
1659 .classList
.remove('noVNC_hidden');
1663 updateShowDotCursor() {
1664 if (!UI
.rfb
) return;
1665 UI
.rfb
.showDotCursor
= UI
.getSetting('show_dot');
1669 WebUtil
.init_logging(UI
.getSetting('logging'));
1672 updateDesktopName(e
) {
1673 UI
.desktopName
= e
.detail
.name
;
1674 // Display the desktop name in the document title
1675 document
.title
= e
.detail
.name
+ " - " + PAGE_TITLE
;
1679 if (WebUtil
.getConfigVar('bell', 'on') === 'on') {
1680 const promise
= document
.getElementById('noVNC_bell').play();
1681 // The standards disagree on the return value here
1683 promise
.catch((e
) => {
1684 if (e
.name
=== "NotAllowedError") {
1685 // Ignore when the browser doesn't let us play audio.
1686 // It is common that the browsers require audio to be
1687 // initiated from a user action.
1689 Log
.Error("Unable to play bell: " + e
);
1696 //Helper to add options to dropdown.
1697 addOption(selectbox
, text
, value
) {
1698 const optn
= document
.createElement("OPTION");
1701 selectbox
.options
.add(optn
);
1710 // Set up translations
1711 const LINGUAS
= ["cs", "de", "el", "es", "ja", "ko", "nl", "pl", "ru", "sv", "tr", "zh_CN", "zh_TW"];
1712 l10n
.setup(LINGUAS
);
1713 if (l10n
.language
=== "en" || l10n
.dictionary
!== undefined) {
1716 WebUtil
.fetchJSON('app/locale/' + l10n
.language
+ '.json')
1717 .then((translations
) => { l10n
.dictionary
= translations
; })
1718 .catch(err
=> Log
.Error("Failed to load translations: " + err
))