@logo-elements/pagination/logo-elements-pagination.js

Simple, easy to use component for pagination

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-flex-layout/iron-flex-layout';
import '@polymer/paper-button/paper-button';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
import '@polymer/paper-icon-button/paper-icon-button';
import '@polymer/paper-item/paper-item';
import '@polymer/paper-listbox/paper-listbox';
import '@polymer/neon-animation/neon-animation';

import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/typography.js';

/**
 * @demo demo/index.html Demos
 */
export class LogoElementsPagination extends PolymerElement {

  static get template() {
    return html`
            <style >
                :host {
                    font-family: var(--lumo-font-family) !important;
                    display: block;
                    padding: 8px 0;
                    font-size: var(--lumo-font-size-m);
                    --paper-button-disabled: { 
                        background-color: var(--lumo-contrast-10pct);
                        color: var(--lumo-primary-color);
                        font-weight: 600;
                    };
                    --paper-input-container-label: {
                        display: none;
                    };
                    --paper-input-container-underline: {
                        display: none;
                    };
                    --paper-input-container-underline-focus: {
                        display: none;
                    };

                    --paper-font-caption_-_line-height: 0 !important;
                    --paper-input-container-shared-input-style_-_font-size: 14px;
                    --paper-input-container_-_--paper-input-container-input-color: var(--lumo-contrast-70pct);
                    --paper-input-container-shared-input-style_-_font-family: var(--lumo-font-family);
                    --paper-font-common-base_-_font-family: var(--lumo-font-family);
                    --paper-button_-_color: var(--lumo-contrast-90pct);
                    --paper-item-min-height: 18px;
                    --paper-font-subhead_-_font-family: var(--lumo-font-family);
                }

                paper-input .floated-label-placeholder {
                     display: none !important;
                }
    
                .flex {
                    @apply --layout;
                }
    
                .flex-horizontal {
                    @apply --layout-horizontal;
                }
    
                .flex-vertical {
                    @apply --layout-vertical;
                }

                .flex-start-justified{
                    @apply --layout-start-justified;
                }

                .flex-center-justified{
                    @apply --layout-center-justified;
                }
    
                .flex-end-justified {
                    @apply --layout-end-justified;
                }

                #container {
                    align-items: center;
                }

                paper-input {
                    // display: none;
                }

                paper-dropdown-menu {
                    min-width: 40px;
                    max-width: 60px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    padding-left: 8px;
                }
                
                paper-listbox {
                    min-width: 60px;
                }

                .items-per-page-base {
                    background-color: var(--lumo-contrast-10pct) !important;
                    border-radius: 4px !important;
                    margin-right: 10px;
                }
    
                paper-button {
                    height: 30px;
                    width: 30px !important;
                    min-width: 30px !important;
                    border-radius: 50%;
                    margin: 0;
                    font-weight: 400;
                }
                
                .selected {
                    @apply --paper-button-disabled;
                }
                
                .pre-button {
                    width: 30px;
                    height: 30px;
                }

                .next-button {
                    width: 30px;
                    height: 30px;
                }

                .first-element-button {
                    cursor: pointer;
                    margin-right: 20px;
                }

                .last-element-button {
                  cursor: pointer;
                  margin-left: 20px;
                }

                .first-element-button paper-icon-button,
                .last-element-button paper-icon-button {
                  color: var(--lumo-contrast-50pct);
                }
                
                .total-count-base {
                    display: inline-flex;
                    flex-grow: 1;
                    justify-content: flex-end;
                    font-size: 12px;
                    color: var(--lumo-contrast-70pct);
                    white-space: nowrap;
                }
                
                .items-per-page-layout {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    flex-wrap: nowrap;
                }

                .items-per-page-layout .label{
                    flex-grow: 1;
                    margin-right: 8px;
                    font-size: 12px;
                    color: var(--lumo-contrast-70pct);
                    white-space: nowrap;
                }
                
                .items-per-page-base iron-input > input {
                    font-size: 14px !important;
                    line-height: 18px !important;
                }
            </style>
            <div>
                <div id="container"></div>
            </div>
               
        `
  }

