fix(pagination): don't hide single page number with ellipsis (#3419)

Fixes #1235
ng-bootstrap · Oct 24, 2019 · 410f6ea · 410f6ea
1 parent 3836c03
commit 410f6ea
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/src/pagination/pagination.spec.ts b/src/pagination/pagination.spec.ts
@@ -440,7 +440,7 @@ describe('ngb-pagination', () => {
 
       fixture.componentInstance.page = 4;
       fixture.detectChanges();
-      expectPages(fixture.nativeElement, ['«', '1', '-...', '3', '+4', '5', '-...', '7', '»']);
+      expectPages(fixture.nativeElement, ['«', '1', '2', '3', '+4', '5', '6', '7', '»']);
 
       fixture.componentInstance.page = 5;
       fixture.detectChanges();
@@ -461,6 +461,60 @@ describe('ngb-pagination', () => {
       expectPages(fixture.nativeElement, ['«', '1', '2', '3', '4', '+5', '6', '7', '»']);
     });
 
+    it('should use page number instead of ellipsis when ellipsis hides a single page', () => {
+      const html = `<ngb-pagination [collectionSize]="120" [page]="page"
+        [maxSize]="5" [rotate]="true" [ellipses]="true"></ngb-pagination>`;
+      const fixture = createTestComponent(html);
+
+      fixture.componentInstance.page = 1;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['-«', '+1', '2', '3', '4', '5', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 2;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '+2', '3', '4', '5', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 3;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '2', '+3', '4', '5', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 4;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '2', '3', '+4', '5', '6', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 5;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '2', '3', '4', '+5', '6', '7', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 6;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '4', '5', '+6', '7', '8', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 7;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '5', '6', '+7', '8', '9', '-...', '12', '»']);
+
+      fixture.componentInstance.page = 8;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '6', '7', '+8', '9', '10', '11', '12', '»']);
+
+      fixture.componentInstance.page = 9;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '7', '8', '+9', '10', '11', '12', '»']);
+
+      fixture.componentInstance.page = 10;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '8', '9', '+10', '11', '12', '»']);
+
+      fixture.componentInstance.page = 11;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '8', '9', '10', '+11', '12', '»']);
+
+      fixture.componentInstance.page = 12;
+      fixture.detectChanges();
+      expectPages(fixture.nativeElement, ['«', '1', '-...', '8', '9', '10', '11', '+12', '-»']);
+    });
+
     it('should handle edge "maxSize" values', () => {
       const html = '<ngb-pagination [collectionSize]="50" [maxSize]="maxSize"></ngb-pagination>';
       const fixture = createTestComponent(html);

diff --git a/src/pagination/pagination.ts b/src/pagination/pagination.ts
@@ -286,14 +286,26 @@ export class NgbPagination implements OnChanges {
   private _applyEllipses(start: number, end: number) {
     if (this.ellipses) {
       if (start > 0) {
-        if (start > 1) {
+        // The first page will always be included. If the displayed range
+        // starts after the third page, then add ellipsis. But if the range
+        // starts on the third page, then add the second page instead of
+        // an ellipsis, because the ellipsis would only hide a single page.
+        if (start > 2) {
           this.pages.unshift(-1);
+        } else if (start === 2) {
+          this.pages.unshift(2);
         }
         this.pages.unshift(1);
       }
       if (end < this.pageCount) {
-        if (end < (this.pageCount - 1)) {
+        // The last page will always be included. If the displayed range
+        // ends before the third-last page, then add ellipsis. But if the range
+        // ends on third-last page, then add the second-last page instead of
+        // an ellipsis, because the ellipsis would only hide a single page.
+        if (end < (this.pageCount - 2)) {
           this.pages.push(-1);
+        } else if (end === (this.pageCount - 2)) {
+          this.pages.push(this.pageCount - 1);
         }
         this.pages.push(this.pageCount);
       }