include/ui.js

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