app/ui.js

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