Move OSK into new client-ui, partially refactor Ctrl-Alt-Shift shortcut.

guacamole/src/main/webapp/client.xhtml

@@ -40,9 +40,6 @@
             </div>
         </div>
 
-        <!-- On-screen keyboard -->
-        <div id="keyboardContainer"></div>
-        
         <!-- Dimensional clone of viewport -->
         <div id="viewportClone"/>
 

guacamole/src/main/webapp/scripts/client-ui.js

@@ -363,6 +363,84 @@ GuacUI.StateManager.registerComponent(
     GuacUI.Client.states.PAN_TYPING
 );
 
+/**
+ * On-screen Keyboard. This component provides a clickable/touchable keyboard
+ * which sends key events to the Guacamole client.
+ * 
+ * @constructor
+ * @augments GuacUI.Component
+ */
+GuacUI.Client.OnScreenKeyboard = function() {
+
+    /**
+     * Event target. This is a hidden textarea element which will receive
+     * key events.
+     * @private
+     */
+    var keyboard_container = GuacUI.createElement("div", "keyboard-container");
+
+    var keyboard_resize_interval = null;
+
+    // On-screen keyboard
+    var keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
+    keyboard_container.appendChild(keyboard.getElement());
+
+    var last_keyboard_width = 0;
+
+    // Function for automatically updating keyboard size
+    function updateKeyboardSize() {
+        var currentSize = keyboard.getElement().offsetWidth;
+        if (last_keyboard_width != currentSize) {
+            keyboard.resize(currentSize);
+            last_keyboard_width = currentSize;
+        }
+    }
+
+    keyboard.onkeydown = function(keysym) {
+        GuacamoleUI.client.sendKeyEvent(1, keysym);
+    };
+
+    keyboard.onkeyup = function(keysym) {
+        GuacamoleUI.client.sendKeyEvent(0, keysym);
+    };
+
+
+    this.show = function() {
+
+        // Show keyboard
+        document.body.appendChild(keyboard_container);
+
+        // Start periodic update of keyboard size
+        keyboard_resize_interval = window.setInterval(
+            updateKeyboardSize,
+            GuacUI.Client.KEYBOARD_AUTO_RESIZE_INTERVAL);
+
+        updateKeyboardSize();
+
+    };
+
+    this.hide = function() {
+
+        // Hide keyboard
+        document.body.removeChild(keyboard_container);
+        window.clearInterval(keyboard_resize_interval);
+
+    };
+
+};
+
+GuacUI.Client.OnScreenKeyboard.prototype = new GuacUI.Component();
+
+/*
+ * Show on-screen keyboard during OSK mode only.
+ */
+
+GuacUI.StateManager.registerComponent(
+    new GuacUI.Client.OnScreenKeyboard(),
+    GuacUI.Client.states.OSK
+);
+
+
 /*
  * Set initial state
  */

guacamole/src/main/webapp/scripts/interface.js

@@ -37,8 +37,7 @@ var GuacamoleUI = {
     },
 
     "containers": {
-        "state"     : document.getElementById("statusDialog"),
-        "keyboard"  : document.getElementById("keyboardContainer")
+        "state"     : document.getElementById("statusDialog")
     },
     
     "state"        : document.getElementById("statusText"),
@@ -59,56 +58,6 @@ GuacamoleUI.supportedAudio = [];
  */
 GuacamoleUI.supportedVideo = [];
 
-// On-screen keyboard
-GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
-GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement());
-
-GuacamoleUI.lastKeyboardWidth = 0;
-
-// Function for automatically updating keyboard size
-GuacamoleUI.updateKeyboardSize = function() {
-    var currentSize = GuacamoleUI.keyboard.getElement().offsetWidth;
-    if (GuacamoleUI.lastKeyboardWidth != currentSize) {
-        GuacamoleUI.keyboard.resize(currentSize);
-        GuacamoleUI.lastKeyboardWidth = currentSize;
-    }
-};
-
-GuacamoleUI.keyboardResizeInterval = null;
-
-// Show/Hide keyboard
-GuacamoleUI.toggleKeyboard = function() {
-
-    // If Guac OSK shown, hide it.
-    var displayed = GuacamoleUI.containers.keyboard.style.display;
-    if (displayed == "block") {
-
-        // Hide keyboard
-        GuacamoleUI.containers.keyboard.style.display = "none";
-
-        // Stop automatic periodic update
-        window.clearInterval(GuacamoleUI.keyboardResizeInterval);
-
-    }
-
-    // Otherwise, show it
-    else {
-
-        // Show keyboard
-        GuacamoleUI.containers.keyboard.style.display = "block";
-
-        // Start periodic update of keyboard size
-        GuacamoleUI.keyboardResizeInterval = window.setInterval(
-            GuacamoleUI.updateKeyboardSize,
-            GuacamoleUI.KEYBOARD_AUTO_RESIZE_INTERVAL);
-
-        // Update keyboard size initially
-        GuacamoleUI.updateKeyboardSize();
-
-    }
-
-};
-
 // If Node.classList is supported, implement addClass/removeClass using that
 if (Node.classList) {
 
@@ -350,7 +299,7 @@ GuacamoleUI.attach = function(guac) {
         // conditions satisfied
         if (show_keyboard_gesture_possible && keysym == 0xFFE1) {
             if (keyboard.pressed[0xFFE3] && keyboard.pressed[0xFFE9])
-                GuacamoleUI.toggleKeyboard();
+                GuacUI.StateManager.setState(GuacUI.Client.states.OSK);
         }
 
         // Detect if no keys are pressed
@@ -366,14 +315,6 @@ GuacamoleUI.attach = function(guac) {
 
     };
 
-    GuacamoleUI.keyboard.onkeydown = function(keysym) {
-        guac.sendKeyEvent(1, keysym);
-    };
-
-    GuacamoleUI.keyboard.onkeyup = function(keysym) {
-        guac.sendKeyEvent(0, keysym);
-    };
-
     function isTypableCharacter(keysym) {
         return (keysym & 0xFFFF00) != 0xFF00;
     }
@@ -525,7 +466,6 @@ GuacamoleUI.attach = function(guac) {
 
         guac.sendSize(window.innerWidth, window.innerHeight);
         updateDisplayScale();
-        GuacamoleUI.updateKeyboardSize();
 
     };
 

guacamole/src/main/webapp/styles/keyboard.css

@@ -17,7 +17,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-#keyboardContainer {
+.keyboard-container {
     text-align: center;
 
     position: fixed;
@@ -31,7 +31,6 @@
     background: #222;
     opacity: 0.85;
 
-    display: none;
     z-index: 1;
 }