Refactor navigator component

README.md

@@ -92,35 +92,38 @@ See [this working demo](https://wikiti-random-stuff.gitlab.io/jquery-paginate/ex
 | `first` | `'<<'` | *First* button, to move to first page. Set to `null ` or `undefined` to disable it. |
 | `last` | `'>>'` | *Last* button, to move to last page. Set to `null ` or `undefined` to disable it. |
 | `optional` | `true` | If this option is `true`, then the pagination menu will be added only if the container has more elements than the `limit` value. i.e. Will be added only if there are more than 1 page. |
-| `onCreate` | `null` | A callback to be called when the pagination is initialized. Should have the following structure: `function(jquery_table_object) {}` |
-| `onSelect` | `null` | A callback to be called when any page is selected. Should have the following structure: `function(jquery_table_object, current_page_index) {}` |
 | `childrenSelector` | `'tbody > tr'` | A **jquery selector string** to extract the table children. This can be handy if you are working with *divs* instead of *tables*. |
-| `navigationWrapper` | `null` | A **jquery object** to append the navigation bar to it. This can be used to put your navigation bar on a sticky footer, for example. If `null`, then it will be added after the table. |
-| `navigationClass` | `'page-navigation'` | A **css class name** applied to the navigation menu bar. Can contain multiple classes names, separated with spaces. |
+| `navigationParent` | `null` | A **jquery object** o **css selector** to append the navigation bar to. This can be used to put your navigation bar on a sticky footer, for example. If `null`, the navigation bar will be added after the table element. |
 | `pageToText` | `function(i) { return (i + 1).toString(); }` | A javascript function to transform the current page index (*0...N-1*) to a string, shown in the navigation menu. |
 For example, a working example with all options:
 ```js
-$('#myTable').paginate({
-  limit: 10, // 10 elements per page
-  initialPage: 1, // Start on second page
-  previous: true, // Show previous button
-  previousText: 'Previous page', // Change previous button text
-  next: true, // Show previous button
-  nextText: 'Next page', // Change next button text
-  first: true, // Show first button
-  firstText: 'First', // Change first button text
-  last: true, // Show last button
-  lastText: 'Last', // Change last button text
-  optional: false, // Always show the navigation menu
-  onCreate: function(obj) { console.log('Pagination done!'); } // `onCreate` callback
-  onSelect: function(obj, i) { console.log('Page ' + i + ' selected!'); } // `onSelect` callback
-  childrenSelector: 'tbody > tr.ugly', // Paginate the rows with the `ugly` class
-  navigationWrapper: $('div#myNavWrapper'), // Append the navigation menu to the `#myNavWrapper` div
-  navigationClass: 'my-page-navigation', // New css class added to the navigation menu
-  pageToText: function(i) { return (i + 1).toString(16); } // Page numbers will be shown on hexadecimal notation
-});
+'TODO'
+```
+
+## Events
+
+This library supports some jQuery events:
+
+```
+| Event name | Description |
+| ---------- | ----------- |
+| `jp:create` | The pagination is initialized. |
+| `jp:change` | A new page is selected. The new page and the old page are passed as arguments. |
+
+For example:
+
+```js
+$('#myTable').paginate(/* ... */)
+
+$('#myTable').on('jp:created', function(event) {
+  console.log('Pagination was set up')
+})
+
+$('#myTable').on('jp:select', function(event, newPage, oldPage) {
+  console.log('Page changed from ' + oldPage + ' to ' + newPage)
+})
 ```
 ## Development

dist/jquery-paginate.min.js

