GUAC-1099: Implement pagination directive (guacPager), borrowing from old 0.9.3 pager code and styles.

guacamole/src/main/webapp/app/index/styles/ui.css

@@ -346,66 +346,7 @@ div.logout-panel {
     padding-right: 1em;
 }
 
-.first-page,
+.buttons {
-.prev-page,
-.set-page,
-.next-page,
-.last-page {
-    cursor: pointer;
-    vertical-align: middle;
-}
-
-.first-page.disabled,
-.prev-page.disabled,
-.set-page.disabled,
-.next-page.disabled,
-.last-page.disabled {
-    cursor: auto;
-    opacity: 0.25;
-}
-
-.set-page,
-.more-pages {
-    display: inline-block;
-    padding: 0.25em;
-    text-align: center;
-    min-width: 1.25em;
-}
-
-.set-page {
-    text-decoration: underline;
-}
-
-.set-page.current {
-    cursor: auto;
-    text-decoration: none;
-    font-weight: bold;
-    background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    -moz-border-radius: 0.2em;
-    -webkit-border-radius: 0.2em;
-    -khtml-border-radius: 0.2em;
-    border-radius: 0.2em;
-}
-
-.icon.first-page {
-    background-image: url('images/action-icons/guac-first-page.png');
-}
-
-.icon.prev-page {
-    background-image: url('images/action-icons/guac-prev-page.png');
-}
-
-.icon.next-page {
-    background-image: url('images/action-icons/guac-next-page.png');
-}
-
-.icon.last-page {
-    background-image: url('images/action-icons/guac-last-page.png');
-}
-
-.buttons,
-.list-pager-buttons {
     text-align: center;
     margin: 1em;
 }

guacamole/src/main/webapp/app/pager/directives/guacPager.js

@@ -0,0 +1,303 @@
+/*
+ * 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 provides pagination controls, along with a paginated
+ * subset of the elements of some given array.
+ */
+angular.module('pager').directive('guacPager', [function guacPager() {
+
+    return {
+        restrict: 'E',
+        replace: true,
+        scope: {
+
+            /**
+             * The property to which a subset of the provided array will be
+             * assigned.
+             *
+             * @type Array
+             */
+            page : '=',
+
+            /**
+             * The maximum number of items per page.
+             *
+             * @type Number
+             */
+            pageSize : '&',
+
+            /**
+             * The maximum number of page choices to provide, regardless of the
+             * total number of pages.
+             *
+             * @type Number
+             */
+            pageCount : '&',
+
+            /**
+             * An array objects to paginate. Subsets of this array will be
+             * exposed as pages.
+             *
+             * @type Array
+             */
+            items : '&'
+
+        },
+
+        templateUrl: 'app/pager/templates/guacPager.html',
+        controller: ['$scope', function guacPagerController($scope) {
+
+            /**
+             * The default size of a page, if not provided via the pageSize
+             * attribute.
+             *
+             * @type Number
+             */
+            var DEFAULT_PAGE_SIZE = 10;
+
+            /**
+             * The default maximum number of page choices to provide, if a
+             * value is not providede via the pageCount attribute.
+             *
+             * @type Number
+             */
+            var DEFAULT_PAGE_COUNT = 11;
+
+            /**
+             * An array of arrays, where the Nth array contains the contents of
+             * the Nth page.
+             *
+             * @type Array[]
+             */
+            var pages = [];
+
+            /**
+             * The number of the first selectable page.
+             *
+             * @type Number;
+             */
+            $scope.firstPage = 1;
+
+            /**
+             * The number of the page immediately before the currently-selected
+             * page.
+             *
+             * @type Number;
+             */
+            $scope.previousPage = 1;
+
+            /**
+             * The number of the currently-selected page.
+             *
+             * @type Number;
+             */
+            $scope.currentPage = 1;
+
+            /**
+             * The number of the page immediately after the currently-selected
+             * page.
+             *
+             * @type Number;
+             */
+            $scope.nextPage = 1;
+
+            /**
+             * The number of the last selectable page.
+             *
+             * @type Number;
+             */
+            $scope.lastPage = 1;
+
+            /**
+             * An array of relevant page numbers that the user may want to jump
+             * to directly.
+             *
+             * @type Number[]
+             */
+            $scope.pageNumbers = [];
+
+            /**
+             * Updates the displayed page number choices.
+             */
+            var updatePageNumbers = function updatePageNumbers() {
+
+                // Get page count
+                var pageCount = $scope.pageCount() || DEFAULT_PAGE_COUNT;
+
+                // Determine start/end of page window
+                var windowStart = $scope.currentPage - (pageCount - 1) / 2;
+                var windowEnd   = windowStart + pageCount - 1;
+
+                // Shift window as necessary if it extends beyond the first page
+                if (windowStart < $scope.firstPage) {
+                    windowEnd = Math.min($scope.lastPage, windowEnd - windowStart + $scope.firstPage);
+                    windowStart = $scope.firstPage;
+                }
+
+                // Shift window as necessary if it extends beyond the last page
+                else if (windowEnd > $scope.lastPage) {
+                    windowStart = Math.max(1, windowStart - windowEnd + $scope.lastPage);
+                    windowEnd = $scope.lastPage;
+                }
+
+                // Generate list of relevant page numbers
+                $scope.pageNumbers = [];
+                for (var pageNumber = windowStart; pageNumber <= windowEnd; pageNumber++)
+                    $scope.pageNumbers.push(pageNumber);
+
+            };
+
+            /**
+             * Iterates through the bound items array, splitting it into pages
+             * based on the current page size.
+             */
+            var updatePages = function updatePages() {
+
+                // Get current items and page size
+                var items = $scope.items();
+                var pageSize = $scope.pageSize() || DEFAULT_PAGE_SIZE;
+
+                // Clear current pages
+                pages = [];
+
+                // Only split into pages if items actually exist
+                if (items) {
+
+                    // Split into pages of pageSize items each
+                    for (var i = 0; i < items.length; i += pageSize)
+                        pages.push(items.slice(i, i + pageSize));
+
+                }
+
+                // Update minimum and maximum values
+                $scope.firstPage = 1;
+                $scope.lastPage  = pages.length;
+
+                // Select an appropriate page
+                var adjustedCurrentPage = Math.min($scope.lastPage, Math.max($scope.firstPage, $scope.currentPage));
+                $scope.selectPage(adjustedCurrentPage);
+
+            };
+
+            /**
+             * Selects the page having the given number, assigning that page to
+             * the property bound to the page attribute. If no such page
+             * exists, the property will be set to undefined instead. Valid
+             * page numbers begin at 1.
+             *
+             * @param {Number} page
+             *     The number of the page to select. Valid page numbers begin
+             *     at 1.
+             */
+            $scope.selectPage = function selectPage(page) {
+
+                // Select the chosen page
+                $scope.currentPage = page;
+                $scope.page = pages[page-1];
+
+                // Update next/previous page numbers
+                $scope.nextPage     = Math.min($scope.lastPage,  $scope.currentPage + 1);
+                $scope.previousPage = Math.max($scope.firstPage, $scope.currentPage - 1);
+
+                // Update which page numbers are shown
+                updatePageNumbers();
+
+            };
+
+            /**
+             * Returns whether the given page number can be legally selected
+             * via selectPage(), resulting in a different page being shown.
+             *
+             * @param {Number} page
+             *     The page number to check.
+             *
+             * @returns {Boolean}
+             *     true if the page having the given number can be selected,
+             *     false otherwise.
+             */
+            $scope.canSelectPage = function canSelectPage(page) {
+                return page !== $scope.currentPage
+                    && page >=  $scope.firstPage
+                    && page <=  $scope.lastPage;
+            };
+
+            /**
+             * Returns whether the page having the given number is currently
+             * selected.
+             *
+             * @param {Number} page
+             *     The page number to check.
+             *
+             * @returns {Boolean}
+             *     true if the page having the given number is currently
+             *     selected, false otherwise.
+             */
+            $scope.isSelected = function isSelected(page) {
+                return page === $scope.currentPage;
+            };
+
+            /**
+             * Returns whether pages exist before the first page listed in the
+             * pageNumbers array.
+             *
+             * @returns {Boolean}
+             *     true if pages exist before the first page listed in the
+             *     pageNumbers array, false otherwise.
+             */
+            $scope.hasMorePagesBefore = function hasMorePagesBefore() {
+                var firstPageNumber = $scope.pageNumbers[0]
+                return firstPageNumber !== $scope.firstPage;
+            };
+
+            /**
+             * Returns whether pages exist after the last page listed in the
+             * pageNumbers array.
+             *
+             * @returns {Boolean}
+             *     true if pages exist after the last page listed in the
+             *     pageNumbers array, false otherwise.
+             */
+            $scope.hasMorePagesAfter = function hasMorePagesAfter() {
+                var lastPageNumber = $scope.pageNumbers[$scope.pageNumbers.length - 1];
+                return lastPageNumber !== $scope.lastPage;
+            };
+
+            // Update available pages when available items are changed
+            $scope.$watchCollection($scope.items, function itemsChanged() {
+                updatePages();
+            });
+
+            // Update available pages when page size is changed
+            $scope.$watch($scope.pageSize, function pageSizeChanged() {
+                updatePages();
+            });
+
+            // Update available page numbers when page count is changed
+            $scope.$watch($scope.pageCount, function pageCountChanged() {
+                updatePageNumbers();
+            });
+
+        }]
+
+    };
+}]);

guacamole/src/main/webapp/app/pager/pagerModule.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+/**
+ * Module for displaying the contents of a list, split into multiple pages.
+ */
+angular.module('pager', []);

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

@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+.pager {
+    text-align: center;
+    margin: 1em;
+}
+
+.pager .page-numbers {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+.pager .first-page,
+.pager .prev-page,
+.pager .set-page,
+.pager .next-page,
+.pager .last-page {
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.pager .first-page.disabled,
+.pager .prev-page.disabled,
+.pager .set-page.disabled,
+.pager .next-page.disabled,
+.pager .last-page.disabled {
+    cursor: auto;
+    opacity: 0.25;
+}
+
+.pager .set-page,
+.pager .more-pages {
+    display: inline-block;
+    padding: 0.25em;
+    text-align: center;
+    min-width: 1.25em;
+}
+
+.pager .set-page {
+    text-decoration: underline;
+}
+
+.pager .set-page.current {
+    cursor: auto;
+    text-decoration: none;
+    font-weight: bold;
+    background: rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    -moz-border-radius: 0.2em;
+    -webkit-border-radius: 0.2em;
+    -khtml-border-radius: 0.2em;
+    border-radius: 0.2em;
+}
+
+.pager .icon.first-page {
+    background-image: url('images/action-icons/guac-first-page.png');
+}
+
+.pager .icon.prev-page {
+    background-image: url('images/action-icons/guac-prev-page.png');
+}
+
+.pager .icon.next-page {
+    background-image: url('images/action-icons/guac-next-page.png');
+}
+
+.pager .icon.last-page {
+    background-image: url('images/action-icons/guac-last-page.png');
+}

guacamole/src/main/webapp/app/pager/templates/guacPager.html

@@ -0,0 +1,46 @@
+<div class="pager" ng-show="pageNumbers.length > 1">
+    <!--
+       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.
+    -->
+
+    <!-- First / Previous -->
+    <div class="first-page icon" ng-class="{disabled: !canSelectPage(firstPage)}"    ng-click="selectPage(firstPage)"/>
+    <div class="prev-page icon"  ng-class="{disabled: !canSelectPage(previousPage)}" ng-click="selectPage(previousPage)"/>
+
+    <!-- Indicator of the existence of pages before the first page number shown -->
+    <div class="more-pages" ng-show="hasMorePagesBefore()">...</div>
+    
+    <!-- Page numbers -->
+    <ul class="page-numbers">
+        <li class="set-page"
+            ng-class="{current: isSelected(pageNumber)}"
+            ng-repeat="pageNumber in pageNumbers"
+            ng-click="selectPage(pageNumber)">{{pageNumber}}</li>
+    </ul>
+
+    <!-- Indicator of the existence of pages beyond the last page number shown -->
+    <div class="more-pages" ng-show="hasMorePagesAfter()">...</div>
+
+    <!-- Next / Last -->
+    <div class="next-page icon" ng-class="{disabled: !canSelectPage(nextPage)}" ng-click="selectPage(nextPage)"/>
+    <div class="last-page icon" ng-class="{disabled: !canSelectPage(lastPage)}" ng-click="selectPage(lastPage)"/>
+
+</div>