GUAC-955: OSK should not cover visible display area.

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;
-}

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>
 

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;
+                if (keyboard) {
-                main.innerHTML = "";
+                    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
+                    // Resize keyboard whenever element changes size
-                    $window.addEventListener('resize', resizeListener);
+                    resizeSensor.contentWindow.addEventListener('resize', resizeListener);
 
                 }
 
             }); // end layout scope watch
 
-            // Clean up event listeners upon destroy
-            $scope.$on('$destroy', function destroyKeyboard() {
-                $window.removeEventListener('resize', resizeListener);
-            });
-
         }]
 
     };

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%;

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>

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>