feat(pagination): add first/last link & constant congif options

Closes #120
angular-ui · Mar 2, 2013 · 0ff0454 · 0ff0454
1 parent 29930ef
commit 0ff0454
Show file tree

Hide file tree

Showing 5 changed files with 358 additions and 29 deletions.
diff --git a/src/pagination/docs/demo.html b/src/pagination/docs/demo.html
@@ -1,8 +1,9 @@
 <div ng-controller="PaginationDemoCtrl">
     <pagination num-pages="noOfPages" current-page="currentPage"></pagination>
-    <pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
-    <pagination num-pages="noOfPages" current-page="currentPage" class="pagination-mini"></pagination>
+    <pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></pagination>
+    <pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
     <pagination num-pages="noOfPages" current-page="currentPage"  max-size="maxSize"></pagination>
+    <pagination direction-links="false" num-pages="noOfPages" current-page="currentPage"></pagination>
     <button class="btn" ng-click="setPage(3)">Set current page to: 3</button>
     The selected page no: {{currentPage}}
 </div>
diff --git a/src/pagination/docs/readme.md b/src/pagination/docs/readme.md
@@ -1,5 +1,5 @@
 A lightweight pagination directive that is focused on ... providing pagination!
 
-It will take care of visualising a pagination bar. Additionally it will make sure that the state (enabled / disabled) of the Previous / Next buttons is maintained correctly.
+It will take care of visualising a pagination bar. Additionally it will make sure that the state (enabled / disabled) of the Previous / Next and First / Last buttons (if exist) is maintained correctly.
 
 It also provides optional attribute max-size to limit the size of pagination bar.
diff --git a/src/pagination/pagination.js b/src/pagination/pagination.js
@@ -1,19 +1,45 @@
 angular.module('ui.bootstrap.pagination', [])
 
-.directive('pagination', function() {
+.constant('paginationConfig', {
+  boundaryLinks: false,
+  directionLinks: true,
+  firstText: 'First',
+  previousText: 'Previous',
+  nextText: 'Next',
+  lastText: 'Last'
+})
+
+.directive('pagination', ['paginationConfig', function(paginationConfig) {
   return {
     restrict: 'EA',
     scope: {
       numPages: '=',
       currentPage: '=',
       maxSize: '=',
-      onSelectPage: '&',
-      nextText: '@',
-      previousText: '@'
+      onSelectPage: '&'
     },
     templateUrl: 'template/pagination/pagination.html',
     replace: true,
-    link: function(scope) {
+    link: function(scope, element, attrs) {
+
+      // Setup configuration parameters
+      var boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
+      var directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
+      var firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : paginationConfig.firstText;
+      var previousText = angular.isDefined(attrs.previousText) ? attrs.previousText : paginationConfig.previousText;
+      var nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : paginationConfig.nextText;
+      var lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : paginationConfig.lastText;
+
+      // Create page object used in template
+      function makePage(number, text, isActive, isDisabled) {
+        return {
+          number: number,
+          text: text,
+          active: isActive,
+          disabled: isDisabled
+        };
+      }
+
       scope.$watch('numPages + currentPage + maxSize', function() {
         scope.pages = [];
 
@@ -29,9 +55,31 @@ angular.module('ui.bootstrap.pagination', [])
             startPage = startPage - ((startPage + maxSize - 1) - scope.numPages );
         }
 
-        for(var i=0; i < maxSize && i < scope.numPages ;i++) {
-          scope.pages.push(startPage + i);
+        // Add page number links
+        for (var number = startPage, max = startPage + maxSize; number < max; number++) {
+          var page = makePage(number, number, scope.isActive(number), false);
+          scope.pages.push(page);
         }
+
+        // Add previous & next links
+        if (directionLinks) {
+          var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
+          scope.pages.unshift(previousPage);
+
+          var nextPage = makePage(scope.currentPage + 1, nextText, false, scope.noNext());
+          scope.pages.push(nextPage);
+        }
+
+        // Add first & last links
+        if (boundaryLinks) {
+          var firstPage = makePage(1, firstText, false, scope.noPrevious());
+          scope.pages.unshift(firstPage);
+
+          var lastPage = makePage(scope.numPages, lastText, false, scope.noNext());
+          scope.pages.push(lastPage);
+        }
+
+
         if ( scope.currentPage > scope.numPages ) {
           scope.selectPage(scope.numPages);
         }
@@ -47,22 +95,11 @@ angular.module('ui.bootstrap.pagination', [])
       };
 
       scope.selectPage = function(page) {
-        if ( ! scope.isActive(page) ) {
+        if ( ! scope.isActive(page) && page > 0 && page <= scope.numPages) {
           scope.currentPage = page;
           scope.onSelectPage({ page: page });
         }
       };
-
-      scope.selectPrevious = function() {
-        if ( !scope.noPrevious() ) {
-          scope.selectPage(scope.currentPage-1);
-        }
-      };
-      scope.selectNext = function() {
-        if ( !scope.noNext() ) {
-          scope.selectPage(scope.currentPage+1);
-        }
-      };
     }
   };
-});
+}]);