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