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