Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit a023d08

Browse files
bekosajoslin
bekos
authored and
ajoslin
committed
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.
1 parent b0745c8 commit a023d08

File tree

5 files changed

+132
-17
lines changed

5 files changed

+132
-17
lines changed

‎src/pagination/docs/demo.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
<div ng-controller="PaginationDemoCtrl">
1+
<div ng-controller="PaginationDemoCtrl" class="well well-small">
2+
<h4>Default</h4>
3+
24
<pagination num-pages="noOfPages" current-page="currentPage"></pagination>
3-
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></pagination>
4-
<pagination boundary-links="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
5-
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
5+
<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>
6+
<pagination direction-links="false" boundary-links="true" num-pages="noOfPages" current-page="currentPage"></pagination>
67
<pagination direction-links="false" num-pages="noOfPages" current-page="currentPage"></pagination>
8+
79
<button class="btn" ng-click="setPage(3)">Set current page to: 3</button>
810
The selected page no: {{currentPage}}
9-
</div>
11+
12+
<hr />
13+
14+
<h4>Limit the maximimum visible page-buttons</h4>
15+
<pagination num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
16+
<pagination rotate="false" num-pages="bigNoOfPages" current-page="bigCurrentPage" max-size="maxSize" class="pagination-mini" boundary-links="true"></pagination>
17+
</div>

‎src/pagination/docs/demo.js

+3
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,7 @@ var PaginationDemoCtrl = function ($scope) {
66
$scope.setPage = function (pageNo) {
77
$scope.currentPage = pageNo;
88
};
9+
10+
$scope.bigNoOfPages = 18;
11+
$scope.bigCurrentPage = 1;
912
};

‎src/pagination/docs/readme.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
12
A lightweight pagination directive that is focused on ... providing pagination!
23

34
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.
45

5-
It also provides optional attribute max-size to limit the size of pagination bar.
6+
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

+35-11
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ angular.module('ui.bootstrap.pagination', [])
66
firstText: 'First',
77
previousText: 'Previous',
88
nextText: 'Next',
9-
lastText: 'Last'
9+
lastText: 'Last',
10+
rotate: true
1011
})
1112

1213
.directive('pagination', ['paginationConfig', function(paginationConfig) {
@@ -29,6 +30,7 @@ angular.module('ui.bootstrap.pagination', [])
2930
var previousText = angular.isDefined(attrs.previousText) ? attrs.previousText : paginationConfig.previousText;
3031
var nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : paginationConfig.nextText;
3132
var lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : paginationConfig.lastText;
33+
var rotate = angular.isDefined(attrs.rotate) ? scope.$eval(attrs.rotate) : paginationConfig.rotate;
3234

3335
// Create page object used in template
3436
function makePage(number, text, isActive, isDisabled) {
@@ -45,16 +47,26 @@ angular.module('ui.bootstrap.pagination', [])
4547

4648
// Default page limits
4749
var startPage = 1, endPage = scope.numPages;
50+
var isMaxSized = ( angular.isDefined(scope.maxSize) && scope.maxSize < scope.numPages );
4851

4952
// recompute if maxSize
50-
if ( scope.maxSize && scope.maxSize < scope.numPages ) {
51-
startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
52-
endPage = startPage + scope.maxSize - 1;
53-
54-
// Adjust if limit is exceeded
55-
if (endPage > scope.numPages) {
56-
endPage = scope.numPages;
57-
startPage = endPage - scope.maxSize + 1;
53+
if ( isMaxSized ) {
54+
if ( rotate ) {
55+
// Current page is displayed in the middle of the visible ones
56+
startPage = Math.max(scope.currentPage - Math.floor(scope.maxSize/2), 1);
57+
endPage = startPage + scope.maxSize - 1;
58+
59+
// Adjust if limit is exceeded
60+
if (endPage > scope.numPages) {
61+
endPage = scope.numPages;
62+
startPage = endPage - scope.maxSize + 1;
63+
}
64+
} else {
65+
// Visible pages are paginated with maxSize
66+
startPage = ((Math.ceil(scope.currentPage / scope.maxSize) - 1) * scope.maxSize) + 1;
67+
68+
// Adjust last page if limit is exceeded
69+
endPage = Math.min(startPage + scope.maxSize - 1, scope.numPages);
5870
}
5971
}
6072

@@ -64,6 +76,19 @@ angular.module('ui.bootstrap.pagination', [])
6476
scope.pages.push(page);
6577
}
6678

79+
// Add links to move between page sets
80+
if ( isMaxSized && ! rotate ) {
81+
if ( startPage > 1 ) {
82+
var previousPageSet = makePage(startPage - 1, '...', false, false);
83+
scope.pages.unshift(previousPageSet);
84+
}
85+
86+
if ( endPage < scope.numPages ) {
87+
var nextPageSet = makePage(endPage + 1, '...', false, false);
88+
scope.pages.push(nextPageSet);
89+
}
90+
}
91+
6792
// Add previous & next links
6893
if (directionLinks) {
6994
var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
@@ -82,7 +107,6 @@ angular.module('ui.bootstrap.pagination', [])
82107
scope.pages.push(lastPage);
83108
}
84109

85-
86110
if ( scope.currentPage > scope.numPages ) {
87111
scope.selectPage(scope.numPages);
88112
}
@@ -105,4 +129,4 @@ angular.module('ui.bootstrap.pagination', [])
105129
};
106130
}
107131
};
108-
}]);
132+
}]);