-!function(t){var i={};function a(e){if(i[e])return i[e].exports;var n=i[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=t,a.c=i,a.d=function(t,i,e){a.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:e})},a.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},a.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(i,"a",i),i},a.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},a.p="",a(a.s=1)}([function(t,i,a){"use strict";a.r(i);var e=function(){var t;class i{constructor(i,a){this.$=$,t=a}build(i){return this.options=i,(!this.options.optional||this._totalRows()>this.options.limit)&&(this._createNavigation(),this._setPage()),this.options.onCreate&&this.options.onCreate(t),t}_createNavigation(){this._createNavigationWrapper(),this._createNavigationButtons(),this._appendNavigation(),this._addNavigationCallbacks()}_createNavigationWrapper(){this.nav=$("<div>",{class:this.options.navigationClass})}_createNavigationButtons(){var t,i,a;for(this.options.first&&this._createNavigationButton(this.options.first,{"data-first":!0}),this.options.previous&&this._createNavigationButton(this.options.previous,{"data-direction":-1,"data-previous":!0}),t=i=0,a=this._totalPages();0<=a?i<a:i>a;t=0<=a?++i:--i)this._createNavigationButton(this.options.pageToText(t),{"data-page":t});this.options.next&&this._createNavigationButton(this.options.next,{"data-direction":1,"data-next":!0}),this.options.last&&this._createNavigationButton(this.options.last,{"data-last":!0})}_createNavigationButton(t,i){this.nav.append($("<a>",$.extend(i,{href:"#",text:t})))}_appendNavigation(){this.options.navigationWrapper?this.options.navigationWrapper.append(this.nav):t.after(this.nav)}_addNavigationCallbacks(){var i;i=this,this.nav.find("a").click(function(a){var e,n;return e=1*$(this).data("direction"),$(this).data("first")?i._setPage(0):void 0!==$(this).data("page")?i._setPage(1*$(this).data("page")):$(this).data("previous")||$(this).data("next")?(n=i._currentPage()+e)>=0&&n<=i._totalPages()-1&&i._setPage(n):void 0!==$(this).data("last")&&i._setPage(i._totalPages()-1),i.options.onSelect&&i.options.onSelect(t,this._currentPage()),a.preventDefault(),!1})}_setPage(t){void 0===t&&(t=this.options.initialPage),this._rows().hide().slice(t*this.options.limit,(t+1)*this.options.limit).show(),this.nav.find("a").removeAttr("data-selected").siblings("a[data-page="+t+"]").attr("data-selected",!0)}_currentPage(){return this.nav.find("a[data-selected=true]").data("page")}_totalRows(){return this._rows().length}_rows(){return t.find(this.options.childrenSelector)}_totalPages(){return Math.ceil(this._totalRows()/this.options.limit)}}return i.prototype.options=null,i.prototype.nav=null,t=null,$,i}.call(void 0);i.default=function(t){t.fn.paginate=function(i){return new e(t,this).build(t.extend({},t.fn.paginate.defaults,i))},t.fn.paginate.defaults={limit:20,initialPage:0,previous:"<",next:">",first:"<<",last:">>",optional:!0,onCreate:null,onSelect:null,childrenSelector:"tbody > tr",navigationWrapper:null,navigationClass:"page-navigation",pageToText:function(t){return(t+1).toString()}}}},function(t,i,a){"use strict";var e,n=a(0);(0,((e=n)&&e.__esModule?e:{default:e}).default)($)}]);
+!function(t){var a={};function i(e){if(a[e])return a[e].exports;var n=a[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=a,i.d=function(t,a,e){i.o(t,a)||Object.defineProperty(t,a,{configurable:!1,enumerable:!0,get:e})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var a=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(a,"a",a),a},i.o=function(t,a){return Object.prototype.hasOwnProperty.call(t,a)},i.p="",i(i.s=0)}([function(t,a,i){"use strict";i.r(a);var e=function(){class t{constructor(t,a,i){t,this.options=i,this.target=a}}return t.prototype.options=null,t.prototype.target=null,null,t}.call(void 0),n=function(){var t,a;class i{constructor(a,i,e){t=a,this.options=e,this.target=i,this._build()}setPage(t){var i;void 0===t&&(t=this.options.initialPage),(t=this._clampPage(t))!==this.currentPage()&&(i=this.currentPage(),a.find("a").removeAttr("data-jp-selected").siblings("[data-jp-page="+t+"]").attr("data-jp-selected",!0),this.target.trigger("jp:change",this.currentPage(),i))}currentPage(){return a.find("[data-jp-selected]").data("jp-page")}_build(){(!this.options.optional||this._totalRows()>this.options.limit)&&(this._createNavigation(),this.setPage()),this.target.trigger("jp:create")}_createNavigation(){this._createNavigationWrapper(),this._createNavigationButtons(),this._appendNavigation(),this._addNavigationCallbacks()}_createNavigationWrapper(){a=t("<div>",{class:this.options.navigationClass})}_appendNavigation(){this.options.navigationParent?t(this.options.navigationParent).append(a):this.target.after(a)}_addNavigationCallbacks(){var i;i=this,a.find("[data-jp]").click(function(a){var e,n;return e=1*t(this).data("jp-direction"),t(this).data("jp-first")?i.setPage(0):void 0!==t(this).data("jp-page")?i.setPage(1*t(this).data("jp-page")):t(this).data("jp-previous")||t(this).data("jp-next")?(n=i.currentPage()+e,i.setPage(n)):void 0!==t(this).data("jp-last")&&i.setPage(i._totalPages()-1),a.preventDefault(),!1})}_createNavigationButtons(){var t,a,i;for(this.options.first&&this._createNavigationButton(this.options.first,{"data-jp-first":!0}),this.options.previous&&this._createNavigationButton(this.options.previous,{"data-jp-direction":-1,"data-jp-previous":!0}),t=a=0,i=this._totalPages();0<=i?a<i:a>i;t=0<=i?++a:--a)this._createNavigationButton(this.options.pageToText(t),{"data-jp-page":t});this.options.next&&this._createNavigationButton(this.options.next,{"data-jp-direction":1,"data-jp-next":!0}),this.options.last&&this._createNavigationButton(this.options.last,{"data-jp-last":!0})}_createNavigationButton(i,e){var n;(n=t("<a>",t.extend(e,{href:"#",text:i}))).attr("data-jp",!0),a.append(n)}_clampPage(t){return t<0?0:t>=this._totalPages()?this._totalPages()-1:t}_totalRows(){return this.target.find(this.options.childrenSelector).length}_totalPages(){return Math.ceil(this._totalRows()/this.options.limit)}}return i.prototype.options=null,i.prototype.target=null,t=null,a=null,i}.call(void 0),o=function(){var t;class a{constructor(a,i,o){this.target=i,this.options=o,new e(t=a,i,o),new n(t,i,o),this._setupEvents()}_setupEvents(){}}return a.prototype.target=null,a.prototype.options=null,t=null,null,null,a}.call(void 0);$.fn.paginate=function(t){return new o($,this,$.extend({},$.fn.paginate.defaults,t))},$.fn.paginate.defaults={limit:20,initialPage:0,previous:"<",next:">",first:"<<",last:">>",optional:!0,childrenSelector:"tbody > tr",navigationParent:null,pageToText:function(t){return(t+1).toString()}}}]);
 //# sourceMappingURL=jquery-paginate.min.js.map
\ No newline at end of file

examples/example.html

@@ -7,7 +7,7 @@
   <script src="../dist/jquery-paginate.min.js"></script>
   <style>
-    .page-navigation a {
+    div a {
       margin: 0 2px;
       display: inline-block;
       padding: 3px 5px;
@@ -18,7 +18,7 @@
       font-weight: bold;
     }
-    .page-navigation a[data-selected] {
+    div a[data-jp-selected] {
       background-color: #3d9be0;
     }
   </style>

package-lock.json

@@ -451,17 +451,6 @@
         "babel-template": "6.26.0"
       }
     },
-    "babel-loader": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.4.tgz",
-      "integrity": "sha512-/hbyEvPzBJuGpk9o80R0ZyTej6heEOr59GoEUtn8qFKbnx4cJm9FWES6J/iv644sYgrtVw9JJQkjaLW/bqb5gw==",
-      "dev": true,
-      "requires": {
-        "find-cache-dir": "1.0.0",
-        "loader-utils": "1.1.0",
-        "mkdirp": "0.5.1"
-      }
-    },
     "babel-messages": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
@@ -898,44 +887,6 @@
         "babel-types": "6.26.0"
       }
     },
