ng2-pagination - npm Package Compare versions

Comparing version 0.0.1-alpha.5 to 0.0.1-alpha.6

dist/pagination-controls-cmp.d.ts

@@ -9,3 +9,6 @@ import { EventEmitter } from 'angular2/core';
     private service;
-    private id;
+    id: string;
+    maxSize: number;
+    directionLinks: boolean;
+    autoHide: boolean;
     pageChange: EventEmitter<number>;
@@ -28,6 +31,8 @@ private changeSub;
     getCurrent(): number;
+    isFirstPage(): boolean;
+    isLastPage(): boolean;
     /**
      * Returns an array of IPage objects to use in the pagination controls.
      */
-    private createPageArray(currentPage, itemsPerPage, totalItems, paginationRange?);
+    private createPageArray(currentPage, itemsPerPage, totalItems, paginationRange);
     /**
@@ -34,0 +39,0 @@ * Given the position in the sequence of pagination links [i],

dist/pagination-controls-cmp.js

@@ -16,2 +16,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.service = service;
+        this.maxSize = 7;
+        this.directionLinks = true;
+        this.autoHide = false;
         this.pageChange = new core_1.EventEmitter();
@@ -31,4 +34,4 @@ this.pages = [];
             .subscribe(function () {
-            var instance = _this.service.getInstance(_this.id);
-            _this.pages = _this.createPageArray(instance.currentPage, instance.itemsPerPage, instance.totalItems);
+            var inst = _this.service.getInstance(_this.id);
+            _this.pages = _this.createPageArray(inst.currentPage, inst.itemsPerPage, inst.totalItems, _this.maxSize);
         });
@@ -53,2 +56,9 @@ };
     };
+    PaginationControlsCmp.prototype.isFirstPage = function () {
+        return this.getCurrent() === 1;
+    };
+    PaginationControlsCmp.prototype.isLastPage = function () {
+        var inst = this.service.getInstance(this.id);
+        return Math.ceil(inst.totalItems / inst.itemsPerPage) === inst.currentPage;
+    };
     /**
@@ -58,3 +68,2 @@ * Returns an array of IPage objects to use in the pagination controls.
     PaginationControlsCmp.prototype.createPageArray = function (currentPage, itemsPerPage, totalItems, paginationRange) {
-        if (paginationRange === void 0) { paginationRange = 5; }
         var pages = [];
@@ -119,2 +128,14 @@ var totalPages = Math.ceil(totalItems / itemsPerPage);
     __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Number)
+    ], PaginationControlsCmp.prototype, "maxSize", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], PaginationControlsCmp.prototype, "directionLinks", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], PaginationControlsCmp.prototype, "autoHide", void 0);
+    __decorate([
         core_1.Output(), 
@@ -126,3 +147,3 @@ __metadata('design:type', core_1.EventEmitter)
             selector: 'pagination-controls',
-            template: "\n    <ul class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"getCurrent() === 1\">\n            <a *ngIf=\"1 < getCurrent()\"\n               (click)=\"setCurrent(getCurrent() - 1)\" aria-label=\"Next page\">Previous <span class=\"show-for-sr\">page</span></a>\n            <span *ngIf=\"getCurrent() === 1\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"getCurrent() === page.value\" *ngFor=\"#page of pages\">\n            <a (click)=\"setCurrent(page.value)\" *ngIf=\"getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"getCurrent() === page.value\">\n                <span class=\"show-for-sr\">You're on page</span>\n                <span>{{ page.label }}</span>\n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"getCurrent() === pages.length\">\n            <a *ngIf=\"getCurrent() < pages.length\"\n               (click)=\"setCurrent(getCurrent() + 1)\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"getCurrent() === pages.length\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    ",
+            template: "\n    <ul class=\"pagination\" role=\"navigation\" aria-label=\"Pagination\" *ngIf=\"!autoHide || pages.length === 0\">\n\n        <li class=\"pagination-previous\" [class.disabled]=\"isFirstPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"1 < getCurrent()\" (click)=\"setCurrent(getCurrent() - 1)\" aria-label=\"Next page\">\n                Previous <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isFirstPage()\">Previous <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n        <li [class.current]=\"getCurrent() === page.value\" *ngFor=\"#page of pages\">\n            <a (click)=\"setCurrent(page.value)\" *ngIf=\"getCurrent() !== page.value\">\n                <span class=\"show-for-sr\">Page</span>\n                <span>{{ page.label }}</span>\n            </a>\n            <div *ngIf=\"getCurrent() === page.value\">\n                <span class=\"show-for-sr\">You're on page</span>\n                <span>{{ page.label }}</span>\n            </div>\n        </li>\n\n        <li class=\"pagination-next\" [class.disabled]=\"isLastPage()\" *ngIf=\"directionLinks\">\n            <a *ngIf=\"getCurrent() < pages.length\" (click)=\"setCurrent(getCurrent() + 1)\" aria-label=\"Next page\">\n                Next <span class=\"show-for-sr\">page</span>\n            </a>\n            <span *ngIf=\"isLastPage()\">Next <span class=\"show-for-sr\">page</span></span>\n        </li>\n\n    </ul>\n    ",
             directives: [common_1.CORE_DIRECTIVES]
@@ -129,0 +150,0 @@ }),

package.json

 {
   "name": "ng2-pagination",
-  "version": "0.0.1-alpha.5",
+  "version": "0.0.1-alpha.6",
   "description": "Pagination for Angular2",
@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

@@ -62,5 +62,50 @@ # Angular2 Pagination
 
-Using an object allows some more advanced configuration. See the [IPaginationInstance definition](./src/pagination-service.ts)
-for an explanation of the available properties.
+Using an object allows some more advanced configuration. The following config options are available:
 
+```JavaScript
+interface IPaginationInstance {
+    /**
+     * An optional ID for the pagination instance. Only useful if you wish to
+     * have more than once instance at a time in a given component.
+     */
+    id?: string;
+    /**
+     * The number of items per paginated page.
+     */
+    itemsPerPage: number;
+    /**
+     * The current (active) page.
+     */
+    currentPage: number;
+    /**
+     * The total number of items in the collection. Only useful when
+     * doing server-side paging, where the collection size is limited
+     * to a single page returned by the server API.
+     *
+     * For in-memory paging, this property should not be set, as it
+     * will be automatically set to the value of  collection.length.
+     */
+    totalItems?: number;
+}
+```
+
+
+### PaginationControlsCmp
+
+```HTML
+<pagination-controls  id="some_id"
+                      (change)="pageChanged($event)
+                      maxSize="9"
+                      autoHide="true">
+</pagination-controls>
+```
+
+* **`id`** [string] If you need to support more than one instance of pagination at a time, set the `id` and ensure it
+matches the id set in the PaginatePipe config.
+* **`change`** [function] The function specified will be invoked whenever the page changes via a click on one of the
+pagination controls. The `$event` argument will be the number of the new page.
+* **maxSize** [number] Defines the maximum number of page links to display. Default is `7`.
+* **`autoHide`** [boolean] If set to `true`, the pagination controls will not be displayed when all items in the
+collection fit onto the first page. Default is `false`
+
 ## To Do
@@ -74,3 +119,3 @@
 - Custom template support
-- Various style options for the pagination controls template
+- ~~Various style options for the pagination controls template~~
 - Full test suite
@@ -77,0 +122,0 @@

src/pagination-controls-cmp.ts

@@ -14,8 +14,9 @@ import {Component, Input, Output, EventEmitter} from 'angular2/core'
     template: `
