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