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

Commit

Permalink
feat(pagination): Show ellipsis when rotating
Browse files Browse the repository at this point in the history
  • Loading branch information
wtc-dstone authored and wesleycho committed Nov 2, 2015
1 parent b1cfc57 commit 3f307e4
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 12 deletions.
5 changes: 2 additions & 3 deletions src/pagination/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,8 @@ angular.module('ui.bootstrap.pagination', [])
}

// Add links to move between page sets
if (isMaxSized && ! rotate) {
if (startPage > 1) {
if ( isMaxSized && maxSize > 0 ) {
if ( startPage > 1 ) {
var previousPageSet = makePage(startPage - 1, '...', false);
pages.unshift(previousPageSet);
}
Expand All @@ -183,7 +183,6 @@ angular.module('ui.bootstrap.pagination', [])
pages.push(nextPageSet);
}
}

return pages;
}

Expand Down
49 changes: 40 additions & 9 deletions src/pagination/test/pagination.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ describe('pagination directive', function() {
return element.find('li').eq(index);
}

// Returns a comma-separated string that represents the pager, like: "Prev, 1, 2, 3, Next"
function getPaginationAsText(){
var len = getPaginationBarSize(), outItems = [];
for(var i = 0; i < len; i++){
outItems.push(getPaginationEl(i).text());
}
return outItems.join(', ');
}

function clickPaginationEl(index) {
getPaginationEl(index).find('a').click();
}
Expand Down Expand Up @@ -281,8 +290,8 @@ describe('pagination directive', function() {
$rootScope.$digest();
});

it('contains maxsize + 2 li elements', function() {
expect(getPaginationBarSize()).toBe($rootScope.maxSize + 2);
it('contains maxsize + 3 li elements', function() {
expect(getPaginationBarSize()).toBe($rootScope.maxSize + 3);
expect(getPaginationEl(0).text()).toBe('Previous');
expect(getPaginationEl(-1).text()).toBe('Next');
});
Expand All @@ -300,23 +309,23 @@ describe('pagination directive', function() {
clickPaginationEl(-1);

expect($rootScope.currentPage).toBe(7);
expect(getPaginationEl(3)).toHaveClass('active');
expect(getPaginationEl(3).text()).toBe(''+$rootScope.currentPage);
expect(getPaginationEl(4)).toHaveClass('active');
expect(getPaginationEl(4).text()).toBe(''+$rootScope.currentPage);
});

it('shows the page number in middle after the prev link is clicked', function() {
updateCurrentPage(7);
clickPaginationEl(0);

expect($rootScope.currentPage).toBe(6);
expect(getPaginationEl(3)).toHaveClass('active');
expect(getPaginationEl(3).text()).toBe(''+$rootScope.currentPage);
expect(getPaginationEl(4)).toHaveClass('active');
expect(getPaginationEl(4).text()).toBe(''+$rootScope.currentPage);
});

it('changes pagination bar size when max-size value changed', function() {
$rootScope.maxSize = 7;
$rootScope.$digest();
expect(getPaginationBarSize()).toBe(9);
expect(getPaginationBarSize()).toBe(10);
});

it('sets the pagination bar size to num-pages, if max-size is greater than num-pages ', function() {
Expand Down Expand Up @@ -351,6 +360,27 @@ describe('pagination directive', function() {

element.remove();
});

it('should display an ellipsis on the right if the last displayed page\'s number is less than the last page', function() {
updateCurrentPage(1);
expect(getPaginationAsText()).toBe('Previous, 1, 2, 3, 4, 5, ..., Next');
});

it('should display an ellipsis on the left if the first displayed page\'s number is greater than 1', function() {
updateCurrentPage(10);
expect(getPaginationAsText()).toBe('Previous, ..., 6, 7, 8, 9, 10, Next');
});

it('should display both ellipsis\' if the displayed range is in the middle', function() {
updateCurrentPage(5);
expect(getPaginationAsText()).toBe('Previous, ..., 3, 4, 5, 6, 7, ..., Next');
});

it('should not display any ellipsis\' if the number of pages >= maxsize', function() {
$rootScope.maxSize = 10;
$rootScope.$digest();
expect(getPaginationAsText()).toBe('Previous, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, Next');
});
});

describe('with `max-size` option & no `rotate`', function() {
Expand Down Expand Up @@ -519,7 +549,7 @@ describe('pagination directive', function() {
expect(linkEl).not.toHaveFocus();

element.remove();
});
});

it('should blur the "last" link after it has been clicked', function() {
body.append(element);
Expand Down Expand Up @@ -686,7 +716,8 @@ describe('pagination directive', function() {
element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
$rootScope.$digest();

expect(getPaginationBarSize()).toBe(4);
// Should contain 2 nav buttons, 2 pages, and 2 ellipsis, since the currentPage defaults to 3, which is in the middle
expect(getPaginationBarSize()).toBe(6);
});
});

Expand Down

0 comments on commit 3f307e4

Please sign in to comment.