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