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

Commit 4fc1762

Browse files
BobbieBarkerBobbieBarker
committed
feat(pagination): add uib- prefix
1 parent 6b4267b commit 4fc1762

File tree

4 files changed

+337
-57
lines changed

4 files changed

+337
-57
lines changed

‎src/pagination/docs/demo.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<div ng-controller="PaginationDemoCtrl">
22
<h4>Default</h4>
3-
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
4-
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
5-
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
6-
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
3+
<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
4+
<uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
5+
<uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
6+
<uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
77
<pre>The selected page no: {{currentPage}}</pre>
88
<button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
99

1010
<hr />
1111
<h4>Pager</h4>
12-
<pager total-items="totalItems" ng-model="currentPage"></pager>
12+
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
1313

1414
<hr />
1515
<h4>Limit the maximum visible buttons</h4>
16-
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
17-
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
16+
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></uib-pagination>
17+
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></uib-pagination>
1818
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
1919
</div>

‎src/pagination/pagination.js‎

Lines changed: 229 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
angular.module('ui.bootstrap.pagination', [])
2-
.controller('PaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
2+
.controller('UibPaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
33
var self = this,
44
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
55
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
@@ -73,7 +73,7 @@ angular.module('ui.bootstrap.pagination', [])
7373
};
7474
}])
7575