  /**
   * Properties
   */
  static get properties() {
    return {

      currentPageLabel: {
        type: String,
        value: '/'
      },
      /**
       * Label of the items per page selection of the page
       * @type {String}
       */
      itemPerPageLabel: {
        type: String,
        value: 'Kayıt Göster'
      },
      /**
       * Label of the total count of the page
       * @type {String}
       */
      totalItemsLabel: {
        type: String,
        value: 'Toplam Kayıt'
      },
      /**
       * Define the position of the pagination.
       * @type {String}
       */
      position: {
        type: String,
        value: 'left',
        observer: '_changePosition'
      },

      /**
       * Maximum page to view -1 to see all page
       * @type {Number}
       */
      viewPageRange: {
        type: Number,
        value: 10
      },

      /**
       * Current page
       * @type {Number}
       */
      page: {
        type: Number,
        value: 1,
        notify: true
      },

      /**
       * Total items
       * @type {Number}
       */
      totalItems: {
        type: Number
      },

      /**
       * Item per page
       * @type {Number}
       */
      itemPerPage: {
        type:Number,
        notify: true,
        observer: '_changeItemPerPage'
      },

      /**
       * Define the position of the pagination.
       * @type {Number}
       */
      numberPages: {
        type: Number,
        readOnly: true,
      },

      /**
       * List of item per page
       * @type {Array<Number>}
       */
      listNumberPerPage: {
        type: Array,
        value: () => { return [
          10,
          25,
          50,
          100,
          250
        ];
        },
        observer: '_changePerPageSelection',
        notify: true
      },

      /**
       * Define the position of the pagination.
       * @type {String}
       */
      nextIcon: {
        type: String,
        value: 'logo-elements-pagination:next-arrow',
      },

      /**
       * Name of the previous icon
       * @type {String}
       */
      previousIcon: {
        type: String,
        value: 'logo-elements-pagination:previous-arrow',
      },

      hideNumberElement: {
        type: Boolean,
        value: false
      },


      hidePageElement: {
        type: Boolean,
        value: false
      }
    }
  }

  static get observers() {
    return [
      '_render(page, totalItems, itemPerPage)'
    ]
  }

  /**
   * @return {boolean}
   */
  _hide() {
    return this.totalItems <= this.itemPerPage;
  }

  /**
   * @param newValue
   * @private
   */
  _changeItemPerPage(newValue, oldValue) {

    let find = this.listNumberPerPage.find(
        (itemPerPage) => {
          return itemPerPage === newValue
        }
    );

    /*if (!find) {
        this.listNumberPerPage.push(newValue);
        this.listNumberPerPage.sort((prev , next) => {
            return prev - next;
        });
        this._render(this.page, this.totalItem, this.itemPerPage);
    }*/

    if(oldValue){
      let firstPageElement = (oldValue*(this.page-1))+1;
      this.page = Math.floor(((firstPageElement-1)/newValue)+1);
    }
  }

