Fix sizing of page due to touch menu.

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

diff --git a/src/main/webapp/client.xhtml b/src/main/webapp/client.xhtml
index 21a837f..46782af 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>
 
@@ -53,9 +54,14 @@
 
         </div>
 
+        <!-- Touch-specific menu -->
+        <div id="touchMenu"><img id="touchShowClipboard" src="images/menu-icons/tango/edit-paste.png"/><img id="touchShowKeyboard" src="images/menu-icons/tango/input-keyboard.png"/><img id="touchLogout" src="images/menu-icons/tango/system-log-out.png"/></div>
+
+        <!-- Keyboard event target for platforms with native OSKs -->
+        <textarea id="eventTarget"></textarea>
 
         <!-- Display -->
-        <div id="display" class="guac-display guac-loading">
+        <div id="display">
             
             <!-- Menu trigger -->
             <div id="menuControl"></div>
@@ -95,29 +101,53 @@
         <!-- 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 entire query string, and pass to connect().
+                        // Normally, only the "id" parameter is required, but
+                        // all parameters should be preserved and passed on for
+                        // the sake of authentication.
 
-                // Get ID
-                var id = window.location.search.substring(1);
+                        var connect_string = window.location.search.substring(1);
+                        guac.connect(connect_string);
 
-                // Connect client
-                guac.connect("id=" + id);
+                    }
+                    catch (e) {
+                        GuacamoleUI.showError(e.message);
+                    }
 
-            }
-            catch (e) {
-                GuacamoleUI.showError(e.message);
-            }
+                }, 0);
+            };
 
-            /* ]]> */ </script>
+        /* ]]> */ </script>
 
     </body>