-    "babel-preset-env": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.6.1.tgz",
-      "integrity": "sha512-W6VIyA6Ch9ePMI7VptNn2wBM6dbG0eSz25HEiL40nQXCsXGTGZSTZu1Iap+cj3Q0S5a7T9+529l/5Bkvd+afNA==",
-      "dev": true,
-      "requires": {
-        "babel-plugin-check-es2015-constants": "6.22.0",
-        "babel-plugin-syntax-trailing-function-commas": "6.22.0",
-        "babel-plugin-transform-async-to-generator": "6.24.1",
-        "babel-plugin-transform-es2015-arrow-functions": "6.22.0",
-        "babel-plugin-transform-es2015-block-scoped-functions": "6.22.0",
-        "babel-plugin-transform-es2015-block-scoping": "6.26.0",
-        "babel-plugin-transform-es2015-classes": "6.24.1",
-        "babel-plugin-transform-es2015-computed-properties": "6.24.1",
-        "babel-plugin-transform-es2015-destructuring": "6.23.0",
-        "babel-plugin-transform-es2015-duplicate-keys": "6.24.1",
-        "babel-plugin-transform-es2015-for-of": "6.23.0",
-        "babel-plugin-transform-es2015-function-name": "6.24.1",
-        "babel-plugin-transform-es2015-literals": "6.22.0",
-        "babel-plugin-transform-es2015-modules-amd": "6.24.1",
-        "babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
-        "babel-plugin-transform-es2015-modules-systemjs": "6.24.1",
-        "babel-plugin-transform-es2015-modules-umd": "6.24.1",
-        "babel-plugin-transform-es2015-object-super": "6.24.1",
-        "babel-plugin-transform-es2015-parameters": "6.24.1",
-        "babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
-        "babel-plugin-transform-es2015-spread": "6.22.0",
-        "babel-plugin-transform-es2015-sticky-regex": "6.24.1",
-        "babel-plugin-transform-es2015-template-literals": "6.22.0",
-        "babel-plugin-transform-es2015-typeof-symbol": "6.23.0",
-        "babel-plugin-transform-es2015-unicode-regex": "6.24.1",
-        "babel-plugin-transform-exponentiation-operator": "6.24.1",
-        "babel-plugin-transform-regenerator": "6.26.0",
-        "browserslist": "2.11.3",
-        "invariant": "2.2.4",
-        "semver": "5.5.0"
-      }
-    },
     "babel-preset-es2015": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
