Add default connection name, do not hide cursor after error, remove old classes.
[guacamole.git] / src / main / webapp / scripts / interface.js
index 960c8d3..ccac658 100644 (file)
@@ -2,6 +2,27 @@
 // UI Definition
 var GuacamoleUI = {
 
+    /* Detection Constants */
+    
+    "LONG_PRESS_DETECT_TIMEOUT"     : 800, /* milliseconds */
+    "LONG_PRESS_MOVEMENT_THRESHOLD" : 10,  /* pixels */
+    "MENU_CLOSE_DETECT_TIMEOUT"     : 500, /* milliseconds */
+    "MENU_OPEN_DETECT_TIMEOUT"      : 325, /* milliseconds */
+    "KEYBOARD_AUTO_RESIZE_INTERVAL" : 30,  /* milliseconds */
+
+    /* Animation Constants */
+
+    "MENU_SHADE_STEPS"    : 10, /* frames */
+    "MENU_SHADE_INTERVAL" : 30, /* milliseconds */
+    "MENU_SHOW_STEPS"     : 5,  /* frames */
+    "MENU_SHOW_INTERVAL"  : 30, /* milliseconds */
+
+    /* OSK Mode Constants */
+    "OSK_MODE_NATIVE" : 1, /* "Show Keyboard" will show the platform's native OSK */
+    "OSK_MODE_GUAC"   : 2, /* "Show Keyboard" will show Guac's built-in OSK */
+
+    /* UI Elements */
+
     "viewport"    : document.getElementById("viewportClone"),
     "display"     : document.getElementById("display"),
     "menu"        : document.getElementById("menu"),
@@ -116,7 +137,7 @@ var GuacamoleUI = {
 
         if (!menu_shaded) {
 
-            var step = Math.floor(GuacamoleUI.menu.offsetHeight / 10) + 1;
+            var step = Math.floor(GuacamoleUI.menu.offsetHeight / GuacamoleUI.MENU_SHADE_STEPS) + 1;
             var offset = 0;
             menu_shaded = true;
 
@@ -131,7 +152,7 @@ var GuacamoleUI = {
                     GuacamoleUI.menu.style.visiblity = "hidden";
                 }
 
-            }, 30);
+            }, GuacamoleUI.MENU_SHADE_INTERVAL);
         }
 
     };
@@ -140,7 +161,7 @@ var GuacamoleUI = {
 
         if (menu_shaded) {
 
-            var step = Math.floor(GuacamoleUI.menu.offsetHeight / 5) + 1;
+            var step = Math.floor(GuacamoleUI.menu.offsetHeight / GuacamoleUI.MENU_SHOW_STEPS) + 1;
             var offset = -GuacamoleUI.menu.offsetHeight;
             menu_shaded = false;
             GuacamoleUI.menu.style.visiblity = "";
@@ -157,7 +178,7 @@ var GuacamoleUI = {
 
                 GuacamoleUI.menu.style.top = offset + "px";
 
-            }, 30);
+            }, GuacamoleUI.MENU_SHOW_INTERVAL);
         }
 
     };
@@ -178,18 +199,6 @@ var GuacamoleUI = {
 
     };
 
-    /**
-     * When GuacamoleUI.oskMode == OSK_MODE_NATIVE, "Show Keyboard" tries
-     * to use the native OSK instead of the Guacamole OSK.
-     */
-    GuacamoleUI.OSK_MODE_NATIVE = 1;
-
-    /**
-     * When GuacamoleUI.oskMode == OSK_MODE_GUAC, "Show Keyboard" uses the 
-     * Guacamole OSK, regardless of whether a native OSK is available.
-     */
-    GuacamoleUI.OSK_MODE_GUAC   = 2;
-
     // Assume no native OSK by default
     GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_GUAC;
 
@@ -231,7 +240,7 @@ var GuacamoleUI = {
 
             // Automatically update size
             window.onresize = updateKeyboardSize;
-            keyboardResizeInterval = window.setInterval(updateKeyboardSize, 30);
+            keyboardResizeInterval = window.setInterval(updateKeyboardSize, GuacamoleUI.KEYBOARD_AUTO_RESIZE_INTERVAL);
 
             updateKeyboardSize();
         }
@@ -280,7 +289,7 @@ var GuacamoleUI = {
 
                 GuacamoleUI.showMenu();
                 detectMenuOpenTimeout = null;
-            }, 325);
+            }, GuacamoleUI.MENU_OPEN_DETECT_TIMEOUT);
 
         }
 
@@ -299,7 +308,7 @@ var GuacamoleUI = {
             detectMenuCloseTimeout = window.setTimeout(function() {
                 GuacamoleUI.shadeMenu();
                 detectMenuCloseTimeout = null;
-            }, 500);
+            }, GuacamoleUI.MENU_CLOSE_DETECT_TIMEOUT);
 
         }
 
