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     // Reconnect button
 248     GuacamoleUI.buttons.reconnect.onclick = function() {
 249         window.location.reload();
 250     };
 251
 252     // On-screen keyboard
 253     GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty-mobile.xml");
 254     GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement());
 255
 256     // Function for automatically updating keyboard size
 257     var lastKeyboardWidth;
 258     function updateKeyboardSize() {
 259         var currentSize = GuacamoleUI.keyboard.getElement().offsetWidth;
 260         if (lastKeyboardWidth != currentSize) {
 261             GuacamoleUI.keyboard.resize(currentSize);
 262             lastKeyboardWidth = currentSize;
 263         }
 264     };
 265
 266 })();
 267
 268 // Tie UI events / behavior to a specific Guacamole client
 269 GuacamoleUI.attach = function(guac) {
 270
 271     var guac_display = guac.getDisplay();
 272
 273     // When mouse enters display, start detection of intent to close menu
 274     guac_display.addEventListener('mouseover', GuacamoleUI.startMenuCloseDetect, true);
 275
 276     guac_display.onclick = function(e) {
 277         e.preventDefault();
 278         return false;
 279     };
 280
 281     // Mouse
 282     var mouse = new Guacamole.Mouse(guac_display);
 283     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
 284         function(mouseState) {
 285
 286             // Determine mouse position within view
 287             var mouse_view_x = mouseState.x + guac_display.offsetLeft - window.pageXOffset;
 288             var mouse_view_y = mouseState.y + guac_display.offsetTop  - window.pageYOffset;
 289
 290             // Determine viewport dimensioins
 291             var view_width  = GuacamoleUI.viewport.offsetWidth;
 292             var view_height = GuacamoleUI.viewport.offsetHeight;
 293
 294             // Determine scroll amounts based on mouse position relative to document
 295
 296             var scroll_amount_x;
 297             if (mouse_view_x > view_width)
 298                 scroll_amount_x = mouse_view_x - view_width;
 299             else if (mouse_view_x < 0)
 300                 scroll_amount_x = mouse_view_x;
 301             else
 302                 scroll_amount_x = 0;
 303
 304             var scroll_amount_y;
 305             if (mouse_view_y > view_height)
 306                 scroll_amount_y = mouse_view_y - view_height;
 307             else if (mouse_view_y < 0)
 308                 scroll_amount_y = mouse_view_y;
 309             else
 310                 scroll_amount_y = 0;
 311
 312             // Scroll (if necessary) to keep mouse on screen.
 313             window.scrollBy(scroll_amount_x, scroll_amount_y);
 314
 315             // Hide menu on movement
 316             GuacamoleUI.startMenuCloseDetect();
 317
 318             // Stop detecting long presses if mouse is being used
 319             GuacamoleUI.stopLongPressDetect();
 320
 321             // Send mouse event
 322             guac.sendMouseState(mouseState);
 323
 324         };
 325
 326     // Keyboard
 327     var keyboard = new Guacamole.Keyboard(document);
 328
 329     function disableKeyboard() {
 330         keyboard.onkeydown = null;
 331         keyboard.onkeyup = null;
 332     }
 333
 334     function enableKeyboard() {
 335         keyboard.onkeydown =
 336             function (keysym) {
 337                 guac.sendKeyEvent(1, keysym);
 338             };
 339
 340         keyboard.onkeyup =
 341             function (keysym) {
 342                 guac.sendKeyEvent(0, keysym);
 343             };
 344     }
 345
 346     // Enable keyboard by default
 347     enableKeyboard();
 348
 349     // Handle client state change
 350     guac.onstatechange = function(clientState) {
 351         switch (clientState) {
 352
 353             // Idle
 354             case 0:
 355                 GuacamoleUI.showStatus("Idle.");
 356                 break;
 357
 358             // Connecting
 359             case 1:
 360                 GuacamoleUI.shadeMenu();
 361                 GuacamoleUI.showStatus("Connecting...");
 362                 break;
 363
 364             // Connected + waiting
 365             case 2:
 366                 GuacamoleUI.showStatus("Connected, waiting for first update...");
 367                 break;
 368
 369             // Connected
 370             case 3:
 371
 372                 GuacamoleUI.hideStatus();
 373                 GuacamoleUI.display.className =
 374                     GuacamoleUI.display.className.replace(/guac-loading/, '');
 375
 376                 GuacamoleUI.menu.className = "connected";
 377                 break;
 378
 379             // Disconnecting
 380             case 4:
 381                 GuacamoleUI.showStatus("Disconnecting...");
 382                 break;
 383
 384             // Disconnected
 385             case 5:
 386                 GuacamoleUI.showStatus("Disconnected.");
 387                 break;
 388
 389             // Unknown status code
 390             default:
 391                 GuacamoleUI.showStatus("[UNKNOWN STATUS]");
 392
 393         }
 394     };
 395
 396     // Name instruction handler
 397     guac.onname = function(name) {
 398         document.title = name;
 399     };
 400
 401     // Error handler
 402     guac.onerror = function(error) {
 403
 404         // Disconnect, if connected
 405         guac.disconnect();
 406
 407         // Display error message
 408         GuacamoleUI.showError(error);
 409
 410     };
 411
 412     // Disconnect on close
 413     window.onunload = function() {
 414         guac.disconnect();
 415     };
 416
 417     // Handle clipboard events
 418     GuacamoleUI.clipboard.onchange = function() {
 419
 420         var text = GuacamoleUI.clipboard.value;
 421         guac.setClipboard(text);
 422
 423     };
 424
 425     // Ignore keypresses when clipboard is focused
 426     GuacamoleUI.clipboard.onfocus = function() {
 427         disableKeyboard();
 428     };
 429
 430     // Capture keypresses when clipboard is not focused
 431     GuacamoleUI.clipboard.onblur = function() {
 432         enableKeyboard();
 433     };
 434
 435     // Server copy handler
 436     guac.onclipboard = function(data) {
 437         GuacamoleUI.clipboard.value = data;
 438     };
 439
 440     GuacamoleUI.keyboard.onkeydown = function(keysym) {
 441         guac.sendKeyEvent(1, keysym);
 442     };
 443
 444     GuacamoleUI.keyboard.onkeyup = function(keysym) {
 445         guac.sendKeyEvent(0, keysym);
 446     };
 447
 448     // Send Ctrl-Alt-Delete
 449     GuacamoleUI.buttons.ctrlAltDelete.onclick = function() {
 450
 451         var KEYSYM_CTRL   = 0xFFE3;
 452         var KEYSYM_ALT    = 0xFFE9;
 453         var KEYSYM_DELETE = 0xFFFF;
 454
 455         guac.sendKeyEvent(1, KEYSYM_CTRL);
 456         guac.sendKeyEvent(1, KEYSYM_ALT);
 457         guac.sendKeyEvent(1, KEYSYM_DELETE);
 458         guac.sendKeyEvent(0, KEYSYM_DELETE);
 459         guac.sendKeyEvent(0, KEYSYM_ALT);
 460         guac.sendKeyEvent(0, KEYSYM_CTRL);
 461     };
 462
 463 };