From 04dee83802b638fcf2d7d85c911c9b6aa3d55027 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Sun, 28 Dec 2014 13:50:29 -0800
Subject: [PATCH] GUAC-955: OSK should not cover visible display area.

---
 .../webapp/app/client/styles/keyboard.css     |  8 -------
 .../webapp/app/client/templates/client.html   |  9 ++++----
 .../main/webapp/app/osk/directives/guacOsk.js | 22 +++++++++++--------
 .../src/main/webapp/app/osk/styles/osk.css    | 12 ++++++++++
 .../main/webapp/app/osk/templates/blank.html  | 22 +++++++++++++++++++
 .../webapp/app/osk/templates/guacOsk.html     |  3 +++
 6 files changed, 55 insertions(+), 21 deletions(-)
 create mode 100644 guacamole/src/main/webapp/app/osk/templates/blank.html

diff --git a/guacamole/src/main/webapp/app/client/styles/keyboard.css b/guacamole/src/main/webapp/app/client/styles/keyboard.css
index 270153a4d..665301f68 100644
--- a/guacamole/src/main/webapp/app/client/styles/keyboard.css
+++ b/guacamole/src/main/webapp/app/client/styles/keyboard.css
@@ -23,9 +23,6 @@
 .keyboard-container {
     text-align: center;
 
-    position: fixed;
-    left: 0;
-    bottom: 0;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -34,10 +31,5 @@
     background: #222;
     opacity: 0.85;
 
-    visibility: hidden;
     z-index: 1;
 }
-
-.keyboard-container.shown {
-    visibility: visible;
-}
diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index 88abf2dc7..9bc5776db 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -43,14 +43,15 @@
                 <guac-text-input needs-focus="showTextInput"></guac-text-input>
             </div>
 
+            <!-- On-screen keyboard -->
+            <div class="keyboard-container" ng-show="showOSK">
+                <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"/>
+            </div>
+
         </div>
 
     </div>
 
-    <!-- On-screen keyboard -->
-    <div class="keyboard-container" ng-class="{shown: showOSK}">
-        <guac-osk layout="'CLIENT.URL_OSK_LAYOUT' | translate"/>
-    </div>
 
 </guac-viewport>
 
diff --git a/guacamole/src/main/webapp/app/osk/directives/guacOsk.js b/guacamole/src/main/webapp/app/osk/directives/guacOsk.js
index f8891e437..b9ee43963 100644
--- a/guacamole/src/main/webapp/app/osk/directives/guacOsk.js
+++ b/guacamole/src/main/webapp/app/osk/directives/guacOsk.js
@@ -57,6 +57,13 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
              */
             var main = $element[0];
 
+            /**
+             * The element which functions as a detector for size changes.
+             * 
+             * @type Element
+             */
+            var resizeSensor = $element.find('.resize-sensor')[0];
+
             /**
              * Event listener which resizes the current keyboard, if any, such
              * that it fits within available space.
@@ -73,8 +80,10 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
             $scope.$watch("layout", function setLayout(layout) {
 
                 // Remove current keyboard
-                keyboard = null;
-                main.innerHTML = "";
+                if (keyboard) {
+                    main.removeChild(keyboard.getElement());
+                    keyboard = null;
+                }
 
                 // Load new keyboard
                 if (layout) {
@@ -96,18 +105,13 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
                         $rootScope.$broadcast('guacSyntheticKeyup', keysym);
                     };
 
-                    // Resize keyboard whenever window changes size
-                    $window.addEventListener('resize', resizeListener);
+                    // Resize keyboard whenever element changes size
+                    resizeSensor.contentWindow.addEventListener('resize', resizeListener);
 
                 }
 
             }); // end layout scope watch
 
-            // Clean up event listeners upon destroy
-            $scope.$on('$destroy', function destroyKeyboard() {
-                $window.removeEventListener('resize', resizeListener);
-            });
-
         }]
 
     };
diff --git a/guacamole/src/main/webapp/app/osk/styles/osk.css b/guacamole/src/main/webapp/app/osk/styles/osk.css
index ae5d26bf9..c36d40629 100644
--- a/guacamole/src/main/webapp/app/osk/styles/osk.css
+++ b/guacamole/src/main/webapp/app/osk/styles/osk.css
@@ -20,6 +20,18 @@
  * THE SOFTWARE.
  */
 
+.osk .resize-sensor {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    border: none;
+    opacity: 0;
+    z-index: -1;
+}
+
 .guac-keyboard {
     display: inline-block;
     width: 100%;
diff --git a/guacamole/src/main/webapp/app/osk/templates/blank.html b/guacamole/src/main/webapp/app/osk/templates/blank.html
new file mode 100644
index 000000000..62b9f6aa2
--- /dev/null
+++ b/guacamole/src/main/webapp/app/osk/templates/blank.html
@@ -0,0 +1,22 @@
+<!--
+   Copyright (C) 2014 Glyptodon LLC
+
+   Permission is hereby granted, free of charge, to any person obtaining a copy
+   of this software and associated documentation files (the "Software"), to deal
+   in the Software without restriction, including without limitation the rights
+   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+   copies of the Software, and to permit persons to whom the Software is
+   furnished to do so, subject to the following conditions:
+
+   The above copyright notice and this permission notice shall be included in
+   all copies or substantial portions of the Software.
+
+   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+   THE SOFTWARE.
+-->
+<html><body></body></html>
diff --git a/guacamole/src/main/webapp/app/osk/templates/guacOsk.html b/guacamole/src/main/webapp/app/osk/templates/guacOsk.html
index 42a73462c..e541dc64b 100644
--- a/guacamole/src/main/webapp/app/osk/templates/guacOsk.html
+++ b/guacamole/src/main/webapp/app/osk/templates/guacOsk.html
@@ -21,4 +21,7 @@
        THE SOFTWARE.
     -->
 
+    <!-- Resize sensor -->
+    <iframe class="resize-sensor" src="app/osk/templates/blank.html"></iframe>
+
 </div>