feat(pagination): option for different mode when maxSize

 * Allow user to specify if current page is rotated, moving the left/right
   limit, or page is moving between page groups.

Author: bekos

src/pagination/docs/demo.html

@@ -1,9 +1,17 @@
-<div ng-controller="PaginationDemoCtrl">
+<div ng-controller="PaginationDemoCtrl" class="well well-small">
+    <h4>Default</h4>
+
     <pagination num-pages="noOfPages" current-page="currentPage"></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 boundary-links="true" num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
+    <pagination direction-links="false" boundary-links="true" num-pages="noOfPages" current-page="currentPage"></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>
+
+    <hr />
+
+    <h4>Limit the maximimum visible page-buttons</h4>
+    <pagination num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
+    <pagination rotate="false" num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
+</div>

src/pagination/docs/demo.js

@@ -6,4 +6,7 @@ var PaginationDemoCtrl = function ($scope) {
   $scope.setPage = function (pageNo) {
     $scope.currentPage = pageNo;
   };
+
+  $scope.bigNoOfPages = 18;
+  $scope.bigCurrentPage = 1;
 };

src/pagination/docs/readme.md

@@ -1,5 +1,6 @@
+
 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 and First / Last buttons (if exist) is maintained correctly.
 
-It also provides optional attribute max-size to limit the size of pagination bar.
+It also provides optional attribute max-size to limit the size of pagination bar & rotate attribute whether to keep current page in the middle of the visible ones.

src/pagination/pagination.js

@@ -6,7 +6,8 @@ angular.module('ui.bootstrap.pagination', [])
   firstText: 'First',
   previousText: 'Previous',
   nextText: 'Next',
-  lastText: 'Last'
+  lastText: 'Last',
+  rotate: true
 })
 
 .directive('pagination', ['paginationConfig', function(paginationConfig) {
@@ -29,6 +30,7 @@ angular.module('ui.bootstrap.pagination', [])
       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;
+      var rotate = angular.isDefined(attrs.rotate) ? scope.$eval(attrs.rotate) : paginationConfig.rotate;
 
       // Create page object used in template
       function makePage(number, text, isActive, isDisabled) {
@@ -45,16 +47,26 @@ angular.module('ui.bootstrap.pagination', [])
 
         // Default page limits
         var startPage = 1, endPage = scope.numPages;
+        var isMaxSized = ( angular.isDefined(scope.maxSize) && scope.maxSize < scope.numPages );
 
         // recompute if maxSize
-        if ( scope.maxSize && scope.maxSize < scope.numPages ) {
-          startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
-          endPage   = startPage + scope.maxSize - 1;
-
-          // Adjust if limit is exceeded
-          if (endPage > scope.numPages) {
-            endPage   = scope.numPages;
-            startPage = endPage - scope.maxSize + 1;
+        if ( isMaxSized ) {
+          if ( rotate ) {
+            // Current page is displayed in the middle of the visible ones
+            startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
+            endPage   = startPage + scope.maxSize - 1;
+
+            // Adjust if limit is exceeded
+            if (endPage > scope.numPages) {
+              endPage   = scope.numPages;
+              startPage = endPage - scope.maxSize + 1;
+            }
+          } else {
+            // Visible pages are paginated with maxSize
+            startPage = ((Math.ceil(scope.currentPage / scope.maxSize) - 1) * scope.maxSize) + 1;
+
+            // Adjust last page if limit is exceeded
+            endPage = Math.min(startPage + scope.maxSize - 1, scope.numPages);
           }
         }
 
@@ -64,6 +76,19 @@ angular.module('ui.bootstrap.pagination', [])
           scope.pages.push(page);
         }
 
+        // Add links to move between page sets
+        if ( isMaxSized && ! rotate ) {
+          if ( startPage > 1 ) {
+            var previousPageSet = makePage(startPage - 1, '...', false, false);
+            scope.pages.unshift(previousPageSet);
+          }
+
+          if ( endPage < scope.numPages ) {
+            var nextPageSet = makePage(endPage + 1, '...', false, false);
+            scope.pages.push(nextPageSet);
+          }
+        }
+
         // Add previous & next links
         if (directionLinks) {
           var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
@@ -82,7 +107,6 @@ angular.module('ui.bootstrap.pagination', [])
           scope.pages.push(lastPage);
         }
 
-
         if ( scope.currentPage > scope.numPages ) {
           scope.selectPage(scope.numPages);
         }
@@ -105,4 +129,4 @@ angular.module('ui.bootstrap.pagination', [])
       };
     }
   };
-}]);
+}]);

