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