Clipboard which can be activated/used from within the touch menu.

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

diff --git a/src/main/webapp/client.xhtml b/src/main/webapp/client.xhtml
index ae0df24..b877981 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,33 +51,51 @@
 
             <!-- 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>
 
+        <!-- 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>
+
+        <!-- Touch-specific clipboard -->
+        <div id="touchClipboardDiv">
+            <h2>Clipboard</h2>
+            <p>
+            Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and will be pastable within the remote desktop. Use the textbox below as an interface between the client and server clipboards.
+            </p>
+            <textarea rows="10" cols="40" id="touchClipboard"></textarea>
+        </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>
 
-            <!-- On-screen keyboard -->
-            <div id="keyboardContainer"></div>
-
         </div>
 
-        <!-- Error Dialog-->
-        <div id="errorDialog" class="errorDialogOuter">
-            <div class="errorDialogMiddle">
-                <div class="errorDialog">
-                    <p id="errorText"></p>
+        <!-- On-screen keyboard -->
+        <div id="keyboardContainer"></div>
+
+        <!-- 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 +110,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>