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