@@ -1287,16 +1238,6 @@
         "pako": "1.0.6"
       }
     },
-    "browserslist": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
-      "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
-      "dev": true,
-      "requires": {
-        "caniuse-lite": "1.0.30000821",
-        "electron-to-chromium": "1.3.41"
-      }
-    },
     "buffer": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -1399,12 +1340,6 @@
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
       "dev": true
     },
-    "caniuse-lite": {
-      "version": "1.0.30000821",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000821.tgz",
-      "integrity": "sha512-qyYay02wr/5k7PO86W+LKFaEUZfWIvT65PaXuPP16jkSpgZGIsSstHKiYAPVLjTj98j2WnWwZg8CjXPx7UIPYg==",
-      "dev": true
-    },
     "chalk": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
@@ -2041,12 +1976,6 @@
       "integrity": "sha512-QIDZL54fyV8MDcAsO91BMH1ft2qGGaHIJsJIA/+t+7uvXol1dm413fPcUgUb4k8F/9457rx4/KFE4XfDifrQxQ==",
       "dev": true
     },
-    "electron-to-chromium": {
-      "version": "1.3.41",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.41.tgz",
-      "integrity": "sha1-fjNkPgDNhe39F+BBlPbQDnNzcjU=",
-      "dev": true
-    },
     "elegant-spinner": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",

package.json

@@ -25,9 +25,6 @@
   },
   "homepage": "https://github.com/wikiti/jquery-paginate#readme",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.6.1",
     "coffee-loader": "^0.9.0",
     "coffeescript": "^2.2.4",
     "webpack": "^4.4.1",

src/index.coffee

+import Paginator from './paginator.coffee'
+
+# -- Paginator builder
+$.fn.paginate = (options) ->
+  new Paginator($, this, $.extend({}, $.fn.paginate.defaults, options))
+
+# -- Getters and setters
+# TODO
+
+# -- Default paginator options
+$.fn.paginate.defaults =
+  limit: 20
+  initialPage: 0
+  previous: '<'
+  next: '>'
+  first: '<<'
+  last: '>>'
+  optional: true
+  childrenSelector: 'tbody > tr'
+  navigationParent: null
+  pageToText: (i) -> (i + 1).toString()

src/jquery-install.coffee

-import Paginator from './paginator.coffee'
-
-export default ($) ->
-  $.fn.paginate = (options) ->
-    new Paginator($, this).build($.extend({}, $.fn.paginate.defaults, options))
-
-  $.fn.paginate.defaults =
-    limit: 20
-    initialPage: 0
-    previous: '<'
-    next: '>'
-    first: '<<'
-    last: '>>'
-    optional: true
-    onCreate: null
-    onSelect: null
-    childrenSelector: 'tbody > tr'
-    navigationWrapper: null
-    navigationClass: 'page-navigation'
-    pageToText: (i) -> (i + 1).toString()
-  return

src/main.js

-import jQueryInstall from './jquery-install.coffee'
-
-jQueryInstall($)

src/paginator.coffee

