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