From 2423422340934574fca5377735d76cbee12351fc Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Fri, 2 Jan 2015 02:34:39 -0800 Subject: [PATCH] GUAC-963: Scroll file transfer into view when menu is shown. --- .../client/controllers/clientController.js | 7 ++- .../webapp/app/client/templates/client.html | 2 +- .../app/element/directives/guacMarker.js | 62 +++++++++++++++++++ .../main/webapp/app/element/types/Marker.js | 50 +++++++++++++++ 4 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 guacamole/src/main/webapp/app/element/directives/guacMarker.js create mode 100644 guacamole/src/main/webapp/app/element/types/Marker.js diff --git a/guacamole/src/main/webapp/app/client/controllers/clientController.js b/guacamole/src/main/webapp/app/client/controllers/clientController.js index a763e4510..44f6ce7f6 100644 --- a/guacamole/src/main/webapp/app/client/controllers/clientController.js +++ b/guacamole/src/main/webapp/app/client/controllers/clientController.js @@ -385,11 +385,14 @@ angular.module('client').controller('clientController', ['$scope', '$routeParams $scope.page.title = name; }); - // Show menu if new file transfers have started + // Show file transfer section of menu if new file transfers have started $scope.$watch('client.uploads.length + client.downloads.length', function transfersChanged(count, oldCount) { - if (count > oldCount) + // Show menu and scroll file transfer into view + if (count > oldCount) { $scope.menuShown = true; + $scope.fileTransferMarker.scrollIntoView(); + } }); diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html index cabe77362..8f4e3687e 100644 --- a/guacamole/src/main/webapp/app/client/templates/client.html +++ b/guacamole/src/main/webapp/app/client/templates/client.html @@ -69,7 +69,7 @@ -

{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}

+

{{'CLIENT.SECTION_HEADER_FILE_TRANSFERS' | translate}}

diff --git a/guacamole/src/main/webapp/app/element/directives/guacMarker.js b/guacamole/src/main/webapp/app/element/directives/guacMarker.js new file mode 100644 index 000000000..444cf6814 --- /dev/null +++ b/guacamole/src/main/webapp/app/element/directives/guacMarker.js @@ -0,0 +1,62 @@ +/* + * 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 stores a marker which refers to a specific element, + * allowing that element to be scrolled into view when desired. + */ +angular.module('element').directive('guacMarker', ['$injector', function guacMarker($injector) { + + // Required types + var Marker = $injector.get('Marker'); + + // Required services + var $parse = $injector.get('$parse'); + + return { + restrict: 'A', + + link: function linkGuacMarker($scope, $element, $attrs) { + + /** + * The property in which a new Marker should be stored. The new + * Marker will refer to the element associated with this directive. + * + * @type Marker + */ + var guacMarker = $parse($attrs.guacMarker); + + /** + * The element to associate with the new Marker. + * + * @type Element + */ + var element = $element[0]; + + // Assign new marker + guacMarker.assign($scope, new Marker(element)); + + } + + }; + +}]); diff --git a/guacamole/src/main/webapp/app/element/types/Marker.js b/guacamole/src/main/webapp/app/element/types/Marker.js new file mode 100644 index 000000000..c3cada482 --- /dev/null +++ b/guacamole/src/main/webapp/app/element/types/Marker.js @@ -0,0 +1,50 @@ +/* + * 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 Marker class definition. + */ +angular.module('element').factory('Marker', [function defineMarker() { + + /** + * Creates a new Marker which allows its associated element to be scolled + * into view as desired. + * + * @constructor + * @param {Element} element + * The element to associate with this marker. + */ + var Marker = function Marker(element) { + + /** + * Scrolls scrollable elements, or the window, as needed to bring the + * element associated with this marker into view. + */ + this.scrollIntoView = function scrollIntoView() { + element.scrollIntoView(); + }; + + }; + + return Marker; + +}]);