-class Paginator
-
-  # Public properties
-  # -----------------------------------
-  options: null
-  nav: null
-  # Private properties
-  # -----------------------------------
-  obj = null
-  jQuery = $
-  # Public interface
-  # -----------------------------------
-  constructor: (jQuery, target) ->
-    @$ = $
-    obj = target
-    return
-  build: (options) ->
+import Content from './paginator/content.coffee'
+import Navigator from './paginator/navigator.coffee'
+class Paginator
+  # -- Public properties
+  target: null # Paginable container
+  options: null # Pagination options
+  # -- Private properties
+  $ = null # jQuery ref
+  content = null # Content manager
+  navigator = null # Navigator manager
+  # -- Public interface
+  constructor: (jQuery, target, options) ->
+    @target = target
     @options = options
-    if !@options.optional or @_totalRows() > @options.limit
-      @_createNavigation()
-      @_setPage()
-    if @options.onCreate
-      @options.onCreate obj
-    obj
-
-  # Private interface
-  # -----------------------------------
-
-  # -- Initialization
-
-  _createNavigation: ->
-    @_createNavigationWrapper()
-    @_createNavigationButtons()
-    @_appendNavigation()
-    @_addNavigationCallbacks()
-    return
-
-  _createNavigationWrapper: ->
-    # TODO: Custom navigation wrapper option
-    @nav = $('<div>', class: @options.navigationClass)
-    return
-
-  _createNavigationButtons: ->
-    # Add 'first' button
-    if @options.first
-      @_createNavigationButton @options.first, 'data-first': true
-
-    # Add 'previous' button
-    if @options.previous
-      @_createNavigationButton @options.previous,
-        'data-direction': -1
-        'data-previous': true
-
-    # Add page buttons
-    for i in [0...@_totalPages()]
-      @_createNavigationButton @options.pageToText(i), 'data-page': i
-
-    # Add 'next' button
-    if @options.next
-      @_createNavigationButton @options.next,
-        'data-direction': 1
-        'data-next': true
-
-    # Add 'last' button
-    if @options.last
-      @_createNavigationButton @options.last, 'data-last': true
-
-    return
-
-  _createNavigationButton: (text, options) ->
-    # TODO: Custom navigation button option
-    @nav.append $('<a>', $.extend(options, href: '#', text: text))
-    return
-
-  _appendNavigation: ->
-    # Add the content to the navigation block
-    if @options.navigationWrapper
-      @options.navigationWrapper.append @nav
-    else
-      obj.after @nav
-    return
-
-  _addNavigationCallbacks: ->
-    self = this
-
-    @nav.find('a').click (e) ->
-      direction = $(this).data('direction') * 1
-      # 'First' button
-      if $(this).data('first')
-        self._setPage 0
-      else if $(this).data('page') != undefined
-        self._setPage $(this).data('page') * 1
-      else if $(this).data('previous') or $(this).data('next')
-        page = self._currentPage() + direction
-        if page >= 0 and page <= self._totalPages() - 1
-          self._setPage page
-      else if $(this).data('last') != undefined
-        self._setPage self._totalPages() - 1
-      # Handle callback
-      if self.options.onSelect
-        self.options.onSelect obj, @_currentPage()
-      e.preventDefault()
-      false
+    $ = jQuery
+    content = new Content($, target, options)
+    navigator = new Navigator($, target, options)
+    @_setupEvents()
     return
-  # -- Page manipulation
-
-  _setPage: (index) ->
-    if index == undefined
-      index = @options.initialPage
-    # Hide all elements, and then show the current page.
-    @_rows().hide()
-      .slice(index * @options.limit, (index + 1) * @options.limit)
-      .show()
-    # Set the current button as active
-    @nav.find('a').removeAttr('data-selected')
-      .siblings('a[data-page=' + index + ']')
-      .attr 'data-selected', true
+  # -- Private interface
+  _setupEvents: ->
+    # TODO
     return
-  _currentPage: ->
-    @nav.find('a[data-selected=true]').data 'page'
-
-  _totalRows: ->
-    @_rows().length
-
-  _rows: ->
-    obj.find @options.childrenSelector
-
-  _totalPages: ->
-    Math.ceil @_totalRows() / @options.limit
-
 export default Paginator

src/paginator/content.coffee

+class Content
+
+  # Public properties
+  # -----------------------------------
+
+  options: null
+  target: null
+
+  # Private properties
+  # -----------------------------------
+
+  $ = null
+
+  # Public interface
+  # -----------------------------------
+
+  constructor: (jQuery, target, options) ->
+    $ = jQuery
+    @options = options
+    @target = target
+    return
+
+
+export default Content

