GUAC-955: Add element module and guacScroll directive. Refactor guacFocus to element module. Use guacScroll to update menu scroll during drag.

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

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+
+/**
+ * A directive which allows elements to be manually focused / blurred.
+ */
+angular.module('element').directive('guacFocus', ['$timeout', '$parse', function guacFocus($timeout, $parse) {
+
+    return {
+        restrict: 'A',
+
+        link: function linkGuacFocus($scope, $element, $attrs) {
+
+            /**
+             * Whether the element associated with this directive should be
+             * focussed.
+             *
+             * @type Boolean
+             */
+            var guacFocus = $parse($attrs.guacFocus);
+
+            /**
+             * The element which will register the drag gesture.
+             *
+             * @type Element
+             */
+            var element = $element[0];
+
+            // Set/unset focus depending on value of guacFocus
+            $scope.$watch(guacFocus, function updateFocus(value) {
+                $timeout(function updateFocusAsync() {
+                    if (value)
+                        element.focus();
+                    else
+                        element.blur();
+                });
+            });
+
+            // Set focus flag when focus is received
+            element.addEventListener('focus', function focusReceived() {
+                $scope.$apply(function setGuacFocus() {
+                    guacFocus.assign($scope, true);
+                });
+            });
+
+            // Unset focus flag when focus is lost
+            element.addEventListener('blur', function focusLost() {
+                $scope.$apply(function unsetGuacFocus() {
+                    guacFocus.assign($scope, false);
+                });
+            });
+
+        } // end guacFocus link function
+
+    };
+
+}]);

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

@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+/**
+ * A directive which allows elements to be manually scrolled, and for their
+ * scroll state to be observed.
+ */
+angular.module('element').directive('guacScroll', [function guacScroll() {
+
+    return {
+        restrict: 'A',
+
+        link: function linkGuacScroll($scope, $element, $attrs) {
+
+            /**
+             * The current scroll state of the element.
+             *
+             * @type ScrollState
+             */
+            var guacScroll = $scope.$eval($attrs.guacScroll);
+
+            /**
+             * The element which is being scrolled, or monitored for changes
+             * in scroll.
+             *
+             * @type Element
+             */
+            var element = $element[0];
+
+            /**
+             * Returns the current left edge of the scrolling rectangle.
+             *
+             * @returns {Number}
+             *     The current left edge of the scrolling rectangle.
+             */
+            var getScrollLeft = function getScrollLeft() {
+                return guacScroll.left;
+            };
+
+            /**
+             * Returns the current top edge of the scrolling rectangle.
+             *
+             * @returns {Number}
+             *     The current top edge of the scrolling rectangle.
+             */
+            var getScrollTop = function getScrollTop() {
+                return guacScroll.top;
+            };
+
+            // Update underlying scrollLeft property when left changes
+            $scope.$watch(getScrollLeft, function scrollLeftChanged(left) {
+                element.scrollLeft = left;
+                guacScroll.left = element.scrollLeft;
+            });
+
+            // Update underlying scrollTop property when top changes
+            $scope.$watch(getScrollTop, function scrollTopChanged(top) {
+                element.scrollTop = top;
+                guacScroll.top = element.scrollTop;
+            });
+
+        } // end guacScroll link function
+
+    };
+
+}]);

guacamole/src/main/webapp/app/element/elementModule.js

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+/**
+ * Module for manipulating element state, such as focus or scroll position, as
+ * well as handling browser events.
+ */
+angular.module('element', []);

guacamole/src/main/webapp/app/element/types/ScrollState.js

@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+/**
+ * Provides the ScrollState class definition.
+ */
+angular.module('element').factory('ScrollState', [function defineScrollState() {
+
+    /**
+     * Creates a new ScrollState, representing the current scroll position of
+     * an arbitrary element. This constructor initializes the properties of the
+     * new ScrollState with the corresponding properties of the given template.
+     *
+     * @constructor
+     * @param {ScrollState|Object} [template={}]
+     *     The object whose properties should be copied within the new
+     *     ScrollState.
+     */
+    var ScrollState = function ScrollState(template) {
+
+        // Use empty object by default
+        template = template || {};
+
+        /**
+         * The left edge of the view rectangle within the scrollable area. This
+         * value naturally increases as the user scrolls right.
+         *
+         * @type Number
+         */
+        this.left = template.left || 0;
+
+        /**
+         * The top edge of the view rectangle within the scrollable area. This
+         * value naturally increases as the user scrolls down.
+         *
+         * @type Number
+         */
+        this.top = template.top || 0;
+
+    };
+
+    return ScrollState;
+
+}]);