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
  12     "buttons": {
  13
  14         "showClipboard": document.getElementById("showClipboard"),
  15         "showKeyboard" : document.getElementById("showKeyboard"),
  16         "ctrlAltDelete": document.getElementById("ctrlAltDelete"),
  17         "reconnect"    : document.getElementById("reconnect"),
  18         "logout"       : document.getElementById("logout")
  19
  20     },
  21
  22     "containers": {
  23         "state"    : document.getElementById("statusDialog"),
  24         "clipboard": document.getElementById("clipboardDiv"),
  25         "keyboard" : document.getElementById("keyboardContainer")
  26     },
  27
  28     "state"     : document.getElementById("statusText"),
  29     "clipboard" : document.getElementById("clipboard")
  30
  31 };
  32
  33 // Constant UI initialization and behavior
  34 (function() {
  35
  36     var menu_shaded = false;
  37
  38     var shade_interval = null;
  39     var show_interval = null;
  40
  41     // Cache error image (might not be available when error occurs)
  42     var guacErrorImage = new Image();
  43     guacErrorImage.src = "images/noguacamole-logo-24.png";
  44
  45     GuacamoleUI.hideStatus = function() {
  46         document.body.classList.remove("guac-error");
  47         GuacamoleUI.containers.state.style.visibility = "hidden";
  48     };
  49
  50     GuacamoleUI.showStatus = function(text) {
  51         document.body.classList.remove("guac-error");
  52         GuacamoleUI.containers.state.style.visibility = "visible";
  53         GuacamoleUI.state.textContent = text;
  54     };
  55
  56     GuacamoleUI.showError = function(error) {
  57         document.body.classList.add("guac-error");
  58         GuacamoleUI.state.textContent = error;
  59     };
  60
  61     GuacamoleUI.shadeMenu = function() {
  62
  63         if (!menu_shaded) {
  64
  65             var step = Math.floor(GuacamoleUI.menu.offsetHeight / 10) + 1;
  66             var offset = 0;
  67             menu_shaded = true;
  68
  69             window.clearInterval(show_interval);
  70             shade_interval = window.setInterval(function() {
  71
  72                 offset -= step;
  73                 GuacamoleUI.menu.style.top = offset + "px";
  74
  75                 if (offset <= -GuacamoleUI.menu.offsetHeight) {
  76                     window.clearInterval(shade_interval);
  77                     GuacamoleUI.menu.style.visiblity = "hidden";
  78                 }
  79
  80             }, 30);
  81         }
  82
  83     };
  84
  85     GuacamoleUI.showMenu = function() {
  86
  87         if (menu_shaded) {
  88
  89             var step = Math.floor(GuacamoleUI.menu.offsetHeight / 5) + 1;
  90             var offset = -GuacamoleUI.menu.offsetHeight;
  91             menu_shaded = false;
  92             GuacamoleUI.menu.style.visiblity = "";
  93
  94             window.clearInterval(shade_interval);
  95             show_interval = window.setInterval(function() {
  96
  97                 offset += step;
  98
  99                 if (offset >= 0) {
 100                     offset = 0;
 101                     window.clearInterval(show_interval);
 102                 }
 103
 104                 GuacamoleUI.menu.style.top = offset + "px";
 105
 106             }, 30);
 107         }
 108
 109     };
 110
 111     // Show/Hide clipboard
 112     GuacamoleUI.buttons.showClipboard.onclick = function() {
 113
 114         var displayed = GuacamoleUI.containers.clipboard.style.display;
 115         if (displayed != "block") {
 116             GuacamoleUI.containers.clipboard.style.display = "block";
 117             GuacamoleUI.buttons.showClipboard.innerHTML = "Hide Clipboard";
 118         }
 119         else {
 120             GuacamoleUI.containers.clipboard.style.display = "none";
 121             GuacamoleUI.buttons.showClipboard.innerHTML = "Show Clipboard";
 122             GuacamoleUI.clipboard.onchange();
 123         }
 124
 125     };
 126
 127     // Show/Hide keyboard
 128     var keyboardResizeInterval = null;
 129     GuacamoleUI.buttons.showKeyboard.onclick = function() {
 130
 131         var displayed = GuacamoleUI.containers.keyboard.style.display;
 132         if (displayed != "block") {
 133             GuacamoleUI.containers.keyboard.style.display = "block";
 134             GuacamoleUI.buttons.showKeyboard.textContent = "Hide Keyboard";
 135
 136             // Automatically update size
 137             window.onresize = updateKeyboardSize;
 138             keyboardResizeInterval = window.setInterval(updateKeyboardSize, 30);
 139
 140             updateKeyboardSize();
 141         }
 142         else {
 143             GuacamoleUI.containers.keyboard.style.display = "none";
 144             GuacamoleUI.buttons.showKeyboard.textContent = "Show Keyboard";
 145
 146             window.onresize = null;
 147             window.clearInterval(keyboardResizeInterval);
 148         }
 149
 150     };
 151
 152     // Logout
 153     GuacamoleUI.buttons.logout.onclick = function() {
 154         window.location.href = "logout";
 155     };
 156
 157     // Timeouts for detecting if users wants menu to open or close
 158     var detectMenuOpenTimeout = null;
 159     var detectMenuCloseTimeout = null;
 160
 161     // Clear detection timeouts
 162     GuacamoleUI.resetMenuDetect = function() {
 163
 164         if (detectMenuOpenTimeout != null) {
 165             window.clearTimeout(detectMenuOpenTimeout);
 166             detectMenuOpenTimeout = null;
 167         }
 168
 169         if (detectMenuCloseTimeout != null) {
 170             window.clearTimeout(detectMenuCloseTimeout);
 171             detectMenuCloseTimeout = null;
 172         }
 173
 174     };
 175
 176     // Initiate detection of menu open action. If not canceled through some
 177     // user event, menu will open.
 178     GuacamoleUI.startMenuOpenDetect = function() {
 179
 180         if (!detectMenuOpenTimeout) {
 181
 182             // Clear detection state
 183             GuacamoleUI.resetMenuDetect();
 184
 185             // Wait and then show menu
 186             detectMenuOpenTimeout = window.setTimeout(function() {
 187                 GuacamoleUI.showMenu();
 188                 detectMenuOpenTimeout = null;
 189             }, 325);
 190
 191         }
 192
 193     };
 194
 195     // Initiate detection of menu close action. If not canceled through some
 196     // user event, menu will close.
 197     GuacamoleUI.startMenuCloseDetect = function() {
 198
 199         if (!detectMenuCloseTimeout) {
 200
 201             // Clear detection state
 202             GuacamoleUI.resetMenuDetect();
 203
 204             // Wait and then shade menu
 205             detectMenuCloseTimeout = window.setTimeout(function() {
 206                 GuacamoleUI.shadeMenu();
 207                 detectMenuCloseTimeout = null;
 208             }, 500);
 209
 210         }
 211
 212     };
 213
 214     // Show menu if mouseover any part of menu
 215     GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.showMenu, true);
 216
 217     // Stop detecting menu state change intents if mouse is over menu
 218     GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.resetMenuDetect, true);
 219
 220     // When mouse hovers over top of screen, start detection of intent to open menu
 221     GuacamoleUI.menuControl.addEventListener('mousemove', GuacamoleUI.startMenuOpenDetect, true);
 222
 223     var menuShowLongPressTimeout = null;
 224
 225     GuacamoleUI.startLongPressDetect = function() {
 226
 227         if (!menuShowLongPressTimeout) {
 228
 229             menuShowLongPressTimeout = window.setTimeout(function() {
 230
 231                 menuShowLongPressTimeout = null;
 232                 GuacamoleUI.showMenu();
 233
 234             }, 800);
 235
 236         }
 237     };
 238
 239     GuacamoleUI.stopLongPressDetect = function() {
 240         window.clearTimeout(menuShowLongPressTimeout);
 241         menuShowLongPressTimeout = null;
 242     };
 243
 244     // Detect long-press at bottom of screen
 245     document.body.addEventListener('touchstart', GuacamoleUI.startLongPressDetect, true);
 246
 247     // Show menu if mouse leaves document
 248     document.addEventListener('mouseout', function(e) {
 249
 250         // Get parent of the element the mouse pointer is leaving
 251         if (!e) e = window.event;
 252         var target = e.relatedTarget || e.toElement;
 253
 254         // Ensure target is not document nor child of document
 255         var targetParent = target;
 256         while (targetParent != null) {
 257             if (targetParent == document) return;
 258             targetParent = targetParent.parentNode;
 259         }
 260
 261         // Start detection of intent to open menu
 262         GuacamoleUI.startMenuOpenDetect();
 263
 264     }, true);
 265
 266     // Reconnect button
 267     GuacamoleUI.buttons.reconnect.onclick = function() {
 268         window.location.reload();
 269     };
 270
 271     // On-screen keyboard
 272     GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty-mobile.xml");
 273     GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement());
 274
 275     // Function for automatically updating keyboard size
 276     var lastKeyboardWidth;
 277     function updateKeyboardSize() {
 278         var currentSize = GuacamoleUI.keyboard.getElement().offsetWidth;
 279         if (lastKeyboardWidth != currentSize) {
 280             GuacamoleUI.keyboard.resize(currentSize);
 281             lastKeyboardWidth = currentSize;
 282         }
 283     };
 284
 285 })();
 286
 287 // Tie UI events / behavior to a specific Guacamole client
 288 GuacamoleUI.attach = function(guac) {
 289
 290     var guac_display = guac.getDisplay();
 291
 292     // When mouse enters display, start detection of intent to close menu
 293     guac_display.addEventListener('mouseover', GuacamoleUI.startMenuCloseDetect, true);
 294
 295     guac_display.onclick = function(e) {
 296         e.preventDefault();
 297         return false;
 298     };
 299
 300     // Mouse
 301     var mouse = new Guacamole.Mouse(guac_display);
 302     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
 303         function(mouseState) {
 304
 305             // Determine mouse position within view
 306             var mouse_view_x = mouseState.x + guac_display.offsetLeft - window.pageXOffset;
 307             var mouse_view_y = mouseState.y + guac_display.offsetTop  - window.pageYOffset;
 308
 309             // Determine viewport dimensioins
 310             var view_width  = GuacamoleUI.viewport.offsetWidth;
 311             var view_height = GuacamoleUI.viewport.offsetHeight;
 312
 313             // Determine scroll amounts based on mouse position relative to document
 314
 315             var scroll_amount_x;
 316             if (mouse_view_x > view_width)
 317                 scroll_amount_x = mouse_view_x - view_width;
 318             else if (mouse_view_x < 0)
 319                 scroll_amount_x = mouse_view_x;
 320             else
 321                 scroll_amount_x = 0;
 322
 323             var scroll_amount_y;
 324             if (mouse_view_y > view_height)
 325                 scroll_amount_y = mouse_view_y - view_height;
 326             else if (mouse_view_y < 0)
 327                 scroll_amount_y = mouse_view_y;
 328             else
 329                 scroll_amount_y = 0;
 330
 331             // Scroll (if necessary) to keep mouse on screen.
 332             window.scrollBy(scroll_amount_x, scroll_amount_y);
 333
 334             // Hide menu on movement
 335             GuacamoleUI.startMenuCloseDetect();
 336
 337             // Stop detecting long presses if mouse is being used
 338             GuacamoleUI.stopLongPressDetect();
 339
 340             // Send mouse event
 341             guac.sendMouseState(mouseState);
 342
 343         };
 344
 345     // Keyboard
 346     var keyboard = new Guacamole.Keyboard(document);
 347
 348     function disableKeyboard() {
 349         keyboard.onkeydown = null;
 350         keyboard.onkeyup = null;
 351     }
 352
 353     function enableKeyboard() {
 354         keyboard.onkeydown =
 355             function (keysym) {
 356                 guac.sendKeyEvent(1, keysym);
 357             };
 358
 359         keyboard.onkeyup =
 360             function (keysym) {
 361                 guac.sendKeyEvent(0, keysym);
 362             };
 363     }
 364
 365     // Enable keyboard by default
 366     enableKeyboard();
 367
 368     // Handle client state change
 369     guac.onstatechange = function(clientState) {
 370         switch (clientState) {
 371
 372             // Idle
 373             case 0:
 374                 GuacamoleUI.showStatus("Idle.");
 375                 break;
 376
 377             // Connecting
 378             case 1:
 379                 GuacamoleUI.shadeMenu();
 380                 GuacamoleUI.showStatus("Connecting...");
 381                 break;
 382
 383             // Connected + waiting
 384             case 2:
 385                 GuacamoleUI.showStatus("Connected, waiting for first update...");
 386                 break;
 387
 388             // Connected
 389             case 3:
 390
 391                 GuacamoleUI.hideStatus();
 392                 GuacamoleUI.display.className =
 393                     GuacamoleUI.display.className.replace(/guac-loading/, '');
 394
 395                 GuacamoleUI.menu.className = "connected";
 396                 break;
 397
 398             // Disconnecting
 399             case 4:
 400                 GuacamoleUI.showStatus("Disconnecting...");
 401                 break;
 402
 403             // Disconnected
 404             case 5:
 405                 GuacamoleUI.showStatus("Disconnected.");
 406                 break;
 407
 408             // Unknown status code
 409             default:
 410                 GuacamoleUI.showStatus("[UNKNOWN STATUS]");
 411
 412         }
 413     };
 414
 415     // Name instruction handler
 416     guac.onname = function(name) {
 417         document.title = name;
 418     };
 419
 420     // Error handler
 421     guac.onerror = function(error) {
 422
 423         // Disconnect, if connected
 424         guac.disconnect();
 425
 426         // Display error message
 427         GuacamoleUI.showError(error);
 428
 429     };
 430
 431     // Disconnect on close
 432     window.onunload = function() {
 433         guac.disconnect();
 434     };
 435
 436     // Handle clipboard events
 437     GuacamoleUI.clipboard.onchange = function() {
 438
 439         var text = GuacamoleUI.clipboard.value;
 440         guac.setClipboard(text);
 441
 442     };
 443
 444     // Ignore keypresses when clipboard is focused
 445     GuacamoleUI.clipboard.onfocus = function() {
 446         disableKeyboard();
 447     };
 448
 449     // Capture keypresses when clipboard is not focused
 450     GuacamoleUI.clipboard.onblur = function() {
 451         enableKeyboard();
 452     };
 453
 454     // Server copy handler
 455     guac.onclipboard = function(data) {
 456         GuacamoleUI.clipboard.value = data;
 457     };
 458
 459     GuacamoleUI.keyboard.onkeydown = function(keysym) {
 460         guac.sendKeyEvent(1, keysym);
 461     };
 462
 463     GuacamoleUI.keyboard.onkeyup = function(keysym) {
 464         guac.sendKeyEvent(0, keysym);
 465     };
 466
 467     // Send Ctrl-Alt-Delete
 468     GuacamoleUI.buttons.ctrlAltDelete.onclick = function() {
 469
 470         var KEYSYM_CTRL   = 0xFFE3;
 471         var KEYSYM_ALT    = 0xFFE9;
 472         var KEYSYM_DELETE = 0xFFFF;
 473
 474         guac.sendKeyEvent(1, KEYSYM_CTRL);
 475         guac.sendKeyEvent(1, KEYSYM_ALT);
 476         guac.sendKeyEvent(1, KEYSYM_DELETE);
 477         guac.sendKeyEvent(0, KEYSYM_DELETE);
 478         guac.sendKeyEvent(0, KEYSYM_ALT);
 479         guac.sendKeyEvent(0, KEYSYM_CTRL);
 480     };
 481
 482 };