app/ui.js

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