JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<link rel="import" href="//cdn.rawgit.com/download/polymer-cdn/1.2.3.2/lib/polymer/polymer.html">
<script src="//cdn.rawgit.com/download/polymer-cdn/1.2.3.2/lib/webcomponentsjs/webcomponents.js"></script>

<my-paginator total-count="3">
</my-paginator>

<dom-module name="my-paginator">
  <template>
    <button data-target="prev" on-tap="_changePage">Prev</button>

    <select>
      <template is="dom-repeat" items="[[ pages ]]" as="page">
        <option data-target="[[ page ]]" selected$="[[ _isSelected(page) ]]">
          [[ page ]]
        </option>
      </template>
    </select>

    <button data-target="next" on-tap="_changePage">Next</button>
  </template>
</dom-module>

JavaScript

Polymer({
  is: 'my-paginator',
  properties: {
  	pages: {
    	type: Array
    },
    totalCount: {
    	type: Number
    }
  },
  _changePage(e) {
    var selectElm = this.querySelector('select');
    var direction = Polymer.dom(e).rootTarget
      .getAttribute('data-target');
    var options = this.querySelectorAll('option');
    var endIndex = options.length - 1;

    if (direction === 'next') {
      if (selectElm.selectedIndex < endIndex) {
        selectElm.selectedIndex++;
      } else {
        selectElm.selectedIndex = 0;
      }
    } else {
      if (selectElm.selectedIndex === 0) {
        selectElm.selectedIndex--;
      } else {
        selectElm.selectedIndex = endIndex;
      }
    }
  },
  _setPages() {
  	var pages = [];
    
  	for (var i = 1; i <= this.totalCount; ++i) {
    	pages.push(i)
    }
    
    this.pages = pages;
  },
  _isSelected(page) {
  	var selectElm = this.querySelector('select');
    var pageIndex = (Array.prototype.slice
    	.call(selectElm.children)).indexOf(page);
    
    return pageIndex === selectElm.selectedIndex;
  },
  ready() {
  	this._setPages();
  }
});