paginator-element.html

<!--
This is extension of pagination-element authored by Jonathan <foohyfooh>
pagination-table homepage https://github.com/foohyfooh/pagination-table

Element to allow pagination on a page when given an array of JSON object.

##### Example

&lt;paginator-element id="table" items="{{data}}" layout="pagination-item" pageSize="3"&gt; &lt;/paginator-element&gt;

-->
<dom-module id="paginator-element">
    <template>
        <style is="custom-style">
            :root {
                --publication-item-border-bottom: 1px solid #E7EAEC;
                --publication-item-padding-bottom: 10px;
                --publication-item-margin-bottom: 10px;
            }
            #navigation {
                width: 250px;
                margin: 20px auto;
            }
            .container {
                background-color: white;
                margin: 0px 100px;
            }
        </style>
        <div id="container"></div>
        <div id="navigation">
            <button on-click="previousPage">Previous</button>
            <span> Page: <select id="pageSelector" on-change="_selectedPageChange"></select> of <span>[[pageCount]]</span></span>
            <button on-click="nextPage">Next</button>
        </div>
    </template>
    <script>
        Polymer({
            is: 'paginator-element',
            properties: {
                /**
                 * The current page
                 */
                page: {
                    type: Number,
                    value: 0,
                    notify: true
                },
                /**
                 * The items
                 */
                entries: {
                    type: Array,
                    value: [],
                    notify: true,
                    observer: 'onDataChange'
                },
                bindAttribute: {
                    type: String
                },
                bindValue: {
                    type: String,
                    observer: '_displayItems'
                },
                /**
                 * The amount of items to be displayed on a page
                 */
                pageSize: {
                    type: Number,
                    value: 10,
                    reflectToAttribute: true,
                    notify: true,
                    observer: '_displayOnPageChange'
                },
                from: {
                    type: Number,
                    notify: true
                },
                to: {
                    type: Number,
                    notify: true
                },
                /**
                 * The layout to use for the items within the table
                 */
                layout: {
                    type: String,
                    value: 'pagination-item',
                    reflectToAttribute: true
                },
                relatedEntryCount: {
                    type: Number,
                    reflectToAttribute: true
                },
                /**
                 * The number of pages
                 */
                pageCount: {
                    type: Number,
                    computed: '_computePageCount(relatedEntryCount, pageSize)'
                },
                /**
                 * Flag to specify if the paginator supports ondemand entries
                 */
                 ondemand: {
                     type: Boolean,
                     reflectToAttribute: true
                 }
                
            },

            attached: function () {
                this._computePageCount(this.relatedEntryCount, this.pageSize);
                this._setupPageNumbers()
            },

            onDataChange: function() {
                this._displayItems();
            },

            /**
             * Go to the previous page, if any
             */
            previousPage: function(){
                if(this.page > 0){
                    this.page--;
                    this._displayItems();
                }
            },
            /**
             * Go to the next page, if any
             */
            nextPage: function(){
                if(this.pageCount > (this.page + 1)){
                    this.page++;
                    this._displayItems();
                }
            },
            /**
             * Display the items
             */
             _displayItems: function(){
                this._clearNodes(this.$.container);
                var start, end;
                if(this.ondemand) {
                    start = 0;
                    end = this.pageSize
                    this.from = this.page * this.pageSize + 1;
                    this.to =  this.relatedEntryCount < this.from + this.pageSize -1 ? this.relatedEntryCount : this.from + this.pageSize -1;
                } else {
                    start = this.page * this.pageSize;
                    if(start > this.entries.length) start=1;
                    this.from = start+1;
                    end = start + this.pageSize;
                    this.to = this.entries.length < end ? this.entries.length : end;
                }
                for(var i = start; i < end && i < this.entries.length; i++){
                    var node = document.createElement((this.layout) ? this.layout : 'pagination-item');
                    node.data = this.entries[i];
                    node[this.bindAttribute] = this.bindValue;
                    this.$.container.appendChild(node);
                }
                this._setupPageNumbers();
                $(document).scrollTop(0);
            },
            /**
             * Display the items
             */
             _displayOnPageChange: function(){
                this._clearNodes(this.$.container);
                var start, end;
                if(this.ondemand) {
                    start = 0;
                    end = this.pageSize;
                    this.to =  this.relatedEntryCount < this.from + this.pageSize -1 ? this.relatedEntryCount : this.from + this.pageSize -1;
                } else {
                    start = this.page * this.pageSize;
                    if(start > this.entries.length) start=1;
                    this.from = start+1;
                    end = start + this.pageSize;
                    this.to = this.entries.length < end ? this.entries.length : end;
                }
                for(var i = start; i < end && i < this.entries.length; i++){
                    this._createItemElement(i)
                }
                this._setupPageNumbers();
                $(document).scrollTop(0);
            },
            _createItemElement: function(index) {
                var node = document.createElement((this.layout) ? this.layout : 'pagination-item');
                node.data = this.entries[index];
                node[this.bindAttribute] = this.bindValue;
                this.$.container.appendChild(node);
            },
            /**
             * Display the &lt;select&gt; to allow for quick selection of the pages
             * to allow for quick selection of the pages
             */
            _setupPageNumbers: function(){
                this._clearNodes(this.$.pageSelector);
                var selected = this.page;
                for(var i = 0; i < this.pageCount; i++){
                    var option = document.createElement("option");
                    option.value = i;
                    option.innerHTML = i + 1;
                    if(i === selected){
                        option.selected = true;
                    }
                    this.$.pageSelector.appendChild(option);
                }
            },
            /**
             * Handle when a user selects a new page for the &lt;select&gt;
             */
            _selectedPageChange: function(event){
                this.page = event.target.selectedIndex;
                this._displayItems();
            },
            /**
             * Remove all of the items from the element
             */
            _clearNodes: function(element){
                while (element.firstChild) {
                    element.removeChild(element.firstChild);
                }
            },
            /**
             * Calculate the number of pages
             */
            _computePageCount: function(relatedEntryCount, pageSize){
                return Math.ceil(relatedEntryCount / pageSize);
            }
        });
    </script>
</dom-module>

<dom-module id="pagination-item">
    <template>
        <div>
            <template is="dom-repeat" items="{{_objectKeys(data)}}">
                <b><span>[[item]]</span>:</b> <span>[[_getValue(item)]]</span>
            </template>
        </div>
    </template>
    <script>
        Polymer({
            is: 'pagination-item',
            properties:{
                /**
                 *  Data of the item
                 */
                data: {
                    type: Object,
                    value: {}
                }
            },
            /**
             *  Get value based on key
             */
            _getValue: function(key){
                return this.data[key];
            },
            /**
             *  Get the keys of the data
             */
            _objectKeys: function(object){
                return Object.keys(object);
            }
        })
    </script>
</dom-module>