Merge pull request #76 from glyptodon/resize-directive

GUAC-958: Move resize handling into directive. Fix resize event listener timing.

guacamole/src/main/webapp/app/client/directives/guacClient.js

@@ -339,7 +339,7 @@ angular.module('client').directive('guacClient', [function guacClient() {
             });
             
             // If the element is resized, attempt to resize client
-            resizeSensor.contentDocument.defaultView.addEventListener('resize', function mainElementResized() {
+            $scope.mainElementResized = function mainElementResized() {
 
                 // Send new display size, if changed
                 if (client && display) {
@@ -355,7 +355,7 @@ angular.module('client').directive('guacClient', [function guacClient() {
 
                 $scope.$evalAsync(updateDisplayScale);
 
-            });
+            };
 
             // Watch for changes to mouse emulation mode
             // Send all received mouse events to the client

guacamole/src/main/webapp/app/client/directives/guacThumbnail.js

@@ -89,18 +89,11 @@ angular.module('client').directive('guacThumbnail', [function guacThumbnail() {
              */
             var main = $element[0];
 
-            /**
-             * The element which functions as a detector for size changes.
-             * 
-             * @type Element
-             */
-            var resizeSensor = $element.find('.resize-sensor')[0];
-
             /**
              * Updates the scale of the attached Guacamole.Client based on current window
              * size and "auto-fit" setting.
              */
-            var updateDisplayScale = function updateDisplayScale() {
+            $scope.updateDisplayScale = function updateDisplayScale() {
 
                 if (!display) return;
 
@@ -159,15 +152,11 @@ angular.module('client').directive('guacThumbnail', [function guacThumbnail() {
                 thumbnail.height = height;
                 $scope.thumbnail = thumbnail.toDataURL("image/png");
 
-                $scope.$evalAsync(updateDisplayScale);
+                // Init display scale
+                $scope.$evalAsync($scope.updateDisplayScale);
 
             });
 
-            // If the element is resized, attempt to resize client
-            resizeSensor.contentDocument.defaultView.addEventListener('resize', function mainElementResized() {
-                $scope.$apply(updateDisplayScale);
-            });
-
         }]
     };
 }]);

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

@@ -38,18 +38,6 @@ div.main {
     font-size: 0px;
 }
 
-.resize-sensor {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-    overflow: hidden;
-    border: none;
-    opacity: 0;
-    z-index: -1;
-}
-
 div.displayOuter {
     height: 100%;
     width: 100%;

guacamole/src/main/webapp/app/client/templates/guacClient.html

@@ -1,4 +1,4 @@
-<div class="main">
+<div class="main" guac-resize="mainElementResized">
     <!--
        Copyright (C) 2014 Glyptodon LLC
 
@@ -31,7 +31,4 @@
 
     </div>
 
-    <!-- Resize sensor -->
-    <object type="text/html" class="resize-sensor" data="app/client/templates/blank.html"></object>
-    
 </div>

guacamole/src/main/webapp/app/client/templates/guacThumbnail.html

@@ -1,4 +1,4 @@
-<div class="thumbnail-main">
+<div class="thumbnail-main" guac-resize="updateDisplayScale">
     <!--
        Copyright (C) 2014 Glyptodon LLC
 
@@ -21,9 +21,6 @@
        THE SOFTWARE.
     -->
 
-    <!-- Resize sensor -->
-    <object type="text/html" class="resize-sensor" data="app/client/templates/blank.html"></object>
-    
     <!-- Display -->
     <div class="display">
     </div>

guacamole/src/main/webapp/app/element/directives/guacResize.js

@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2015 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.
+ */
+
+/**
+ * A directive which calls a given callback when its associated element is
+ * resized. This will modify the internal DOM tree of the associated element,
+ * and the associated element MUST have position (for example,
+ * "position: relative").
+ */
+angular.module('element').directive('guacResize', ['$document', function guacResize($document) {
+
+    return {
+        restrict: 'A',
+
+        link: function linkGuacResize($scope, $element, $attrs) {
+
+            /**
+             * The function to call whenever the associated element is
+             * resized. The function will be passed the width and height of
+             * the element, in pixels.
+             *
+             * @type Function 
+             */
+            var guacResize = $scope.$eval($attrs.guacResize);
+
+            /**
+             * The element which will monitored for size changes.
+             *
+             * @type Element
+             */
+            var element = $element[0];
+
+            /**
+             * The resize sensor - an HTML object element.
+             *
+             * @type HTMLObjectElement
+             */
+            var resizeSensor = $document[0].createElement('object');
+
+            /**
+             * The width of the associated element, in pixels.
+             *
+             * @type Number
+             */
+            var lastWidth = element.offsetWidth;
+
+            /**
+             * The height of the associated element, in pixels.
+             *
+             * @type Number
+             */
+            var lastHeight = element.offsetHeight;
+
+            /**
+             * Checks whether the size of the associated element has changed
+             * and, if so, calls the resize callback with the new width and
+             * height as parameters.
+             */
+            var checkSize = function checkSize() {
+
+                // Call callback only if size actually changed
+                if (element.offsetWidth !== lastWidth
+                 || element.offsetHeight !== lastHeight) {
+
+                    // Call resize callback, if defined
+                    if (guacResize) {
+                        $scope.$apply(function elementSizeChanged() {
+                            guacResize(element.offsetWidth, element.offsetHeight);
+                        });
+                    }
+
+                    // Update stored size
+                    lastWidth  = element.offsetWidth;
+                    lastHeight = element.offsetHeight;
+
+                 }
+
+            };
+
+            // Register event listener once window object exists
+            resizeSensor.onload = function resizeSensorReady() {
+                resizeSensor.contentDocument.defaultView.addEventListener('resize', checkSize);
+                checkSize();
+            };
+
+            // Load blank contents
+            resizeSensor.className = 'resize-sensor';
+            resizeSensor.type      = 'text/html';
+            resizeSensor.data      = 'app/element/templates/blank.html';
+
+            // Add resize sensor to associated element
+            element.insertBefore(resizeSensor, element.firstChild);
+
+        } // end guacResize link function
+
+    };
+
+}]);

guacamole/src/main/webapp/app/element/styles/resize-sensor.css

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2015 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.
+ */
+
+.resize-sensor {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    border: none;
+    opacity: 0;
+    z-index: -1;
+}

guacamole/src/main/webapp/app/osk/directives/guacOsk.js

@@ -57,18 +57,8 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
              */
             var main = $element[0];
 
-            /**
+            // Size keyboard to same size as main element
-             * The element which functions as a detector for size changes.
+            $scope.keyboardResized = function keyboardResized() {
-             * 
-             * @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.
-             */
-            var resizeListener = function resizeListener() {
 
                 // Resize keyboard, if defined
                 if (keyboard)
@@ -105,9 +95,6 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
                         $rootScope.$broadcast('guacSyntheticKeyup', keysym);
                     };
 
-                    // Resize keyboard whenever element changes size
-                    resizeSensor.contentDocument.defaultView.addEventListener('resize', resizeListener);
-
                 }
 
             }); // end layout scope watch

guacamole/src/main/webapp/app/osk/styles/osk.css

@@ -24,18 +24,6 @@
     position: relative;
 }
 
-.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

@@ -1,22 +0,0 @@
-<!--
-   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

@@ -1,4 +1,4 @@
-<div class="osk">
+<div class="osk" guac-resize="keyboardResized">
     <!--
        Copyright (C) 2014 Glyptodon LLC
 
@@ -20,8 +20,4 @@
        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
        THE SOFTWARE.
     -->
-
-    <!-- Resize sensor -->
-    <object type="text/html" class="resize-sensor" data="app/osk/templates/blank.html"></object>
-
 </div>