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

guacamole/src/main/webapp/client.xhtml

@@ -57,6 +57,15 @@
         <!-- 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>
 

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

@@ -49,13 +49,15 @@ var GuacamoleUI = {
     },
 
     "containers": {
-        "state"    : document.getElementById("statusDialog"),
+        "state"         : document.getElementById("statusDialog"),
-        "clipboard": document.getElementById("clipboardDiv"),
+        "clipboard"     : document.getElementById("clipboardDiv"),
-        "keyboard" : document.getElementById("keyboardContainer")
+        "touchClipboard": document.getElementById("touchClipboardDiv"),
+        "keyboard"      : document.getElementById("keyboardContainer")
     },
     
-    "state"     : document.getElementById("statusText"),
+    "state"          : document.getElementById("statusText"),
-    "clipboard" : document.getElementById("clipboard")
+    "clipboard"      : document.getElementById("clipboard"),
+    "touchClipboard" : document.getElementById("touchClipboard")
 
 };
 
@@ -144,20 +146,30 @@ var GuacamoleUI = {
         GuacamoleUI.touchMenu.style.visibility = "hidden";
     };
 
-    GuacamoleUI.showTouchMenu = function() {
+    function positionCentered(element) {
-        
+        element.style.left =
-        GuacamoleUI.touchMenu.style.left =
+            ((GuacamoleUI.viewport.offsetWidth - element.offsetWidth) / 2
-            ((GuacamoleUI.viewport.offsetWidth - GuacamoleUI.touchMenu.offsetWidth) / 2
             + window.pageXOffset)
             + "px";
 
-        GuacamoleUI.touchMenu.style.top =
+        element.style.top =
-            ((GuacamoleUI.viewport.offsetHeight - GuacamoleUI.touchMenu.offsetHeight) / 2
+            ((GuacamoleUI.viewport.offsetHeight - element.offsetHeight) / 2
             + window.pageYOffset)
             + "px";
+    }
 
+    GuacamoleUI.showTouchMenu = function() {
+        positionCentered(GuacamoleUI.touchMenu);
         GuacamoleUI.touchMenu.style.visibility = "visible";
+    };
 
+    GuacamoleUI.hideTouchClipboard = function() {
+        GuacamoleUI.containers.touchClipboard.style.visibility = "hidden";
+    };
+
+    GuacamoleUI.showTouchClipboard = function() {
+        positionCentered(GuacamoleUI.containers.touchClipboard);
+        GuacamoleUI.containers.touchClipboard.style.visibility = "visible";
     };
 
     GuacamoleUI.shadeMenu = function() {
@@ -240,8 +252,8 @@ var GuacamoleUI = {
     };
 
     GuacamoleUI.buttons.touchShowClipboard.onclick = function() {
-        // FIXME: Implement
+        GuacamoleUI.hideTouchMenu();
-        alert("Not yet implemented... Sorry.");
+        GuacamoleUI.showTouchClipboard();
     };
 
     // Show/Hide keyboard
@@ -410,6 +422,7 @@ var GuacamoleUI = {
         // Close menu if shown
         GuacamoleUI.shadeMenu();
         GuacamoleUI.hideTouchMenu();
+        GuacamoleUI.hideTouchClipboard();
         
         // Record touch location
         if (e.touches.length == 1) {
@@ -710,23 +723,35 @@ GuacamoleUI.attach = function(guac) {
     GuacamoleUI.clipboard.onchange = function() {
 
         var text = GuacamoleUI.clipboard.value;
+        GuacamoleUI.touchClipboard.value = text;
+        guac.setClipboard(text);
+
+    };
+
+    GuacamoleUI.touchClipboard.onchange = function() {
+
+        var text = GuacamoleUI.touchClipboard.value;
+        GuacamoleUI.clipboard.value = text;
         guac.setClipboard(text);
 
     };
 
     // Ignore keypresses when clipboard is focused
-    GuacamoleUI.clipboard.onfocus = function() {
+    GuacamoleUI.clipboard.onfocus =
+    GuacamoleUI.touchClipboard.onfocus = function() {
         disableKeyboard();
     };
 
     // Capture keypresses when clipboard is not focused
-    GuacamoleUI.clipboard.onblur = function() {
+    GuacamoleUI.clipboard.onblur =
+    GuacamoleUI.touchClipboard.onblur = function() {
         enableKeyboard();
     };
 
     // Server copy handler
     guac.onclipboard = function(data) {
         GuacamoleUI.clipboard.value = data;
+        GuacamoleUI.touchClipboard.value = data;
     };
 
     GuacamoleUI.keyboard.onkeydown = function(keysym) {

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

@@ -272,3 +272,29 @@ div#touchMenu {
     opacity: 0.8;
 
 }
+
+div#touchClipboardDiv {
+
+    position: absolute;
+    visibility: hidden;
+    z-index: 4;
+
+    color: white;
+    background: black;
+    border: 1px solid silver;
+    padding: 1em;
+    opacity: 0.8;
+
+    max-width: 50em;
+    
+}
+
+div#touchClipboardDiv h2 {
+    margin: 0;
+    font-size: 1em;
+}
+
+div#touchClipboardDiv textarea {
+    width: 100%;
+}
+