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