-    <ul class="pagination" role="navigation" aria-label="Pagination">
+    <ul class="pagination" role="navigation" aria-label="Pagination" *ngIf="!autoHide || pages.length === 0">
 
-        <li class="pagination-previous" [class.disabled]="getCurrent() === 1">
-            <a *ngIf="1 < getCurrent()"
-               (click)="setCurrent(getCurrent() - 1)" aria-label="Next page">Previous <span class="show-for-sr">page</span></a>
-            <span *ngIf="getCurrent() === 1">Previous <span class="show-for-sr">page</span></span>
+        <li class="pagination-previous" [class.disabled]="isFirstPage()" *ngIf="directionLinks">
+            <a *ngIf="1 < getCurrent()" (click)="setCurrent(getCurrent() - 1)" aria-label="Next page">
+                Previous <span class="show-for-sr">page</span>
+            </a>
+            <span *ngIf="isFirstPage()">Previous <span class="show-for-sr">page</span></span>
         </li>
@@ -34,8 +35,7 @@
 
-        <li class="pagination-next" [class.disabled]="getCurrent() === pages.length">
-            <a *ngIf="getCurrent() < pages.length"
-               (click)="setCurrent(getCurrent() + 1)" aria-label="Next page">
+        <li class="pagination-next" [class.disabled]="isLastPage()" *ngIf="directionLinks">
+            <a *ngIf="getCurrent() < pages.length" (click)="setCurrent(getCurrent() + 1)" aria-label="Next page">
                 Next <span class="show-for-sr">page</span>
             </a>
-            <span *ngIf="getCurrent() === pages.length">Next <span class="show-for-sr">page</span></span>
+            <span *ngIf="isLastPage()">Next <span class="show-for-sr">page</span></span>
         </li>
@@ -49,7 +49,8 @@
 
-    @Input()
-    private id: string;
+    @Input() id: string;
+    @Input() maxSize: number = 7;
+    @Input() directionLinks: boolean = true;
+    @Input() autoHide: boolean = false;
 
-    @Output()
-    public pageChange: EventEmitter<number> = new EventEmitter();
+    @Output() pageChange: EventEmitter<number> = new EventEmitter();
 
@@ -74,4 +75,4 @@
             .subscribe(() => {
-                let instance = this.service.getInstance(this.id);
-                this.pages = this.createPageArray(instance.currentPage, instance.itemsPerPage, instance.totalItems);
+                let inst = this.service.getInstance(this.id);
+                this.pages = this.createPageArray(inst.currentPage, inst.itemsPerPage, inst.totalItems, this.maxSize);
             });
@@ -100,6 +101,15 @@ }
 
+    public isFirstPage(): boolean {
+        return this.getCurrent() === 1;
+    }
+
+    public isLastPage(): boolean {
+        let inst = this.service.getInstance(this.id);
+        return Math.ceil(inst.totalItems / inst.itemsPerPage) === inst.currentPage;
+    }
+
     /**
      * Returns an array of IPage objects to use in the pagination controls.
      */
-    private createPageArray(currentPage: number, itemsPerPage: number, totalItems: number, paginationRange: number = 5): IPage[] {
+    private createPageArray(currentPage: number, itemsPerPage: number, totalItems: number, paginationRange: number): IPage[] {
         let pages = [];
@@ -106,0 +116,0 @@ const totalPages = Math.ceil(totalItems / itemsPerPage);

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43150

increased by7.44%

Lines of code

940

increased by3.75%

Number of lines in readme file

129

increased by53.57%

Worsened metrics

Number of package files

22

decreased by-4.35%

No dependency changes