include/ui.js

   1 /*
   2  * noVNC: HTML5 VNC client
   3  * Copyright (C) 2012 Joel Martin
   4  * Copyright (C) 2013 Samuel Mannehed for Cendio AB
   5  * Licensed under MPL 2.0 (see LICENSE.txt)
   6  *
   7  * See README.md for usage and integration instructions.
   8  */
   9
  10 /* jslint white: false, browser: true */
  11 /* global window, $D, Util, WebUtil, RFB, Display */
  12
  13 var UI;
  14
  15 (function () {
  16     "use strict";
  17
  18     var resizeTimeout;
  19
  20     // Load supporting scripts
  21     window.onscriptsload = function () { UI.load(); };
  22     Util.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
  23                        "keysymdef.js", "keyboard.js", "input.js", "display.js",
  24                        "jsunzip.js", "rfb.js", "keysym.js"]);
  25
  26     UI = {
  27
  28         rfb_state : 'loaded',
  29         settingsOpen : false,
  30         connSettingsOpen : false,
  31         popupStatusOpen : false,
  32         clipboardOpen: false,
  33         keyboardVisible: false,
  34         hideKeyboardTimeout: null,
  35         lastKeyboardinput: null,
  36         defaultKeyboardinputLen: 100,
  37         extraKeysVisible: false,
  38         ctrlOn: false,
  39         altOn: false,
  40         isTouchDevice: false,
  41
  42         // Setup rfb object, load settings from browser storage, then call
  43         // UI.init to setup the UI/menus
  44         load: function (callback) {
  45             WebUtil.initSettings(UI.start, callback);
  46         },
  47
  48         onresize: function (callback) {
  49             if (UI.getSetting('resize') === 'remote') {
  50                 var innerW = window.innerWidth;
  51                 var innerH = window.innerHeight;
  52                 var controlbarH = $D('noVNC-control-bar').offsetHeight;
  53                 // For some unknown reason the container is higher than the canvas,
  54                 // 5px higher in Firefox and 4px higher in Chrome
  55                 var padding = 5;
  56                 if (innerW !== undefined && innerH !== undefined)
  57                     UI.rfb.setDesktopSize(innerW, innerH - controlbarH - padding);
  58             }
  59         },
  60
  61         // Render default UI and initialize settings menu
  62         start: function(callback) {
  63             UI.isTouchDevice = 'ontouchstart' in document.documentElement;
  64
  65             // Stylesheet selection dropdown
  66             var sheet = WebUtil.selectStylesheet();
  67             var sheets = WebUtil.getStylesheets();
  68             var i;
  69             for (i = 0; i < sheets.length; i += 1) {
  70                 UI.addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title);
  71             }
  72
  73             // Logging selection dropdown
  74             var llevels = ['error', 'warn', 'info', 'debug'];
  75             for (i = 0; i < llevels.length; i += 1) {
  76                 UI.addOption($D('noVNC_logging'),llevels[i], llevels[i]);
  77             }
  78
  79             // Settings with immediate effects
  80             UI.initSetting('logging', 'warn');
  81             WebUtil.init_logging(UI.getSetting('logging'));
  82
  83             UI.initSetting('stylesheet', 'default');
  84             WebUtil.selectStylesheet(null);
  85             // call twice to get around webkit bug
  86             WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
  87
  88             // if port == 80 (or 443) then it won't be present and should be
  89             // set manually
  90             var port = window.location.port;
  91             if (!port) {
  92                 if (window.location.protocol.substring(0,5) == 'https') {
  93                     port = 443;
  94                 }
  95                 else if (window.location.protocol.substring(0,4) == 'http') {
  96                     port = 80;
  97                 }
  98             }
  99
 100             /* Populate the controls if defaults are provided in the URL */
 101             UI.initSetting('host', window.location.hostname);
 102             UI.initSetting('port', port);
 103             UI.initSetting('password', '');
 104             UI.initSetting('encrypt', (window.location.protocol === "https:"));
 105             UI.initSetting('true_color', true);
 106             UI.initSetting('cursor', !UI.isTouchDevice);
 107             UI.initSetting('resize', 'off');
 108             UI.initSetting('shared', true);
 109             UI.initSetting('view_only', false);
 110             UI.initSetting('path', 'websockify');
 111             UI.initSetting('repeaterID', '');
 112
 113             UI.initRFB();
 114
 115             var autoconnect = WebUtil.getQueryVar('autoconnect', false);
 116             if (autoconnect === 'true' || autoconnect == '1') {
 117                 autoconnect = true;
 118                 UI.connect();
 119             } else {
 120                 autoconnect = false;
 121             }
 122
 123             UI.updateVisualState();
 124
 125             // Show mouse selector buttons on touch screen devices
 126             if (UI.isTouchDevice) {
 127                 // Show mobile buttons
 128                 $D('noVNC_mobile_buttons').style.display = "inline";
 129                 UI.setMouseButton();
 130                 // Remove the address bar
 131                 setTimeout(function() { window.scrollTo(0, 1); }, 100);
 132                 UI.forceSetting('clip', true);
 133             } else {
 134                 UI.initSetting('clip', false);
 135             }
 136
 137             //iOS Safari does not support CSS position:fixed.
 138             //This detects iOS devices and enables javascript workaround.
 139             if ((navigator.userAgent.match(/iPhone/i)) ||
 140                 (navigator.userAgent.match(/iPod/i)) ||
 141                 (navigator.userAgent.match(/iPad/i))) {
 142                 //UI.setOnscroll();
 143                 //UI.setResize();
 144             }
 145             UI.setBarPosition();
 146
 147             $D('noVNC_host').focus();
 148
 149             UI.setViewClip();
 150
 151             Util.addEvent(window, 'resize', function () {
 152                 UI.setViewClip();
 153                 // When the window has been resized, wait until the size remains
 154                 // the same for 0.5 seconds before sending the request for changing
 155                 // the resolution of the session
 156                 clearTimeout(resizeTimeout);
 157                 resizeTimeout = setTimeout(function(){
 158                     UI.onresize();
 159                 }, 500);
 160             } );
 161
 162             Util.addEvent(window, 'load', UI.keyboardinputReset);
 163
 164             Util.addEvent(window, 'beforeunload', function () {
 165                 if (UI.rfb_state === 'normal') {
 166                     return "You are currently connected.";
 167                 }
 168             } );
 169
 170             // Show description by default when hosted at for kanaka.github.com
 171             if (location.host === "kanaka.github.io") {
 172                 // Open the description dialog
 173                 $D('noVNC_description').style.display = "block";
 174             } else {
 175                 // Show the connect panel on first load unless autoconnecting
 176                 if (autoconnect === UI.connSettingsOpen) {
 177                     UI.toggleConnectPanel();
 178                 }
 179             }
 180
 181             // Add mouse event click/focus/blur event handlers to the UI
 182             UI.addMouseHandlers();
 183
 184             if (typeof callback === "function") {
 185                 callback(UI.rfb);
 186             }
 187         },
 188
 189         initRFB: function () {
 190             UI.rfb = new RFB({'target': $D('noVNC_canvas'),
 191                               'onUpdateState': UI.updateState,
 192                               'onXvpInit': UI.updateXvpVisualState,
 193                               'onClipboard': UI.clipReceive,
 194                               'onFBUComplete': UI.FBUComplete,
 195                               'onFBResize': UI.updateViewDragButton,
 196                               'onDesktopName': UI.updateDocumentTitle});
 197         },
 198
 199         addMouseHandlers: function() {
 200             // Setup interface handlers that can't be inline
 201             $D("noVNC_view_drag_button").onclick = UI.setViewDrag;
 202             $D("noVNC_mouse_button0").onclick = function () { UI.setMouseButton(1); };
 203             $D("noVNC_mouse_button1").onclick = function () { UI.setMouseButton(2); };
 204             $D("noVNC_mouse_button2").onclick = function () { UI.setMouseButton(4); };
 205             $D("noVNC_mouse_button4").onclick = function () { UI.setMouseButton(0); };
 206             $D("showKeyboard").onclick = UI.showKeyboard;
 207
 208             $D("keyboardinput").oninput = UI.keyInput;
 209             $D("keyboardinput").onblur = UI.keyInputBlur;
 210
 211             $D("showExtraKeysButton").onclick = UI.showExtraKeys;
 212             $D("toggleCtrlButton").onclick = UI.toggleCtrl;
 213             $D("toggleAltButton").onclick = UI.toggleAlt;
 214             $D("sendTabButton").onclick = UI.sendTab;
 215             $D("sendEscButton").onclick = UI.sendEsc;
 216
 217             $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
 218             $D("xvpShutdownButton").onclick = UI.xvpShutdown;
 219             $D("xvpRebootButton").onclick = UI.xvpReboot;
 220             $D("xvpResetButton").onclick = UI.xvpReset;
 221             $D("noVNC_status").onclick = UI.togglePopupStatusPanel;
 222             $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
 223             $D("xvpButton").onclick = UI.toggleXvpPanel;
 224             $D("clipboardButton").onclick = UI.toggleClipboardPanel;
 225             $D("settingsButton").onclick = UI.toggleSettingsPanel;
 226             $D("connectButton").onclick = UI.toggleConnectPanel;
 227             $D("disconnectButton").onclick = UI.disconnect;
 228             $D("descriptionButton").onclick = UI.toggleConnectPanel;
 229
 230             $D("noVNC_clipboard_text").onfocus = UI.displayBlur;
 231             $D("noVNC_clipboard_text").onblur = UI.displayFocus;
 232             $D("noVNC_clipboard_text").onchange = UI.clipSend;
 233             $D("noVNC_clipboard_clear_button").onclick = UI.clipClear;
 234
 235             $D("noVNC_settings_menu").onmouseover = UI.displayBlur;
 236             $D("noVNC_settings_menu").onmouseover = UI.displayFocus;
 237             $D("noVNC_apply").onclick = UI.settingsApply;
 238
 239             $D("noVNC_connect_button").onclick = UI.connect;
 240         },
 241
 242         // Read form control compatible setting from cookie
 243         getSetting: function(name) {
 244             var ctrl = $D('noVNC_' + name);
 245             var val = WebUtil.readSetting(name);
 246             if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') {
 247                 if (val.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
 248                     val = false;
 249                 } else {
 250                     val = true;
 251                 }
 252             }
 253             return val;
 254         },
 255
 256         // Update cookie and form control setting. If value is not set, then
 257         // updates from control to current cookie setting.
 258         updateSetting: function(name, value) {
 259
 260             // Save the cookie for this session
 261             if (typeof value !== 'undefined') {
 262                 WebUtil.writeSetting(name, value);
 263             }
 264
 265             // Update the settings control
 266             value = UI.getSetting(name);
 267
 268             var ctrl = $D('noVNC_' + name);
 269             if (ctrl.type === 'checkbox') {
 270                 ctrl.checked = value;
 271
 272             } else if (typeof ctrl.options !== 'undefined') {
 273                 for (var i = 0; i < ctrl.options.length; i += 1) {
 274                     if (ctrl.options[i].value === value) {
 275                         ctrl.selectedIndex = i;
 276                         break;
 277                     }
 278                 }
 279             } else {
 280                 /*Weird IE9 error leads to 'null' appearring
 281                 in textboxes instead of ''.*/
 282                 if (value === null) {
 283                     value = "";
 284                 }
 285                 ctrl.value = value;
 286             }
 287         },
 288
 289         // Save control setting to cookie
 290         saveSetting: function(name) {
 291             var val, ctrl = $D('noVNC_' + name);
 292             if (ctrl.type === 'checkbox') {
 293                 val = ctrl.checked;
 294             } else if (typeof ctrl.options !== 'undefined') {
 295                 val = ctrl.options[ctrl.selectedIndex].value;
 296             } else {
 297                 val = ctrl.value;
 298             }
 299             WebUtil.writeSetting(name, val);
 300             //Util.Debug("Setting saved '" + name + "=" + val + "'");
 301             return val;
 302         },
 303
 304         // Initial page load read/initialization of settings
 305         initSetting: function(name, defVal) {
 306             // Check Query string followed by cookie
 307             var val = WebUtil.getQueryVar(name);
 308             if (val === null) {
 309                 val = WebUtil.readSetting(name, defVal);
 310             }
 311             UI.updateSetting(name, val);
 312             return val;
 313         },
 314
 315         // Force a setting to be a certain value
 316         forceSetting: function(name, val) {
 317             UI.updateSetting(name, val);
 318             return val;
 319         },
 320
 321
 322         // Show the popup status panel
 323         togglePopupStatusPanel: function() {
 324             var psp = $D('noVNC_popup_status_panel');
 325             if (UI.popupStatusOpen === true) {
 326                 psp.style.display = "none";
 327                 UI.popupStatusOpen = false;
 328             } else {
 329                 psp.innerHTML = $D('noVNC_status').innerHTML;
 330                 psp.style.display = "block";
 331                 psp.style.left = window.innerWidth/2 -
 332                     parseInt(window.getComputedStyle(psp, false).width)/2 -30 + "px";
 333                 UI.popupStatusOpen = true;
 334             }
 335         },
 336
 337         // Show the XVP panel
 338         toggleXvpPanel: function() {
 339             // Close the description panel
 340             $D('noVNC_description').style.display = "none";
 341             // Close settings if open
 342             if (UI.settingsOpen === true) {
 343                 UI.settingsApply();
 344                 UI.closeSettingsMenu();
 345             }
 346             // Close connection settings if open
 347             if (UI.connSettingsOpen === true) {
 348                 UI.toggleConnectPanel();
 349             }
 350             // Close popup status panel if open
 351             if (UI.popupStatusOpen === true) {
 352                 UI.togglePopupStatusPanel();
 353             }
 354             // Close clipboard panel if open
 355             if (UI.clipboardOpen === true) {
 356                 UI.toggleClipboardPanel();
 357             }
 358             // Toggle XVP panel
 359             if (UI.xvpOpen === true) {
 360                 $D('noVNC_xvp').style.display = "none";
 361                 $D('xvpButton').className = "noVNC_status_button";
 362                 UI.xvpOpen = false;
 363             } else {
 364                 $D('noVNC_xvp').style.display = "block";
 365                 $D('xvpButton').className = "noVNC_status_button_selected";
 366                 UI.xvpOpen = true;
 367             }
 368         },
 369
 370         // Show the clipboard panel
 371         toggleClipboardPanel: function() {
 372             // Close the description panel
 373             $D('noVNC_description').style.display = "none";
 374             // Close settings if open
 375             if (UI.settingsOpen === true) {
 376                 UI.settingsApply();
 377                 UI.closeSettingsMenu();
 378             }
 379             // Close connection settings if open
 380             if (UI.connSettingsOpen === true) {
 381                 UI.toggleConnectPanel();
 382             }
 383             // Close popup status panel if open
 384             if (UI.popupStatusOpen === true) {
 385                 UI.togglePopupStatusPanel();
 386             }
 387             // Close XVP panel if open
 388             if (UI.xvpOpen === true) {
 389                 UI.toggleXvpPanel();
 390             }
 391             // Toggle Clipboard Panel
 392             if (UI.clipboardOpen === true) {
 393                 $D('noVNC_clipboard').style.display = "none";
 394                 $D('clipboardButton').className = "noVNC_status_button";
 395                 UI.clipboardOpen = false;
 396             } else {
 397                 $D('noVNC_clipboard').style.display = "block";
 398                 $D('clipboardButton').className = "noVNC_status_button_selected";
 399                 UI.clipboardOpen = true;
 400             }
 401         },
 402
 403         // Show the connection settings panel/menu
 404         toggleConnectPanel: function() {
 405             // Close the description panel
 406             $D('noVNC_description').style.display = "none";
 407             // Close connection settings if open
 408             if (UI.settingsOpen === true) {
 409                 UI.settingsApply();
 410                 UI.closeSettingsMenu();
 411                 $D('connectButton').className = "noVNC_status_button";
 412             }
 413             // Close clipboard panel if open
 414             if (UI.clipboardOpen === true) {
 415                 UI.toggleClipboardPanel();
 416             }
 417             // Close popup status panel if open
 418             if (UI.popupStatusOpen === true) {
 419                 UI.togglePopupStatusPanel();
 420             }
 421             // Close XVP panel if open
 422             if (UI.xvpOpen === true) {
 423                 UI.toggleXvpPanel();
 424             }
 425
 426             // Toggle Connection Panel
 427             if (UI.connSettingsOpen === true) {
 428                 $D('noVNC_controls').style.display = "none";
 429                 $D('connectButton').className = "noVNC_status_button";
 430                 UI.connSettingsOpen = false;
 431                 UI.saveSetting('host');
 432                 UI.saveSetting('port');
 433                 //UI.saveSetting('password');
 434             } else {
 435                 $D('noVNC_controls').style.display = "block";
 436                 $D('connectButton').className = "noVNC_status_button_selected";
 437                 UI.connSettingsOpen = true;
 438                 $D('noVNC_host').focus();
 439             }
 440         },
 441
 442         // Toggle the settings menu:
 443         //   On open, settings are refreshed from saved cookies.
 444         //   On close, settings are applied
 445         toggleSettingsPanel: function() {
 446             // Close the description panel
 447             $D('noVNC_description').style.display = "none";
 448             if (UI.settingsOpen) {
 449                 UI.settingsApply();
 450                 UI.closeSettingsMenu();
 451             } else {
 452                 UI.updateSetting('encrypt');
 453                 UI.updateSetting('true_color');
 454                 if (UI.rfb.get_display().get_cursor_uri()) {
 455                     UI.updateSetting('cursor');
 456                 } else {
 457                     UI.updateSetting('cursor', !UI.isTouchDevice);
 458                     $D('noVNC_cursor').disabled = true;
 459                 }
 460                 UI.updateSetting('clip');
 461                 UI.updateSetting('resize');
 462                 UI.updateSetting('shared');
 463                 UI.updateSetting('view_only');
 464                 UI.updateSetting('path');
 465                 UI.updateSetting('repeaterID');
 466                 UI.updateSetting('stylesheet');
 467                 UI.updateSetting('logging');
 468
 469                 UI.openSettingsMenu();
 470             }
 471         },
 472
 473         // Open menu
 474         openSettingsMenu: function() {
 475             // Close the description panel
 476             $D('noVNC_description').style.display = "none";
 477             // Close clipboard panel if open
 478             if (UI.clipboardOpen === true) {
 479                 UI.toggleClipboardPanel();
 480             }
 481             // Close connection settings if open
 482             if (UI.connSettingsOpen === true) {
 483                 UI.toggleConnectPanel();
 484             }
 485             // Close popup status panel if open
 486             if (UI.popupStatusOpen === true) {
 487                 UI.togglePopupStatusPanel();
 488             }
 489             // Close XVP panel if open
 490             if (UI.xvpOpen === true) {
 491                 UI.toggleXvpPanel();
 492             }
 493             $D('noVNC_settings').style.display = "block";
 494             $D('settingsButton').className = "noVNC_status_button_selected";
 495             UI.settingsOpen = true;
 496         },
 497
 498         // Close menu (without applying settings)
 499         closeSettingsMenu: function() {
 500             $D('noVNC_settings').style.display = "none";
 501             $D('settingsButton').className = "noVNC_status_button";
 502             UI.settingsOpen = false;
 503         },
 504
 505         // Save/apply settings when 'Apply' button is pressed
 506         settingsApply: function() {
 507             //Util.Debug(">> settingsApply");
 508             UI.saveSetting('encrypt');
 509             UI.saveSetting('true_color');
 510             if (UI.rfb.get_display().get_cursor_uri()) {
 511                 UI.saveSetting('cursor');
 512             }
 513             UI.saveSetting('clip');
 514             UI.saveSetting('resize');
 515             UI.saveSetting('shared');
 516             UI.saveSetting('view_only');
 517             UI.saveSetting('path');
 518             UI.saveSetting('repeaterID');
 519             UI.saveSetting('stylesheet');
 520             UI.saveSetting('logging');
 521
 522             // Settings with immediate (non-connected related) effect
 523             WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
 524             WebUtil.init_logging(UI.getSetting('logging'));
 525             UI.setViewClip();
 526             UI.setViewDrag(UI.rfb.get_viewportDrag());
 527             //Util.Debug("<< settingsApply");
 528         },
 529
 530
 531
 532         setPassword: function() {
 533             UI.rfb.sendPassword($D('noVNC_password').value);
 534             //Reset connect button.
 535             $D('noVNC_connect_button').value = "Connect";
 536             $D('noVNC_connect_button').onclick = UI.Connect;
 537             //Hide connection panel.
 538             UI.toggleConnectPanel();
 539             return false;
 540         },
 541
 542         sendCtrlAltDel: function() {
 543             UI.rfb.sendCtrlAltDel();
 544         },
 545
 546         xvpShutdown: function() {
 547             UI.rfb.xvpShutdown();
 548         },
 549
 550         xvpReboot: function() {
 551             UI.rfb.xvpReboot();
 552         },
 553
 554         xvpReset: function() {
 555             UI.rfb.xvpReset();
 556         },
 557
 558         setMouseButton: function(num) {
 559             if (typeof num === 'undefined') {
 560                 // Disable mouse buttons
 561                 num = -1;
 562             }
 563             if (UI.rfb) {
 564                 UI.rfb.get_mouse().set_touchButton(num);
 565             }
 566
 567             var blist = [0, 1,2,4];
 568             for (var b = 0; b < blist.length; b++) {
 569                 var button = $D('noVNC_mouse_button' + blist[b]);
 570                 if (blist[b] === num) {
 571                     button.style.display = "";
 572                 } else {
 573                     button.style.display = "none";
 574                 }
 575             }
 576         },
 577
 578         updateState: function(rfb, state, oldstate, msg) {
 579             UI.rfb_state = state;
 580             var klass;
 581             switch (state) {
 582                 case 'failed':
 583                 case 'fatal':
 584                     klass = "noVNC_status_error";
 585                     break;
 586                 case 'normal':
 587                     klass = "noVNC_status_normal";
 588                     break;
 589                 case 'disconnected':
 590                     $D('noVNC_logo').style.display = "block";
 591                     /* falls through */
 592                 case 'loaded':
 593                     klass = "noVNC_status_normal";
 594                     break;
 595                 case 'password':
 596                     UI.toggleConnectPanel();
 597
 598                     $D('noVNC_connect_button').value = "Send Password";
 599                     $D('noVNC_connect_button').onclick = UI.setPassword;
 600                     $D('noVNC_password').focus();
 601
 602                     klass = "noVNC_status_warn";
 603                     break;
 604                 default:
 605                     klass = "noVNC_status_warn";
 606                     break;
 607             }
 608
 609             switch (state) {
 610                 case 'fatal':
 611                 case 'failed':
 612                 case 'disconnected':
 613                     UI.initRFB();
 614             }
 615
 616             if (typeof(msg) !== 'undefined') {
 617                 $D('noVNC-control-bar').setAttribute("class", klass);
 618                 $D('noVNC_status').innerHTML = msg;
 619             }
 620
 621             UI.updateVisualState();
 622         },
 623
 624         // Disable/enable controls depending on connection state
 625         updateVisualState: function() {
 626             var connected = UI.rfb_state === 'normal' ? true : false;
 627
 628             //Util.Debug(">> updateVisualState");
 629             $D('noVNC_encrypt').disabled = connected;
 630             $D('noVNC_true_color').disabled = connected;
 631             if (UI.rfb && UI.rfb.get_display() &&
 632                 UI.rfb.get_display().get_cursor_uri()) {
 633                 $D('noVNC_cursor').disabled = connected;
 634             } else {
 635                 UI.updateSetting('cursor', !UI.isTouchDevice);
 636                 $D('noVNC_cursor').disabled = true;
 637             }
 638             $D('noVNC_clip').disabled = connected || UI.isTouchDevice;
 639             $D('noVNC_resize').disabled = connected;
 640             $D('noVNC_shared').disabled = connected;
 641             $D('noVNC_view_only').disabled = connected;
 642             $D('noVNC_path').disabled = connected;
 643             $D('noVNC_repeaterID').disabled = connected;
 644
 645             if (connected) {
 646                 UI.setViewClip();
 647                 UI.setMouseButton(1);
 648                 $D('clipboardButton').style.display = "inline";
 649                 $D('showKeyboard').style.display = "inline";
 650                 $D('noVNC_extra_keys').style.display = "";
 651                 $D('sendCtrlAltDelButton').style.display = "inline";
 652             } else {
 653                 UI.setMouseButton();
 654                 $D('clipboardButton').style.display = "none";
 655                 $D('showKeyboard').style.display = "none";
 656                 $D('noVNC_extra_keys').style.display = "none";
 657                 $D('sendCtrlAltDelButton').style.display = "none";
 658                 UI.updateXvpVisualState(0);
 659             }
 660
 661             // State change disables viewport dragging.
 662             // It is enabled (toggled) by direct click on the button
 663             UI.setViewDrag(false);
 664
 665             switch (UI.rfb_state) {
 666                 case 'fatal':
 667                 case 'failed':
 668                 case 'disconnected':
 669                     $D('connectButton').style.display = "";
 670                     $D('disconnectButton').style.display = "none";
 671                     UI.connSettingsOpen = false;
 672                     UI.toggleConnectPanel();
 673                     break;
 674                 case 'loaded':
 675                     $D('connectButton').style.display = "";
 676                     $D('disconnectButton').style.display = "none";
 677                     break;
 678                 default:
 679                     $D('connectButton').style.display = "none";
 680                     $D('disconnectButton').style.display = "";
 681                     break;
 682             }
 683
 684             //Util.Debug("<< updateVisualState");
 685         },
 686
 687         // Disable/enable XVP button
 688         updateXvpVisualState: function(ver) {
 689             if (ver >= 1) {
 690                 $D('xvpButton').style.display = 'inline';
 691             } else {
 692                 $D('xvpButton').style.display = 'none';
 693                 // Close XVP panel if open
 694                 if (UI.xvpOpen === true) {
 695                     UI.toggleXvpPanel();
 696                 }
 697             }
 698         },
 699
 700         // This resize can not be done until we know from the first Frame Buffer Update
 701         // if it is supported or not.
 702         // The resize is needed to make sure the server desktop size is updated to the
 703         // corresponding size of the current local window when reconnecting to an
 704         // existing session.
 705         FBUComplete: function(rfb, fbu) {
 706             UI.onresize();
 707             UI.rfb.set_onFBUComplete(function() { });
 708         },
 709
 710         // Display the desktop name in the document title
 711         updateDocumentTitle: function(rfb, name) {
 712             document.title = name + " - noVNC";
 713         },
 714
 715         clipReceive: function(rfb, text) {
 716             Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
 717             $D('noVNC_clipboard_text').value = text;
 718             Util.Debug("<< UI.clipReceive");
 719         },
 720
 721         connect: function() {
 722             UI.closeSettingsMenu();
 723             UI.toggleConnectPanel();
 724
 725             var host = $D('noVNC_host').value;
 726             var port = $D('noVNC_port').value;
 727             var password = $D('noVNC_password').value;
 728             var path = $D('noVNC_path').value;
 729             if ((!host) || (!port)) {
 730                 throw new Error("Must set host and port");
 731             }
 732
 733             UI.rfb.set_encrypt(UI.getSetting('encrypt'));
 734             UI.rfb.set_true_color(UI.getSetting('true_color'));
 735             UI.rfb.set_local_cursor(UI.getSetting('cursor'));
 736             UI.rfb.set_shared(UI.getSetting('shared'));
 737             UI.rfb.set_view_only(UI.getSetting('view_only'));
 738             UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
 739
 740             UI.rfb.connect(host, port, password, path);
 741
 742             //Close dialog.
 743             setTimeout(UI.setBarPosition, 100);
 744             $D('noVNC_logo').style.display = "none";
 745         },
 746
 747         disconnect: function() {
 748             UI.closeSettingsMenu();
 749             UI.rfb.disconnect();
 750
 751             // Restore the callback used for initial resize
 752             UI.rfb.set_onFBUComplete(UI.FBUComplete);
 753
 754             $D('noVNC_logo').style.display = "block";
 755             // Don't display the connection settings until we're actually disconnected
 756         },
 757
 758         displayBlur: function() {
 759             UI.rfb.get_keyboard().set_focused(false);
 760             UI.rfb.get_mouse().set_focused(false);
 761         },
 762
 763         displayFocus: function() {
 764             UI.rfb.get_keyboard().set_focused(true);
 765             UI.rfb.get_mouse().set_focused(true);
 766         },
 767
 768         clipClear: function() {
 769             $D('noVNC_clipboard_text').value = "";
 770             UI.rfb.clipboardPasteFrom("");
 771         },
 772
 773         clipSend: function() {
 774             var text = $D('noVNC_clipboard_text').value;
 775             Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
 776             UI.rfb.clipboardPasteFrom(text);
 777             Util.Debug("<< UI.clipSend");
 778         },
 779
 780         // Enable/disable and configure viewport clipping
 781         setViewClip: function(clip) {
 782             var display;
 783             if (UI.rfb) {
 784                 display = UI.rfb.get_display();
 785             } else {
 786                 return;
 787             }
 788
 789             var cur_clip = display.get_viewport();
 790
 791             if (typeof(clip) !== 'boolean') {
 792                 // Use current setting
 793                 clip = UI.getSetting('clip');
 794             }
 795
 796             if (clip && !cur_clip) {
 797                 // Turn clipping on
 798                 UI.updateSetting('clip', true);
 799             } else if (!clip && cur_clip) {
 800                 // Turn clipping off
 801                 UI.updateSetting('clip', false);
 802                 display.set_viewport(false);
 803                 $D('noVNC_canvas').style.position = 'static';
 804                 display.viewportChangeSize();
 805             }
 806             if (UI.getSetting('clip')) {
 807                 // If clipping, update clipping settings
 808                 $D('noVNC_canvas').style.position = 'absolute';
 809                 var pos = Util.getPosition($D('noVNC_canvas'));
 810                 var new_w = window.innerWidth - pos.x;
 811                 var new_h = window.innerHeight - pos.y;
 812                 display.set_viewport(true);
 813                 display.viewportChangeSize(new_w, new_h);
 814             }
 815         },
 816
 817         // Toggle/set/unset the viewport drag/move button
 818         setViewDrag: function(drag) {
 819             if (!UI.rfb) { return; }
 820
 821             UI.updateViewDragButton();
 822
 823             if (typeof(drag) === "undefined" ||
 824                 typeof(drag) === "object") {
 825                 // If not specified, then toggle
 826                 drag = !UI.rfb.get_viewportDrag();
 827             }
 828             var vmb = $D('noVNC_view_drag_button');
 829             if (drag) {
 830                 vmb.className = "noVNC_status_button_selected";
 831                 UI.rfb.set_viewportDrag(true);
 832             } else {
 833                 vmb.className = "noVNC_status_button";
 834                 UI.rfb.set_viewportDrag(false);
 835             }
 836         },
 837
 838         updateViewDragButton: function() {
 839             var vmb = $D('noVNC_view_drag_button');
 840             if (UI.rfb_state === 'normal' &&
 841                 UI.rfb.get_display().get_viewport() &&
 842                 UI.rfb.get_display().fbuClip()) {
 843                 vmb.style.display = "inline";
 844             } else {
 845                 vmb.style.display = "none";
 846             }
 847         },
 848
 849         // On touch devices, show the OS keyboard
 850         showKeyboard: function() {
 851             var kbi = $D('keyboardinput');
 852             var skb = $D('showKeyboard');
 853             var l = kbi.value.length;
 854             if(UI.keyboardVisible === false) {
 855                 kbi.focus();
 856                 try { kbi.setSelectionRange(l, l); } // Move the caret to the end
 857                 catch (err) {} // setSelectionRange is undefined in Google Chrome
 858                 UI.keyboardVisible = true;
 859                 skb.className = "noVNC_status_button_selected";
 860             } else if(UI.keyboardVisible === true) {
 861                 kbi.blur();
 862                 skb.className = "noVNC_status_button";
 863                 UI.keyboardVisible = false;
 864             }
 865         },
 866
 867         keepKeyboard: function() {
 868             clearTimeout(UI.hideKeyboardTimeout);
 869             if(UI.keyboardVisible === true) {
 870                 $D('keyboardinput').focus();
 871                 $D('showKeyboard').className = "noVNC_status_button_selected";
 872             } else if(UI.keyboardVisible === false) {
 873                 $D('keyboardinput').blur();
 874                 $D('showKeyboard').className = "noVNC_status_button";
 875             }
 876         },
 877
 878         keyboardinputReset: function() {
 879             var kbi = $D('keyboardinput');
 880             kbi.value = new Array(UI.defaultKeyboardinputLen).join("_");
 881             UI.lastKeyboardinput = kbi.value;
 882         },
 883
 884         // When normal keyboard events are left uncought, use the input events from
 885         // the keyboardinput element instead and generate the corresponding key events.
 886         // This code is required since some browsers on Android are inconsistent in
 887         // sending keyCodes in the normal keyboard events when using on screen keyboards.
 888         keyInput: function(event) {
 889             var newValue = event.target.value;
 890             var oldValue = UI.lastKeyboardinput;
 891
 892             var newLen;
 893             try {
 894                 // Try to check caret position since whitespace at the end
 895                 // will not be considered by value.length in some browsers
 896                 newLen = Math.max(event.target.selectionStart, newValue.length);
 897             } catch (err) {
 898                 // selectionStart is undefined in Google Chrome
 899                 newLen = newValue.length;
 900             }
 901             var oldLen = oldValue.length;
 902
 903             var backspaces;
 904             var inputs = newLen - oldLen;
 905             if (inputs < 0) {
 906                 backspaces = -inputs;
 907             } else {
 908                 backspaces = 0;
 909             }
 910
 911             // Compare the old string with the new to account for
 912             // text-corrections or other input that modify existing text
 913             var i;
 914             for (i = 0; i < Math.min(oldLen, newLen); i++) {
 915                 if (newValue.charAt(i) != oldValue.charAt(i)) {
 916                     inputs = newLen - i;
 917                     backspaces = oldLen - i;
 918                     break;
 919                 }
 920             }
 921
 922             // Send the key events
 923             for (i = 0; i < backspaces; i++) {
 924                 UI.rfb.sendKey(XK_BackSpace);
 925             }
 926             for (i = newLen - inputs; i < newLen; i++) {
 927                 UI.rfb.sendKey(newValue.charCodeAt(i));
 928             }
 929
 930             // Control the text content length in the keyboardinput element
 931             if (newLen > 2 * UI.defaultKeyboardinputLen) {
 932                 UI.keyboardinputReset();
 933             } else if (newLen < 1) {
 934                 // There always have to be some text in the keyboardinput
 935                 // element with which backspace can interact.
 936                 UI.keyboardinputReset();
 937                 // This sometimes causes the keyboard to disappear for a second
 938                 // but it is required for the android keyboard to recognize that
 939                 // text has been added to the field
 940                 event.target.blur();
 941                 // This has to be ran outside of the input handler in order to work
 942                 setTimeout(function() { UI.keepKeyboard(); }, 0);
 943             } else {
 944                 UI.lastKeyboardinput = newValue;
 945             }
 946         },
 947
 948         keyInputBlur: function() {
 949             $D('showKeyboard').className = "noVNC_status_button";
 950             //Weird bug in iOS if you change keyboardVisible
 951             //here it does not actually occur so next time
 952             //you click keyboard icon it doesnt work.
 953             UI.hideKeyboardTimeout = setTimeout(function() { UI.setKeyboard(); },100);
 954         },
 955
 956         showExtraKeys: function() {
 957             UI.keepKeyboard();
 958             if(UI.extraKeysVisible === false) {
 959                 $D('toggleCtrlButton').style.display = "inline";
 960                 $D('toggleAltButton').style.display = "inline";
 961                 $D('sendTabButton').style.display = "inline";
 962                 $D('sendEscButton').style.display = "inline";
 963                 $D('showExtraKeysButton').className = "noVNC_status_button_selected";
 964                 UI.extraKeysVisible = true;
 965             } else if(UI.extraKeysVisible === true) {
 966                 $D('toggleCtrlButton').style.display = "";
 967                 $D('toggleAltButton').style.display = "";
 968                 $D('sendTabButton').style.display = "";
 969                 $D('sendEscButton').style.display = "";
 970                 $D('showExtraKeysButton').className = "noVNC_status_button";
 971                 UI.extraKeysVisible = false;
 972             }
 973         },
 974
 975         toggleCtrl: function() {
 976             UI.keepKeyboard();
 977             if(UI.ctrlOn === false) {
 978                 UI.rfb.sendKey(XK_Control_L, true);
 979                 $D('toggleCtrlButton').className = "noVNC_status_button_selected";
 980                 UI.ctrlOn = true;
 981             } else if(UI.ctrlOn === true) {
 982                 UI.rfb.sendKey(XK_Control_L, false);
 983                 $D('toggleCtrlButton').className = "noVNC_status_button";
 984                 UI.ctrlOn = false;
 985             }
 986         },
 987
 988         toggleAlt: function() {
 989             UI.keepKeyboard();
 990             if(UI.altOn === false) {
 991                 UI.rfb.sendKey(XK_Alt_L, true);
 992                 $D('toggleAltButton').className = "noVNC_status_button_selected";
 993                 UI.altOn = true;
 994             } else if(UI.altOn === true) {
 995                 UI.rfb.sendKey(XK_Alt_L, false);
 996                 $D('toggleAltButton').className = "noVNC_status_button";
 997                 UI.altOn = false;
 998             }
 999         },
1000
1001         sendTab: function() {
1002             UI.keepKeyboard();
1003             UI.rfb.sendKey(XK_Tab);
1004         },
1005
1006         sendEsc: function() {
1007             UI.keepKeyboard();
1008             UI.rfb.sendKey(XK_Escape);
1009         },
1010
1011         setKeyboard: function() {
1012             UI.keyboardVisible = false;
1013         },
1014
1015         // iOS < Version 5 does not support position fixed. Javascript workaround:
1016         setOnscroll: function() {
1017             window.onscroll = function() {
1018                 UI.setBarPosition();
1019             };
1020         },
1021
1022         setResize: function () {
1023             window.onResize = function() {
1024                 UI.setBarPosition();
1025             };
1026         },
1027
1028         //Helper to add options to dropdown.
1029         addOption: function(selectbox, text, value) {
1030             var optn = document.createElement("OPTION");
1031             optn.text = text;
1032             optn.value = value;
1033             selectbox.options.add(optn);
1034         },
1035
1036         setBarPosition: function() {
1037             $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px';
1038             $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
1039
1040             var vncwidth = $D('noVNC_screen').style.offsetWidth;
1041             $D('noVNC-control-bar').style.width = vncwidth + 'px';
1042         }
1043
1044     };
1045 })();