@@ -314,6 +323,8 @@ var GuacamoleUI = {
     // When mouse hovers over top of screen, start detection of intent to open menu
     GuacamoleUI.menuControl.addEventListener('mousemove', GuacamoleUI.startMenuOpenDetect, true);
 
+    var long_press_start_x = 0;
+    var long_press_start_y = 0;
     var menuShowLongPressTimeout = null;
 
     GuacamoleUI.startLongPressDetect = function() {
@@ -328,7 +339,7 @@ var GuacamoleUI = {
                 GuacamoleUI.oskMode = GuacamoleUI.OSK_MODE_NATIVE;
                 GuacamoleUI.showMenu();
 
-            }, 800);
+            }, GuacamoleUI.LONG_PRESS_DETECT_TIMEOUT);
 
         }
     };
@@ -340,13 +351,48 @@ var GuacamoleUI = {
 
     // Reset event target (add content, reposition cursor in middle.
     GuacamoleUI.resetEventTarget = function() {
-        GuacamoleUI.eventTarget.value = "GUAC";
-        GuacamoleUI.eventTarget.selectionStart =
-        GuacamoleUI.eventTarget.selectionEnd   = 2;
+        GuacamoleUI.eventTarget.value = "";
     };
 
     // Detect long-press at bottom of screen
-    GuacamoleUI.display.addEventListener('touchstart', GuacamoleUI.startLongPressDetect, true);
+    GuacamoleUI.display.addEventListener('touchstart', function(e) {
+        
+        // Close menu if shown
+        GuacamoleUI.shadeMenu();
+        
+        // Record touch location
+        if (e.touches.length == 1) {
+            var touch = e.touches[0];
+            long_press_start_x = touch.screenX;
+            long_press_start_y = touch.screenY;
+        }
+        
+        // Start detection
+        GuacamoleUI.startLongPressDetect();
+        
+    }, true);
+
+    // Stop detection if touch moves significantly
+    GuacamoleUI.display.addEventListener('touchmove', function(e) {
+        
+        if (e.touches.length == 1) {
+
+            // If touch distance from start exceeds threshold, cancel long press
+            var touch = e.touches[0];
+            if (Math.abs(touch.screenX - long_press_start_x) >= GuacamoleUI.LONG_PRESS_MOVEMENT_THRESHOLD
+                || Math.abs(touch.screenY - long_press_start_y) >= GuacamoleUI.LONG_PRESS_MOVEMENT_THRESHOLD)
+                GuacamoleUI.stopLongPressDetect();
+
+        }
+        
+    }, true);
+
+    // Stop detection if press stops
+    GuacamoleUI.display.addEventListener('touchend', GuacamoleUI.stopLongPressDetect, true);
+
+    // Close menu on mouse movement
+    GuacamoleUI.display.addEventListener('mousemove', GuacamoleUI.startMenuCloseDetect, true);
+    GuacamoleUI.display.addEventListener('mousedown', GuacamoleUI.startMenuCloseDetect, true);
 
     // Reconnect button
     GuacamoleUI.buttons.reconnect.onclick = function() {
@@ -373,7 +419,7 @@ var GuacamoleUI = {
 GuacamoleUI.attach = function(guac) {
 
     var title_prefix = null;
-    var connection_name = null 
+    var connection_name = "Guacamole"; 
     
     var guac_display = guac.getDisplay();
 
@@ -439,12 +485,6 @@ GuacamoleUI.attach = function(guac) {
             // 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);
             
@@ -505,13 +545,7 @@ GuacamoleUI.attach = function(guac) {
 
             // Connected
             case 3:
-                
                 GuacamoleUI.hideStatus();
-                GuacamoleUI.display.className =
-                    GuacamoleUI.display.className.replace(/guac-loading/, '');
-
-                GuacamoleUI.menu.className = "connected";
-
                 title_prefix = null;
                 break;
 
@@ -558,6 +592,41 @@ GuacamoleUI.attach = function(guac) {
         guac.disconnect();
     };
 
+    // If text is input directly into event target without typing (as with
+    // voice input, for example), type automatically.
+    GuacamoleUI.eventTarget.oninput = function(e) {
+
+        // Get input text
+        var text = GuacamoleUI.eventTarget.value;
+
+        // Send each character
+        for (var i=0; i<text.length; i++) {
+
+            // Get char code
+            var charCode = text.charCodeAt(i);
+
+            // Convert to keysym
+            var keysym = 0x003F; // Default to a question mark
+            if (charCode >= 0x0000 && charCode <= 0x00FF)
+                keysym = charCode;
+            else if (charCode >= 0x0100 && charCode <= 0x10FFFF)
+                keysym = 0x01000000 | charCode;
+
+            // Press and release key
+            guac.sendKeyEvent(1, keysym);
+            guac.sendKeyEvent(0, keysym);
+
+        }
+
+        // Reset target
+        GuacamoleUI.resetEventTarget();
+
+        // Stop event
+        e.preventDefault();
+        return false;
+
+    }
+
     // Handle clipboard events
     GuacamoleUI.clipboard.onchange = function() {