]> git.proxmox.com Git - mirror_novnc.git/blame_incremental - app/ui.js
projects / mirror_novnc.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
Merge pull request #1165 from juanjoDiaz/throw_errors_instead_of_strings
[mirror_novnc.git] / app / ui.js
... / ...
CommitLineData
1/*
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2018 The noVNC Authors
4 * Licensed under MPL 2.0 (see LICENSE.txt)
5 *
6 * See README.md for usage and integration instructions.
7 */
8
9import * as Log from '../core/util/logging.js';
10import _, { l10n } from './localization.js';
11import { isTouchDevice, dragThreshold } from '../core/util/browser.js';
12import { setCapture, getPointerEvent } from '../core/util/events.js';
13import KeyTable from "../core/input/keysym.js";
14import keysyms from "../core/input/keysymdef.js";
15import Keyboard from "../core/input/keyboard.js";
16import RFB from "../core/rfb.js";
17import * as WebUtil from "./webutil.js";
18
19const UI = {
20
21 connected: false,
22 desktopName: "",
23
24 statusTimeout: null,
25 hideKeyboardTimeout: null,
26 idleControlbarTimeout: null,
27 closeControlbarTimeout: null,
28
29 controlbarGrabbed: false,
30 controlbarDrag: false,
31 controlbarMouseDownClientY: 0,
32 controlbarMouseDownOffsetY: 0,
33
34 isSafari: false,
35 lastKeyboardinput: null,
36 defaultKeyboardinputLen: 100,
37
38 inhibit_reconnect: true,
39 reconnect_callback: null,
40 reconnect_password: null,
41
42 prime(callback) {
43 if (document.readyState === "interactive" || document.readyState === "complete") {
44 UI.load(callback);
45 } else {
46 document.addEventListener('DOMContentLoaded', UI.load.bind(UI, callback));
47 }
48 },
49
50 // Setup rfb object, load settings from browser storage, then call
51 // UI.init to setup the UI/menus
52 load(callback) {
53 WebUtil.initSettings(UI.start, callback);
54 },
55
56 // Render default UI and initialize settings menu
57 start(callback) {
58
59 // Setup global variables first
60 UI.isSafari = (navigator.userAgent.indexOf('Safari') !== -1 &&
61 navigator.userAgent.indexOf('Chrome') === -1);
62
63 UI.initSettings();
64
65 // Translate the DOM
66 l10n.translateDOM();
67
68 // Adapt the interface for touch screen devices
69 if (isTouchDevice) {
70 document.documentElement.classList.add("noVNC_touch");
71 // Remove the address bar
72 setTimeout(() => window.scrollTo(0, 1), 100);
73 }
74
75 // Restore control bar position
76 if (WebUtil.readSetting('controlbar_pos') === 'right') {
77 UI.toggleControlbarSide();
78 }
79
80 UI.initFullscreen();
81
82 // Setup event handlers
83 UI.addControlbarHandlers();
84 UI.addTouchSpecificHandlers();
85 UI.addExtraKeysHandlers();
86 UI.addMachineHandlers();
87 UI.addConnectionControlHandlers();
88 UI.addClipboardHandlers();
89 UI.addSettingsHandlers();
90 document.getElementById("noVNC_status")
91 .addEventListener('click', UI.hideStatus);
92
93 // Bootstrap fallback input handler
94 UI.keyboardinputReset();
95
96 UI.openControlbar();
97
98 UI.updateVisualState('init');
99
100 document.documentElement.classList.remove("noVNC_loading");
101
102 let autoconnect = WebUtil.getConfigVar('autoconnect', false);
103 if (autoconnect === 'true' || autoconnect == '1') {
104 autoconnect = true;
105 UI.connect();
106 } else {
107 autoconnect = false;
108 // Show the connect panel on first load unless autoconnecting
109 UI.openConnectPanel();
110 }
111
112 if (typeof callback === "function") {
113 callback(UI.rfb);
114 }
115 },
116
117 initFullscreen() {
118 // Only show the button if fullscreen is properly supported
119 // * Safari doesn't support alphanumerical input while in fullscreen
120 if (!UI.isSafari &&
121 (document.documentElement.requestFullscreen ||
122 document.documentElement.mozRequestFullScreen ||
123 document.documentElement.webkitRequestFullscreen ||
124 document.body.msRequestFullscreen)) {
125 document.getElementById('noVNC_fullscreen_button')
126 .classList.remove("noVNC_hidden");
127 UI.addFullscreenHandlers();
128 }
129 },
130
131 initSettings() {
132 // Logging selection dropdown
133 const llevels = ['error', 'warn', 'info', 'debug'];
134 for (let i = 0; i < llevels.length; i += 1) {
135 UI.addOption(document.getElementById('noVNC_setting_logging'), llevels[i], llevels[i]);
136 }
137
138 // Settings with immediate effects
139 UI.initSetting('logging', 'warn');
140 UI.updateLogging();
141
142 // if port == 80 (or 443) then it won't be present and should be
143 // set manually
144 let port = window.location.port;
145 if (!port) {
146 if (window.location.protocol.substring(0, 5) == 'https') {
147 port = 443;
148 } else if (window.location.protocol.substring(0, 4) == 'http') {
149 port = 80;
150 }
151 }
152
153 /* Populate the controls if defaults are provided in the URL */
154 UI.initSetting('host', window.location.hostname);
155 UI.initSetting('port', port);
156 UI.initSetting('encrypt', (window.location.protocol === "https:"));
157 UI.initSetting('view_clip', false);
158 UI.initSetting('resize', 'off');
159 UI.initSetting('shared', true);
160 UI.initSetting('view_only', false);
161 UI.initSetting('show_dot', false);
162 UI.initSetting('path', 'websockify');
163 UI.initSetting('repeaterID', '');
164 UI.initSetting('reconnect', false);
165 UI.initSetting('reconnect_delay', 5000);
166
167 UI.setupSettingLabels();
168 },
169 // Adds a link to the label elements on the corresponding input elements
170 setupSettingLabels() {
171 const labels = document.getElementsByTagName('LABEL');
172 for (let i = 0; i < labels.length; i++) {
173 const htmlFor = labels[i].htmlFor;
174 if (htmlFor != '') {
175 const elem = document.getElementById(htmlFor);
176 if (elem) elem.label = labels[i];
177 } else {
178 // If 'for' isn't set, use the first input element child
179 const children = labels[i].children;
180 for (let j = 0; j < children.length; j++) {
181 if (children[j].form !== undefined) {
182 children[j].label = labels[i];
183 break;
184 }
185 }
186 }
187 }
188 },
189
190/* ------^-------
191* /INIT
192* ==============
193* EVENT HANDLERS
194* ------v------*/
195
196 addControlbarHandlers() {
197 document.getElementById("noVNC_control_bar")
198 .addEventListener('mousemove', UI.activateControlbar);
199 document.getElementById("noVNC_control_bar")
200 .addEventListener('mouseup', UI.activateControlbar);
201 document.getElementById("noVNC_control_bar")
202 .addEventListener('mousedown', UI.activateControlbar);
203 document.getElementById("noVNC_control_bar")
204 .addEventListener('keydown', UI.activateControlbar);
205
206 document.getElementById("noVNC_control_bar")
207 .addEventListener('mousedown', UI.keepControlbar);
208 document.getElementById("noVNC_control_bar")
209 .addEventListener('keydown', UI.keepControlbar);
210
211 document.getElementById("noVNC_view_drag_button")
212 .addEventListener('click', UI.toggleViewDrag);
213
214 document.getElementById("noVNC_control_bar_handle")
215 .addEventListener('mousedown', UI.controlbarHandleMouseDown);
216 document.getElementById("noVNC_control_bar_handle")
217 .addEventListener('mouseup', UI.controlbarHandleMouseUp);
218 document.getElementById("noVNC_control_bar_handle")
219 .addEventListener('mousemove', UI.dragControlbarHandle);
220 // resize events aren't available for elements
221 window.addEventListener('resize', UI.updateControlbarHandle);
222
223 const exps = document.getElementsByClassName("noVNC_expander");
224 for (let i = 0;i < exps.length;i++) {
225 exps[i].addEventListener('click', UI.toggleExpander);
226 }
227 },
228
229 addTouchSpecificHandlers() {
230 document.getElementById("noVNC_mouse_button0")
231 .addEventListener('click', () => UI.setMouseButton(1));
232 document.getElementById("noVNC_mouse_button1")
233 .addEventListener('click', () => UI.setMouseButton(2));
234 document.getElementById("noVNC_mouse_button2")
235 .addEventListener('click', () => UI.setMouseButton(4));
236 document.getElementById("noVNC_mouse_button4")
237 .addEventListener('click', () => UI.setMouseButton(0));
238 document.getElementById("noVNC_keyboard_button")
239 .addEventListener('click', UI.toggleVirtualKeyboard);
240
241 UI.touchKeyboard = new Keyboard(document.getElementById('noVNC_keyboardinput'));
242 UI.touchKeyboard.onkeyevent = UI.keyEvent;
243 UI.touchKeyboard.grab();
244 document.getElementById("noVNC_keyboardinput")
245 .addEventListener('input', UI.keyInput);
246 document.getElementById("noVNC_keyboardinput")
247 .addEventListener('focus', UI.onfocusVirtualKeyboard);
248 document.getElementById("noVNC_keyboardinput")
249 .addEventListener('blur', UI.onblurVirtualKeyboard);
250 document.getElementById("noVNC_keyboardinput")
251 .addEventListener('submit', () => false);
252
253 document.documentElement
254 .addEventListener('mousedown', UI.keepVirtualKeyboard, true);
255
256 document.getElementById("noVNC_control_bar")
257 .addEventListener('touchstart', UI.activateControlbar);
258 document.getElementById("noVNC_control_bar")
259 .addEventListener('touchmove', UI.activateControlbar);
260 document.getElementById("noVNC_control_bar")
261 .addEventListener('touchend', UI.activateControlbar);
262 document.getElementById("noVNC_control_bar")
263 .addEventListener('input', UI.activateControlbar);
264
265 document.getElementById("noVNC_control_bar")
266 .addEventListener('touchstart', UI.keepControlbar);
267 document.getElementById("noVNC_control_bar")
268 .addEventListener('input', UI.keepControlbar);
269
270 document.getElementById("noVNC_control_bar_handle")
271 .addEventListener('touchstart', UI.controlbarHandleMouseDown);
272 document.getElementById("noVNC_control_bar_handle")
273 .addEventListener('touchend', UI.controlbarHandleMouseUp);
274 document.getElementById("noVNC_control_bar_handle")
275 .addEventListener('touchmove', UI.dragControlbarHandle);
276 },
277
278 addExtraKeysHandlers() {
279 document.getElementById("noVNC_toggle_extra_keys_button")
280 .addEventListener('click', UI.toggleExtraKeys);
281 document.getElementById("noVNC_toggle_ctrl_button")
282 .addEventListener('click', UI.toggleCtrl);
283 document.getElementById("noVNC_toggle_alt_button")
284 .addEventListener('click', UI.toggleAlt);
285 document.getElementById("noVNC_send_tab_button")
286 .addEventListener('click', UI.sendTab);
287 document.getElementById("noVNC_send_esc_button")
288 .addEventListener('click', UI.sendEsc);
289 document.getElementById("noVNC_send_ctrl_alt_del_button")
290 .addEventListener('click', UI.sendCtrlAltDel);
291 },
292
293 addMachineHandlers() {
294 document.getElementById("noVNC_shutdown_button")
295 .addEventListener('click', () => UI.rfb.machineShutdown());
296 document.getElementById("noVNC_reboot_button")
297 .addEventListener('click', () => UI.rfb.machineReboot());
298 document.getElementById("noVNC_reset_button")
299 .addEventListener('click', () => UI.rfb.machineReset());
300 document.getElementById("noVNC_power_button")
301 .addEventListener('click', UI.togglePowerPanel);
302 },
303
304 addConnectionControlHandlers() {
305 document.getElementById("noVNC_disconnect_button")
306 .addEventListener('click', UI.disconnect);
307 document.getElementById("noVNC_connect_button")
308 .addEventListener('click', UI.connect);
309 document.getElementById("noVNC_cancel_reconnect_button")
310 .addEventListener('click', UI.cancelReconnect);
311
312 document.getElementById("noVNC_password_button")
313 .addEventListener('click', UI.setPassword);
314 },
315
316 addClipboardHandlers() {
317 document.getElementById("noVNC_clipboard_button")
318 .addEventListener('click', UI.toggleClipboardPanel);
319 document.getElementById("noVNC_clipboard_text")
320 .addEventListener('change', UI.clipboardSend);
321 document.getElementById("noVNC_clipboard_clear_button")
322 .addEventListener('click', UI.clipboardClear);
323 },
324
325 // Add a call to save settings when the element changes,
326 // unless the optional parameter changeFunc is used instead.
327 addSettingChangeHandler(name, changeFunc) {
328 const settingElem = document.getElementById("noVNC_setting_" + name);
329 if (changeFunc === undefined) {
330 changeFunc = () => UI.saveSetting(name);
331 }
332 settingElem.addEventListener('change', changeFunc);
333 },
334
335 addSettingsHandlers() {
336 document.getElementById("noVNC_settings_button")
337 .addEventListener('click', UI.toggleSettingsPanel);
338
339 UI.addSettingChangeHandler('encrypt');
340 UI.addSettingChangeHandler('resize');
341 UI.addSettingChangeHandler('resize', UI.applyResizeMode);
342 UI.addSettingChangeHandler('resize', UI.updateViewClip);
343 UI.addSettingChangeHandler('view_clip');
344 UI.addSettingChangeHandler('view_clip', UI.updateViewClip);
345 UI.addSettingChangeHandler('shared');
346 UI.addSettingChangeHandler('view_only');
347 UI.addSettingChangeHandler('view_only', UI.updateViewOnly);
348 UI.addSettingChangeHandler('show_dot');
349 UI.addSettingChangeHandler('show_dot', UI.updateShowDotCursor);
350 UI.addSettingChangeHandler('host');
351 UI.addSettingChangeHandler('port');
352 UI.addSettingChangeHandler('path');
353 UI.addSettingChangeHandler('repeaterID');
354 UI.addSettingChangeHandler('logging');
355 UI.addSettingChangeHandler('logging', UI.updateLogging);
356 UI.addSettingChangeHandler('reconnect');
357 UI.addSettingChangeHandler('reconnect_delay');
358 },
359
360 addFullscreenHandlers() {
361 document.getElementById("noVNC_fullscreen_button")
362 .addEventListener('click', UI.toggleFullscreen);
363
364 window.addEventListener('fullscreenchange', UI.updateFullscreenButton);
365 window.addEventListener('mozfullscreenchange', UI.updateFullscreenButton);
366 window.addEventListener('webkitfullscreenchange', UI.updateFullscreenButton);
367 window.addEventListener('msfullscreenchange', UI.updateFullscreenButton);
368 },
369
370/* ------^-------
371 * /EVENT HANDLERS
372 * ==============
373 * VISUAL
374 * ------v------*/
375
376 // Disable/enable controls depending on connection state
377 updateVisualState(state) {
378
379 document.documentElement.classList.remove("noVNC_connecting");
380 document.documentElement.classList.remove("noVNC_connected");
381 document.documentElement.classList.remove("noVNC_disconnecting");
382 document.documentElement.classList.remove("noVNC_reconnecting");
383
384 const transition_elem = document.getElementById("noVNC_transition_text");
385 switch (state) {
386 case 'init':
387 break;
388 case 'connecting':
389 transition_elem.textContent = _("Connecting...");
390 document.documentElement.classList.add("noVNC_connecting");
391 break;
392 case 'connected':
393 document.documentElement.classList.add("noVNC_connected");
394 break;
395 case 'disconnecting':
396 transition_elem.textContent = _("Disconnecting...");
397 document.documentElement.classList.add("noVNC_disconnecting");
398 break;
399 case 'disconnected':
400 break;
401 case 'reconnecting':
402 transition_elem.textContent = _("Reconnecting...");
403 document.documentElement.classList.add("noVNC_reconnecting");
404 break;
405 default:
406 Log.Error("Invalid visual state: " + state);
407 UI.showStatus(_("Internal error"), 'error');
408 return;
409 }
410
411 if (UI.connected) {
412 UI.updateViewClip();
413
414 UI.disableSetting('encrypt');
415 UI.disableSetting('shared');
416 UI.disableSetting('host');
417 UI.disableSetting('port');
418 UI.disableSetting('path');
419 UI.disableSetting('repeaterID');
420 UI.setMouseButton(1);
421
422 // Hide the controlbar after 2 seconds
423 UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
424 } else {
425 UI.enableSetting('encrypt');
426 UI.enableSetting('shared');
427 UI.enableSetting('host');
428 UI.enableSetting('port');
429 UI.enableSetting('path');
430 UI.enableSetting('repeaterID');
431 UI.updatePowerButton();
432 UI.keepControlbar();
433 }
434
435 // State change closes the password dialog
436 document.getElementById('noVNC_password_dlg')
437 .classList.remove('noVNC_open');
438 },
439
440 showStatus(text, status_type, time) {
441 const statusElem = document.getElementById('noVNC_status');
442
443 clearTimeout(UI.statusTimeout);
444
445 if (typeof status_type === 'undefined') {
446 status_type = 'normal';
447 }
448
449 // Don't overwrite more severe visible statuses and never
450 // errors. Only shows the first error.
451 let visible_status_type = 'none';
452 if (statusElem.classList.contains("noVNC_open")) {
453 if (statusElem.classList.contains("noVNC_status_error")) {
454 visible_status_type = 'error';
455 } else if (statusElem.classList.contains("noVNC_status_warn")) {
456 visible_status_type = 'warn';
457 } else {
458 visible_status_type = 'normal';
459 }
460 }
461 if (visible_status_type === 'error' ||
462 (visible_status_type === 'warn' && status_type === 'normal')) {
463 return;
464 }
465
466 switch (status_type) {
467 case 'error':
468 statusElem.classList.remove("noVNC_status_warn");
469 statusElem.classList.remove("noVNC_status_normal");
470 statusElem.classList.add("noVNC_status_error");
471 break;
472 case 'warning':
473 case 'warn':
474 statusElem.classList.remove("noVNC_status_error");
475 statusElem.classList.remove("noVNC_status_normal");
476 statusElem.classList.add("noVNC_status_warn");
477 break;
478 case 'normal':
479 case 'info':
480 default:
481 statusElem.classList.remove("noVNC_status_error");
482 statusElem.classList.remove("noVNC_status_warn");
483 statusElem.classList.add("noVNC_status_normal");
484 break;
485 }
486
487 statusElem.textContent = text;
488 statusElem.classList.add("noVNC_open");
489
490 // If no time was specified, show the status for 1.5 seconds
491 if (typeof time === 'undefined') {
492 time = 1500;
493 }
494
495 // Error messages do not timeout
496 if (status_type !== 'error') {
497 UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
498 }
499 },
500
501 hideStatus() {
502 clearTimeout(UI.statusTimeout);
503 document.getElementById('noVNC_status').classList.remove("noVNC_open");
504 },
505
506 activateControlbar(event) {
507 clearTimeout(UI.idleControlbarTimeout);
508 // We manipulate the anchor instead of the actual control
509 // bar in order to avoid creating new a stacking group
510 document.getElementById('noVNC_control_bar_anchor')
511 .classList.remove("noVNC_idle");
512 UI.idleControlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
513 },
514
515 idleControlbar() {
516 document.getElementById('noVNC_control_bar_anchor')
517 .classList.add("noVNC_idle");
518 },
519
520 keepControlbar() {
521 clearTimeout(UI.closeControlbarTimeout);
522 },
523
524 openControlbar() {
525 document.getElementById('noVNC_control_bar')
526 .classList.add("noVNC_open");
527 },
528
529 closeControlbar() {
530 UI.closeAllPanels();
531 document.getElementById('noVNC_control_bar')
532 .classList.remove("noVNC_open");
533 },
534
535 toggleControlbar() {
536 if (document.getElementById('noVNC_control_bar')
537 .classList.contains("noVNC_open")) {
538 UI.closeControlbar();
539 } else {
540 UI.openControlbar();
541 }
542 },
543
544 toggleControlbarSide() {
545 // Temporarily disable animation, if bar is displayed, to avoid weird
546 // movement. The transitionend-event will not fire when display=none.
547 const bar = document.getElementById('noVNC_control_bar');
548 const barDisplayStyle = window.getComputedStyle(bar).display;
549 if (barDisplayStyle !== 'none') {
550 bar.style.transitionDuration = '0s';
551 bar.addEventListener('transitionend', () => bar.style.transitionDuration = '');
552 }
553
554 const anchor = document.getElementById('noVNC_control_bar_anchor');
555 if (anchor.classList.contains("noVNC_right")) {
556 WebUtil.writeSetting('controlbar_pos', 'left');
557 anchor.classList.remove("noVNC_right");
558 } else {
559 WebUtil.writeSetting('controlbar_pos', 'right');
560 anchor.classList.add("noVNC_right");
561 }
562
563 // Consider this a movement of the handle
564 UI.controlbarDrag = true;
565 },
566
567 showControlbarHint(show) {
568 const hint = document.getElementById('noVNC_control_bar_hint');
569 if (show) {
570 hint.classList.add("noVNC_active");
571 } else {
572 hint.classList.remove("noVNC_active");
573 }
574 },
575
576 dragControlbarHandle(e) {
577 if (!UI.controlbarGrabbed) return;
578
579 const ptr = getPointerEvent(e);
580
581 const anchor = document.getElementById('noVNC_control_bar_anchor');
582 if (ptr.clientX < (window.innerWidth * 0.1)) {
583 if (anchor.classList.contains("noVNC_right")) {
584 UI.toggleControlbarSide();
585 }
586 } else if (ptr.clientX > (window.innerWidth * 0.9)) {
587 if (!anchor.classList.contains("noVNC_right")) {
588 UI.toggleControlbarSide();
589 }
590 }
591
592 if (!UI.controlbarDrag) {
593 const dragDistance = Math.abs(ptr.clientY - UI.controlbarMouseDownClientY);
594
595 if (dragDistance < dragThreshold) return;
596
597 UI.controlbarDrag = true;
598 }
599
600 const eventY = ptr.clientY - UI.controlbarMouseDownOffsetY;
601
602 UI.moveControlbarHandle(eventY);
603
604 e.preventDefault();
605 e.stopPropagation();
606 UI.keepControlbar();
607 UI.activateControlbar();
608 },
609
610 // Move the handle but don't allow any position outside the bounds
611 moveControlbarHandle(viewportRelativeY) {
612 const handle = document.getElementById("noVNC_control_bar_handle");
613 const handleHeight = handle.getBoundingClientRect().height;
614 const controlbarBounds = document.getElementById("noVNC_control_bar")
615 .getBoundingClientRect();
616 const margin = 10;
617
618 // These heights need to be non-zero for the below logic to work
619 if (handleHeight === 0 || controlbarBounds.height === 0) {
620 return;
621 }
622
623 let newY = viewportRelativeY;
624
625 // Check if the coordinates are outside the control bar
626 if (newY < controlbarBounds.top + margin) {
627 // Force coordinates to be below the top of the control bar
628 newY = controlbarBounds.top + margin;
629
630 } else if (newY > controlbarBounds.top +
631 controlbarBounds.height - handleHeight - margin) {
632 // Force coordinates to be above the bottom of the control bar
633 newY = controlbarBounds.top +
634 controlbarBounds.height - handleHeight - margin;
635 }
636
637 // Corner case: control bar too small for stable position
638 if (controlbarBounds.height < (handleHeight + margin * 2)) {
639 newY = controlbarBounds.top +
640 (controlbarBounds.height - handleHeight) / 2;
641 }
642
643 // The transform needs coordinates that are relative to the parent
644 const parentRelativeY = newY - controlbarBounds.top;
645 handle.style.transform = "translateY(" + parentRelativeY + "px)";
646 },
647
648 updateControlbarHandle() {
649 // Since the control bar is fixed on the viewport and not the page,
650 // the move function expects coordinates relative the the viewport.
651 const handle = document.getElementById("noVNC_control_bar_handle");
652 const handleBounds = handle.getBoundingClientRect();
653 UI.moveControlbarHandle(handleBounds.top);
654 },
655
656 controlbarHandleMouseUp(e) {
657 if ((e.type == "mouseup") && (e.button != 0)) return;
658
659 // mouseup and mousedown on the same place toggles the controlbar
660 if (UI.controlbarGrabbed && !UI.controlbarDrag) {
661 UI.toggleControlbar();
662 e.preventDefault();
663 e.stopPropagation();
664 UI.keepControlbar();
665 UI.activateControlbar();
666 }
667 UI.controlbarGrabbed = false;
668 UI.showControlbarHint(false);
669 },
670
671 controlbarHandleMouseDown(e) {
672 if ((e.type == "mousedown") && (e.button != 0)) return;
673
674 const ptr = getPointerEvent(e);
675
676 const handle = document.getElementById("noVNC_control_bar_handle");
677 const bounds = handle.getBoundingClientRect();
678
679 // Touch events have implicit capture
680 if (e.type === "mousedown") {
681 setCapture(handle);
682 }
683
684 UI.controlbarGrabbed = true;
685 UI.controlbarDrag = false;
686
687 UI.showControlbarHint(true);
688
689 UI.controlbarMouseDownClientY = ptr.clientY;
690 UI.controlbarMouseDownOffsetY = ptr.clientY - bounds.top;
691 e.preventDefault();
692 e.stopPropagation();
693 UI.keepControlbar();
694 UI.activateControlbar();
695 },
696
697 toggleExpander(e) {
698 if (this.classList.contains("noVNC_open")) {
699 this.classList.remove("noVNC_open");
700 } else {
701 this.classList.add("noVNC_open");
702 }
703 },
704
705/* ------^-------
706 * /VISUAL
707 * ==============
708 * SETTINGS
709 * ------v------*/
710
711 // Initial page load read/initialization of settings
712 initSetting(name, defVal) {
713 // Check Query string followed by cookie
714 let val = WebUtil.getConfigVar(name);
715 if (val === null) {
716 val = WebUtil.readSetting(name, defVal);
717 }
718 WebUtil.setSetting(name, val);
719 UI.updateSetting(name);
720 return val;
721 },
722
723 // Set the new value, update and disable form control setting
724 forceSetting(name, val) {
725 WebUtil.setSetting(name, val);
726 UI.updateSetting(name);
727 UI.disableSetting(name);
728 },
729
730 // Update cookie and form control setting. If value is not set, then
731 // updates from control to current cookie setting.
732 updateSetting(name) {
733
734 // Update the settings control
735 let value = UI.getSetting(name);
736
737 const ctrl = document.getElementById('noVNC_setting_' + name);
738 if (ctrl.type === 'checkbox') {
739 ctrl.checked = value;
740
741 } else if (typeof ctrl.options !== 'undefined') {
742 for (let i = 0; i < ctrl.options.length; i += 1) {
743 if (ctrl.options[i].value === value) {
744 ctrl.selectedIndex = i;
745 break;
746 }
747 }
748 } else {
749 /*Weird IE9 error leads to 'null' appearring
750 in textboxes instead of ''.*/
751 if (value === null) {
752 value = "";
753 }
754 ctrl.value = value;
755 }
756 },
757
758 // Save control setting to cookie
759 saveSetting(name) {
760 const ctrl = document.getElementById('noVNC_setting_' + name);
761 let val;
762 if (ctrl.type === 'checkbox') {
763 val = ctrl.checked;
764 } else if (typeof ctrl.options !== 'undefined') {
765 val = ctrl.options[ctrl.selectedIndex].value;
766 } else {
767 val = ctrl.value;
768 }
769 WebUtil.writeSetting(name, val);
770 //Log.Debug("Setting saved '" + name + "=" + val + "'");
771 return val;
772 },
773
774 // Read form control compatible setting from cookie
775 getSetting(name) {
776 const ctrl = document.getElementById('noVNC_setting_' + name);
777 let val = WebUtil.readSetting(name);
778 if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') {
779 if (val.toString().toLowerCase() in {'0': 1, 'no': 1, 'false': 1}) {
780 val = false;
781 } else {
782 val = true;
783 }
784 }
785 return val;
786 },
787
788 // These helpers compensate for the lack of parent-selectors and
789 // previous-sibling-selectors in CSS which are needed when we want to
790 // disable the labels that belong to disabled input elements.
791 disableSetting(name) {
792 const ctrl = document.getElementById('noVNC_setting_' + name);
793 ctrl.disabled = true;
794 ctrl.label.classList.add('noVNC_disabled');
795 },
796
797 enableSetting(name) {
798 const ctrl = document.getElementById('noVNC_setting_' + name);
799 ctrl.disabled = false;
800 ctrl.label.classList.remove('noVNC_disabled');
801 },
802
803/* ------^-------
804 * /SETTINGS
805 * ==============
806 * PANELS
807 * ------v------*/
808
809 closeAllPanels() {
810 UI.closeSettingsPanel();
811 UI.closePowerPanel();
812 UI.closeClipboardPanel();
813 UI.closeExtraKeys();
814 },
815
816/* ------^-------
817 * /PANELS
818 * ==============
819 * SETTINGS (panel)
820 * ------v------*/
821
822 openSettingsPanel() {
823 UI.closeAllPanels();
824 UI.openControlbar();
825
826 // Refresh UI elements from saved cookies
827 UI.updateSetting('encrypt');
828 UI.updateSetting('view_clip');
829 UI.updateSetting('resize');
830 UI.updateSetting('shared');
831 UI.updateSetting('view_only');
832 UI.updateSetting('path');
833 UI.updateSetting('repeaterID');
834 UI.updateSetting('logging');
835 UI.updateSetting('reconnect');
836 UI.updateSetting('reconnect_delay');
837
838 document.getElementById('noVNC_settings')
839 .classList.add("noVNC_open");
840 document.getElementById('noVNC_settings_button')
841 .classList.add("noVNC_selected");
842 },
843
844 closeSettingsPanel() {
845 document.getElementById('noVNC_settings')
846 .classList.remove("noVNC_open");
847 document.getElementById('noVNC_settings_button')
848 .classList.remove("noVNC_selected");
849 },
850
851 toggleSettingsPanel() {
852 if (document.getElementById('noVNC_settings')
853 .classList.contains("noVNC_open")) {
854 UI.closeSettingsPanel();
855 } else {
856 UI.openSettingsPanel();
857 }
858 },
859
860/* ------^-------
861 * /SETTINGS
862 * ==============
863 * POWER
864 * ------v------*/
865
866 openPowerPanel() {
867 UI.closeAllPanels();
868 UI.openControlbar();
869
870 document.getElementById('noVNC_power')
871 .classList.add("noVNC_open");
872 document.getElementById('noVNC_power_button')
873 .classList.add("noVNC_selected");
874 },
875
876 closePowerPanel() {
877 document.getElementById('noVNC_power')
878 .classList.remove("noVNC_open");
879 document.getElementById('noVNC_power_button')
880 .classList.remove("noVNC_selected");
881 },
882
883 togglePowerPanel() {
884 if (document.getElementById('noVNC_power')
885 .classList.contains("noVNC_open")) {
886 UI.closePowerPanel();
887 } else {
888 UI.openPowerPanel();
889 }
890 },
891
892 // Disable/enable power button
893 updatePowerButton() {
894 if (UI.connected &&
895 UI.rfb.capabilities.power &&
896 !UI.rfb.viewOnly) {
897 document.getElementById('noVNC_power_button')
898 .classList.remove("noVNC_hidden");
899 } else {
900 document.getElementById('noVNC_power_button')
901 .classList.add("noVNC_hidden");
902 // Close power panel if open
903 UI.closePowerPanel();
904 }
905 },
906
907/* ------^-------
908 * /POWER
909 * ==============
910 * CLIPBOARD
911 * ------v------*/
912
913 openClipboardPanel() {
914 UI.closeAllPanels();
915 UI.openControlbar();
916
917 document.getElementById('noVNC_clipboard')
918 .classList.add("noVNC_open");
919 document.getElementById('noVNC_clipboard_button')
920 .classList.add("noVNC_selected");
921 },
922
923 closeClipboardPanel() {
924 document.getElementById('noVNC_clipboard')
925 .classList.remove("noVNC_open");
926 document.getElementById('noVNC_clipboard_button')
927 .classList.remove("noVNC_selected");
928 },
929
930 toggleClipboardPanel() {
931 if (document.getElementById('noVNC_clipboard')
932 .classList.contains("noVNC_open")) {
933 UI.closeClipboardPanel();
934 } else {
935 UI.openClipboardPanel();
936 }
937 },
938
939 clipboardReceive(e) {
940 Log.Debug(">> UI.clipboardReceive: " + e.detail.text.substr(0, 40) + "...");
941 document.getElementById('noVNC_clipboard_text').value = e.detail.text;
942 Log.Debug("<< UI.clipboardReceive");
943 },
944
945 clipboardClear() {
946 document.getElementById('noVNC_clipboard_text').value = "";
947 UI.rfb.clipboardPasteFrom("");
948 },
949
950 clipboardSend() {
951 const text = document.getElementById('noVNC_clipboard_text').value;
952 Log.Debug(">> UI.clipboardSend: " + text.substr(0, 40) + "...");
953 UI.rfb.clipboardPasteFrom(text);
954 Log.Debug("<< UI.clipboardSend");
955 },
956
957/* ------^-------
958 * /CLIPBOARD
959 * ==============
960 * CONNECTION
961 * ------v------*/
962
963 openConnectPanel() {
964 document.getElementById('noVNC_connect_dlg')
965 .classList.add("noVNC_open");
966 },
967
968 closeConnectPanel() {
969 document.getElementById('noVNC_connect_dlg')
970 .classList.remove("noVNC_open");
971 },
972
973 connect(event, password) {
974
975 // Ignore when rfb already exists
976 if (typeof UI.rfb !== 'undefined') {
977 return;
978 }
979
980 const host = UI.getSetting('host');
981 const port = UI.getSetting('port');
982 const path = UI.getSetting('path');
983
984 if (typeof password === 'undefined') {
985 password = WebUtil.getConfigVar('password');
986 UI.reconnect_password = password;
987 }
988
989 if (password === null) {
990 password = undefined;
991 }
992
993 UI.hideStatus();
994
995 if (!host) {
996 Log.Error("Can't connect when host is: " + host);
997 UI.showStatus(_("Must set host"), 'error');
998 return;
999 }
1000
1001 UI.closeAllPanels();
1002 UI.closeConnectPanel();
1003
1004 UI.updateVisualState('connecting');
1005
1006 let url;
1007
1008 url = UI.getSetting('encrypt') ? 'wss' : 'ws';
1009
1010 url += '://' + host;
1011 if (port) {
1012 url += ':' + port;
1013 }
1014 url += '/' + path;
1015
1016 UI.rfb = new RFB(document.getElementById('noVNC_container'), url,
1017 { shared: UI.getSetting('shared'),
1018 showDotCursor: UI.getSetting('show_dot'),
1019 repeaterID: UI.getSetting('repeaterID'),
1020 credentials: { password: password } });
1021 UI.rfb.addEventListener("connect", UI.connectFinished);
1022 UI.rfb.addEventListener("disconnect", UI.disconnectFinished);
1023 UI.rfb.addEventListener("credentialsrequired", UI.credentials);
1024 UI.rfb.addEventListener("securityfailure", UI.securityFailed);
1025 UI.rfb.addEventListener("capabilities", UI.updatePowerButton);
1026 UI.rfb.addEventListener("clipboard", UI.clipboardReceive);
1027 UI.rfb.addEventListener("bell", UI.bell);
1028 UI.rfb.addEventListener("desktopname", UI.updateDesktopName);
1029 UI.rfb.clipViewport = UI.getSetting('view_clip');
1030 UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
1031 UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
1032
1033 UI.updateViewOnly(); // requires UI.rfb
1034 },
1035
1036 disconnect() {
1037 UI.closeAllPanels();
1038 UI.rfb.disconnect();
1039
1040 UI.connected = false;
1041
1042 // Disable automatic reconnecting
1043 UI.inhibit_reconnect = true;
1044
1045 UI.updateVisualState('disconnecting');
1046
1047 // Don't display the connection settings until we're actually disconnected
1048 },
1049
1050 reconnect() {
1051 UI.reconnect_callback = null;
1052
1053 // if reconnect has been disabled in the meantime, do nothing.
1054 if (UI.inhibit_reconnect) {
1055 return;
1056 }
1057
1058 UI.connect(null, UI.reconnect_password);
1059 },
1060
1061 cancelReconnect() {
1062 if (UI.reconnect_callback !== null) {
1063 clearTimeout(UI.reconnect_callback);
1064 UI.reconnect_callback = null;
1065 }
1066
1067 UI.updateVisualState('disconnected');
1068
1069 UI.openControlbar();
1070 UI.openConnectPanel();
1071 },
1072
1073 connectFinished(e) {
1074 UI.connected = true;
1075 UI.inhibit_reconnect = false;
1076
1077 let msg;
1078 if (UI.getSetting('encrypt')) {
1079 msg = _("Connected (encrypted) to ") + UI.desktopName;
1080 } else {
1081 msg = _("Connected (unencrypted) to ") + UI.desktopName;
1082 }
1083 UI.showStatus(msg);
1084 UI.updateVisualState('connected');
1085
1086 // Do this last because it can only be used on rendered elements
1087 UI.rfb.focus();
1088 },
1089
1090 disconnectFinished(e) {
1091 const wasConnected = UI.connected;
1092
1093 // This variable is ideally set when disconnection starts, but
1094 // when the disconnection isn't clean or if it is initiated by
1095 // the server, we need to do it here as well since
1096 // UI.disconnect() won't be used in those cases.
1097 UI.connected = false;
1098
1099 UI.rfb = undefined;
1100
1101 if (!e.detail.clean) {
1102 UI.updateVisualState('disconnected');
1103 if (wasConnected) {
1104 UI.showStatus(_("Something went wrong, connection is closed"),
1105 'error');
1106 } else {
1107 UI.showStatus(_("Failed to connect to server"), 'error');
1108 }
1109 } else if (UI.getSetting('reconnect', false) === true && !UI.inhibit_reconnect) {
1110 UI.updateVisualState('reconnecting');
1111
1112 const delay = parseInt(UI.getSetting('reconnect_delay'));
1113 UI.reconnect_callback = setTimeout(UI.reconnect, delay);
1114 return;
1115 } else {
1116 UI.updateVisualState('disconnected');
1117 UI.showStatus(_("Disconnected"), 'normal');
1118 }
1119
1120 UI.openControlbar();
1121 UI.openConnectPanel();
1122 },
1123
1124 securityFailed(e) {
1125 let msg = "";
1126 // On security failures we might get a string with a reason
1127 // directly from the server. Note that we can't control if
1128 // this string is translated or not.
1129 if ('reason' in e.detail) {
1130 msg = _("New connection has been rejected with reason: ") +
1131 e.detail.reason;
1132 } else {
1133 msg = _("New connection has been rejected");
1134 }
1135 UI.showStatus(msg, 'error');
1136 },
1137
1138/* ------^-------
1139 * /CONNECTION
1140 * ==============
1141 * PASSWORD
1142 * ------v------*/
1143
1144 credentials(e) {
1145 // FIXME: handle more types
1146 document.getElementById('noVNC_password_dlg')
1147 .classList.add('noVNC_open');
1148
1149 setTimeout(() => document
1150 .getElementById('noVNC_password_input').focus(), 100);
1151
1152 Log.Warn("Server asked for a password");
1153 UI.showStatus(_("Password is required"), "warning");
1154 },
1155
1156 setPassword(e) {
1157 // Prevent actually submitting the form
1158 e.preventDefault();
1159
1160 const inputElem = document.getElementById('noVNC_password_input');
1161 const password = inputElem.value;
1162 // Clear the input after reading the password
1163 inputElem.value = "";
1164 UI.rfb.sendCredentials({ password: password });
1165 UI.reconnect_password = password;
1166 document.getElementById('noVNC_password_dlg')
1167 .classList.remove('noVNC_open');
1168 },
1169
1170/* ------^-------
1171 * /PASSWORD
1172 * ==============
1173 * FULLSCREEN
1174 * ------v------*/
1175
1176 toggleFullscreen() {
1177 if (document.fullscreenElement || // alternative standard method
1178 document.mozFullScreenElement || // currently working methods
1179 document.webkitFullscreenElement ||
1180 document.msFullscreenElement) {
1181 if (document.exitFullscreen) {
1182 document.exitFullscreen();
1183 } else if (document.mozCancelFullScreen) {
1184 document.mozCancelFullScreen();
1185 } else if (document.webkitExitFullscreen) {
1186 document.webkitExitFullscreen();
1187 } else if (document.msExitFullscreen) {
1188 document.msExitFullscreen();
1189 }
1190 } else {
1191 if (document.documentElement.requestFullscreen) {
1192 document.documentElement.requestFullscreen();
1193 } else if (document.documentElement.mozRequestFullScreen) {
1194 document.documentElement.mozRequestFullScreen();
1195 } else if (document.documentElement.webkitRequestFullscreen) {
1196 document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
1197 } else if (document.body.msRequestFullscreen) {
1198 document.body.msRequestFullscreen();
1199 }
1200 }
1201 UI.updateFullscreenButton();
1202 },
1203
1204 updateFullscreenButton() {
1205 if (document.fullscreenElement || // alternative standard method
1206 document.mozFullScreenElement || // currently working methods
1207 document.webkitFullscreenElement ||
1208 document.msFullscreenElement ) {
1209 document.getElementById('noVNC_fullscreen_button')
1210 .classList.add("noVNC_selected");
1211 } else {
1212 document.getElementById('noVNC_fullscreen_button')
1213 .classList.remove("noVNC_selected");
1214 }
1215 },
1216
1217/* ------^-------
1218 * /FULLSCREEN
1219 * ==============
1220 * RESIZE
1221 * ------v------*/
1222
1223 // Apply remote resizing or local scaling
1224 applyResizeMode() {
1225 if (!UI.rfb) return;
1226
1227 UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
1228 UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
1229 },
1230
1231/* ------^-------
1232 * /RESIZE
1233 * ==============
1234 * VIEW CLIPPING
1235 * ------v------*/
1236
1237 // Update viewport clipping property for the connection. The normal
1238 // case is to get the value from the setting. There are special cases
1239 // for when the viewport is scaled or when a touch device is used.
1240 updateViewClip() {
1241 if (!UI.rfb) return;
1242
1243 const scaling = UI.getSetting('resize') === 'scale';
1244
1245 if (scaling) {
1246 // Can't be clipping if viewport is scaled to fit
1247 UI.forceSetting('view_clip', false);
1248 UI.rfb.clipViewport = false;
1249 } else if (isTouchDevice) {
1250 // Touch devices usually have shit scrollbars
1251 UI.forceSetting('view_clip', true);
1252 UI.rfb.clipViewport = true;
1253 } else {
1254 UI.enableSetting('view_clip');
1255 UI.rfb.clipViewport = UI.getSetting('view_clip');
1256 }
1257
1258 // Changing the viewport may change the state of
1259 // the dragging button
1260 UI.updateViewDrag();
1261 },
1262
1263/* ------^-------
1264 * /VIEW CLIPPING
1265 * ==============
1266 * VIEWDRAG
1267 * ------v------*/
1268
1269 toggleViewDrag() {
1270 if (!UI.rfb) return;
1271
1272 UI.rfb.dragViewport = !UI.rfb.dragViewport;
1273 UI.updateViewDrag();
1274 },
1275
1276 updateViewDrag() {
1277 if (!UI.connected) return;
1278
1279 const viewDragButton = document.getElementById('noVNC_view_drag_button');
1280
1281 if (!UI.rfb.clipViewport && UI.rfb.dragViewport) {
1282 // We are no longer clipping the viewport. Make sure
1283 // viewport drag isn't active when it can't be used.
1284 UI.rfb.dragViewport = false;
1285 }
1286
1287 if (UI.rfb.dragViewport) {
1288 viewDragButton.classList.add("noVNC_selected");
1289 } else {
1290 viewDragButton.classList.remove("noVNC_selected");
1291 }
1292
1293 // Different behaviour for touch vs non-touch
1294 // The button is disabled instead of hidden on touch devices
1295 if (isTouchDevice) {
1296 viewDragButton.classList.remove("noVNC_hidden");
1297
1298 if (UI.rfb.clipViewport) {
1299 viewDragButton.disabled = false;
1300 } else {
1301 viewDragButton.disabled = true;
1302 }
1303 } else {
1304 viewDragButton.disabled = false;
1305
1306 if (UI.rfb.clipViewport) {
1307 viewDragButton.classList.remove("noVNC_hidden");
1308 } else {
1309 viewDragButton.classList.add("noVNC_hidden");
1310 }
1311 }
1312 },
1313
1314/* ------^-------
1315 * /VIEWDRAG
1316 * ==============
1317 * KEYBOARD
1318 * ------v------*/
1319
1320 showVirtualKeyboard() {
1321 if (!isTouchDevice) return;
1322
1323 const input = document.getElementById('noVNC_keyboardinput');
1324
1325 if (document.activeElement == input) return;
1326
1327 input.focus();
1328
1329 try {
1330 const l = input.value.length;
1331 // Move the caret to the end
1332 input.setSelectionRange(l, l);
1333 } catch (err) {
1334 // setSelectionRange is undefined in Google Chrome
1335 }
1336 },
1337
1338 hideVirtualKeyboard() {
1339 if (!isTouchDevice) return;
1340
1341 const input = document.getElementById('noVNC_keyboardinput');
1342
1343 if (document.activeElement != input) return;
1344
1345 input.blur();
1346 },
1347
1348 toggleVirtualKeyboard() {
1349 if (document.getElementById('noVNC_keyboard_button')
1350 .classList.contains("noVNC_selected")) {
1351 UI.hideVirtualKeyboard();
1352 } else {
1353 UI.showVirtualKeyboard();
1354 }
1355 },
1356
1357 onfocusVirtualKeyboard(event) {
1358 document.getElementById('noVNC_keyboard_button')
1359 .classList.add("noVNC_selected");
1360 if (UI.rfb) {
1361 UI.rfb.focusOnClick = false;
1362 }
1363 },
1364
1365 onblurVirtualKeyboard(event) {
1366 document.getElementById('noVNC_keyboard_button')
1367 .classList.remove("noVNC_selected");
1368 if (UI.rfb) {
1369 UI.rfb.focusOnClick = true;
1370 }
1371 },
1372
1373 keepVirtualKeyboard(event) {
1374 const input = document.getElementById('noVNC_keyboardinput');
1375
1376 // Only prevent focus change if the virtual keyboard is active
1377 if (document.activeElement != input) {
1378 return;
1379 }
1380
1381 // Only allow focus to move to other elements that need
1382 // focus to function properly
1383 if (event.target.form !== undefined) {
1384 switch (event.target.type) {
1385 case 'text':
1386 case 'email':
1387 case 'search':
1388 case 'password':
1389 case 'tel':
1390 case 'url':
1391 case 'textarea':
1392 case 'select-one':
1393 case 'select-multiple':
1394 return;
1395 }
1396 }
1397
1398 event.preventDefault();
1399 },
1400
1401 keyboardinputReset() {
1402 const kbi = document.getElementById('noVNC_keyboardinput');
1403 kbi.value = new Array(UI.defaultKeyboardinputLen).join("_");
1404 UI.lastKeyboardinput = kbi.value;
1405 },
1406
1407 keyEvent(keysym, code, down) {
1408 if (!UI.rfb) return;
1409
1410 UI.rfb.sendKey(keysym, code, down);
1411 },
1412
1413 // When normal keyboard events are left uncought, use the input events from
1414 // the keyboardinput element instead and generate the corresponding key events.
1415 // This code is required since some browsers on Android are inconsistent in
1416 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1417 keyInput(event) {
1418
1419 if (!UI.rfb) return;
1420
1421 const newValue = event.target.value;
1422
1423 if (!UI.lastKeyboardinput) {
1424 UI.keyboardinputReset();
1425 }
1426 const oldValue = UI.lastKeyboardinput;
1427
1428 let newLen;
1429 try {
1430 // Try to check caret position since whitespace at the end
1431 // will not be considered by value.length in some browsers
1432 newLen = Math.max(event.target.selectionStart, newValue.length);
1433 } catch (err) {
1434 // selectionStart is undefined in Google Chrome
1435 newLen = newValue.length;
1436 }
1437 const oldLen = oldValue.length;
1438
1439 let inputs = newLen - oldLen;
1440 let backspaces = inputs < 0 ? -inputs : 0;
1441
1442 // Compare the old string with the new to account for
1443 // text-corrections or other input that modify existing text
1444 for (let i = 0; i < Math.min(oldLen, newLen); i++) {
1445 if (newValue.charAt(i) != oldValue.charAt(i)) {
1446 inputs = newLen - i;
1447 backspaces = oldLen - i;
1448 break;
1449 }
1450 }
1451
1452 // Send the key events
1453 for (let i = 0; i < backspaces; i++) {
1454 UI.rfb.sendKey(KeyTable.XK_BackSpace, "Backspace");
1455 }
1456 for (let i = newLen - inputs; i < newLen; i++) {
1457 UI.rfb.sendKey(keysyms.lookup(newValue.charCodeAt(i)));
1458 }
1459
1460 // Control the text content length in the keyboardinput element
1461 if (newLen > 2 * UI.defaultKeyboardinputLen) {
1462 UI.keyboardinputReset();
1463 } else if (newLen < 1) {
1464 // There always have to be some text in the keyboardinput
1465 // element with which backspace can interact.
1466 UI.keyboardinputReset();
1467 // This sometimes causes the keyboard to disappear for a second
1468 // but it is required for the android keyboard to recognize that
1469 // text has been added to the field
1470 event.target.blur();
1471 // This has to be ran outside of the input handler in order to work
1472 setTimeout(event.target.focus.bind(event.target), 0);
1473 } else {
1474 UI.lastKeyboardinput = newValue;
1475 }
1476 },
1477
1478/* ------^-------
1479 * /KEYBOARD
1480 * ==============
1481 * EXTRA KEYS
1482 * ------v------*/
1483
1484 openExtraKeys() {
1485 UI.closeAllPanels();
1486 UI.openControlbar();
1487
1488 document.getElementById('noVNC_modifiers')
1489 .classList.add("noVNC_open");
1490 document.getElementById('noVNC_toggle_extra_keys_button')
1491 .classList.add("noVNC_selected");
1492 },
1493
1494 closeExtraKeys() {
1495 document.getElementById('noVNC_modifiers')
1496 .classList.remove("noVNC_open");
1497 document.getElementById('noVNC_toggle_extra_keys_button')
1498 .classList.remove("noVNC_selected");
1499 },
1500
1501 toggleExtraKeys() {
1502 if (document.getElementById('noVNC_modifiers')
1503 .classList.contains("noVNC_open")) {
1504 UI.closeExtraKeys();
1505 } else {
1506 UI.openExtraKeys();
1507 }
1508 },
1509
1510 sendEsc() {
1511 UI.rfb.sendKey(KeyTable.XK_Escape, "Escape");
1512 },
1513
1514 sendTab() {
1515 UI.rfb.sendKey(KeyTable.XK_Tab);
1516 },
1517
1518 toggleCtrl() {
1519 const btn = document.getElementById('noVNC_toggle_ctrl_button');
1520 if (btn.classList.contains("noVNC_selected")) {
1521 UI.rfb.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
1522 btn.classList.remove("noVNC_selected");
1523 } else {
1524 UI.rfb.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
1525 btn.classList.add("noVNC_selected");
1526 }
1527 },
1528
1529 toggleAlt() {
1530 const btn = document.getElementById('noVNC_toggle_alt_button');
1531 if (btn.classList.contains("noVNC_selected")) {
1532 UI.rfb.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
1533 btn.classList.remove("noVNC_selected");
1534 } else {
1535 UI.rfb.sendKey(KeyTable.XK_Alt_L, "AltLeft", true);
1536 btn.classList.add("noVNC_selected");
1537 }
1538 },
1539
1540 sendCtrlAltDel() {
1541 UI.rfb.sendCtrlAltDel();
1542 },
1543
1544/* ------^-------
1545 * /EXTRA KEYS
1546 * ==============
1547 * MISC
1548 * ------v------*/
1549
1550 setMouseButton(num) {
1551 const view_only = UI.rfb.viewOnly;
1552 if (UI.rfb && !view_only) {
1553 UI.rfb.touchButton = num;
1554 }
1555
1556 const blist = [0, 1, 2, 4];
1557 for (let b = 0; b < blist.length; b++) {
1558 const button = document.getElementById('noVNC_mouse_button' +
1559 blist[b]);
1560 if (blist[b] === num && !view_only) {
1561 button.classList.remove("noVNC_hidden");
1562 } else {
1563 button.classList.add("noVNC_hidden");
1564 }
1565 }
1566 },
1567
1568 updateViewOnly() {
1569 if (!UI.rfb) return;
1570 UI.rfb.viewOnly = UI.getSetting('view_only');
1571
1572 // Hide input related buttons in view only mode
1573 if (UI.rfb.viewOnly) {
1574 document.getElementById('noVNC_keyboard_button')
1575 .classList.add('noVNC_hidden');
1576 document.getElementById('noVNC_toggle_extra_keys_button')
1577 .classList.add('noVNC_hidden');
1578 document.getElementById('noVNC_mouse_button' + UI.rfb.touchButton)
1579 .classList.add('noVNC_hidden');
1580 } else {
1581 document.getElementById('noVNC_keyboard_button')
1582 .classList.remove('noVNC_hidden');
1583 document.getElementById('noVNC_toggle_extra_keys_button')
1584 .classList.remove('noVNC_hidden');
1585 document.getElementById('noVNC_mouse_button' + UI.rfb.touchButton)
1586 .classList.remove('noVNC_hidden');
1587 }
1588 },
1589
1590 updateShowDotCursor() {
1591 if (!UI.rfb) return;
1592 UI.rfb.showDotCursor = UI.getSetting('show_dot');
1593 },
1594
1595 updateLogging() {
1596 WebUtil.init_logging(UI.getSetting('logging'));
1597 },
1598
1599 updateDesktopName(e) {
1600 UI.desktopName = e.detail.name;
1601 // Display the desktop name in the document title
1602 document.title = e.detail.name + " - noVNC";
1603 },
1604
1605 bell(e) {
1606 if (WebUtil.getConfigVar('bell', 'on') === 'on') {
1607 const promise = document.getElementById('noVNC_bell').play();
1608 // The standards disagree on the return value here
1609 if (promise) {
1610 promise.catch((e) => {
1611 if (e.name === "NotAllowedError") {
1612 // Ignore when the browser doesn't let us play audio.
1613 // It is common that the browsers require audio to be
1614 // initiated from a user action.
1615 } else {
1616 Log.Error("Unable to play bell: " + e);
1617 }
1618 });
1619 }
1620 }
1621 },
1622
1623 //Helper to add options to dropdown.
1624 addOption(selectbox, text, value) {
1625 const optn = document.createElement("OPTION");
1626 optn.text = text;
1627 optn.value = value;
1628 selectbox.options.add(optn);
1629 },
1630
1631/* ------^-------
1632 * /MISC
1633 * ==============
1634 */
1635};
1636
1637// Set up translations
1638const LINGUAS = ["cs", "de", "el", "es", "nl", "pl", "sv", "tr", "zh_CN", "zh_TW"];
1639l10n.setup(LINGUAS);
1640if (l10n.language !== "en" && l10n.dictionary === undefined) {
1641 WebUtil.fetchJSON('app/locale/' + l10n.language + '.json', (translations) => {
1642 l10n.dictionary = translations;
1643
1644 // wait for translations to load before loading the UI
1645 UI.prime();
1646 }, (err) => {
1647 Log.Error("Failed to load translations: " + err);
1648 UI.prime();
1649 });
1650} else {
1651 UI.prime();
1652}
1653
1654export default UI;
noVNC mirror