  /**
   * @param {Number} page
   * @param {Number} totalItem
   * @param {Number} itemPerPage
   * @private
   */
  _render(page, totalItem, itemPerPage) {
    this.hide = this._hide();
    if (typeof page !== 'number' || typeof totalItem !== 'number' || typeof itemPerPage !== 'number') {
      return;
    }

    this._setNumberPages(Math.ceil(totalItem / itemPerPage));

    this._clear();

    if (!this.hideNumberElement) {
      this.$.container.appendChild(this._createNumberItemsElement());
    }

    let pagesBase = document.createElement('div');
    pagesBase.className = 'pages-base';
    pagesBase.setAttribute('id', 'pages');
    this.$.container.appendChild(pagesBase);

    if (this.nextIcon) {
      pagesBase.appendChild(this._createFirstElement());
      pagesBase.appendChild(this._createPreviousElement());
    }

    let middlePageButtonIndex = Math.floor(this.viewPageRange/2);
    if(page > middlePageButtonIndex){
      let firstPageButton;
      let lastPageButtonCounter = this.viewPageRange - middlePageButtonIndex;

      switch (true) {
        case this.numberPages > this.viewPageRange +1 && page + this.viewPageRange <= this.numberPages + lastPageButtonCounter:
          firstPageButton = page - middlePageButtonIndex;
          break;
        case this.numberPages > this.viewPageRange +1 && page + this.viewPageRange > this.numberPages + lastPageButtonCounter:
          firstPageButton = this.numberPages - this.viewPageRange +1;
          break;
        default:
          firstPageButton = 1;
      }

      for (let count = firstPageButton; count < firstPageButton + this.viewPageRange && count <= this.numberPages;  count++) {
        this._createPageButton(page, count);
      }
    } else {
      for (let count = 1; count <= this.viewPageRange && count <= this.numberPages;  count++) {
        this._createPageButton(page, count);
      }
    }

    if (this.nextIcon) {
      pagesBase.appendChild(this._createNextElement());
      pagesBase.appendChild(this._createLastElement());
    }

    if (this.hide) {
      this.$.container.removeChild(pagesBase);
    }

    if (this.totalItems) {
      this.$.container.appendChild(this._createTotalCountSection());
    }

    /*if (!this.hidePageElement) {
        this.$.container.appendChild(this._createInputElement(page));
    }*/

  }

  /**
   * @private
   */
  _createInputElement(page){
    let element = document.createElement('paper-input');
    element.label = this.currentPageLabel + this.numberPages;
    element.alwaysFloatLabel = true;
    element.type = "number";
    element.value = page;
    element.addEventListener("keyup", this._sendInput.bind(this));
    return false;
  }

  /**
   * @private
   */
  _createPreviousElement() {
    let element = document.createElement('paper-icon-button');
    element.className = 'pre-button';
    element.icon = this.previousIcon;
    if (this.page > 1) {
      element.addEventListener('click', this._clickPreviousPage.bind(this));
    } else {
      element.disabled = true;
    }

    return element;
  }

  /**
   * @private
   */
  _createNextElement() {
    let element = document.createElement('paper-icon-button');
    element.icon = this.nextIcon;
    element.className = 'next-button';
    if (this.numberPages <= this.page) {
      element.disabled = true;
    } else {
      element.addEventListener('click', this._clickNextPage.bind(this));
    }

    return element;
  }

  /**
   * @private
   */
  _createFirstElement() {
    let iconElement = document.createElement('paper-icon-button');
    iconElement.className = 'pre-button';
    iconElement.icon = this.previousIcon;

    let textElement = document.createElement('span');
    textElement.innerHTML = "İlk sayfa";

    let element = document.createElement('span');
    element.className = "first-element-button"

    element.appendChild(iconElement)
    element.appendChild(textElement)

    element.addEventListener('click', () => {
      this.page = 1
    });

    return element;
  }

  /**
   * @private
   */
  _createLastElement() {
    let iconElement = document.createElement('paper-icon-button');
    iconElement.className = 'next-button';
    iconElement.icon = this.nextIcon;

    let textElement = document.createElement('span');
    textElement.innerHTML = "Son sayfa";

    let element = document.createElement('span');
    element.className = "last-element-button"

    element.appendChild(textElement)
    element.appendChild(iconElement)

    element.addEventListener('click', () => {
      this.page = this.numberPages
    });

    return element;
  }

