Add text field event target, focus event target if "Show Keyboard" is clicked and...

[guacamole.git] / src / main / webapp / scripts / interface.js

diff --git a/src/main/webapp/scripts/interface.js b/src/main/webapp/scripts/interface.js
index 0beb793..73a9384 100644 (file)
--- a/src/main/webapp/scripts/interface.js
+++ b/src/main/webapp/scripts/interface.js
@@ -8,6 +8,7 @@ var GuacamoleUI = {
     "menuControl" : document.getElementById("menuControl"),
     "touchMenu"   : document.getElementById("touchMenu"),
     "logo"        : document.getElementById("status-logo"),
+    "eventTarget" : document.getElementById("eventTarget"),
 
     "buttons": {
 
@@ -42,20 +43,73 @@ var GuacamoleUI = {
     var guacErrorImage = new Image();
     guacErrorImage.src = "images/noguacamole-logo-24.png";
 
+    // Function for adding a class to an element
+    var addClass;
+
+    // Function for removing a class from an element
+    var removeClass;
+
+    // If Node.classList is supported, implement addClass/removeClass using that
+    if (Node.classList) {
+
+        addClass = function(element, classname) {
+            element.classList.add(classname);
+        };
+        
+        removeClass = function(element, classname) {
+            element.classList.remove(classname);
+        };
+        
+    }
+
+    // Otherwise, implement own
+    else {
+
+        addClass = function(element, classname) {
+
+            // Simply add new class
+            element.className += " " + classname;
+
+        };
+        
+        removeClass = function(element, classname) {
+
+            // Filter out classes with given name
+            element.className = element.className.replace(/([^ ]+)[ ]*/g,
+                function(match, testClassname, spaces, offset, string) {
+
+                    // If same class, remove
+                    if (testClassname == classname)
+                        return "";
+
+                    // Otherwise, allow
+                    return match;
+                    
+                }
+            );
+
+        };
+        
+    }
+
+
     GuacamoleUI.hideStatus = function() {
-        document.body.classList.remove("guac-error");
+        removeClass(document.body, "guac-error");
         GuacamoleUI.containers.state.style.visibility = "hidden";
+        GuacamoleUI.display.style.opacity = "1";
     };
     
     GuacamoleUI.showStatus = function(text) {
-        document.body.classList.remove("guac-error");
+        removeClass(document.body, "guac-error");
         GuacamoleUI.containers.state.style.visibility = "visible";
         GuacamoleUI.state.textContent = text;
+        GuacamoleUI.display.style.opacity = "1";
     };
     
     GuacamoleUI.showError = function(error) {
-        document.body.classList.add("guac-error");
+        addClass(document.body, "guac-error");
         GuacamoleUI.state.textContent = error;
+        GuacamoleUI.display.style.opacity = "0.1";
     };
 
     GuacamoleUI.shadeMenu = function() {
@@ -124,10 +178,19 @@ var GuacamoleUI = {
 
     };
 
+    var assumeNativeOSK = false;
+
     // Show/Hide keyboard
     var keyboardResizeInterval = null;
     GuacamoleUI.buttons.showKeyboard.onclick = function() {
 
+        // If we think the platform has a native OSK, use the event target to
+        // cause it to display.
+        if (assumeNativeOSK) {
+            GuacamoleUI.eventTarget.focus();
+            return;
+        }
+        
         var displayed = GuacamoleUI.containers.keyboard.style.display;
         if (displayed != "block") {
             GuacamoleUI.containers.keyboard.style.display = "block";
@@ -229,6 +292,9 @@ var GuacamoleUI = {
             menuShowLongPressTimeout = window.setTimeout(function() {
                 
                 menuShowLongPressTimeout = null;
+
+                // Assume native OSK if menu shown via long-press
+                assumeNativeOSK = true;
                 GuacamoleUI.showMenu();
 
             }, 800);
@@ -241,6 +307,11 @@ var GuacamoleUI = {
         menuShowLongPressTimeout = null;
     };
 
+    // Ensure the event target ALWAYS has text inside.
+    GuacamoleUI.eventTarget.onchange = function() {
+        GuacamoleUI.eventTarget.value = "x";
+    };
+
     // Detect long-press at bottom of screen
     document.body.addEventListener('touchstart', GuacamoleUI.startLongPressDetect, true);