Updated bindings for pagination component and demo (#58)

* updated bindings for pagination component and demo

* updated documentation to reference correct attributes

* spelling/grammar fixes

src/docs/demos/pagination/pagination-demo.html

@@ -1,12 +1,12 @@
 <div class="mb-4">
     <h6>Basic Demo (Current Page: {{$ctrl.currentPageBasic}})</h6>
     <p class="small">Use the inputs below to control how the component will be rendered.</p>
-    <ngbs-pagination disabled="paginationDisabled"
-                     size="{{$ctrl.size}}"
-                     items-per-page="$ctrl.itemsPerPage"
-                     total-items="$ctrl.totalItems"
-                     on-page-change="$ctrl.currentPageBasic = currentPage"
-                     visible-page-buffer="$ctrl.visiblePageBuffer"></ngbs-pagination>
+    <ngbs-pagination pagination-disabled="paginationDisabled"
+                     pagination-size="{{$ctrl.size}}"
+                     pagination-items-per-page="$ctrl.itemsPerPage"
+                     pagination-total-items="$ctrl.totalItems"
+                     pagination-on-page-change="$ctrl.currentPageBasic = currentPage"
+                     pagination-visible-page-buffer="$ctrl.visiblePageBuffer"></ngbs-pagination>
 </div>
 
 <div class="form-inline mb-4">
@@ -27,7 +27,7 @@ <h6>Basic Demo (Current Page: {{$ctrl.currentPageBasic}})</h6>
 
     <div class="form-group mr-2 mb-2">
         <label class="form-label mr-2" for="pagination-visible-page-buffer">Visible Page Buffer</label>
-        <input id="pagination-visible-page-buffer" class="form-control" type="number" min="1" ng-model="$ctrl.visiblePageBuffer">
+        <input id="pagination-visible-page-buffer" class="form-control" type="number" min="0" ng-model="$ctrl.visiblePageBuffer">
     </div>
 
     <div class="form-group mr-2 mb-2">
@@ -53,5 +53,5 @@ <h6>Usability Demo (Current Page: {{$ctrl.currentPageUsability}})</h6>
             width: 40px;
         }
     </style>
-    <ngbs-pagination class="custom-pagination" size="sm" current-page="7" items-per-page="192" total-items="31337"></ngbs-pagination>
+    <ngbs-pagination class="custom-pagination" pagination-size="sm" pagination-current-page="7" pagination-items-per-page="192" pagination-total-items="31337"></ngbs-pagination>
 </div>

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`.

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

src/library/pagination/pagination.html

@@ -1,36 +1,36 @@
-<ul class="pagination" ng-class="{ 'pagination-sm': $ctrl.size === 'sm', 'pagination-lg': $ctrl.size === 'lg' }">
+<ul class="pagination" ng-class="{ 'pagination-sm': $ctrl.paginationSize === 'sm', 'pagination-lg': $ctrl.paginationSize === 'lg' }">
     <!-- clickable previous -->
-    <li class="page-item" ng-if="!$ctrl.disabled && $ctrl.currentPage > 1">
+    <li class="page-item" ng-if="!$ctrl.paginationDisabled && $ctrl.paginationCurrentPage > 1">
         <a ng-click="$ctrl.onPreviousClick(); $event.preventDefault();" class="page-link" href="#" aria-label="Previous">
             <span aria-hidden="true">&laquo;</span>
             <span class="sr-only">Previous</span>
         </a>
     </li>
 
     <!-- disabled previous -->
-    <li class="page-item disabled" ng-if="$ctrl.disabled || (!$ctrl.disabled && $ctrl.currentPage === 1)">
+    <li class="page-item disabled" ng-if="$ctrl.paginationDisabled || (!$ctrl.paginationDisabled && $ctrl.paginationCurrentPage === 1)">
         <span class="page-link">
             <span aria-hidden="true">&laquo;</span>
             <span class="sr-only">Previous</span>
         </span>
     </li>
 
     <!-- pages -->
-    <li ng-repeat="pageMeta in $ctrl.pages track by $index" ng-class="{ active: $ctrl.currentPage === pageMeta.page, disabled: $ctrl.disabled }" class="page-item">
-        <a ng-if="!$ctrl.disabled" class="page-link" ng-click="$ctrl.onPageClick(pageMeta.page); $event.preventDefault();" href="#">{{pageMeta.display}}</a>
-        <span ng-if="$ctrl.disabled" class="page-link">{{pageMeta.display}}</span>
+    <li ng-repeat="pageMeta in $ctrl.pages track by $index" ng-class="{ active: $ctrl.paginationCurrentPage === pageMeta.page, disabled: $ctrl.paginationDisabled }" class="page-item">
+        <a ng-if="!$ctrl.paginationDisabled" class="page-link" ng-click="$ctrl.onPageClick(pageMeta.page); $event.preventDefault();" href="#">{{pageMeta.display}}</a>
+        <span ng-if="$ctrl.paginationDisabled" class="page-link">{{pageMeta.display}}</span>
     </li>
 
     <!-- clickable next -->
-    <li class="page-item" ng-if="!$ctrl.disabled && $ctrl.currentPage < $ctrl.totalPages">
+    <li class="page-item" ng-if="!$ctrl.paginationDisabled && $ctrl.paginationCurrentPage < $ctrl.totalPages">
         <a ng-click="$ctrl.onNextClick(); $event.preventDefault();" class="page-link" href="#" aria-label="Next">
             <span aria-hidden="true">&raquo;</span>
             <span class="sr-only">Next</span>
         </a>
     </li>
 
     <!-- disabled next -->
-    <li class="page-item disabled" ng-if="$ctrl.disabled || (!$ctrl.disabled && $ctrl.currentPage === $ctrl.totalPages)">
+    <li class="page-item disabled" ng-if="$ctrl.paginationDisabled || (!$ctrl.paginationDisabled && $ctrl.paginationCurrentPage === $ctrl.totalPages)">
         <span class="page-link">
             <span aria-hidden="true">&raquo;</span>
             <span class="sr-only">Next</span>