ページャ

pager.js

(function() {
  const NAMESPACE = 'mfp.xrea.jp';
  if (!(NAMESPACE in window))
    window[NAMESPACE] = {};
  if (window[NAMESPACE].Pager !== undefined)
    return;

  const Pager = function(namePrefix) {
    this._namePrefix = namePrefix;
    this._callbacks = [];
    this._numbers = [];
  };

  Pager.prototype = {
    _namePrefix: null,
    _callbacks: null,
    addCallback: function(fun) {
      if (typeof fun !== 'function')
        return;
      if (this._callbacks.indexOf(fun) === -1)
        this._callbacks.push(fun);
    },
    removeCallback: function(fun) {
      let idx = this._callbacks.indexOf(fun);
      if (idx !== -1)
        this._callbacks.splice(idx, 1);
    },
    _callCallbacks: function() {
      let arg = arguments;
      this._callbacks.forEach(function(f) f.apply(null, arg));
    },
    _length: NaN, _current: NaN,
    _numbers: null,
    _createLink: function(text, href) {
      let link = document.createElement('a');
      link.href = '#' + href;
      link.className = this._namePrefix + 'page-link';
      link.textContent = text;
      return link;
    },
    update: function(length) {
      this._length = length;
      this.element.textContent = '';
      {
        let prev = this._createLink('\xab', 'prev');
        prev.classList.add(this._namePrefix + 'prev-page');
        this.element.appendChild(prev);
      }
      this._numbers = [];
      for (let i = 0; i < length; i++) {
        let link = this._createLink(i+1, i);
        this._numbers.push(link);
        this.element.appendChild(link);
      }
      {
        let next = this._createLink('\xbb', 'next');
        next.classList.add(this._namePrefix + 'next-page');
        this.element.appendChild(next);
      }
    },
    goTo: function(page) {
      if (page < 0) page = 0;
      if (page >= this._length) page = this._length - 1;
      let prefix = this._namePrefix;
      let length = this._length;
      this._numbers.forEach(function(e, i) {
        if (i === page)
          e.classList.add(prefix + 'current-page');
        else
          e.classList.remove(prefix + 'current-page');
      });
      this._current = page;
    },
    goNext: function() this.goTo(this._current + 1),
    goPrev: function() this.goTo(this._current - 1),
    handleEvent: function(e) {
      let { type, target } = e;
      if (type !== 'click' || target.nodeName !== 'A')
        return;
      e.preventDefault();
      let addr = target.getAttribute('href').slice(1);
      switch (addr) {
      case 'prev': this.goPrev(); break;
      case 'next': this.goNext(); break;
      default: this.goTo(parseInt(addr, 10)); break;
      }
      this._callCallbacks(this._current);
    },
    _element: null, get element() {
      if (this._element !== null) return this._element;
      this._element = document.createElement('span');
      this._element.addEventListener('click', this, false);
      return this._element;
    }
  };

  window[NAMESPACE].Pager = Pager;
})();

sample.js

let pager = new window['mfp.xrea.jp'].Pager('my-pager');
document.body.appendChild(pager.element);
pager.update(100);
pager.goTo(30);
pager.addCallback(function(page) {
  alert("page: " + page);
});