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

diff --git a/src/main/webapp/client.xhtml b/src/main/webapp/client.xhtml
index 46782af..b877981 100644 (file)
--- a/src/main/webapp/client.xhtml
+++ b/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>
 

diff --git a/src/main/webapp/scripts/interface.js b/src/main/webapp/scripts/interface.js
index c250ff5..e12f4df 100644 (file)
--- a/src/main/webapp/scripts/interface.js
+++ b/src/main/webapp/scripts/interface.js
@@ -49,13 +49,15 @@ var GuacamoleUI = {
     },
 
     "containers": {
-        "state"    : document.getElementById("statusDialog"),
-        "clipboard": document.getElementById("clipboardDiv"),
-        "keyboard" : document.getElementById("keyboardContainer")
+        "state"         : document.getElementById("statusDialog"),
+        "clipboard"     : document.getElementById("clipboardDiv"),
+        "touchClipboard": document.getElementById("touchClipboardDiv"),
+        "keyboard"      : document.getElementById("keyboardContainer")
     },
     
-    "state"     : document.getElementById("statusText"),
-    "clipboard" : document.getElementById("clipboard")
+    "state"          : document.getElementById("statusText"),
+    "clipboard"      : document.getElementById("clipboard"),
+    "touchClipboard" : document.getElementById("touchClipboard")
 
 };
 
@@ -143,21 +145,31 @@ var GuacamoleUI = {
     GuacamoleUI.hideTouchMenu = function() {
         GuacamoleUI.touchMenu.style.visibility = "hidden";
     };
-    
-    GuacamoleUI.showTouchMenu = function() {
-        
-        GuacamoleUI.touchMenu.style.left =
-            ((GuacamoleUI.viewport.offsetWidth - GuacamoleUI.touchMenu.offsetWidth) / 2
+
+    function positionCentered(element) {
+        element.style.left =
+            ((GuacamoleUI.viewport.offsetWidth - element.offsetWidth) / 2
             + window.pageXOffset)
             + "px";
 
-        GuacamoleUI.touchMenu.style.top =
-            ((GuacamoleUI.viewport.offsetHeight - GuacamoleUI.touchMenu.offsetHeight) / 2
+        element.style.top =
+            ((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
-        alert("Not yet implemented... Sorry.");
+        GuacamoleUI.hideTouchMenu();
+        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) {

diff --git a/src/main/webapp/styles/client.css b/src/main/webapp/styles/client.css
index 66b3f31..c3d8887 100644 (file)
--- a/src/main/webapp/styles/client.css
+++ b/src/main/webapp/styles/client.css
@@ -271,4 +271,30 @@ div#touchMenu {
     padding: 1em;
     opacity: 0.8;
 
-}
\ No newline at end of file
+}
+
+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%;
+}
+