component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul',
  classNames: ['pagination-navigation'],
  hasNext: function() {
    return this.get('page') < this.get('pages');
  }.property('page', 'pages'),
  hasPrevious: function() {
    return this.get('page') > 1;
  }.property('page', 'pages'),
  currentPageWindow: 2, // number of pages below and above to show
  leadingWindow: 2, // leading page numbers to show
  tailWindow: 2, // tailing page numbers to show
  mergeRanges: function(ranges, higher) {
    var lower = ranges[ranges.length-1];
    var remainder = ranges.slice(0, ranges.length-1);
    if (lower[1] + 1 >= higher[0]) {
      remainder.push([lower[0], higher[1]]);
    } else {
      remainder.push(lower, higher);
    }
    return remainder;
  },
  pageItems: function() {
    var counts = this.getProperties('page', 'pages');
    var currentPage = counts.page;
    var pages = [];
    var length = counts.pages;
    var windowSettings = this.getProperties('currentPageWindow', 'leadingWindow', 'tailWindow');
    var pageWindows;
    var leadingWindow;
    var currentWindow;
    var tailWindow;
    var windowsLength;

    leadingWindow = [1, windowSettings.leadingWindow];
    currentWindow = [
      Math.max(1, currentPage - windowSettings.currentPageWindow),
      Math.min(length, currentPage + windowSettings.currentPageWindow)
    ];
    tailWindow = [length - windowSettings.tailWindow + 1, length];

    pageWindows = [leadingWindow];
    pageWindows = this.mergeRanges(pageWindows, currentWindow);
    pageWindows = this.mergeRanges(pageWindows, tailWindow);

    windowsLength = pageWindows.length;
    pageWindows.map(function(range, index) {
      var i = range[0];
      var end = range[1];
      while (i <= end) {
        pages.push({page: i, current: i === currentPage});
        i++;
      }
      if (index+1 < windowsLength) {
        pages.push({ellipsis: true});
      }
    });

    return pages;
  }.property('page', 'pages'),
  page: function() {
    var counts = this.getProperties('offset', 'perPage');
    // TODO: catch math errors
    return Math.floor(counts.offset / counts.perPage) + 1;
  }.property('offset', 'totalCount', 'perPage'),
  pages: function() {
    var counts = this.getProperties('totalCount', 'perPage');
    // TODO: catch math errors
    return Math.ceil(counts.totalCount / counts.perPage);
  }.property('offset', 'totalCount', 'perPage'),
  actions: {
    jumpToPage: function(page) {
      var offset = (page - 1) * this.get('perPage');
      this.sendAction('action', offset);
    },
    nextPage: function() {
      this.send('jumpToPage', this.get('page') + 1);
    },
    previousPage: function() {
      this.send('jumpToPage', this.get('page') - 1);
    },
  },
});