res/imp/paging.html

<!-- 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>