‎src/pagination/test/pagination.spec.js

+79
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,85 @@ describe('pagination directive with max size option', function () {
190190
expect($rootScope.maxSize).toBe(15);
191191
});
192192

193+
it('should not display page numbers, if max-size is zero', function() {
194+
$rootScope.maxSize = 0;
195+
$rootScope.$digest();
196+
expect(element.find('li').length).toBe(2);
197+
expect(element.find('li').eq(0).text()).toBe('Previous');
198+
expect(element.find('li').eq(-1).text()).toBe('Next');
199+
});
200+
201+
});
202+
203+
describe('pagination directive with max size option & no rotate', function () {
204+
var $rootScope, element;
205+
beforeEach(module('ui.bootstrap.pagination'));
206+
beforeEach(module('template/pagination/pagination.html'));
207+
beforeEach(inject(function(_$compile_, _$rootScope_) {
208+
$compile = _$compile_;
209+
$rootScope = _$rootScope_;
210+
$rootScope.numPages = 12;
211+
$rootScope.currentPage = 7;
212+
$rootScope.maxSize = 5;
213+
element = $compile('<pagination num-pages="numPages" current-page="currentPage" max-size="maxSize" rotate="false"></pagination>')($rootScope);
214+
$rootScope.$digest();
215+
}));
216+
217+
it('contains one ul and maxsize + 4 elements', function() {
218+
expect(element.find('ul').length).toBe(1);
219+
expect(element.find('li').length).toBe($rootScope.maxSize + 4);
220+
expect(element.find('li').eq(0).text()).toBe('Previous');
221+
expect(element.find('li').eq(1).text()).toBe('...');
222+
expect(element.find('li').eq(2).text()).toBe('6');
223+
expect(element.find('li').eq(-3).text()).toBe('10');
224+
expect(element.find('li').eq(-2).text()).toBe('...');
225+
expect(element.find('li').eq(-1).text()).toBe('Next');
226+
});
227+
228+
it('shows only the next ellipsis element on first page set', function() {
229+
$rootScope.currentPage = 3;
230+
$rootScope.$digest();
231+
expect(element.find('li').eq(1).text()).toBe('1');
232+
expect(element.find('li').eq(-3).text()).toBe('5');
233+
expect(element.find('li').eq(-2).text()).toBe('...');
234+
});
235+
236+
it('shows only the previous ellipsis element on last page set', function() {
237+
$rootScope.currentPage = 12;
238+
$rootScope.$digest();
239+
expect(element.find('li').length).toBe(5);
240+
expect(element.find('li').eq(1).text()).toBe('...');
241+
expect(element.find('li').eq(2).text()).toBe('11');
242+
expect(element.find('li').eq(-2).text()).toBe('12');
243+
});
244+
245+
it('moves to the previous set when first ellipsis is clicked', function() {
246+
var prev = element.find('li').eq(1).find('a').eq(0);
247+
expect(prev.text()).toBe('...');
248+
249+
prev.click();
250+
expect($rootScope.currentPage).toBe(5);
251+
var currentPageItem = element.find('li').eq(-3);
252+
expect(currentPageItem.hasClass('active')).toBe(true);
253+
});
254+
255+
it('moves to the next set when last ellipsis is clicked', function() {
256+
var next = element.find('li').eq(-2).find('a').eq(0);
257+
expect(next.text()).toBe('...');
258+
259+
next.click();
260+
expect($rootScope.currentPage).toBe(11);
261+
var currentPageItem = element.find('li').eq(2);
262+
expect(currentPageItem.hasClass('active')).toBe(true);
263+
});
264+
265+
it('should not display page numbers, if max-size is zero', function() {
266+
$rootScope.maxSize = 0;
267+
$rootScope.$digest();
268+
expect(element.find('li').length).toBe(2);
269+
expect(element.find('li').eq(0).text()).toBe('Previous');
270+
expect(element.find('li').eq(-1).text()).toBe('Next');
271+
});
193272
});
194273

195274
describe('pagination directive with added first & last links', function () {

0 commit comments

Comments
 (0)