  /**
   * @private
   */
  _createNumberItemsElement() {
    let base = document.createElement('div');
    base.className = 'items-per-page-layout';
    let baseItem = document.createElement('div');
    baseItem.className = 'items-per-page-base'
    let elementLabel = document.createElement('span');
    elementLabel.className = 'label';
    elementLabel.innerText = this.itemPerPageLabel + ': ';
    let element = document.createElement('paper-dropdown-menu');
    element.setAttribute('noink', true);
    element.setAttribute('no-animations', true);
    element.setAttribute('vertical-align', 'bottom');
    element.addEventListener('iron-select', this._clickItemPerPage.bind(this));
    let paperBox = document.createElement('paper-listbox');
    paperBox.slot = "dropdown-content";
    for (let cont = 0; this.listNumberPerPage.length > cont; cont++) {
      if (this.itemPerPage === this.listNumberPerPage[cont]) {
        paperBox.selected = cont;
      }
      let paperItem = document.createElement('paper-item');
      paperItem.textContent = this.listNumberPerPage[cont];
      paperBox.appendChild(paperItem);
    }
    element.appendChild(paperBox);
    baseItem.appendChild(element);
    base.appendChild(elementLabel);
    base.appendChild(baseItem);
    return base;
  }

  /**
   * @private
   */
  _createTotalCountSection() {
    let base = document.createElement('div');
    base.className = 'total-count-base';
    let element = document.createElement('span');
    element.innerHTML = this.totalItemsLabel + ': ' +this.totalItems;
    base.appendChild(element);
    return base;
  }

  /**
   * @private
   */
  _clear() {
    while (this.$.container.hasChildNodes()) {
      this.$.container.removeChild(this.$.container.lastChild);
    }
  }

  /**
   * @param newPosition
   * @param oldPosition
   * @private
   */
  _changePosition(newPosition, oldPosition){
    switch(newPosition){
      case "center":
        this.$.container.className = "flex flex-center-justified";
        break;
      case "left":
        this.$.container.className = "flex flex-start-justified";
        break;
      default:
        this.$.container.className = "flex flex-end-justified";
        break;
    }
  }

  /**
   * @param {CustomEvent} evt
   * @private
   */
  _clickPage(evt) {
    this.page = evt.target.page;
  }

  /**
   * @param {CustomEvent} evt
   * @private
   */
  _clickPreviousPage(evt) {
    if (this.page < 2) {
      return;
    }
    this.page--;
  }

  /**
   * @param {CustomEvent} evt
   * @private
   */
  _clickNextPage(evt) {
    if (this.numberPages <= this.page) {
      return;
    }
    this.page++;
  }

  /**
   * @param {CustomEvent} event
   * @private
   */
  _sendInput(event){
    if (event.keyCode === 13) {
      let element = this.$.container.querySelector("paper-input");
      element.value = parseInt(element.value);
      if(element.value <= this.numberPages && element.value >= 1){
        this.page = element.value;
      } else {
        element.value = undefined;
        element.placeholder = this.page;
      }
    }
  }

  /**
   * @param {CustomEvent} evt
   * @private
   */
  _clickItemPerPage(evt) {
    this.itemPerPage = parseInt(evt.detail.item.textContent);
  }

  _getPerPageIsDefault() {
    const defaultArray = [
      5,
      10,
      20,
      30,
      40,
      50
    ];
    return JSON.stringify(defaultArray)==JSON.stringify(this.listNumberPerPage);
  }

  _changePerPageSelection() {
    let index = this.listNumberPerPage.findIndex( p => p === this.itemPerPage);
    this.itemPerPage = this.listNumberPerPage[index];
  }

  /**
   * @param {number} page
   * @param {number} count
   * @private
   */
  _createPageButton(page, count){
    let element;
    element = document.createElement('paper-button');
    element.textContent = count;
    element.page = count;
    if (count === page) {
      element.disabled = true;
      element.classList.add("selected");
    }
    element.addEventListener('click', this._clickPage.bind(this));

    if(!this.hide) {
      let buttonPlace = this.$.container.querySelector('#pages');
      buttonPlace.appendChild(element);
    }
    // this.$.container.appendChild(element);
  }
}

if (!window.customElements.get('logo-elements-pagination')) { window.customElements.define('logo-elements-pagination', LogoElementsPagination); }
// window.customElements.define('paper-pagination', LogoElementsPagination);