From f91580788bd93825f64353272e9641423af6066e Mon Sep 17 00:00:00 2001
From: Michael Jumper <zhangmaike@users.sourceforge.net>
Date: Sun, 29 Apr 2012 00:01:00 -0700
Subject: [PATCH] Clipboard which can be activated/used from within the touch
 menu.

---
 guacamole/src/main/webapp/client.xhtml        |  9 +++
 .../src/main/webapp/scripts/interface.js      | 59 +++++++++++++------
 guacamole/src/main/webapp/styles/client.css   | 28 ++++++++-
 3 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/guacamole/src/main/webapp/client.xhtml b/guacamole/src/main/webapp/client.xhtml
index 46782aff8..b8779813d 100644
--- a/guacamole/src/main/webapp/client.xhtml
+++ b/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>
 
diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js
index c250ff562..e12f4dfb7 100644
--- a/guacamole/src/main/webapp/scripts/interface.js
+++ b/guacamole/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/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css
index 66b3f31f0..c3d8887a6 100644
--- a/guacamole/src/main/webapp/styles/client.css
+++ b/guacamole/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%;
+}
+