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 "use strict";
  11 /*jslint white: false, browser: true */
  12 /*global window, $D, Util, WebUtil, RFB, Display */
  13
  14 // Load supporting scripts
  15 window.onscriptsload = function () { UI.load(); };
  16 Util.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
  17                    "input.js", "display.js", "jsunzip.js", "rfb.js"]);
  18
  19 var UI = {
  20
  21 rfb_state : 'loaded',
  22 settingsOpen : false,
  23 connSettingsOpen : false,
  24 popupStatusOpen : false,
  25 clipboardOpen: false,
  26 keyboardVisible: false,
  27
  28 // Setup rfb object, load settings from browser storage, then call
  29 // UI.init to setup the UI/menus
  30 load: function (callback) {
  31     WebUtil.initSettings(UI.start, callback);
  32 },
  33
  34 // Render default UI and initialize settings menu
  35 start: function(callback) {
  36     var html = '', i, sheet, sheets, llevels, port;
  37
  38     // Stylesheet selection dropdown
  39     sheet = WebUtil.selectStylesheet();
  40     sheets = WebUtil.getStylesheets();
  41     for (i = 0; i < sheets.length; i += 1) {
  42         UI.addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title);
  43     }
  44
  45     // Logging selection dropdown
  46     llevels = ['error', 'warn', 'info', 'debug'];
  47     for (i = 0; i < llevels.length; i += 1) {
  48         UI.addOption($D('noVNC_logging'),llevels[i], llevels[i]);
  49     }
  50
  51     // Settings with immediate effects
  52     UI.initSetting('logging', 'warn');
  53     WebUtil.init_logging(UI.getSetting('logging'));
  54
  55     UI.initSetting('stylesheet', 'default');
  56     WebUtil.selectStylesheet(null);
  57     // call twice to get around webkit bug
  58     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
  59
  60     // if port == 80 (or 443) then it won't be present and should be
  61     // set manually
  62     port = window.location.port;
  63     if (!port) {
  64         if (window.location.protocol.substring(0,5) == 'https') {
  65             port = 443;
  66         }
  67         else if (window.location.protocol.substring(0,4) == 'http') {
  68             port = 80;
  69         }
  70     }
  71
  72     /* Populate the controls if defaults are provided in the URL */
  73     UI.initSetting('host', window.location.hostname);
  74     UI.initSetting('port', port);
  75     UI.initSetting('password', '');
  76     UI.initSetting('encrypt', (window.location.protocol === "https:"));
  77     UI.initSetting('true_color', true);
  78     UI.initSetting('cursor', false);
  79     UI.initSetting('shared', true);
  80     UI.initSetting('view_only', false);
  81     UI.initSetting('connectTimeout', 2);
  82     UI.initSetting('path', 'websockify');
  83     UI.initSetting('repeaterID', '');
  84
  85     UI.rfb = RFB({'target': $D('noVNC_canvas'),
  86                   'onUpdateState': UI.updateState,
  87                   'onClipboard': UI.clipReceive});
  88     UI.updateVisualState();
  89
  90     // Unfocus clipboard when over the VNC area
  91     //$D('VNC_screen').onmousemove = function () {
  92     //         var keyboard = UI.rfb.get_keyboard();
  93     //        if ((! keyboard) || (! keyboard.get_focused())) {
  94     //            $D('VNC_clipboard_text').blur();
  95     //         }
  96     //    };
  97
  98     // Show mouse selector buttons on touch screen devices
  99     if ('ontouchstart' in document.documentElement) {
 100         // Show mobile buttons
 101         $D('noVNC_mobile_buttons').style.display = "inline";
 102         UI.setMouseButton();
 103         // Remove the address bar
 104         setTimeout(function() { window.scrollTo(0, 1); }, 100);
 105         UI.forceSetting('clip', true);
 106         $D('noVNC_clip').disabled = true;
 107     } else {
 108         UI.initSetting('clip', false);
 109     }
 110
 111     //iOS Safari does not support CSS position:fixed.
 112     //This detects iOS devices and enables javascript workaround.
 113     if ((navigator.userAgent.match(/iPhone/i)) ||
 114         (navigator.userAgent.match(/iPod/i)) ||
 115         (navigator.userAgent.match(/iPad/i))) {
 116         //UI.setOnscroll();
 117         //UI.setResize();
 118     }
 119     UI.setBarPosition();
 120
 121     $D('noVNC_host').focus();
 122
 123     UI.setViewClip();
 124     Util.addEvent(window, 'resize', UI.setViewClip);
 125
 126     Util.addEvent(window, 'beforeunload', function () {
 127         if (UI.rfb_state === 'normal') {
 128             return "You are currently connected.";
 129         }
 130     } );
 131
 132     // Show description by default when hosted at for kanaka.github.com
 133     if (location.host === "kanaka.github.com") {
 134         // Open the description dialog
 135         $D('noVNC_description').style.display = "block";
 136     } else {
 137         // Open the connect panel on first load
 138         UI.toggleConnectPanel();
 139     }
 140
 141     // Add mouse event click/focus/blur event handlers to the UI
 142     UI.addMouseHandlers();
 143
 144     if (typeof callback === "function") {
 145         callback(UI.rfb);
 146     }
 147 },
 148
 149 addMouseHandlers: function() {
 150     // Setup interface handlers that can't be inline
 151     $D("noVNC_view_drag_button").onclick = UI.setViewDrag;
 152     $D("noVNC_mouse_button0").onclick = function () { UI.setMouseButton(1); };
 153     $D("noVNC_mouse_button1").onclick = function () { UI.setMouseButton(2); };
 154     $D("noVNC_mouse_button2").onclick = function () { UI.setMouseButton(4); };
 155     $D("noVNC_mouse_button4").onclick = function () { UI.setMouseButton(0); };
 156     $D("showKeyboard").onclick = UI.showKeyboard;
 157     //$D("keyboardinput").onkeydown = function (event) { onKeyDown(event); };
 158     $D("keyboardinput").onblur = UI.keyInputBlur;
 159
 160     $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
 161     $D("noVNC_status").onclick = UI.togglePopupStatusPanel;
 162     $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
 163     $D("clipboardButton").onclick = UI.toggleClipboardPanel;
 164     $D("settingsButton").onclick = UI.toggleSettingsPanel;
 165     $D("connectButton").onclick = UI.toggleConnectPanel;
 166     $D("disconnectButton").onclick = UI.disconnect;
 167     $D("descriptionButton").onclick = UI.toggleConnectPanel;
 168
 169     $D("noVNC_clipboard_text").onfocus = UI.displayBlur;
 170     $D("noVNC_clipboard_text").onblur = UI.displayFocus;
 171     $D("noVNC_clipboard_text").onchange = UI.clipSend;
 172     $D("noVNC_clipboard_clear_button").onclick = UI.clipClear;
 173
 174     $D("noVNC_settings_menu").onmouseover = UI.displayBlur;
 175     $D("noVNC_settings_menu").onmouseover = UI.displayFocus;
 176     $D("noVNC_apply").onclick = UI.settingsApply;
 177
 178     $D("noVNC_connect_button").onclick = UI.connect;
 179 },
 180
 181 // Read form control compatible setting from cookie
 182 getSetting: function(name) {
 183     var val, ctrl = $D('noVNC_' + name);
 184     val = WebUtil.readSetting(name);
 185     if (val !== null && ctrl.type === 'checkbox') {
 186         if (val.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
 187             val = false;
 188         } else {
 189             val = true;
 190         }
 191     }
 192     return val;
 193 },
 194
 195 // Update cookie and form control setting. If value is not set, then
 196 // updates from control to current cookie setting.
 197 updateSetting: function(name, value) {
 198
 199     var i, ctrl = $D('noVNC_' + name);
 200     // Save the cookie for this session
 201     if (typeof value !== 'undefined') {
 202         WebUtil.writeSetting(name, value);
 203     }
 204
 205     // Update the settings control
 206     value = UI.getSetting(name);
 207
 208     if (ctrl.type === 'checkbox') {
 209         ctrl.checked = value;
 210
 211     } else if (typeof ctrl.options !== 'undefined') {
 212         for (i = 0; i < ctrl.options.length; i += 1) {
 213             if (ctrl.options[i].value === value) {
 214                 ctrl.selectedIndex = i;
 215                 break;
 216             }
 217         }
 218     } else {
 219         /*Weird IE9 error leads to 'null' appearring
 220         in textboxes instead of ''.*/
 221         if (value === null) {
 222             value = "";
 223         }
 224         ctrl.value = value;
 225     }
 226 },
 227
 228 // Save control setting to cookie
 229 saveSetting: function(name) {
 230     var val, ctrl = $D('noVNC_' + name);
 231     if (ctrl.type === 'checkbox') {
 232         val = ctrl.checked;
 233     } else if (typeof ctrl.options !== 'undefined') {
 234         val = ctrl.options[ctrl.selectedIndex].value;
 235     } else {
 236         val = ctrl.value;
 237     }
 238     WebUtil.writeSetting(name, val);
 239     //Util.Debug("Setting saved '" + name + "=" + val + "'");
 240     return val;
 241 },
 242
 243 // Initial page load read/initialization of settings
 244 initSetting: function(name, defVal) {
 245     var val;
 246
 247     // Check Query string followed by cookie
 248     val = WebUtil.getQueryVar(name);
 249     if (val === null) {
 250         val = WebUtil.readSetting(name, defVal);
 251     }
 252     UI.updateSetting(name, val);
 253  //Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
 254     return val;
 255 },
 256
 257 // Force a setting to be a certain value
 258 forceSetting: function(name, val) {
 259     UI.updateSetting(name, val);
 260     return val;
 261 },
 262
 263
 264 // Show the popup status panel
 265 togglePopupStatusPanel: function() {
 266     var psp = $D('noVNC_popup_status_panel');
 267     if (UI.popupStatusOpen === true) {
 268         psp.style.display = "none";
 269         UI.popupStatusOpen = false;
 270     } else {
 271         psp.innerHTML = $D('noVNC_status').innerHTML;
 272         psp.style.display = "block";
 273         psp.style.left = window.innerWidth/2 -
 274             parseInt(window.getComputedStyle(psp, false).width)/2 -30 + "px";
 275         UI.popupStatusOpen = true;
 276     }
 277 },
 278
 279 // Show the clipboard panel
 280 toggleClipboardPanel: function() {
 281     // Close the description panel
 282     $D('noVNC_description').style.display = "none";
 283     // Close settings if open
 284     if (UI.settingsOpen === true) {
 285         UI.settingsApply();
 286         UI.closeSettingsMenu();
 287     }
 288     // Close connection settings if open
 289     if (UI.connSettingsOpen === true) {
 290         UI.toggleConnectPanel();
 291     }
 292     // Close popup status panel if open
 293     if (UI.popupStatusOpen === true) {
 294         UI.togglePopupStatusPanel();
 295     }
 296     // Toggle Clipboard Panel
 297     if (UI.clipboardOpen === true) {
 298         $D('noVNC_clipboard').style.display = "none";
 299         $D('clipboardButton').className = "noVNC_status_button";
 300         UI.clipboardOpen = false;
 301     } else {
 302         $D('noVNC_clipboard').style.display = "block";
 303         $D('clipboardButton').className = "noVNC_status_button_selected";
 304         UI.clipboardOpen = true;
 305     }
 306 },
 307
 308 // Show the connection settings panel/menu
 309 toggleConnectPanel: function() {
 310     // Close the description panel
 311     $D('noVNC_description').style.display = "none";
 312     // Close connection settings if open
 313     if (UI.settingsOpen === true) {
 314         UI.settingsApply();
 315         UI.closeSettingsMenu();
 316         $D('connectButton').className = "noVNC_status_button";
 317     }
 318     // Close clipboard panel if open
 319     if (UI.clipboardOpen === true) {
 320         UI.toggleClipboardPanel();
 321     }
 322     // Close popup status panel if open
 323     if (UI.popupStatusOpen === true) {
 324         UI.togglePopupStatusPanel();
 325     }
 326
 327     // Toggle Connection Panel
 328     if (UI.connSettingsOpen === true) {
 329         $D('noVNC_controls').style.display = "none";
 330         $D('connectButton').className = "noVNC_status_button";
 331         UI.connSettingsOpen = false;
 332         UI.saveSetting('host');
 333         UI.saveSetting('port');
 334         //UI.saveSetting('password');
 335     } else {
 336         $D('noVNC_controls').style.display = "block";
 337         $D('connectButton').className = "noVNC_status_button_selected";
 338         UI.connSettingsOpen = true;
 339         $D('noVNC_host').focus();
 340     }
 341 },
 342
 343 // Toggle the settings menu:
 344 //   On open, settings are refreshed from saved cookies.
 345 //   On close, settings are applied
 346 toggleSettingsPanel: function() {
 347     // Close the description panel
 348     $D('noVNC_description').style.display = "none";
 349     if (UI.settingsOpen) {
 350         UI.settingsApply();
 351         UI.closeSettingsMenu();
 352     } else {
 353         UI.updateSetting('encrypt');
 354         UI.updateSetting('true_color');
 355         if (UI.rfb.get_display().get_cursor_uri()) {
 356             UI.updateSetting('cursor');
 357         } else {
 358             UI.updateSetting('cursor', false);
 359             $D('noVNC_cursor').disabled = true;
 360         }
 361         UI.updateSetting('clip');
 362         UI.updateSetting('shared');
 363         UI.updateSetting('view_only');
 364         UI.updateSetting('connectTimeout');
 365         UI.updateSetting('path');
 366         UI.updateSetting('repeaterID');
 367         UI.updateSetting('stylesheet');
 368         UI.updateSetting('logging');
 369
 370         UI.openSettingsMenu();
 371     }
 372 },
 373
 374 // Open menu
 375 openSettingsMenu: function() {
 376     // Close the description panel
 377     $D('noVNC_description').style.display = "none";
 378     // Close clipboard panel if open
 379     if (UI.clipboardOpen === true) {
 380         UI.toggleClipboardPanel();
 381     }
 382     // Close connection settings if open
 383     if (UI.connSettingsOpen === true) {
 384         UI.toggleConnectPanel();
 385     }
 386     // Close popup status panel if open
 387     if (UI.popupStatusOpen === true) {
 388         UI.togglePopupStatusPanel();
 389     }
 390     $D('noVNC_settings').style.display = "block";
 391     $D('settingsButton').className = "noVNC_status_button_selected";
 392     UI.settingsOpen = true;
 393 },
 394
 395 // Close menu (without applying settings)
 396 closeSettingsMenu: function() {
 397     $D('noVNC_settings').style.display = "none";
 398     $D('settingsButton').className = "noVNC_status_button";
 399     UI.settingsOpen = false;
 400 },
 401
 402 // Save/apply settings when 'Apply' button is pressed
 403 settingsApply: function() {
 404     //Util.Debug(">> settingsApply");
 405     UI.saveSetting('encrypt');
 406     UI.saveSetting('true_color');
 407     if (UI.rfb.get_display().get_cursor_uri()) {
 408         UI.saveSetting('cursor');
 409     }
 410     UI.saveSetting('clip');
 411     UI.saveSetting('shared');
 412     UI.saveSetting('view_only');
 413     UI.saveSetting('connectTimeout');
 414     UI.saveSetting('path');
 415     UI.saveSetting('repeaterID');
 416     UI.saveSetting('stylesheet');
 417     UI.saveSetting('logging');
 418
 419     // Settings with immediate (non-connected related) effect
 420     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
 421     WebUtil.init_logging(UI.getSetting('logging'));
 422     UI.setViewClip();
 423     UI.setViewDrag(UI.rfb.get_viewportDrag());
 424     //Util.Debug("<< settingsApply");
 425 },
 426
 427
 428
 429 setPassword: function() {
 430     UI.rfb.sendPassword($D('noVNC_password').value);
 431     //Reset connect button.
 432     $D('noVNC_connect_button').value = "Connect";
 433     $D('noVNC_connect_button').onclick = UI.Connect;
 434     //Hide connection panel.
 435     UI.toggleConnectPanel();
 436     return false;
 437 },
 438
 439 sendCtrlAltDel: function() {
 440     UI.rfb.sendCtrlAltDel();
 441 },
 442
 443 setMouseButton: function(num) {
 444     var b, blist = [0, 1,2,4], button;
 445
 446     if (typeof num === 'undefined') {
 447         // Disable mouse buttons
 448         num = -1;
 449     }
 450     if (UI.rfb) {
 451         UI.rfb.get_mouse().set_touchButton(num);
 452     }
 453
 454     for (b = 0; b < blist.length; b++) {
 455         button = $D('noVNC_mouse_button' + blist[b]);
 456         if (blist[b] === num) {
 457             button.style.display = "";
 458         } else {
 459             button.style.display = "none";
 460             /*
 461             button.style.backgroundColor = "black";
 462             button.style.color = "lightgray";
 463             button.style.backgroundColor = "";
 464             button.style.color = "";
 465             */
 466         }
 467     }
 468 },
 469
 470 updateState: function(rfb, state, oldstate, msg) {
 471     var s, sb, c, d, cad, vd, klass;
 472     UI.rfb_state = state;
 473     switch (state) {
 474         case 'failed':
 475         case 'fatal':
 476             klass = "noVNC_status_error";
 477             break;
 478         case 'normal':
 479             klass = "noVNC_status_normal";
 480             break;
 481         case 'disconnected':
 482             $D('noVNC_logo').style.display = "block";
 483             // Fall through
 484         case 'loaded':
 485             klass = "noVNC_status_normal";
 486             break;
 487         case 'password':
 488             UI.toggleConnectPanel();
 489
 490             $D('noVNC_connect_button').value = "Send Password";
 491             $D('noVNC_connect_button').onclick = UI.setPassword;
 492             $D('noVNC_password').focus();
 493
 494             klass = "noVNC_status_warn";
 495             break;
 496         default:
 497             klass = "noVNC_status_warn";
 498             break;
 499     }
 500
 501     if (typeof(msg) !== 'undefined') {
 502         $D('noVNC-control-bar').setAttribute("class", klass);
 503         $D('noVNC_status').innerHTML = msg;
 504     }
 505
 506     UI.updateVisualState();
 507 },
 508
 509 // Disable/enable controls depending on connection state
 510 updateVisualState: function() {
 511     var connected = UI.rfb_state === 'normal' ? true : false;
 512
 513     //Util.Debug(">> updateVisualState");
 514     $D('noVNC_encrypt').disabled = connected;
 515     $D('noVNC_true_color').disabled = connected;
 516     if (UI.rfb && UI.rfb.get_display() &&
 517         UI.rfb.get_display().get_cursor_uri()) {
 518         $D('noVNC_cursor').disabled = connected;
 519     } else {
 520         UI.updateSetting('cursor', false);
 521         $D('noVNC_cursor').disabled = true;
 522     }
 523     $D('noVNC_shared').disabled = connected;
 524     $D('noVNC_view_only').disabled = connected;
 525     $D('noVNC_connectTimeout').disabled = connected;
 526     $D('noVNC_path').disabled = connected;
 527     $D('noVNC_repeaterID').disabled = connected;
 528
 529     if (connected) {
 530         UI.setViewClip();
 531         UI.setMouseButton(1);
 532         $D('clipboardButton').style.display = "inline";
 533         $D('showKeyboard').style.display = "inline";
 534         $D('sendCtrlAltDelButton').style.display = "inline";
 535     } else {
 536         UI.setMouseButton();
 537         $D('clipboardButton').style.display = "none";
 538         $D('showKeyboard').style.display = "none";
 539         $D('sendCtrlAltDelButton').style.display = "none";
 540     }
 541     // State change disables viewport dragging.
 542     // It is enabled (toggled) by direct click on the button
 543     UI.setViewDrag(false);
 544
 545     switch (UI.rfb_state) {
 546         case 'fatal':
 547         case 'failed':
 548         case 'loaded':
 549         case 'disconnected':
 550             $D('connectButton').style.display = "";
 551             $D('disconnectButton').style.display = "none";
 552             break;
 553         default:
 554             $D('connectButton').style.display = "none";
 555             $D('disconnectButton').style.display = "";
 556             break;
 557     }
 558
 559     //Util.Debug("<< updateVisualState");
 560 },
 561
 562
 563 clipReceive: function(rfb, text) {
 564     Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
 565     $D('noVNC_clipboard_text').value = text;
 566     Util.Debug("<< UI.clipReceive");
 567 },
 568
 569
 570 connect: function() {
 571     var host, port, password, path;
 572
 573     UI.closeSettingsMenu();
 574     UI.toggleConnectPanel();
 575
 576     host = $D('noVNC_host').value;
 577     port = $D('noVNC_port').value;
 578     password = $D('noVNC_password').value;
 579     path = $D('noVNC_path').value;
 580     if ((!host) || (!port)) {
 581         throw("Must set host and port");
 582     }
 583
 584     UI.rfb.set_encrypt(UI.getSetting('encrypt'));
 585     UI.rfb.set_true_color(UI.getSetting('true_color'));
 586     UI.rfb.set_local_cursor(UI.getSetting('cursor'));
 587     UI.rfb.set_shared(UI.getSetting('shared'));
 588     UI.rfb.set_view_only(UI.getSetting('view_only'));
 589     UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout'));
 590     UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
 591
 592     UI.rfb.connect(host, port, password, path);
 593
 594     //Close dialog.
 595     setTimeout(UI.setBarPosition, 100);
 596     $D('noVNC_logo').style.display = "none";
 597 },
 598
 599 disconnect: function() {
 600     UI.closeSettingsMenu();
 601     UI.rfb.disconnect();
 602
 603     $D('noVNC_logo').style.display = "block";
 604     UI.connSettingsOpen = false;
 605     UI.toggleConnectPanel();
 606 },
 607
 608 displayBlur: function() {
 609     UI.rfb.get_keyboard().set_focused(false);
 610     UI.rfb.get_mouse().set_focused(false);
 611 },
 612
 613 displayFocus: function() {
 614     UI.rfb.get_keyboard().set_focused(true);
 615     UI.rfb.get_mouse().set_focused(true);
 616 },
 617
 618 clipClear: function() {
 619     $D('noVNC_clipboard_text').value = "";
 620     UI.rfb.clipboardPasteFrom("");
 621 },
 622
 623 clipSend: function() {
 624     var text = $D('noVNC_clipboard_text').value;
 625     Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
 626     UI.rfb.clipboardPasteFrom(text);
 627     Util.Debug("<< UI.clipSend");
 628 },
 629
 630
 631 // Enable/disable and configure viewport clipping
 632 setViewClip: function(clip) {
 633     var display, cur_clip, pos, new_w, new_h;
 634
 635     if (UI.rfb) {
 636         display = UI.rfb.get_display();
 637     } else {
 638         return;
 639     }
 640
 641     cur_clip = display.get_viewport();
 642
 643     if (typeof(clip) !== 'boolean') {
 644         // Use current setting
 645         clip = UI.getSetting('clip');
 646     }
 647
 648     if (clip && !cur_clip) {
 649         // Turn clipping on
 650         UI.updateSetting('clip', true);
 651     } else if (!clip && cur_clip) {
 652         // Turn clipping off
 653         UI.updateSetting('clip', false);
 654         display.set_viewport(false);
 655         $D('noVNC_canvas').style.position = 'static';
 656         display.viewportChange();
 657     }
 658     if (UI.getSetting('clip')) {
 659         // If clipping, update clipping settings
 660         $D('noVNC_canvas').style.position = 'absolute';
 661         pos = Util.getPosition($D('noVNC_canvas'));
 662         new_w = window.innerWidth - pos.x;
 663         new_h = window.innerHeight - pos.y;
 664         display.set_viewport(true);
 665         display.viewportChange(0, 0, new_w, new_h);
 666     }
 667 },
 668
 669 // Toggle/set/unset the viewport drag/move button
 670 setViewDrag: function(drag) {
 671     var vmb = $D('noVNC_view_drag_button');
 672     if (!UI.rfb) { return; }
 673
 674     if (UI.rfb_state === 'normal' &&
 675         UI.rfb.get_display().get_viewport()) {
 676         vmb.style.display = "inline";
 677     } else {
 678         vmb.style.display = "none";
 679     }
 680
 681     if (typeof(drag) === "undefined" ||
 682         typeof(drag) === "object") {
 683         // If not specified, then toggle
 684         drag = !UI.rfb.get_viewportDrag();
 685     }
 686     if (drag) {
 687         vmb.className = "noVNC_status_button_selected";
 688         UI.rfb.set_viewportDrag(true);
 689     } else {
 690         vmb.className = "noVNC_status_button";
 691         UI.rfb.set_viewportDrag(false);
 692     }
 693 },
 694
 695 // On touch devices, show the OS keyboard
 696 showKeyboard: function() {
 697     if(UI.keyboardVisible === false) {
 698         $D('keyboardinput').focus();
 699         UI.keyboardVisible = true;
 700         $D('showKeyboard').className = "noVNC_status_button_selected";
 701     } else if(UI.keyboardVisible === true) {
 702         $D('keyboardinput').blur();
 703         $D('showKeyboard').className = "noVNC_status_button";
 704         UI.keyboardVisible = false;
 705     }
 706 },
 707
 708 keyInputBlur: function() {
 709     $D('showKeyboard').className = "noVNC_status_button";
 710     //Weird bug in iOS if you change keyboardVisible
 711     //here it does not actually occur so next time
 712     //you click keyboard icon it doesnt work.
 713     setTimeout(function() { UI.setKeyboard(); },100);
 714 },
 715
 716 setKeyboard: function() {
 717     UI.keyboardVisible = false;
 718 },
 719
 720 // iOS < Version 5 does not support position fixed. Javascript workaround:
 721 setOnscroll: function() {
 722     window.onscroll = function() {
 723         UI.setBarPosition();
 724     };
 725 },
 726
 727 setResize: function () {
 728     window.onResize = function() {
 729         UI.setBarPosition();
 730     };
 731 },
 732
 733 //Helper to add options to dropdown.
 734 addOption: function(selectbox,text,value )
 735 {
 736     var optn = document.createElement("OPTION");
 737     optn.text = text;
 738     optn.value = value;
 739     selectbox.options.add(optn);
 740 },
 741
 742 setBarPosition: function() {
 743     $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px';
 744     $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
 745
 746     var vncwidth = $D('noVNC_screen').style.offsetWidth;
 747     $D('noVNC-control-bar').style.width = vncwidth + 'px';
 748 }
 749
 750 };
 751
 752
 753
 754