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 guac_display = guac.getDisplay();
 376
 377     // When mouse enters display, start detection of intent to close menu
 378     guac_display.addEventListener('mouseover', GuacamoleUI.startMenuCloseDetect, true);
 379
 380     guac_display.onclick = function(e) {
 381         e.preventDefault();
 382         return false;
 383     };
 384
 385     // Mouse
 386     var mouse = new Guacamole.Mouse(guac_display);
 387     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
 388         function(mouseState) {
 389
 390             // Determine mouse position within view
 391             var mouse_view_x = mouseState.x + guac_display.offsetLeft - window.pageXOffset;
 392             var mouse_view_y = mouseState.y + guac_display.offsetTop  - window.pageYOffset;
 393
 394             // Determine viewport dimensioins
 395             var view_width  = GuacamoleUI.viewport.offsetWidth;
 396             var view_height = GuacamoleUI.viewport.offsetHeight;
 397
 398             // Determine scroll amounts based on mouse position relative to document
 399
 400             var scroll_amount_x;
 401             if (mouse_view_x > view_width)
 402                 scroll_amount_x = mouse_view_x - view_width;
 403             else if (mouse_view_x < 0)
 404                 scroll_amount_x = mouse_view_x;
 405             else
 406                 scroll_amount_x = 0;
 407
 408             var scroll_amount_y;
 409             if (mouse_view_y > view_height)
 410                 scroll_amount_y = mouse_view_y - view_height;
 411             else if (mouse_view_y < 0)
 412                 scroll_amount_y = mouse_view_y;
 413             else
 414                 scroll_amount_y = 0;
 415
 416             // Scroll (if necessary) to keep mouse on screen.
 417             window.scrollBy(scroll_amount_x, scroll_amount_y);
 418
 419             // Hide menu on movement
 420             GuacamoleUI.startMenuCloseDetect();
 421
 422             // Stop detecting long presses if mouse is being used
 423             GuacamoleUI.stopLongPressDetect();
 424
 425             // Send mouse event
 426             guac.sendMouseState(mouseState);
 427
 428         };
 429
 430     // Keyboard
 431     var keyboard = new Guacamole.Keyboard(document);
 432
 433     function disableKeyboard() {
 434         keyboard.onkeydown = null;
 435         keyboard.onkeyup = null;
 436     }
 437
 438     function enableKeyboard() {
 439         keyboard.onkeydown =
 440             function (keysym) {
 441
 442                 // If we're using native OSK, ensure event target is reset
 443                 // on each key event.
 444                 if (GuacamoleUI.oskMode == GuacamoleUI.OSK_MODE_NATIVE)
 445                     GuacamoleUI.resetEventTarget();
 446
 447                 guac.sendKeyEvent(1, keysym);
 448             };
 449
 450         keyboard.onkeyup =
 451             function (keysym) {
 452                 guac.sendKeyEvent(0, keysym);
 453             };
 454     }
 455
 456     // Enable keyboard by default
 457     enableKeyboard();
 458
 459     // Handle client state change
 460     guac.onstatechange = function(clientState) {
 461         switch (clientState) {
 462
 463             // Idle
 464             case 0:
 465                 GuacamoleUI.showStatus("Idle.");
 466                 break;
 467
 468             // Connecting
 469             case 1:
 470                 GuacamoleUI.shadeMenu();
 471                 GuacamoleUI.showStatus("Connecting...");
 472                 break;
 473
 474             // Connected + waiting
 475             case 2:
 476                 GuacamoleUI.showStatus("Connected, waiting for first update...");
 477                 break;
 478
 479             // Connected
 480             case 3:
 481
 482                 GuacamoleUI.hideStatus();
 483                 GuacamoleUI.display.className =
 484                     GuacamoleUI.display.className.replace(/guac-loading/, '');
 485
 486                 GuacamoleUI.menu.className = "connected";
 487                 break;
 488
 489             // Disconnecting
 490             case 4:
 491                 GuacamoleUI.showStatus("Disconnecting...");
 492                 break;
 493
 494             // Disconnected
 495             case 5:
 496                 GuacamoleUI.showStatus("Disconnected.");
 497                 break;
 498
 499             // Unknown status code
 500             default:
 501                 GuacamoleUI.showStatus("[UNKNOWN STATUS]");
 502
 503         }
 504     };
 505
 506     // Name instruction handler
 507     guac.onname = function(name) {
 508         document.title = name;
 509     };
 510
 511     // Error handler
 512     guac.onerror = function(error) {
 513
 514         // Disconnect, if connected
 515         guac.disconnect();
 516
 517         // Display error message
 518         GuacamoleUI.showError(error);
 519
 520     };
 521
 522     // Disconnect on close
 523     window.onunload = function() {
 524         guac.disconnect();
 525     };
 526
 527     // Handle clipboard events
 528     GuacamoleUI.clipboard.onchange = function() {
 529
 530         var text = GuacamoleUI.clipboard.value;
 531         guac.setClipboard(text);
 532
 533     };
 534
 535     // Ignore keypresses when clipboard is focused
 536     GuacamoleUI.clipboard.onfocus = function() {
 537         disableKeyboard();
 538     };
 539
 540     // Capture keypresses when clipboard is not focused
 541     GuacamoleUI.clipboard.onblur = function() {
 542         enableKeyboard();
 543     };
 544
 545     // Server copy handler
 546     guac.onclipboard = function(data) {
 547         GuacamoleUI.clipboard.value = data;
 548     };
 549
 550     GuacamoleUI.keyboard.onkeydown = function(keysym) {
 551         guac.sendKeyEvent(1, keysym);
 552     };
 553
 554     GuacamoleUI.keyboard.onkeyup = function(keysym) {
 555         guac.sendKeyEvent(0, keysym);
 556     };
 557
 558     // Send Ctrl-Alt-Delete
 559     GuacamoleUI.buttons.ctrlAltDelete.onclick = function() {
 560
 561         var KEYSYM_CTRL   = 0xFFE3;
 562         var KEYSYM_ALT    = 0xFFE9;
 563         var KEYSYM_DELETE = 0xFFFF;
 564
 565         guac.sendKeyEvent(1, KEYSYM_CTRL);
 566         guac.sendKeyEvent(1, KEYSYM_ALT);
 567         guac.sendKeyEvent(1, KEYSYM_DELETE);
 568         guac.sendKeyEvent(0, KEYSYM_DELETE);
 569         guac.sendKeyEvent(0, KEYSYM_ALT);
 570         guac.sendKeyEvent(0, KEYSYM_CTRL);
 571     };
 572
 573 };