src/paginator/navigator.coffee

+class Navigator
+
+  # Public properties
+  # -----------------------------------
+
+  options: null
+  target: null
+
+  # Private properties
+  # -----------------------------------
+
+  $ = null
+  nav = null
+
+  # Public interface
+  # -----------------------------------
+
+  constructor: (jQuery, target, options) ->
+    $ = jQuery
+    @options = options
+    @target = target
+    @_build()
+    return
+
+  # TODO: Rebuild method
+
+  setPage: (index) ->
+    if index == undefined
+      index = @options.initialPage
+
+    index = @_clampPage(index)
+    return if index == @currentPage()
+
+    previousPage = @currentPage()
+
+    # Set the current button as active
+    nav.find('a').removeAttr('data-jp-selected')
+      .siblings('[data-jp-page=' + index + ']').attr 'data-jp-selected', true
+    @target.trigger 'jp:change', @currentPage(), previousPage
+    return
+
+  currentPage: ->
+    nav.find('[data-jp-selected]').data 'jp-page'
+
+  # Private interface
+  # -----------------------------------
+
+  # -- Initialization
+
+  _build: ->
+    if !@options.optional or @_totalRows() > @options.limit
+      @_createNavigation()
+      @setPage()
+    @target.trigger('jp:create')
+    return
+
+  # -- Navigation
+
+  _createNavigation: ->
+    @_createNavigationWrapper()
+    @_createNavigationButtons()
+    @_appendNavigation()
+    @_addNavigationCallbacks()
+    return
+
+  _createNavigationWrapper: ->
+    # TODO: Custom navigation wrapper render
+    nav = $('<div>', class: @options.navigationClass)
+    return
+
+  _appendNavigation: ->
+    # Add the content to the navigation block
+    if @options.navigationParent
+      $(@options.navigationParent).append nav
+    else
+      @target.after nav
+    return
+
+  _addNavigationCallbacks: ->
+    self = this
+
+    nav.find('[data-jp]').click (e) ->
+      direction = $(this).data('jp-direction') * 1
+      if $(this).data('jp-first')
+        self.setPage 0
+      else if $(this).data('jp-page') != undefined
+        self.setPage $(this).data('jp-page') * 1
+      else if $(this).data('jp-previous') or $(this).data('jp-next')
+        page = self.currentPage() + direction
+        self.setPage page
+      else if $(this).data('jp-last') != undefined
+        self.setPage self._totalPages() - 1
+
+      e.preventDefault()
+      false
+
+    return
+
+  # -- Navigation buttons
+
+  _createNavigationButtons: ->
+    # Add 'first' button
+    if @options.first
+      @_createNavigationButton @options.first, 'data-jp-first': true
+
+    # Add 'previous' button
+    if @options.previous
+      @_createNavigationButton @options.previous,
+        'data-jp-direction': -1
+        'data-jp-previous': true
+
+    # Add page buttons
+    for i in [0...@_totalPages()]
+      @_createNavigationButton @options.pageToText(i), 'data-jp-page': i
+
+    # Add 'next' button
+    if @options.next
+      @_createNavigationButton @options.next,
+        'data-jp-direction': 1
+        'data-jp-next': true
+
+    # Add 'last' button
+    if @options.last
+      @_createNavigationButton @options.last, 'data-jp-last': true
+
+    return
+
+  _createNavigationButton: (text, options) ->
+    # TODO: Custom navigation renderer
+    button = $('<a>', $.extend(options, href: '#', text: text))
+    button.attr('data-jp', true)
+    nav.append button
+    return
+
+  # -- Page calculations
+
+  _clampPage : (page) ->
+    return 0 if page < 0
+    return @_totalPages() - 1 if page >= @_totalPages()
+    page
+
+  _totalRows: ->
+    # TODO: Move this to content manager
+    @target.find(@options.childrenSelector).length
+
+  _totalPages: ->
+    Math.ceil @_totalRows() / @options.limit
+
+export default Navigator

webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
   devtool: 'source-map',
   mode: 'production',
   entry: {
-    main: './src/main.js'
+    main: './src/index.coffee'
   },
   output: {
     path: path.join(__dirname, 'dist'),
@@ -16,17 +16,6 @@ module.exports = {
       {
         test: /\.coffee$/,
         use: 'coffee-loader'
-      },
-      {
-        test: /\.js$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: [
-              ["env", { targets: { browsers: "> 1%" } }]
-            ]
-          }
-        }
       }
     ]
   }