76-
.constant('paginationConfig', {
76+
.constant('uibPaginationConfig', {
7777
itemsPerPage: 10,
7878
boundaryLinks: false,
7979
directionLinks: true,
@@ -84,7 +84,7 @@ angular.module('ui.bootstrap.pagination', [])
8484
rotate: true
8585
})
8686

87-
.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {
87+
.directive('uibPagination', ['$parse', 'uibPaginationConfig', function($parse, paginationConfig) {
8888
return {
8989
restrict: 'EA',
9090
scope: {
@@ -95,8 +95,8 @@ angular.module('ui.bootstrap.pagination', [])
9595
lastText: '@',
9696
ngDisabled:'='
9797
},
98-
require: ['pagination', '?ngModel'],
99-
controller: 'PaginationController',
98+
require: ['uibPagination', '?ngModel'],
99+
controller: 'UibPaginationController',
100100
controllerAs: 'pagination',
101101
templateUrl: function(element, attrs) {
102102
return attrs.templateUrl || 'template/pagination/pagination.html';
@@ -194,14 +194,233 @@ angular.module('ui.bootstrap.pagination', [])
194194
};
195195
}])
196196

197-
.constant('pagerConfig', {
197+
.constant('uibPagerConfig', {
198198
itemsPerPage: 10,
199199
previousText: '« Previous',
200200
nextText: 'Next »',
201201
align: true
202202
})
203203

204-
.directive('pager', ['pagerConfig', function(pagerConfig) {
204+
.directive('uibPager', ['uibPagerConfig', function(pagerConfig) {
205+
return {
206+
restrict: 'EA',
207+
scope: {
208+
totalItems: '=',
209+
previousText: '@',
210+
nextText: '@',
211+
ngDisabled: '='
212+
},
213+
require: ['uibPager', '?ngModel'],
214+
controller: 'UibPaginationController',
215+
controllerAs: 'pagination',
216+
templateUrl: function(element, attrs) {
217+
return attrs.templateUrl || 'template/pagination/pager.html';
218+
},
219+
replace: true,
220+
link: function(scope, element, attrs, ctrls) {
221+
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
222+
223+
if (!ngModelCtrl) {
224+
return; // do nothing if no ng-model
225+
}
226+
227+
scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
228+
paginationCtrl.init(ngModelCtrl, pagerConfig);
229+
}
230+
};
231+
}]);
232+
233+
/* Deprecated Pagination Below */
234+
235+
angular.module('ui.bootstrap.pagination')
236+
.value('$paginationSuppressWarning', false)
237+
.controller('PaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
238+
var self = this,
239+
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
240+
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
241+
242+
this.init = function(ngModelCtrl_, config) {
243+
ngModelCtrl = ngModelCtrl_;
244+
this.config = config;
245+
246+
ngModelCtrl.$render = function() {
247+
self.render();
248+
};
249+
250+
if ($attrs.itemsPerPage) {
251+
$scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
252+
self.itemsPerPage = parseInt(value, 10);
253+
$scope.totalPages = self.calculateTotalPages();
254+
});
255+
} else {
256+
this.itemsPerPage = config.itemsPerPage;
257+
}
258+
259+
$scope.$watch('totalItems', function() {
260+
$scope.totalPages = self.calculateTotalPages();
261+
});
262+
263+
$scope.$watch('totalPages', function(value) {
264+
setNumPages($scope.$parent, value); // Readonly variable
265+
266+
if ( $scope.page > value ) {
267+
$scope.selectPage(value);
268+
} else {
269+
ngModelCtrl.$render();
270+
}
271+
});
272+
};
273+
274+
this.calculateTotalPages = function() {
275+
var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage);
276+
return Math.max(totalPages || 0, 1);
277+
};
278+
279+
this.render = function() {
280+
$scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
281+
};
282+
283+
$scope.selectPage = function(page, evt) {
284+
if (evt) {
285+
evt.preventDefault();
286+
}
287+
288+
var clickAllowed = !$scope.ngDisabled || !evt;
289+
if (clickAllowed && $scope.page !== page && page > 0 && page <= $scope.totalPages) {
290+
if (evt && evt.target) {
291+
evt.target.blur();
292+
}
293+
ngModelCtrl.$setViewValue(page);
294+
ngModelCtrl.$render();
295+
}
296+
};
297+
298+
$scope.getText = function(key) {
299+
return $scope[key + 'Text'] || self.config[key + 'Text'];
300+
};
301+
302+
$scope.noPrevious = function() {
303+
return $scope.page === 1;
304+
};
305+
306+
$scope.noNext = function() {
307+
return $scope.page === $scope.totalPages;
308+
};
309+
}])
310+
.directive('pagination', ['$parse', 'uibPaginationConfig', '$log', '$paginationSuppressWarning', function($parse, paginationConfig, $log, $paginationSuppressWarning) {
311+
return {
312+
restrict: 'EA',
313+
scope: {
314+
totalItems: '=',
315+
firstText: '@',
316+
previousText: '@',
317+
nextText: '@',
318+
lastText: '@',
319+
ngDisabled:'='
320+
},
321+
require: ['pagination', '?ngModel'],
322+
controller: 'PaginationController',
323+
controllerAs: 'pagination',
324+
templateUrl: function(element, attrs) {
325+
return attrs.templateUrl || 'template/pagination/pagination.html';
326+
},
327+
replace: true,
328+
link: function(scope, element, attrs, ctrls) {
329+
if (!$paginationSuppressWarning) {
330+
$log.warn('pagination is now deprecated. Use uib-pagination instead.');
331+
}
332+
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
333+
334+
if (!ngModelCtrl) {
335+
return; // do nothing if no ng-model
336+
}
337+
338+
// Setup configuration parameters
339+
var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
340+
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
341+
scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
342+
scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
343+
344+
paginationCtrl.init(ngModelCtrl, paginationConfig);
345+
346+
if (attrs.maxSize) {
347+
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
348+
maxSize = parseInt(value, 10);
349+
paginationCtrl.render();
350+
});
351+
}
352+
353+
// Create page object used in template
354+
function makePage(number, text, isActive) {
355+
return {
356+
number: number,
357+
text: text,
358+
active: isActive
359+
};
360+
}
361+
362+
function getPages(currentPage, totalPages) {
363+
var pages = [];
364+
365+
// Default page limits
366+
var startPage = 1, endPage = totalPages;
367+
var isMaxSized = angular.isDefined(maxSize) && maxSize < totalPages;
368+
369+
// recompute if maxSize
370+
if (isMaxSized) {
371+
if (rotate) {
372+
// Current page is displayed in the middle of the visible ones
373+
startPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
374+
endPage = startPage + maxSize - 1;
375+
376+
// Adjust if limit is exceeded
377+
if (endPage > totalPages) {
378+
endPage = totalPages;
379+
startPage = endPage - maxSize + 1;
380+
}
381+
} else {
382+
// Visible pages are paginated with maxSize
383+
startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;
384+
385+
// Adjust last page if limit is exceeded
386+
endPage = Math.min(startPage + maxSize - 1, totalPages);
387+
}
388+
}
389+
390+
// Add page number links
391+
for (var number = startPage; number <= endPage; number++) {
392+
var page = makePage(number, number, number === currentPage);
393+
pages.push(page);
394+
}
395+
396+
// Add links to move between page sets
397+
if (isMaxSized && ! rotate) {
398+
if (startPage > 1) {
399+
var previousPageSet = makePage(startPage - 1, '...', false);
400+
pages.unshift(previousPageSet);
401+
}
402+
403+
if (endPage < totalPages) {
404+
var nextPageSet = makePage(endPage + 1, '...', false);
405+
pages.push(nextPageSet);
406+
}
407+
}
408+
409+
return pages;
410+
}
411+
412+
var originalRender = paginationCtrl.render;
413+
paginationCtrl.render = function() {
414+
originalRender();
415+
if (scope.page > 0 && scope.page <= scope.totalPages) {
416+
scope.pages = getPages(scope.page, scope.totalPages);
417+
}
418+
};
419+
}
420+
};
421+
}])
422+
423+
.directive('pager', ['uibPagerConfig', '$log', '$paginationSuppressWarning', function(pagerConfig, $log, $paginationSuppressWarning) {
205424
return {
206425
restrict: 'EA',
207426
scope: {
@@ -218,6 +437,9 @@ angular.module('ui.bootstrap.pagination', [])
218437
},
219438
replace: true,
220439
link: function(scope, element, attrs, ctrls) {
440+
if (!$paginationSuppressWarning) {
441+
$log.warn('pager is now deprecated. Use uib-pager instead.');
442+
}
221443
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
222444

223445
if (!ngModelCtrl) {

0 commit comments

Comments
 (0)