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