app/ui.js

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