src/pagination/test/pagination.spec.js

@@ -190,6 +190,85 @@ describe('pagination directive with max size option', function () {
     expect($rootScope.maxSize).toBe(15);
   });
 
+  it('should not display page numbers, if max-size is zero', function() {
+    $rootScope.maxSize = 0;
+    $rootScope.$digest();
+    expect(element.find('li').length).toBe(2);
+    expect(element.find('li').eq(0).text()).toBe('Previous');
+    expect(element.find('li').eq(-1).text()).toBe('Next');
+  });
+
+});
+
+describe('pagination directive with max size option & no rotate', function () {
+  var $rootScope, element;
+  beforeEach(module('ui.bootstrap.pagination'));
+  beforeEach(module('template/pagination/pagination.html'));
+  beforeEach(inject(function(_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+    $rootScope.numPages = 12;
+    $rootScope.currentPage = 7;
+    $rootScope.maxSize = 5;
+    element = $compile('<pagination num-pages="numPages" current-page="currentPage" max-size="maxSize" rotate="false"></pagination>')($rootScope);
+    $rootScope.$digest();
+  }));
+
+  it('contains one ul and maxsize + 4 elements', function() {
+    expect(element.find('ul').length).toBe(1);
+    expect(element.find('li').length).toBe($rootScope.maxSize + 4);
+    expect(element.find('li').eq(0).text()).toBe('Previous');
+    expect(element.find('li').eq(1).text()).toBe('...');
+    expect(element.find('li').eq(2).text()).toBe('6');
+    expect(element.find('li').eq(-3).text()).toBe('10');
+    expect(element.find('li').eq(-2).text()).toBe('...');
+    expect(element.find('li').eq(-1).text()).toBe('Next');
+  });
+
+  it('shows only the next ellipsis element on first page set', function() {
+    $rootScope.currentPage = 3;
+    $rootScope.$digest();
+    expect(element.find('li').eq(1).text()).toBe('1');
+    expect(element.find('li').eq(-3).text()).toBe('5');
+    expect(element.find('li').eq(-2).text()).toBe('...');
+  });
+
+  it('shows only the previous ellipsis element on last page set', function() {
+    $rootScope.currentPage = 12;
+    $rootScope.$digest();
+    expect(element.find('li').length).toBe(5);
+    expect(element.find('li').eq(1).text()).toBe('...');
+    expect(element.find('li').eq(2).text()).toBe('11');
+    expect(element.find('li').eq(-2).text()).toBe('12');
+  });
+
+  it('moves to the previous set when first ellipsis is clicked', function() {
+    var prev = element.find('li').eq(1).find('a').eq(0);
+    expect(prev.text()).toBe('...');
+
+    prev.click();
+    expect($rootScope.currentPage).toBe(5);
+    var currentPageItem = element.find('li').eq(-3);
+    expect(currentPageItem.hasClass('active')).toBe(true);
+  });
+
+  it('moves to the next set when last ellipsis is clicked', function() {
+    var next = element.find('li').eq(-2).find('a').eq(0);
+    expect(next.text()).toBe('...');
+
+    next.click();
+    expect($rootScope.currentPage).toBe(11);
+    var currentPageItem = element.find('li').eq(2);
+    expect(currentPageItem.hasClass('active')).toBe(true);
+  });
+
+  it('should not display page numbers, if max-size is zero', function() {
+    $rootScope.maxSize = 0;
+    $rootScope.$digest();
+    expect(element.find('li').length).toBe(2);
+    expect(element.find('li').eq(0).text()).toBe('Previous');
+    expect(element.find('li').eq(-1).text()).toBe('Next');
+  });
 });
 
 describe('pagination directive with added first & last links', function () {