src/main/webapp/scripts/interface.js

   1
   2 // UI Definition
   3 var GuacamoleUI = {
   4
   5     "viewport"    : document.getElementById("viewportClone"),
   6     "display"     : document.getElementById("display"),
   7     "menu"        : document.getElementById("menu"),
   8     "menuControl" : document.getElementById("menuControl"),
   9     "touchMenu"   : document.getElementById("touchMenu"),
  10     "logo"        : document.getElementById("status-logo"),
  11     "eventTarget" : document.getElementById("eventTarget"),
  12
  13     "buttons": {
  14
  15         "showClipboard": document.getElementById("showClipboard"),
  16         "showKeyboard" : document.getElementById("showKeyboard"),
  17         "ctrlAltDelete": document.getElementById("ctrlAltDelete"),
  18         "reconnect"    : document.getElementById("reconnect"),
  19         "logout"       : document.getElementById("logout")
  20
  21     },
  22
  23     "containers": {
  24         "state"    : document.getElementById("statusDialog"),
  25         "clipboard": document.getElementById("clipboardDiv"),
  26         "keyboard" : document.getElementById("keyboardContainer")
  27     },
  28
  29     "state"     : document.getElementById("statusText"),
  30     "clipboard" : document.getElementById("clipboard")
  31
  32 };
  33
  34 // Constant UI initialization and behavior
  35 (function() {
  36
  37     var menu_shaded = false;
  38
  39     var shade_interval = null;
  40     var show_interval = null;
  41
  42     // Cache error image (might not be available when error occurs)
  43     var guacErrorImage = new Image();
  44     guacErrorImage.src = "images/noguacamole-logo-24.png";
  45
  46     // Function for adding a class to an element
  47     var addClass;
  48
  49     // Function for removing a class from an element
  50     var removeClass;
  51
  52     // If Node.classList is supported, implement addClass/removeClass using that
  53     if (Node.classList) {
  54
  55         addClass = function(element, classname) {
  56             element.classList.add(classname);
  57         };
  58
  59         removeClass = function(element, classname) {
  60             element.classList.remove(classname);
  61         };
  62
  63     }
  64
  65     // Otherwise, implement own
  66     else {
  67
  68         addClass = function(element, classname) {
  69
  70             // Simply add new class
  71             element.className += " " + classname;
  72
  73         };
  74
  75         removeClass = function(element, classname) {
  76
  77             // Filter out classes with given name
  78             element.className = element.className.replace(/([^ ]+)[ ]*/g,
  79                 function(match, testClassname, spaces, offset, string) {
  80
  81                     // If same class, remove
  82                     if (testClassname == classname)
  83                         return "";
  84
  85                     // Otherwise, allow
  86                     return match;
  87
  88                 }
  89             );
  90
  91         };
  92
  93     }
  94
  95
  96     GuacamoleUI.hideStatus = function() {
  97         removeClass(document.body, "guac-error");
  98         GuacamoleUI.containers.state.style.visibility = "hidden";
  99         GuacamoleUI.display.style.opacity = "1";
 100     };
 101
 102     GuacamoleUI.showStatus = function(text) {
 103         removeClass(document.body, "guac-error");
 104         GuacamoleUI.containers.state.style.visibility = "visible";
 105         GuacamoleUI.state.textContent = text;
 106         GuacamoleUI.display.style.opacity = "1";
 107     };
 108
 109     GuacamoleUI.showError = function(error) {
 110         addClass(document.body, "guac-error");
 111         GuacamoleUI.state.textContent = error;
 112         GuacamoleUI.display.style.opacity = "0.1";
 113     };
 114
 115     GuacamoleUI.shadeMenu = function() {
 116
 117         if (!menu_shaded) {
 118
 119             var step = Math.floor(GuacamoleUI.menu.offsetHeight / 10) + 1;
 120             var offset = 0;
 121             menu_shaded = true;
 122
 123             window.clearInterval(show_interval);
 124             shade_interval = window.setInterval(function() {
 125
 126                 offset -= step;
 127                 GuacamoleUI.menu.style.top = offset + "px";
 128
 129                 if (offset <= -GuacamoleUI.menu.offsetHeight) {
 130                     window.clearInterval(shade_interval);
 131                     GuacamoleUI.menu.style.visiblity = "hidden";
 132                 }
 133
 134             }, 30);
 135         }
 136
 137     };
 138
 139     GuacamoleUI.showMenu = function() {
 140
 141         if (menu_shaded) {
 142
 143             var step = Math.floor(GuacamoleUI.menu.offsetHeight / 5) + 1;
 144             var offset = -GuacamoleUI.menu.offsetHeight;
 145             menu_shaded = false;
 146             GuacamoleUI.menu.style.visiblity = "";
 147
 148             window.clearInterval(shade_interval);
 149             show_interval = window.setInterval(function() {
 150
 151                 offset += step;
 152
 153                 if (offset >= 0) {
 154                     offset = 0;
 155                     window.clearInterval(show_interval);
 156                 }
 157
 158                 GuacamoleUI.menu.style.top = offset + "px";
 159
 160             }, 30);
 161         }
 162
 163     };
 164
 165     // Show/Hide clipboard
 166     GuacamoleUI.buttons.showClipboard.onclick = function() {
 167
 168         var displayed = GuacamoleUI.containers.clipboard.style.display;
 169         if (displayed != "block") {
 170             GuacamoleUI.containers.clipboard.style.display = "block";
 171             GuacamoleUI.buttons.showClipboard.innerHTML = "Hide Clipboard";
 172         }
 173         else {
 174             GuacamoleUI.containers.clipboard.style.display = "none";
 175             GuacamoleUI.buttons.showClipboard.innerHTML = "Show Clipboard";
 176             GuacamoleUI.clipboard.onchange();
 177         }
 178
 179     };
 180
 181     /**
 182      * When GuacamoleUI.oskMode == OSK_MODE_NATIVE, "Show Keyboard" tries
 183      * to use the native OSK instead of the Guacamole OSK.
 184      */
 185     GuacamoleUI.OSK_MODE_NATIVE = 1;
 186
 187     /**
 188      * When GuacamoleUI.oskMode == OSK_MODE_GUAC, "Show Keyboard" uses the
 189      * Guacamole OSK, regardless of whether a native OSK is available.
 190      */
 191     GuacamoleUI.OSK_MODE_GUAC   = 2;
 192
 193     // Assume no native OSK by default
 194     GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_GUAC;
 195
 196     // Show/Hide keyboard
 197     var keyboardResizeInterval = null;
 198     GuacamoleUI.buttons.showKeyboard.onclick = function() {
 199
 200         // If Guac OSK shown, hide it.
 201         var displayed = GuacamoleUI.containers.keyboard.style.display;
 202         if (displayed == "block") {
 203             GuacamoleUI.containers.keyboard.style.display = "none";
 204             GuacamoleUI.buttons.showKeyboard.textContent = "Show Keyboard";
 205
 206             window.onresize = null;
 207             window.clearInterval(keyboardResizeInterval);
 208         }
 209
 210         // If not shown ... action depends on OSK mode.
 211         else {
 212
 213             // If we think the platform has a native OSK, use the event target to
 214             // cause it to display.
 215             if (GuacamoleUI.oskMode == GuacamoleUI.OSK_MODE_NATIVE) {
 216
 217                 // ...but use the Guac OSK if clicked again
 218                 GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_GUAC;
 219
 220                 // Try to show native OSK by focusing eventTarget.
 221                 GuacamoleUI.eventTarget.focus();
 222                 return;
 223
 224             }
 225
 226             // Ensure event target is NOT focused if we are using the Guac OSK.
 227             GuacamoleUI.eventTarget.blur();
 228
 229             GuacamoleUI.containers.keyboard.style.display = "block";
 230             GuacamoleUI.buttons.showKeyboard.textContent = "Hide Keyboard";
 231
 232             // Automatically update size
 233             window.onresize = updateKeyboardSize;
 234             keyboardResizeInterval = window.setInterval(updateKeyboardSize, 30);
 235
 236             updateKeyboardSize();
 237         }
 238
 239
 240     };
 241
 242     // Logout
 243     GuacamoleUI.buttons.logout.onclick = function() {
 244         window.location.href = "logout";
 245     };
 246
 247     // Timeouts for detecting if users wants menu to open or close
 248     var detectMenuOpenTimeout = null;
 249     var detectMenuCloseTimeout = null;
 250
 251     // Clear detection timeouts
 252     GuacamoleUI.resetMenuDetect = function() {
 253
 254         if (detectMenuOpenTimeout != null) {
 255             window.clearTimeout(detectMenuOpenTimeout);
 256             detectMenuOpenTimeout = null;
 257         }
 258
 259         if (detectMenuCloseTimeout != null) {
 260             window.clearTimeout(detectMenuCloseTimeout);
 261             detectMenuCloseTimeout = null;
 262         }
 263
 264     };
 265
 266     // Initiate detection of menu open action. If not canceled through some
 267     // user event, menu will open.
 268     GuacamoleUI.startMenuOpenDetect = function() {
 269
 270         if (!detectMenuOpenTimeout) {
 271
 272             // Clear detection state
 273             GuacamoleUI.resetMenuDetect();
 274
 275             // Wait and then show menu
 276             detectMenuOpenTimeout = window.setTimeout(function() {
 277
 278                 // If menu opened via mouse, do not show native OSK
 279                 GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_GUAC;
 280
 281                 GuacamoleUI.showMenu();
 282                 detectMenuOpenTimeout = null;
 283             }, 325);
 284
 285         }
 286
 287     };
 288
 289     // Initiate detection of menu close action. If not canceled through some
 290     // user mouse event, menu will close.
 291     GuacamoleUI.startMenuCloseDetect = function() {
 292
 293         if (!detectMenuCloseTimeout) {
 294
 295             // Clear detection state
 296             GuacamoleUI.resetMenuDetect();
 297
 298             // Wait and then shade menu
 299             detectMenuCloseTimeout = window.setTimeout(function() {
 300                 GuacamoleUI.shadeMenu();
 301                 detectMenuCloseTimeout = null;
 302             }, 500);
 303
 304         }
 305
 306     };
 307
 308     // Show menu if mouseover any part of menu
 309     GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.showMenu, true);
 310
 311     // Stop detecting menu state change intents if mouse is over menu
 312     GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.resetMenuDetect, true);
 313
 314     // When mouse hovers over top of screen, start detection of intent to open menu
 315     GuacamoleUI.menuControl.addEventListener('mousemove', GuacamoleUI.startMenuOpenDetect, true);
 316
 317     var menuShowLongPressTimeout = null;
 318
 319     GuacamoleUI.startLongPressDetect = function() {
 320
 321         if (!menuShowLongPressTimeout) {
 322
 323             menuShowLongPressTimeout = window.setTimeout(function() {
 324
 325                 menuShowLongPressTimeout = null;
 326
 327                 // Assume native OSK if menu shown via long-press
 328                 GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_NATIVE;
 329                 GuacamoleUI.showMenu();
 330
 331             }, 800);
 332
 333         }
 334     };
 335
 336     GuacamoleUI.stopLongPressDetect = function() {
 337         window.clearTimeout(menuShowLongPressTimeout);
 338         menuShowLongPressTimeout = null;
 339     };
 340
 341     // Reset event target (add content, reposition cursor in middle.
 342     GuacamoleUI.resetEventTarget = function() {
 343         GuacamoleUI.eventTarget.value = "GUAC";
 344         GuacamoleUI.eventTarget.selectionStart =
 345         GuacamoleUI.eventTarget.selectionEnd   = 2;
 346     };
 347
 348     // Detect long-press at bottom of screen
 349     GuacamoleUI.display.addEventListener('touchstart', GuacamoleUI.startLongPressDetect, true);
 350
 351     // Reconnect button
 352     GuacamoleUI.buttons.reconnect.onclick = function() {
 353         window.location.reload();
 354     };
 355
 356     // On-screen keyboard
 357     GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty-mobile.xml");
 358     GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement());
 359
 360     // Function for automatically updating keyboard size
 361     var lastKeyboardWidth;
 362     function updateKeyboardSize() {
 363         var currentSize = GuacamoleUI.keyboard.getElement().offsetWidth;
 364         if (lastKeyboardWidth != currentSize) {
 365             GuacamoleUI.keyboard.resize(currentSize);
 366             lastKeyboardWidth = currentSize;
 367         }
 368     };
 369
 370 })();
 371
 372 // Tie UI events / behavior to a specific Guacamole client
 373 GuacamoleUI.attach = function(guac) {
 374
 375     var title_prefix = null;
 376     var connection_name = null
 377
 378     var guac_display = guac.getDisplay();
 379
 380     // Set document title appropriately, based on prefix and connection name
 381     function updateTitle() {
 382
 383         // Use title prefix if present
 384         if (title_prefix) {
 385
 386             document.title = title_prefix;
 387
 388             // Include connection name, if present
 389             if (connection_name)
 390                 document.title += " " + connection_name;
 391
 392         }
 393
 394         // Otherwise, just set to connection name
 395         else if (connection_name)
 396             document.title = connection_name;
 397
 398     }
 399
 400     // When mouse enters display, start detection of intent to close menu
 401     guac_display.addEventListener('mouseover', GuacamoleUI.startMenuCloseDetect, true);
 402
 403     guac_display.onclick = function(e) {
 404         e.preventDefault();
 405         return false;
 406     };
 407
 408     // Mouse
 409     var mouse = new Guacamole.Mouse(guac_display);
 410     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
 411         function(mouseState) {
 412
 413             // Determine mouse position within view
 414             var mouse_view_x = mouseState.x + guac_display.offsetLeft - window.pageXOffset;
 415             var mouse_view_y = mouseState.y + guac_display.offsetTop  - window.pageYOffset;
 416
 417             // Determine viewport dimensioins
 418             var view_width  = GuacamoleUI.viewport.offsetWidth;
 419             var view_height = GuacamoleUI.viewport.offsetHeight;
 420
 421             // Determine scroll amounts based on mouse position relative to document
 422
 423             var scroll_amount_x;
 424             if (mouse_view_x > view_width)
 425                 scroll_amount_x = mouse_view_x - view_width;
 426             else if (mouse_view_x < 0)
 427                 scroll_amount_x = mouse_view_x;
 428             else
 429                 scroll_amount_x = 0;
 430
 431             var scroll_amount_y;
 432             if (mouse_view_y > view_height)
 433                 scroll_amount_y = mouse_view_y - view_height;
 434             else if (mouse_view_y < 0)
 435                 scroll_amount_y = mouse_view_y;
 436             else
 437                 scroll_amount_y = 0;
 438
 439             // Scroll (if necessary) to keep mouse on screen.
 440             window.scrollBy(scroll_amount_x, scroll_amount_y);
 441
 442             // Hide menu on movement
 443             GuacamoleUI.startMenuCloseDetect();
 444
 445             // Stop detecting long presses if mouse is being used
 446             GuacamoleUI.stopLongPressDetect();
 447
 448             // Send mouse event
 449             guac.sendMouseState(mouseState);
 450
 451         };
 452
 453     // Keyboard
 454     var keyboard = new Guacamole.Keyboard(document);
 455
 456     function disableKeyboard() {
 457         keyboard.onkeydown = null;
 458         keyboard.onkeyup = null;
 459     }
 460
 461     function enableKeyboard() {
 462         keyboard.onkeydown =
 463             function (keysym) {
 464
 465                 // If we're using native OSK, ensure event target is reset
 466                 // on each key event.
 467                 if (GuacamoleUI.oskMode == GuacamoleUI.OSK_MODE_NATIVE)
 468                     GuacamoleUI.resetEventTarget();
 469
 470                 guac.sendKeyEvent(1, keysym);
 471             };
 472
 473         keyboard.onkeyup =
 474             function (keysym) {
 475                 guac.sendKeyEvent(0, keysym);
 476             };
 477     }
 478
 479     // Enable keyboard by default
 480     enableKeyboard();
 481
 482     // Handle client state change
 483     guac.onstatechange = function(clientState) {
 484
 485         switch (clientState) {
 486
 487             // Idle
 488             case 0:
 489                 GuacamoleUI.showStatus("Idle.");
 490                 title_prefix = "[Idle]";
 491                 break;
 492
 493             // Connecting
 494             case 1:
 495                 GuacamoleUI.shadeMenu();
 496                 GuacamoleUI.showStatus("Connecting...");
 497                 title_prefix = "[Connecting...]";
 498                 break;
 499
 500             // Connected + waiting
 501             case 2:
 502                 GuacamoleUI.showStatus("Connected, waiting for first update...");
 503                 title_prefix = "[Waiting...]";
 504                 break;
 505
 506             // Connected
 507             case 3:
 508
 509                 GuacamoleUI.hideStatus();
 510                 GuacamoleUI.display.className =
 511                     GuacamoleUI.display.className.replace(/guac-loading/, '');
 512
 513                 GuacamoleUI.menu.className = "connected";
 514
 515                 title_prefix = null;
 516                 break;
 517
 518             // Disconnecting
 519             case 4:
 520                 GuacamoleUI.showStatus("Disconnecting...");
 521                 title_prefix = "[Disconnecting...]";
 522                 break;
 523
 524             // Disconnected
 525             case 5:
 526                 GuacamoleUI.showStatus("Disconnected.");
 527                 title_prefix = "[Disconnected]";
 528                 break;
 529
 530             // Unknown status code
 531             default:
 532                 GuacamoleUI.showStatus("[UNKNOWN STATUS]");
 533
 534         }
 535
 536         updateTitle();
 537     };
 538
 539     // Name instruction handler
 540     guac.onname = function(name) {
 541         connection_name = name;
 542         updateTitle();
 543     };
 544
 545     // Error handler
 546     guac.onerror = function(error) {
 547
 548         // Disconnect, if connected
 549         guac.disconnect();
 550
 551         // Display error message
 552         GuacamoleUI.showError(error);
 553
 554     };
 555
 556     // Disconnect on close
 557     window.onunload = function() {
 558         guac.disconnect();
 559     };
 560
 561     // Handle clipboard events
 562     GuacamoleUI.clipboard.onchange = function() {
 563
 564         var text = GuacamoleUI.clipboard.value;
 565         guac.setClipboard(text);
 566
 567     };
 568
 569     // Ignore keypresses when clipboard is focused
 570     GuacamoleUI.clipboard.onfocus = function() {
 571         disableKeyboard();
 572     };
 573
 574     // Capture keypresses when clipboard is not focused
 575     GuacamoleUI.clipboard.onblur = function() {
 576         enableKeyboard();
 577     };
 578
 579     // Server copy handler
 580     guac.onclipboard = function(data) {
 581         GuacamoleUI.clipboard.value = data;
 582     };
 583
 584     GuacamoleUI.keyboard.onkeydown = function(keysym) {
 585         guac.sendKeyEvent(1, keysym);
 586     };
 587
 588     GuacamoleUI.keyboard.onkeyup = function(keysym) {
 589         guac.sendKeyEvent(0, keysym);
 590     };
 591
 592     // Send Ctrl-Alt-Delete
 593     GuacamoleUI.buttons.ctrlAltDelete.onclick = function() {
 594
 595         var KEYSYM_CTRL   = 0xFFE3;
 596         var KEYSYM_ALT    = 0xFFE9;
 597         var KEYSYM_DELETE = 0xFFFF;
 598
 599         guac.sendKeyEvent(1, KEYSYM_CTRL);
 600         guac.sendKeyEvent(1, KEYSYM_ALT);
 601         guac.sendKeyEvent(1, KEYSYM_DELETE);
 602         guac.sendKeyEvent(0, KEYSYM_DELETE);
 603         guac.sendKeyEvent(0, KEYSYM_ALT);
 604         guac.sendKeyEvent(0, KEYSYM_CTRL);
 605     };
 606
 607 };