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

chore(pagination): add uib- prfix #4536

Closed
wants to merge 1 commit into from
Closed

chore(pagination): add uib- prfix #4536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/pagination/docs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<div ng-controller="PaginationDemoCtrl">
<h4>Default</h4>
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<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>
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
<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>
<uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
<uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
<pre>The selected page no: {{currentPage}}</pre>
<button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

<hr />
<h4>Pager</h4>
<pager total-items="totalItems" ng-model="currentPage"></pager>
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>

<hr />
<h4>Limit the maximum visible buttons</h4>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></uib-pagination>
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></uib-pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
</div>
173 changes: 166 additions & 7 deletions src/pagination/pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
angular.module('ui.bootstrap.pagination', [])
.controller('PaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
.controller('UibPaginationController', ['$scope', '$attrs', '$parse', function($scope, $attrs, $parse) {
var self = this,
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
Expand Down Expand Up @@ -73,7 +73,7 @@ angular.module('ui.bootstrap.pagination', [])
};
}])

.constant('paginationConfig', {
.constant('uibPaginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
directionLinks: true,
Expand All @@ -84,7 +84,7 @@ angular.module('ui.bootstrap.pagination', [])
rotate: true
})

.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {
.directive('uibPagination', ['$parse', 'uibPaginationConfig', function($parse, paginationConfig) {
return {
restrict: 'EA',
scope: {
Expand All @@ -95,8 +95,8 @@ angular.module('ui.bootstrap.pagination', [])
lastText: '@',
ngDisabled:'='
},
require: ['pagination', '?ngModel'],
controller: 'PaginationController',
require: ['uibPagination', '?ngModel'],
controller: 'UibPaginationController',
controllerAs: 'pagination',
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/pagination/pagination.html';
Expand Down Expand Up @@ -194,14 +194,170 @@ angular.module('ui.bootstrap.pagination', [])
};
}])

.constant('pagerConfig', {
.constant('uibPagerConfig', {
itemsPerPage: 10,
previousText: '« Previous',
nextText: 'Next »',
align: true
})

.directive('pager', ['pagerConfig', function(pagerConfig) {
.directive('uibPager', ['uibPagerConfig', function(pagerConfig) {
return {
restrict: 'EA',
scope: {
totalItems: '=',
previousText: '@',
nextText: '@',
ngDisabled: '='
},
require: ['uibPager', '?ngModel'],
controller: 'UibPaginationController',
controllerAs: 'pagination',
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/pagination/pager.html';
},
replace: true,
link: function(scope, element, attrs, ctrls) {
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];

if (!ngModelCtrl) {
return; // do nothing if no ng-model
}

scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
paginationCtrl.init(ngModelCtrl, pagerConfig);
}
};
}]);

/* Deprecated Pagination Below */

angular.module('ui.bootstrap.pagination')
.value('$paginationSuppressWarning', false)
.controller('PaginationController', ['$scope', '$attrs', '$parse', '$controller', '$element', '$log', '$paginationSuppressWarning', function($scope, $attrs, $parse, $controller, $element, $log, $paginationSuppressWarning) {
if (!$paginationSuppressWarning) {
$log.warn('PaginationController is now deprecated. Use UibPaginationController instead.');
}
return $controller('UibPaginationController', {
$scope: $scope,
$element: $element,
$attrs: $attrs
});
}])
.directive('pagination', ['$parse', 'uibPaginationConfig', '$log', '$paginationSuppressWarning', function($parse, paginationConfig, $log, $paginationSuppressWarning) {
return {
restrict: 'EA',
scope: {
totalItems: '=',
firstText: '@',
previousText: '@',
nextText: '@',
lastText: '@',
ngDisabled:'='
},
require: ['pagination', '?ngModel'],
controller: 'PaginationController',
controllerAs: 'pagination',
templateUrl: function(element, attrs) {
return attrs.templateUrl || 'template/pagination/pagination.html';
},
replace: true,
link: function(scope, element, attrs, ctrls) {
if (!$paginationSuppressWarning) {
$log.warn('pagination is now deprecated. Use uib-pagination instead.');
}
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];

if (!ngModelCtrl) {
return; // do nothing if no ng-model
}

// Setup configuration parameters
var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;

paginationCtrl.init(ngModelCtrl, paginationConfig);

if (attrs.maxSize) {
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
maxSize = parseInt(value, 10);
paginationCtrl.render();
});
}

// Create page object used in template
function makePage(number, text, isActive) {
return {
number: number,
text: text,
active: isActive
};
}

function getPages(currentPage, totalPages) {
var pages = [];

// Default page limits
var startPage = 1, endPage = totalPages;
var isMaxSized = angular.isDefined(maxSize) && maxSize < totalPages;

// recompute if maxSize
if (isMaxSized) {
if (rotate) {
// Current page is displayed in the middle of the visible ones
startPage = Math.max(currentPage - Math.floor(maxSize/2), 1);
endPage = startPage + maxSize - 1;

// Adjust if limit is exceeded
if (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + 1;
}
} else {
// Visible pages are paginated with maxSize
startPage = ((Math.ceil(currentPage / maxSize) - 1) * maxSize) + 1;

// Adjust last page if limit is exceeded
endPage = Math.min(startPage + maxSize - 1, totalPages);
}
}

// Add page number links
for (var number = startPage; number <= endPage; number++) {
var page = makePage(number, number, number === currentPage);
pages.push(page);
}

// Add links to move between page sets
if (isMaxSized && ! rotate) {
if (startPage > 1) {
var previousPageSet = makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
}

if (endPage < totalPages) {
var nextPageSet = makePage(endPage + 1, '...', false);
pages.push(nextPageSet);
}
}

return pages;
}

var originalRender = paginationCtrl.render;
paginationCtrl.render = function() {
originalRender();
if (scope.page > 0 && scope.page <= scope.totalPages) {
scope.pages = getPages(scope.page, scope.totalPages);
}
};
}
};
}])

.directive('pager', ['uibPagerConfig', '$log', '$paginationSuppressWarning', function(pagerConfig, $log, $paginationSuppressWarning) {
return {
restrict: 'EA',
scope: {
Expand All @@ -218,6 +374,9 @@ angular.module('ui.bootstrap.pagination', [])
},
replace: true,
link: function(scope, element, attrs, ctrls) {
if (!$paginationSuppressWarning) {
$log.warn('pager is now deprecated. Use uib-pager instead.');
}
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];

if (!ngModelCtrl) {
Expand Down
64 changes: 47 additions & 17 deletions src/pagination/test/pager.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('pager directive', function() {
$document = _$document_;
$templateCache = _$templateCache_;
body = $document.find('body');
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
element = $compile('<uib-pager total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
$rootScope.$digest();
}));

Expand Down Expand Up @@ -56,10 +56,10 @@ describe('pager directive', function() {
it('exposes the controller on the template', function() {
$templateCache.put('template/pagination/pager.html', '<div>{{pagination.text}}</div>');

element = $compile('<pager></pager>')($rootScope);
element = $compile('<uib-pager></uib-pager>')($rootScope);
$rootScope.$digest();

var ctrl = element.controller('pager');
var ctrl = element.controller('uibPager');
expect(ctrl).toBeDefined();

ctrl.text = 'foo';
Expand Down Expand Up @@ -102,7 +102,7 @@ describe('pager directive', function() {

it('executes the `ng-change` expression when an element is clicked', function() {
$rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
element = $compile('<pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pager>')($rootScope);
element = $compile('<uib-pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></uib-pager>')($rootScope);
$rootScope.$digest();

clickPaginationEl(-1);
Expand Down Expand Up @@ -156,7 +156,7 @@ describe('pager directive', function() {
describe('`items-per-page`', function() {
beforeEach(function() {
$rootScope.perpage = 5;
element = $compile('<pager total-items="total" items-per-page="perpage" ng-model="currentPage"></pager>')($rootScope);
element = $compile('<uib-pager total-items="total" items-per-page="perpage" ng-model="currentPage"></uib-pager>')($rootScope);
$rootScope.$digest();
});

Expand Down Expand Up @@ -190,7 +190,7 @@ describe('pager directive', function() {
describe('`num-pages`', function() {
beforeEach(function() {
$rootScope.numpg = null;
element = $compile('<pager total-items="total" ng-model="currentPage" num-pages="numpg"></pager>')($rootScope);
element = $compile('<uib-pager total-items="total" ng-model="currentPage" num-pages="numpg"></uib-pager>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -201,17 +201,17 @@ describe('pager directive', function() {

describe('setting `pagerConfig`', function() {
var originalConfig = {};
beforeEach(inject(function(pagerConfig) {
angular.extend(originalConfig, pagerConfig);
pagerConfig.previousText = 'PR';
pagerConfig.nextText = 'NE';
pagerConfig.align = false;
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
beforeEach(inject(function(uibPagerConfig) {
angular.extend(originalConfig, uibPagerConfig);
uibPagerConfig.previousText = 'PR';
uibPagerConfig.nextText = 'NE';
uibPagerConfig.align = false;
element = $compile('<uib-pager total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
$rootScope.$digest();
}));
afterEach(inject(function(pagerConfig) {
afterEach(inject(function(uibPagerConfig) {
// return it to the original state
angular.extend(pagerConfig, originalConfig);
angular.extend(uibPagerConfig, originalConfig);
}));

it('should change paging text', function() {
Expand All @@ -227,7 +227,7 @@ describe('pager directive', function() {

describe('override configuration from attributes', function() {
beforeEach(function() {
element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></pager>')($rootScope);
element = $compile('<uib-pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
$rootScope.$digest();
});

Expand All @@ -248,7 +248,7 @@ describe('pager directive', function() {
it('changes "previous" & "next" text from interpolated attributes', function() {
$rootScope.previousText = '<<';
$rootScope.nextText = '>>';
element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pager>')($rootScope);
element = $compile('<uib-pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></uib-pager>')($rootScope);
$rootScope.$digest();

expect(getPaginationEl(0).text()).toBe('<<');
Expand All @@ -259,7 +259,7 @@ describe('pager directive', function() {
it('disables the component when ng-disabled is true', function() {
$rootScope.disable = true;

element = $compile('<pager total-items="total" ng-disabled="disable" ng-model="currentPage"></pager>')($rootScope);
element = $compile('<uib-pager total-items="total" ng-disabled="disable" ng-model="currentPage"></uib-pager>')($rootScope);
$rootScope.$digest();
updateCurrentPage(2);

Expand All @@ -279,3 +279,33 @@ describe('pager directive', function() {
expect(getPaginationEl(-1)).toHaveClass('disabled');
});
});

describe('pager deprecation', function() {
beforeEach(module('ui.bootstrap.pagination'));
beforeEach(module('template/pagination/pager.html'));

it('should suppress warning', function() {
module(function($provide) {
$provide.value('$paginationSuppressWarning', true);
});

inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');

var element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(0);
});
});

it('should give warning by default', inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');

var element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
$rootScope.$digest();

expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['PaginationController is now deprecated. Use UibPaginationController instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['pager is now deprecated. Use uib-pager instead.']);
}));
});
Loading