app/ui.js

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