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

Commit

Permalink
feat(pagination): add uib- prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
@BobbieBarker
BobbieBarker committed Oct 5, 2015
1 parent 6b4267b commit ff7e23c
Show file tree
Hide file tree
Showing 4 changed files with 276 additions and 57 deletions.
14 changes: 7 additions & 7 deletions src/pagination/docs/demo.html
View file
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
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
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

0 comments on commit ff7e23c

Please sign in to comment.