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