Open menu on long-press.
[guacamole.git] / src / main / webapp / scripts / interface.js
index e18f524..c42f39a 100644 (file)
@@ -5,8 +5,8 @@ var GuacamoleUI = {
     "display"     : document.getElementById("display"),
     "menu"        : document.getElementById("menu"),
     "menuControl" : document.getElementById("menuControl"),
+    "touchMenu"   : document.getElementById("touchMenu"),
     "logo"        : document.getElementById("status-logo"),
-    "state"       : document.getElementById("state"),
 
     "buttons": {
 
@@ -19,12 +19,12 @@ var GuacamoleUI = {
     },
 
     "containers": {
-        "error"    : document.getElementById("errorDialog"),
+        "state"    : document.getElementById("statusDialog"),
         "clipboard": document.getElementById("clipboardDiv"),
         "keyboard" : document.getElementById("keyboardContainer")
     },
     
-    "error"     : document.getElementById("errorText"),
+    "state"     : document.getElementById("statusText"),
     "clipboard" : document.getElementById("clipboard")
 
 };
@@ -41,15 +41,20 @@ var GuacamoleUI = {
     var guacErrorImage = new Image();
     guacErrorImage.src = "images/noguacamole-logo-24.png";
 
+    GuacamoleUI.hideStatus = function() {
+        document.body.classList.remove("guac-error");
+        GuacamoleUI.containers.state.style.visibility = "hidden";
+    };
+    
+    GuacamoleUI.showStatus = function(text) {
+        document.body.classList.remove("guac-error");
+        GuacamoleUI.containers.state.style.visibility = "visible";
+        GuacamoleUI.state.textContent = text;
+    };
+    
     GuacamoleUI.showError = function(error) {
-
-        GuacamoleUI.menu.className = "error";
-        GuacamoleUI.display.className += " guac-error";
-
-        GuacamoleUI.logo.src = guacErrorImage.src;
-        GuacamoleUI.error.textContent = error;
-        GuacamoleUI.containers.error.style.visibility = "visible";
-
+        document.body.classList.add("guac-error");
+        GuacamoleUI.state.textContent = error;
     };
 
     GuacamoleUI.shadeMenu = function() {
@@ -153,7 +158,7 @@ var GuacamoleUI = {
     var detectMenuCloseTimeout = null;
 
     // Clear detection timeouts
-    function resetMenuDetect() {
+    GuacamoleUI.resetMenuDetect = function() {
 
         if (detectMenuOpenTimeout != null) {
             window.clearTimeout(detectMenuOpenTimeout);
@@ -165,49 +170,81 @@ var GuacamoleUI = {
             detectMenuCloseTimeout = null;
         }
 
-    }
+    };
 
     // Initiate detection of menu open action. If not canceled through some
     // user event, menu will open.
-    function startMenuOpenDetect() {
+    GuacamoleUI.startMenuOpenDetect = function() {
 
-        // Clear detection state
-        resetMenuDetect();
+        if (!detectMenuOpenTimeout) {
 
-        // Wait and then show menu
-        detectMenuOpenTimeout = window.setTimeout(function() {
-            GuacamoleUI.showMenu();
-            detectMenuOpenTimeout = null;
-        }, 325);
+            // Clear detection state
+            GuacamoleUI.resetMenuDetect();
 
-    }
+            // Wait and then show menu
+            detectMenuOpenTimeout = window.setTimeout(function() {
+                GuacamoleUI.showMenu();
+                detectMenuOpenTimeout = null;
+            }, 325);
+
+        }
+
+    };
 
     // Initiate detection of menu close action. If not canceled through some
     // user event, menu will close.
-    function startMenuCloseDetect() {
+    GuacamoleUI.startMenuCloseDetect = function() {
 
-        // Clear detection state
-        resetMenuDetect();
+        if (!detectMenuCloseTimeout) {
 
-        // Wait and then shade menu
-        detectMenuCloseTimeout = window.setTimeout(function() {
-            GuacamoleUI.shadeMenu();
-            detectMenuCloseTimeout = null;
-        }, 500);
+            // Clear detection state
+            GuacamoleUI.resetMenuDetect();
 
-    }
+            // Wait and then shade menu
+            detectMenuCloseTimeout = window.setTimeout(function() {
+                GuacamoleUI.shadeMenu();
+                detectMenuCloseTimeout = null;
+            }, 500);
+
+        }
+
+    };
 
     // Show menu if mouseover any part of menu
     GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.showMenu, true);
 
     // Stop detecting menu state change intents if mouse is over menu
-    GuacamoleUI.menu.addEventListener('mouseover', resetMenuDetect, true);
+    GuacamoleUI.menu.addEventListener('mouseover', GuacamoleUI.resetMenuDetect, true);
 
     // When mouse hovers over top of screen, start detection of intent to open menu
-    GuacamoleUI.menuControl.addEventListener('mousemove', startMenuOpenDetect, true);
+    GuacamoleUI.menuControl.addEventListener('mousemove', GuacamoleUI.startMenuOpenDetect, true);
 
     // When mouse enters display, start detection of intent to close menu
-    GuacamoleUI.display.addEventListener('mouseover', startMenuCloseDetect, true);
+    GuacamoleUI.display.addEventListener('mouseover', GuacamoleUI.startMenuCloseDetect, true);
+
+    var menuShowLongPressTimeout = null;
+
+    GuacamoleUI.startLongPressDetect = function() {
+
+        if (!menuShowLongPressTimeout) {
+
+            menuShowLongPressTimeout = window.setTimeout(function() {
+                
+                menuShowLongPressTimeout = null;
+                GuacamoleUI.showMenu();
+
+            }, 1000);
+
+        }
+    };
+
+    GuacamoleUI.stopLongPressDetect = function() {
+        window.clearTimeout(menuShowLongPressTimeout);
+        menuShowLongPressTimeout = null;
+    };
+
+    // Detect long-press at bottom of screen
+    document.body.addEventListener('touchstart', GuacamoleUI.startLongPressDetect, true);
 
     // Show menu if mouse leaves document
     document.addEventListener('mouseout', function(e) {
@@ -224,7 +261,7 @@ var GuacamoleUI = {
         }
 
         // Start detection of intent to open menu
-        startMenuOpenDetect();
+        GuacamoleUI.startMenuOpenDetect();
  
     }, true);
 
@@ -261,7 +298,44 @@ GuacamoleUI.attach = function(guac) {
     var mouse = new Guacamole.Mouse(GuacamoleUI.display);
     mouse.onmousedown = mouse.onmouseup = mouse.onmousemove =
         function(mouseState) {
+       
+            // Determine mouse position within view
+            var mouse_view_x = mouseState.x + GuacamoleUI.display.offsetLeft - window.pageXOffset;
+            var mouse_view_y = mouseState.y + GuacamoleUI.display.offsetTop - window.pageYOffset;
+
+            var view_width = document.body.clientWidth;
+            var view_height = document.body.clientHeight;
+
+            // Determine scroll amounts based on mouse position relative to document
+
+            var scroll_amount_x;
+            if (mouse_view_x > view_width)
+                scroll_amount_x = mouse_view_x - view_width;
+            else if (mouse_view_x < 0)
+                scroll_amount_x = mouse_view_x;
+            else
+                scroll_amount_x = 0;
+
+            var scroll_amount_y;
+            if (mouse_view_y > view_height)
+                scroll_amount_y = mouse_view_y - view_height;
+            else if (mouse_view_y < 0)
+                scroll_amount_y = mouse_view_y;
+            else
+                scroll_amount_y = 0;
+       
+            // Scroll (if necessary) to keep mouse on screen.
+            window.scrollBy(scroll_amount_x, scroll_amount_y);
+       
+            // Hide menu on movement
+            GuacamoleUI.startMenuCloseDetect();
+
+            // Stop detecting long presses if mouse is being used
+            GuacamoleUI.stopLongPressDetect();
+
+            // Send mouse event
             guac.sendMouseState(mouseState);
+            
         };
 
     // Keyboard
@@ -293,43 +367,43 @@ GuacamoleUI.attach = function(guac) {
 
             // Idle
             case 0:
-                GuacamoleUI.state.textContent = "Idle."
+                GuacamoleUI.showStatus("Idle.");
                 break;
 
             // Connecting
             case 1:
-                GuacamoleUI.state.textContent = "Connecting...";
+                GuacamoleUI.shadeMenu();
+                GuacamoleUI.showStatus("Connecting...");
                 break;
 
             // Connected + waiting
             case 2:
-                GuacamoleUI.state.textContent = "Connected, waiting for first update...";
+                GuacamoleUI.showStatus("Connected, waiting for first update...");
                 break;
 
             // Connected
             case 3:
                 
+                GuacamoleUI.hideStatus();
                 GuacamoleUI.display.className =
                     GuacamoleUI.display.className.replace(/guac-loading/, '');
 
                 GuacamoleUI.menu.className = "connected";
-                GuacamoleUI.state.textContent = "Connected.";
-                GuacamoleUI.shadeMenu();
                 break;
 
             // Disconnecting
             case 4:
-                GuacamoleUI.state.textContent = "Disconnecting...";
+                GuacamoleUI.showStatus("Disconnecting...");
                 break;
 
             // Disconnected
             case 5:
-                GuacamoleUI.state.textContent = "Disconnected.";
+                GuacamoleUI.showStatus("Disconnected.");
                 break;
 
             // Unknown status code
             default:
-                GuacamoleUI.state.textContent = "Unknown";
+                GuacamoleUI.showStatus("[UNKNOWN STATUS]");
 
         }
     };
@@ -404,11 +478,11 @@ GuacamoleUI.attach = function(guac) {
         GuacamoleUI.clipboard.value = data;
     };
 
-    GuacamoleUI.keyboard.onkeypress = function(keysym) {
+    GuacamoleUI.keyboard.onkeydown = function(keysym) {
         guac.sendKeyEvent(1, keysym);
     };
 
-    GuacamoleUI.keyboard.onkeyrelease = function(keysym) {
+    GuacamoleUI.keyboard.onkeyup = function(keysym) {
         guac.sendKeyEvent(0, keysym);
     };