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

[guacamole.git] / src / main / webapp / client.xhtml

diff --git a/src/main/webapp/client.xhtml b/src/main/webapp/client.xhtml
index e4cb17b..3523bae 100644 (file)
--- a/src/main/webapp/client.xhtml
+++ b/src/main/webapp/client.xhtml
@@ -26,6 +26,7 @@
         <link rel="stylesheet" type="text/css" href="styles/client.css"/>
         <link rel="stylesheet" type="text/css" href="styles/keyboard.css"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
+        <meta name="apple-mobile-web-app-capable" content="yes"/>
         <title>Guacamole ${project.version}</title>
     </head>
 
@@ -50,13 +51,16 @@
 
             <!-- Logo and status -->
             <img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
-            <span id="state"></span>
 
         </div>
 
+        <input id="eventTarget"
+               type="text"
+               style="width: 0; height: 0; position: fixed; opacity: 0"
+               value="x"/>
 
         <!-- Display -->
-        <div id="display" class="guac-display guac-loading">
+        <div id="display">
             
             <!-- Menu trigger -->
             <div id="menuControl"></div>
@@ -66,17 +70,22 @@
         <!-- On-screen keyboard -->
         <div id="keyboardContainer"></div>
 
-        <!-- Error Dialog-->
-        <div id="errorDialog" class="errorDialogOuter">
-            <div class="errorDialogMiddle">
-                <div class="errorDialog">
-                    <p id="errorText"></p>
+        <!-- Dimensional clone of viewport -->
+        <div id="viewportClone"/>
+
+        <!-- Dialogs -->
+        <div class="dialogOuter">
+            <div class="dialogMiddle">
+
+                <!-- Status Dialog -->
+                <div id="statusDialog" class="dialog">
+                    <p id="statusText"></p>
                     <div class="buttons"><button id="reconnect">Reconnect</button></div>
                 </div>
+
             </div>
         </div>
 
-
         <!-- guacamole-common-js scripts -->
         <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
         <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
@@ -91,29 +100,51 @@
         <!-- Init -->
         <script type="text/javascript"> /* <![CDATA[ */
 
-            // Instantiate client
-            var guac = new Guacamole.Client(
-                GuacamoleUI.display,
-                new Guacamole.HTTPTunnel("tunnel")
-            );
+            // Start connect after control returns from onload (allow browser
+            // to consider the page loaded).
+            window.onload = function() {
+                window.setTimeout(function() {
+
+                    var tunnel;
+
+                    // If WebSocket available, try to use it.
+                    if (window.WebSocket)
+                        tunnel = new Guacamole.ChainedTunnel(
+                            new Guacamole.WebSocketTunnel("websocket-tunnel"),
+                            new Guacamole.HTTPTunnel("tunnel")
+                        );
+
+                    // If no WebSocket, then use HTTP.
+                    else
+                        tunnel = new Guacamole.HTTPTunnel("tunnel")
+
+                    // Instantiate client
+                    var guac = new Guacamole.Client(tunnel);
+
+                    // Add client to UI
+                    guac.getDisplay().className = "software-cursor";
+                    GuacamoleUI.display.appendChild(guac.getDisplay());
+
+                    // Tie UI to client
+                    GuacamoleUI.attach(guac);
 
-            // Tie UI to client
-            GuacamoleUI.attach(guac);
+                    try {
 
-            try {
+                        // Get ID
+                        var id = window.location.search.substring(1);
 
-                // Get ID
-                var id = window.location.search.substring(1);
+                        // Connect client
+                        guac.connect("id=" + id);
 
-                // Connect client
-                guac.connect("id=" + id);
+                    }
+                    catch (e) {
+                        GuacamoleUI.showError(e.message);
+                    }
 
-            }
-            catch (e) {
-                GuacamoleUI.showError(e.message);
-            }
+                }, 0);
+            };
 
-            /* ]]> */ </script>
+        /* ]]> */ </script>
 
     </body>