| <!-- The <paging-sk> custom element declaration. |
| |
| Presents controls to paginate across pages of results. |
| |
| Attributes: |
| |
| pagination: Usually returned from the server this is an object |
| with the following structure: |
| |
| { |
| size: 10, |
| offset: 20, |
| total: 210 |
| } |
| where size is the page size, offset is the offset |
| from the beginning (starting at 0) and total is |
| the total number of elements in the paginated |
| resource. |
| |
| Events: |
| |
| 'pagechange' |
| The 'paging-sk' element emits this event when a user has |
| clicked on page other than the current one. |
| When the event is fired the offset field of the |
| shared pagination object has been updated to the |
| new value. |
| --> |
| |
| <dom-module id="paging-sk"> |
| <template> |
| <div class="paginationControl" horizontal layout> |
| <paper-button on-click="toPageClicked" disabled$="{{ isFirstPage(page) }}" data-page="0"> |
| First |
| </paper-button> |
| <paper-button on-click="toPageClicked" disabled$="{{ isFirstPage(page) }}" data-page$="{{ decrement(page) }}"> |
| <iron-icon icon="image:navigate-before"></iron-icon> |
| </paper-button> |
| <template is="dom-repeat" items="{{enumPages}}" as="n"> |
| <paper-button on-click="toPageClicked" |
| disabled$="{{n.disabled}}" data-page$="{{n.num}}">{{ increment(n.num) }}</paper-button> |
| </template> |
| <paper-button on-click="toPageClicked" disabled$="{{ isLastPage(page, allPages) }}" data-page$="{{ increment(page) }}"> |
| <iron-icon icon="image:navigate-next"></iron-icon> |
| </paper-button> |
| <paper-button on-click="toPageClicked" disabled$="{{ isLastPage(page, allPages) }}" data-page$="{{ decrement(allPages) }}"> |
| Last |
| </paper-button> |
| <paper-button disabled>{{ getPageCountsText(page, allPages) }}</paper-button> |
| </div> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: "paging-sk", |
| properties: { |
| pagination: { |
| type: Object, |
| value: function() { return {}; }, |
| observer: 'paginationChanged', |
| }, |
| showPages: { |
| type: Number, |
| value: 5, |
| }, |
| showPagesOffset: { |
| type: Number, |
| value: 0, |
| }, |
| valid: { |
| type: Boolean, |
| value: false, |
| }, |
| page: { |
| type: Number, |
| value: 0, |
| }, |
| allPages: { |
| type: Number, |
| value: 0, |
| }, |
| enumPages: { |
| type: Array, |
| value: function() { return []; }, |
| }, |
| }, |
| |
| ready: function() { |
| this.showPagesOffset = Math.floor(this.showPages/2); |
| }, |
| |
| getPageCountsText: function(page, allPages) { |
| return this.increment(page) + " / " + allPages; |
| }, |
| |
| // paginationChanged primarily captures when the size and total change. |
| paginationChanged: function() { |
| this.allPages = Math.ceil(this.pagination.total / this.pagination.size); |
| this.update(); |
| }, |
| |
| // toPageClicked is called when a user clicks on a page link. |
| toPageClicked: function(e) { |
| var button = sk.findParent(e.target, "PAPER-BUTTON"); |
| var targetPage = button.dataset.page; |
| this.pagination.offset = targetPage * this.pagination.size; |
| this.update(); |
| this.fire('pagechange', {}); |
| }, |
| |
| isLastPage: function(n, allPages) { |
| return (n == (allPages-1)); |
| }, |
| |
| isFirstPage: function(n) { |
| return (n == 0); |
| }, |
| |
| decrement: function(n) { |
| return n - 1; |
| }, |
| |
| increment: function(n) { |
| return n + 1; |
| }, |
| |
| // update recalculates the number of pages and page we are currently on. |
| update: function() { |
| // Calculate the current page and the pages to show on the selection. |
| this.page = Math.floor(this.pagination.offset/this.pagination.size); |
| var start = Math.max(Math.min(this.page - this.showPagesOffset, this.allPages - this.showPages), 0); |
| var end = Math.min(start + this.showPages - 1, this.allPages-1); |
| var tmpEnumPages = []; |
| for(var i=start; i <= end; i++) { |
| tmpEnumPages.push({'num': i, 'disabled': (i == this.page)}); |
| } |
| this.enumPages = tmpEnumPages; |
| } |
| }); |
| </script> |