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