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

Commit 0ff0454

Browse files
bekospkozlowski-opensource
authored andcommitted
feat(pagination): add first/last link & constant congif options
Closes #120
1 parent 29930ef commit 0ff0454

File tree

5 files changed

+358
-29
lines changed

5 files changed

+358
-29
lines changed

src/pagination/docs/demo.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<div ng-controller="PaginationDemoCtrl">
22
<pagination num-pages="noOfPages" current-page="currentPage"></pagination>
3-
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
4-
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-mini"></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>
55
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
6+
<pagination direction-links="false" num-pages="noOfPages" current-page="currentPage"></pagination>
67
<button class="btn" ng-click="setPage(3)">Set current page to: 3</button>
78
The selected page no: {{currentPage}}
89
</div>

src/pagination/docs/readme.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
A lightweight pagination directive that is focused on ... providing pagination!
22

3-
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.
3+
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.
44

55
It also provides optional attribute max-size to limit the size of pagination bar.

src/pagination/pagination.js

+57-20
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,45 @@
11
angular.module('ui.bootstrap.pagination', [])
22

3-
.directive('pagination', function() {
3+
.constant('paginationConfig', {
4+
boundaryLinks: false,
5+
directionLinks: true,
6+
firstText: 'First',
7+
previousText: 'Previous',
8+
nextText: 'Next',
9+
lastText: 'Last'
10+
})
11+
12+
.directive('pagination', ['paginationConfig', function(paginationConfig) {
413
return {
514
restrict: 'EA',
615
scope: {
716
numPages: '=',
817
currentPage: '=',
918
maxSize: '=',
10-
onSelectPage: '&',
11-
nextText: '@',
12-
previousText: '@'
19+
onSelectPage: '&'
1320
},
1421
templateUrl: 'template/pagination/pagination.html',
1522
replace: true,
16-
link: function(scope) {
23+
link: function(scope, element, attrs) {
24+
25+
// Setup configuration parameters
26+
var boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
27+
var directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
28+
var firstText = angular.isDefined(attrs.firstText) ? attrs.firstText : paginationConfig.firstText;
29+
var previousText = angular.isDefined(attrs.previousText) ? attrs.previousText : paginationConfig.previousText;
30+
var nextText = angular.isDefined(attrs.nextText) ? attrs.nextText : paginationConfig.nextText;
31+
var lastText = angular.isDefined(attrs.lastText) ? attrs.lastText : paginationConfig.lastText;
32+
33+
// Create page object used in template
34+
function makePage(number, text, isActive, isDisabled) {
35+
return {
36+
number: number,
37+
text: text,
38+
active: isActive,
39+
disabled: isDisabled
40+
};
41+
}
42+
1743
scope.$watch('numPages + currentPage + maxSize', function() {
1844
scope.pages = [];
1945

@@ -29,9 +55,31 @@ angular.module('ui.bootstrap.pagination', [])
2955
startPage = startPage - ((startPage + maxSize - 1) - scope.numPages );
3056
}
3157

32-
for(var i=0; i < maxSize && i < scope.numPages ;i++) {
33-
scope.pages.push(startPage + i);
58+
// Add page number links
59+
for (var number = startPage, max = startPage + maxSize; number < max; number++) {
60+
var page = makePage(number, number, scope.isActive(number), false);
61+
scope.pages.push(page);
3462
}
63+
64+
// Add previous & next links
65+
if (directionLinks) {
66+
var previousPage = makePage(scope.currentPage - 1, previousText, false, scope.noPrevious());
67+
scope.pages.unshift(previousPage);
68+
69+
var nextPage = makePage(scope.currentPage + 1, nextText, false, scope.noNext());
70+
scope.pages.push(nextPage);
71+
}
72+
73+
// Add first & last links
74+
if (boundaryLinks) {
75+
var firstPage = makePage(1, firstText, false, scope.noPrevious());
76+
scope.pages.unshift(firstPage);
77+
78+
var lastPage = makePage(scope.numPages, lastText, false, scope.noNext());
79+
scope.pages.push(lastPage);
80+
}
81+
82+
3583
if ( scope.currentPage > scope.numPages ) {
3684
scope.selectPage(scope.numPages);
3785
}
@@ -47,22 +95,11 @@ angular.module('ui.bootstrap.pagination', [])
4795
};
4896

4997
scope.selectPage = function(page) {
50-
if ( ! scope.isActive(page) ) {
98+
if ( ! scope.isActive(page) && page > 0 && page <= scope.numPages) {
5199
scope.currentPage = page;
52100
scope.onSelectPage({ page: page });
53101
}
54102
};
55-
56-
scope.selectPrevious = function() {
57-
if ( !scope.noPrevious() ) {
58-
scope.selectPage(scope.currentPage-1);
59-
}
60-
};
61-
scope.selectNext = function() {
62-
if ( !scope.noNext() ) {
63-
scope.selectPage(scope.currentPage+1);
64-
}
65-
};
66103
}
67104
};
68-
});
105+
}]);

0 commit comments

Comments
 (0)