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