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