hax-app-pagination.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icon/iron-icon.html">

<dom-module id="hax-app-pagination">
  <template>
    <style>
      :host {
        display: flex;
      }
    </style>
    <div id="container">

        <paper-icon-button icon="first-page" disabled="[[_isActive(start, currentPage)]]"></paper-icon-button>
        <paper-icon-button icon="prev-page" disabled="[[_isActive(start, currentPage)]]"></paper-icon-button>
        <paper-item hidden$="[[hasTotal]]">[[currentPage]]/[[totalPages]]</paper-item>
        <paper-icon-button icon="next-page" disabled="[[_isActive(range, currentPage)]]"></paper-icon-button>
        <paper-icon-button icon="last-page" disabled="[[_isActive(range, currentPage)]]"></paper-icon-button>
    </div>
  </template>
  <script>
    Polymer({
      is: 'hax-app-pagination',
      properties: {
        /**
         * Pagination object.
         */
        pagination: {
          type: Object,
          value: {},
          observer: '_paginationChanged',
        },
        /**
         * Request data object pulling out links needed.
         */
        requestData: {
          type: Object,
          value: {},
          observer: '_requestDataChanged',
        },
        /**
         * Total number of pages.
         */
        totalPages: {
          type: Number,
        },
        /**
         * Calculate if we have totals.
         */
        hasTotal: {
          type: Boolean,
          computed: '_computeHasTotal(totalPages)',
        },
        /**
         * How many results are currently being shown
         */
        count: {
          type: Number,
          value: 0
        },
        /**
         * How many results into the set are we.
         */
        offset: {
          type: Number,
          value: 0
        },
        /**
         * Total number of results
         */
        total: {
          type: Number,
          value: 0
        },
        /**
         * What page to start the pager
         */
        start: {
          type: Number,
          value: 0
        },
        /**
         * Current page number
         */
        currentPage: {
          type: Number,
          value: 0
        },
      },
      /**
       * Detect if we have total known pages.
       */
      _computeHasTotal: function (total) {
        if (total != 0 && total != null) {
          return true;
        }
        return false;
      },
      /**
       * Notice pagination loaded and react, primarily based on type.
       */
      _paginationChanged: function (newValue, oldValue) {
        if (typeof newValue !== typeof undefined) {
          let pagination = newValue;
          switch (pagination.style) {
            case 'link':
            break;
          }
        }
      },
      /**
       * Notice we have new results.
       */
      _requestDataChanged: function (newValue, oldValue) {
        if (typeof newValue !== typeof undefined) {
          let data = newValue;
          var directions = {
            'first': false,
            'previous': false,
            'next': false,
            'last': false
          };
          switch (this.pagination.style) {
            case 'link':
              if (typeof this.pagination.props.first !== typeof undefined) {
                directions.first = this._resolveObjectPath(this.pagination.props.first, data);
              }
              if (typeof this.pagination.props.previous !== typeof undefined) {
                directions.previous = this._resolveObjectPath(this.pagination.props.previous, data);
              }
              if (typeof this.pagination.props.next !== typeof undefined) {
                directions.next = this._resolveObjectPath(this.pagination.props.next, data);
              }
              if (typeof this.pagination.props.last !== typeof undefined) {
                directions.last = this._resolveObjectPath(this.pagination.props.last, data);
              }
            break;
            case 'offset':
              if (typeof this.pagination.props.count !== typeof undefined) {
                this.count = this._resolveObjectPath(this.pagination.props.count, data);
              }
              if (typeof this.pagination.props.offset !== typeof undefined) {
                this.offset = this._resolveObjectPath(this.pagination.props.offset, data);
              }
              if (typeof this.pagination.props.total !== typeof undefined) {
                this.total = this._resolveObjectPath(this.pagination.props.total, data);
              }
              this.totalPages = Math.round(this.total / (this.count + this.offset));
              this.currentPage = Math.round(this.offset / this.count);
              if (this.currentPage == 0) {
                this.currentPage = 1;
              }
            break;
          }
        }
      },
      /**
       * Helper to take a multi-dimensional object and convert
       * it's reference into the real value. This allows for variable input defined
       * in a string to actually hit the deeper part of an object structure.
       */
      _resolveObjectPath: function(path, obj) {
        return path.split('.').reduce(function(prev, curr) {
            return prev ? prev[curr] : null
        }, obj || self);
      },
      /**
       * Assemble an array of the range
       */
      _computeRangeArray: function (range) {
        let _range = Number(range);
        let rangeArray = [];
        while (range >= 0) {
          rangeArray.unshift(range)
          range--;
        }
        return rangeArray;
      },
      _isActive: function (page, current) {
        return Number(page) === Number(current);
      },
      _showPager: function (rangeArray) {
        return rangeArray.length > 0;
      },
      ready: function () {
        this.$.container.addEventListener('click', (e) => {
          let target = Polymer.dom(e).localTarget;
          const eventName = target.getAttribute('data-event');
          // check to see if we have an event name to work with
          if (eventName) {
            switch (eventName) {
              case 'page':
                let page = target.getAttribute('data-page');
                this.fire('change-page', { page: Number(page) });
                break;
              case 'first-page':
                this.fire('change-page', { page:  Number(this.start) });
                break;

              case 'last-page':
                this.fire('change-page', { page: Number(this.start + this.range) });
                break;

              default:
                break;
            }
          }
        });
      }
    });
  </script>
</dom-module>