From b2dd1584db84b7064526149171924bf61f72cd52 Mon Sep 17 00:00:00 2001 From: Langdon Oliver Date: Wed, 9 Aug 2017 15:10:46 -0400 Subject: [PATCH] Updated bindings for pagination component and demo (#58) * updated bindings for pagination component and demo * updated documentation to reference correct attributes * spelling/grammar fixes --- .../demos/pagination/pagination-demo.html | 16 ++--- src/docs/demos/pagination/pagination-demo.md | 14 ++-- .../pagination/pagination.component.js | 64 +++++++++---------- src/library/pagination/pagination.html | 16 ++--- 4 files changed, 55 insertions(+), 55 deletions(-) diff --git a/src/docs/demos/pagination/pagination-demo.html b/src/docs/demos/pagination/pagination-demo.html index 6decc20..f516e52 100644 --- a/src/docs/demos/pagination/pagination-demo.html +++ b/src/docs/demos/pagination/pagination-demo.html @@ -1,12 +1,12 @@
Basic Demo (Current Page: {{$ctrl.currentPageBasic}})

Use the inputs below to control how the component will be rendered.

- +
@@ -27,7 +27,7 @@
Basic Demo (Current Page: {{$ctrl.currentPageBasic}})
- +
@@ -53,5 +53,5 @@
Usability Demo (Current Page: {{$ctrl.currentPageUsability}})
width: 40px; } - +
\ No newline at end of file diff --git a/src/docs/demos/pagination/pagination-demo.md b/src/docs/demos/pagination/pagination-demo.md index cae21e8..19e3667 100644 --- a/src/docs/demos/pagination/pagination-demo.md +++ b/src/docs/demos/pagination/pagination-demo.md @@ -1,15 +1,15 @@ ## ngbs-pagination -**current-page** (*number*, optional) - The page that should be selected initially. Defaults to `1`. +**pagination-current-page** (*number*, optional) - The page that should be selected initially. Defaults to `1`. -**disabled** (*boolean*, optional) - Disables all interactions. Defaults to `false`. +**pagination-disabled** (*boolean*, optional) - Disables all interactions. Defaults to `false`. -**items-per-page** (*number*, required) - The number of items from your dataset that you will be showing per page. This is used in conjuction with `total-items` to calculate how many page numbers will be shown on the pagination component. +**pagination-items-per-page** (*number*, required) - The number of items from your data set that you will be showing per page. This is used in conjunction with `pagination-total-items` to calculate how many page numbers will be shown on the pagination component. -**on-page-change** (*function*, required) - The function to call when a user changes the page (clicks a number, or previous/next). Signature: `(pageNumber) => { ... }`. +**pagination-on-page-change** (*function*, required) - The function to call when a user changes the page (clicks a number, or previous/next). Signature: `(pageNumber) => { ... }`. -**size** (*string*, optional) - The display size of the component, can either be `'sm'`, `'lg'`, or `''` (the default size). +**pagination-size** (*string*, optional) - The display size of the component, can either be `'sm'`, `'lg'`, or `''` (the default size). -**total-items** (*number*, required) - The total number of items your dataset will have it. This is used in conjuction with `items-per-page` to calculate how many page numbers will be shown on the pagination component. +**pagination-total-items** (*number*, required) - The total number of items your data set will have it. This is used in conjunction with `pagination-items-per-page` to calculate how many page numbers will be shown on the pagination component. -**visible-page-buffer** (*number*, optional) - This property is taken as more of a suggestion and is used to determine how many page numbers surround the selected page on each side. This ultimately allows for greater usability by creating a consistent amount of page numbers no matter which page the user is on. The minimum number of pages that will be shown by the component is 5. This is because the first and last page will always be shown (+2), slots will be reserved to illustrate that there is a gap in paging (+2), and the selected page will always be shown (+1). To take full advantage of this, you may need to add extra styling to make page links the same width. Defaults to `3`. +**pagination-visible-page-buffer** (*number*, optional) - This property is taken as more of a suggestion and is used to determine how many page numbers surround the selected page on each side. This ultimately allows for greater usability by creating a consistent amount of page numbers no matter which page the user is on. The minimum number of pages that will be shown by the component is 5. This is because the first and last page will always be shown (+2), slots will be reserved to illustrate that there is a gap in paging (+2), and the selected page will always be shown (+1). To take full advantage of this, you may need to add extra styling to make page links the same width. Defaults to `3`. diff --git a/src/library/pagination/pagination.component.js b/src/library/pagination/pagination.component.js index 28eb26d..33afb52 100644 --- a/src/library/pagination/pagination.component.js +++ b/src/library/pagination/pagination.component.js @@ -13,29 +13,29 @@ class controller { $onChanges() { // provide defaults for when bad or no data is provided - this.currentPage = this.currentPage || 1; - this.size = this.size || ''; - this.visiblePageBuffer = this.visiblePageBuffer || this.visiblePageBuffer === 0 ? this.visiblePageBuffer : 3; + this.paginationCurrentPage = this.paginationCurrentPage || 1; + this.paginationSize = this.paginationSize || ''; + this.paginationVisiblePageBuffer = this.paginationVisiblePageBuffer || this.paginationVisiblePageBuffer === 0 ? this.paginationVisiblePageBuffer : 3; // (re)validate bindings - if (typeof this.currentPage !== 'number' || isFinite(this.currentPage) === false) { - this.$log.error('invalid ngbsPagination::currentPage:', JSON.stringify(this.currentPage), 'expecting a number'); + if (typeof this.paginationCurrentPage !== 'number' || isFinite(this.paginationCurrentPage) === false) { + this.$log.error('invalid ngbsPagination::paginationCurrentPage:', JSON.stringify(this.paginationCurrentPage), 'expecting a number'); } - if (typeof this.itemsPerPage !== 'number' || isFinite(this.itemsPerPage) === false) { - this.$log.error('invalid ngbsPagination::itemsPerPage:', JSON.stringify(this.itemsPerPage), 'expecting a number'); + if (typeof this.paginationItemsPerPage !== 'number' || isFinite(this.paginationItemsPerPage) === false) { + this.$log.error('invalid ngbsPagination::paginationItemsPerPage:', JSON.stringify(this.paginationItemsPerPage), 'expecting a number'); } - if (this.size && (typeof this.size !== 'string' || ['', 'lg', 'sm'].includes(this.size) === false)) { - this.$log.error('invalid ngbsPagination::size:', JSON.stringify(this.size), 'expecting "sm" or "lg"'); + if (this.paginationSize && (typeof this.paginationSize !== 'string' || ['', 'lg', 'sm'].includes(this.paginationSize) === false)) { + this.$log.error('invalid ngbsPagination::paginationSize:', JSON.stringify(this.paginationSize), 'expecting "sm" or "lg"'); } - if (typeof this.totalItems !== 'number' || isFinite(this.totalItems) === false) { - this.$log.error('invalid ngbsPagination::totalItems:', JSON.stringify(this.totalItems), 'expecting a number'); + if (typeof this.paginationTotalItems !== 'number' || isFinite(this.paginationTotalItems) === false) { + this.$log.error('invalid ngbsPagination::paginationTotalItems:', JSON.stringify(this.paginationTotalItems), 'expecting a number'); } - if (typeof this.visiblePageBuffer !== 'number' || isFinite(this.visiblePageBuffer) === false) { - this.$log.error('invalid ngbsPagination::visiblePageBuffer:', JSON.stringify(this.visiblePageBuffer), 'expecting a number'); + if (typeof this.paginationVisiblePageBuffer !== 'number' || isFinite(this.paginationVisiblePageBuffer) === false) { + this.$log.error('invalid ngbsPagination::paginationVisiblePageBuffer:', JSON.stringify(this.paginationVisiblePageBuffer), 'expecting a number'); } // build pages array @@ -44,11 +44,11 @@ class controller { buildPages() { // determine the number of pages - this.totalPages = Math.ceil(this.totalItems / this.itemsPerPage); + this.totalPages = Math.ceil(this.paginationTotalItems / this.paginationItemsPerPage); // determine where we start and stop the display - let startAt = this.currentPage - this.visiblePageBuffer; - let stopAt = this.currentPage + this.visiblePageBuffer; + let startAt = this.paginationCurrentPage - this.paginationVisiblePageBuffer; + let stopAt = this.paginationCurrentPage + this.paginationVisiblePageBuffer; // if we're not towards the beginning (and ellipsis won't be shown), we need to take into account some padding if (startAt <= 0) { @@ -132,25 +132,25 @@ class controller { } onNextClick() { - this.raiseOnPageChange(this.currentPage + 1); + this.raisePaginationOnPageChange(this.paginationCurrentPage + 1); } onPageClick(page) { - this.raiseOnPageChange(page); + this.raisePaginationOnPageChange(page); } onPreviousClick() { - this.raiseOnPageChange(this.currentPage - 1); + this.raisePaginationOnPageChange(this.paginationCurrentPage - 1); } - raiseOnPageChange(page) { - if (this.currentPage !== page) { - this.currentPage = page; - this.onPageChange({ - currentPage: this.currentPage + raisePaginationOnPageChange(page) { + if (this.paginationCurrentPage !== page) { + this.paginationCurrentPage = page; + this.paginationOnPageChange({ + paginationCurrentPage: this.paginationCurrentPage }); - // $onChanges won't pick up the change to currentPage, so we call this manually + // $onChanges won't pick up the change to paginationCurrentPage, so we call this manually this.buildPages(); } } @@ -159,13 +159,13 @@ class controller { // Define and export component export default { bindings: { - currentPage: '<', - disabled: '<', - itemsPerPage: '<', - onPageChange: '&', - size: '@', - totalItems: '<', - visiblePageBuffer: '<', + paginationCurrentPage: '<', + paginationDisabled: '<', + paginationItemsPerPage: '<', + paginationOnPageChange: '&', + paginationSize: '@', + paginationTotalItems: '<', + paginationVisiblePageBuffer: '<', }, template, controller diff --git a/src/library/pagination/pagination.html b/src/library/pagination/pagination.html index 31d9e30..6d0abce 100644 --- a/src/library/pagination/pagination.html +++ b/src/library/pagination/pagination.html @@ -1,6 +1,6 @@ -