spine_paginator 0.1.0 → 0.1.1

data/Gruntfile.coffee

@@ -13,6 +13,8 @@ module.exports = (grunt) ->
       all:
         files:
           'dist/spine.paginator.js': 'src/spine.paginator.coffee'
+          'dist/spine.pagination_controller.js': 'src/spine.pagination_controller.coffee'
+          'examples/spine_pagination.js': 'examples/spine_pagination.coffee'
 
     concat:
       all:
@@ -20,7 +22,8 @@ module.exports = (grunt) ->
           banner: '<%= meta.banner %>'
         files:
           'dist/spine.paginator.js': 'dist/spine.paginator.js'
-
+          'dist/spine.pagination_controller.js': 'dist/spine.pagination_controller.js'
+          
     uglify:
       all:
         options:
@@ -28,17 +31,27 @@ module.exports = (grunt) ->
           report: 'gzip'
         files:
           'dist/spine.paginator.min.js': 'dist/spine.paginator.js'
+          'dist/spine.pagination_controller.min.js': 'dist/spine.pagination_controller.js'
 
     jasmine:
       all:
-        src: 'dist/spine.paginator.js'
+        src: 'dist/*.js'
         options:
           specs: 'spec/spine.paginator/**/*.js'
           helpers: 'spec/lib/**/*.js'
+    
+    slim:
+      all:
+        files:
+          'examples/spine_pagination.html': 'examples/spine_pagination.slim'
+    sass:
+      all:
+        files:
+          'examples/spine_pagination.css': 'examples/spine_pagination.scss'
 
     watch:
       all:
-        files: 'src/spine.paginator.coffee'
+        files: ['src/*.coffee', 'examples/*.coffee', 'examples/*.slim', 'examples/*.scss']
         tasks: ['build', 'spec']
 
   grunt.loadNpmTasks 'grunt-contrib-coffee'
@@ -46,7 +59,9 @@ module.exports = (grunt) ->
   grunt.loadNpmTasks 'grunt-contrib-uglify'
   grunt.loadNpmTasks 'grunt-contrib-jasmine'
   grunt.loadNpmTasks 'grunt-contrib-watch'
+  grunt.loadNpmTasks 'grunt-slim'
+  grunt.loadNpmTasks 'grunt-contrib-sass'
 
   grunt.registerTask 'default', ['watch']
   grunt.registerTask 'spec',    ['jasmine']
-  grunt.registerTask 'build',   ['coffee', 'concat', 'uglify']
+  grunt.registerTask 'build',   ['coffee', 'concat', 'uglify', 'slim', 'sass']

data/README.md

@@ -1,29 +1,27 @@
 # SpinePaginator
 
-TODO: Write a gem description
+Paginator for [Spine](https://github.com/spine/spine).
+
 
 ## Installation
 
+### Rails
+
 Add this line to your application's Gemfile:
 
     gem 'spine_paginator'
 
-And then execute:
-
-    $ bundle
 
-Or install it yourself as:
+## Usage
 
-    $ gem install spine_paginator
+### Rails
 
-## Usage
+Add the following to your `app/assets/javascripts/application.js` file.
 
-TODO: Write usage instructions here
+    //= require spine
+    //= require handlebars
+    //= require spine.paginator
+    //= require spine.pagination_controller
 
-## Contributing
+Then, see https://github.com/vkill/spine_paginator/examples/spine_pagination.coffee
 
-1. Fork it
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create new Pull Request

data/dist/spine.pagination_controller.js

@@ -0,0 +1,142 @@
+// spine.paginator.js
+// version: 0.1.0
+// author: vkill
+// license: MIT
+(function() {
+  var Spine,
+    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+
+  Spine = this.Spine || require('spine');
+
+  /*
+  
+  Usage
+  
+  see https://github.com/vkill/spine_paginator/examples/spine_pagination.coffee
+  */
+
+
+  Spine.PaginationController = (function(_super) {
+    __extends(PaginationController, _super);
+
+    PaginationController.MODEL = null;
+
+    PaginationController.PER_PAGES = [10, 20, 30, 40];
+
+    PaginationController.PAGINATE_EVENT = "paginate";
+
+    PaginationController.PAGE = 1;
+
+    PaginationController.PER_PAGE = null;
+
+    PaginationController.PAGINATION = null;
+
+    function PaginationController() {
+      this.templateHtmlDataEmpty = __bind(this.templateHtmlDataEmpty, this);
+      this.render = __bind(this.render, this);      PaginationController.__super__.constructor.apply(this, arguments);
+      if (this.constructor.MODEL == null) {
+        throw new Error("please defined class variable MODEL");
+      }
+      this.constructor.PER_PAGE = this.constructor.PER_PAGES[0];
+      if (this.constructor.PER_PAGE == null) {
+        throw new Error("please defined class variable PER_PAGES");
+      }
+      this.constructor.MODEL.bind(this.constructor.PAGINATE_EVENT, this.render);
+    }
+
+    PaginationController.refresh = function() {
+      this.PAGE = 1;
+      return this.load();
+    };
+
+    PaginationController.toPage = function(page) {
+      this.PAGE = page;
+      return this.load();
+    };
+
+    PaginationController.load = function() {
+      var pagination;
+
+      pagination = this.MODEL.page(this.PAGE, {
+        perPage: this.PER_PAGE
+      });
+      this.PAGINATION = pagination;
+      return this.MODEL.trigger(this.PAGINATE_EVENT);
+    };
+
+    PaginationController.prototype.render = function() {
+      var pagination;
+
+      pagination = this.constructor.PAGINATION;
+      if (pagination.records.length > 0) {
+        return this.html(this.templateHtml());
+      } else {
+        return this.html(this.templateHtmlDataEmpty());
+      }
+    };
+
+    PaginationController.prototype.events = {
+      'click a[data-page]': 'clickPage'
+    };
+
+    PaginationController.prototype.clickPage = function(e) {
+      var page;
+
+      e.preventDefault();
+      page = this.getPageFromE(e);
+      if (page == null) {
+        return;
+      }
+      return this.constructor.toPage(page);
+    };
+
+    PaginationController.prototype.getPageFromE = function(e) {
+      var $node, page, _page;
+
+      $node = $(e.target);
+      if ($node.parent('.disabled, .active').length > 0) {
+        return null;
+      }
+      _page = $node.data('page');
+      page = null;
+      switch (_page) {
+        case 'first':
+          page = this.constructor.PAGINATION.firstPage();
+          break;
+        case 'prev':
+          page = this.constructor.PAGINATION.currentPage() - 1;
+          break;
+        case 'next':
+          page = this.constructor.PAGINATION.currentPage() + 1;
+          break;
+        case 'last':
+          page = this.constructor.PAGINATION.lastPage();
+          break;
+        case 'gap':
+          page = null;
+          break;
+        default:
+          page = _page;
+      }
+      return page;
+    };
+
+    PaginationController.prototype.templateHtmlDataEmpty = function() {
+      return "";
+    };
+
+    PaginationController.prototype.templateHtml = function() {
+      var pagination, source;
+
+      pagination = this.constructor.PAGINATION;
+      source = "<div class=\"pagination pagination-small pull-right\">\n  <ul>\n    <li {{#unless hasFirst}}class=\"disabled\"{{/unless}}>\n      <a href=\"javascript:void(0);\" data-page=\"first\">first</a>\n    </li>\n    <li {{#unless hasPrev}}class=\"disabled\"{{/unless}}>\n      <a href=\"javascript:void(0);\" data-page=\"prev\">prev</a>\n    </li>\n    {{#each pages}}\n      {{#if this.gap}}\n        <li class=\"disabled\">\n          <a href=\"javascript:void(0);\" data-page='gap'>...</a>\n        </li>\n      {{else}}\n        <li {{#if this.current}}class=\"active\"{{/if}}>\n          <a href=\"javascript:void(0);\" data-page={{this.number}}>{{this.number}}</a>\n        </li>\n      {{/if}}\n    {{/each}}\n    <li {{#unless hasNext}}class=\"disabled\"{{/unless}}>\n      <a href='javascript:void(0);' data-page=\"next\">next</a>\n    </li>\n    <li {{#unless hasLast}}class=\"disabled\"{{/unless}}>\n      <a href='javascript:void(0);' data-page=\"last\">last</a>\n    </li>\n  </ul>\n</div>";
+      return Handlebars.compile(source)(pagination.locals);
+    };
+
+    return PaginationController;
+
+  })(Spine.Controller);
+
+}).call(this);

data/dist/spine.pagination_controller.min.js

@@ -0,0 +1,5 @@
+// spine.paginator.js
+// version: 0.1.0
+// author: vkill
+// license: MIT
+(function(){var t,s=function(t,s){return function(){return t.apply(s,arguments)}},e={}.hasOwnProperty,i=function(t,s){function i(){this.constructor=t}for(var r in s)e.call(s,r)&&(t[r]=s[r]);return i.prototype=s.prototype,t.prototype=new i,t.__super__=s.prototype,t};t=this.Spine||require("spine"),t.PaginationController=function(t){function e(){if(this.templateHtmlDataEmpty=s(this.templateHtmlDataEmpty,this),this.render=s(this.render,this),e.__super__.constructor.apply(this,arguments),null==this.constructor.MODEL)throw Error("please defined class variable MODEL");if(this.constructor.PER_PAGE=this.constructor.PER_PAGES[0],null==this.constructor.PER_PAGE)throw Error("please defined class variable PER_PAGES");this.constructor.MODEL.bind(this.constructor.PAGINATE_EVENT,this.render)}return i(e,t),e.MODEL=null,e.PER_PAGES=[10,20,30,40],e.PAGINATE_EVENT="paginate",e.PAGE=1,e.PER_PAGE=null,e.PAGINATION=null,e.refresh=function(){return this.PAGE=1,this.load()},e.toPage=function(t){return this.PAGE=t,this.load()},e.load=function(){var t;return t=this.MODEL.page(this.PAGE,{perPage:this.PER_PAGE}),this.PAGINATION=t,this.MODEL.trigger(this.PAGINATE_EVENT)},e.prototype.render=function(){var t;return t=this.constructor.PAGINATION,t.records.length>0?this.html(this.templateHtml()):this.html(this.templateHtmlDataEmpty())},e.prototype.events={"click a[data-page]":"clickPage"},e.prototype.clickPage=function(t){var s;return t.preventDefault(),s=this.getPageFromE(t),null!=s?this.constructor.toPage(s):void 0},e.prototype.getPageFromE=function(t){var s,e,i;if(s=$(t.target),s.parent(".disabled, .active").length>0)return null;switch(i=s.data("page"),e=null,i){case"first":e=this.constructor.PAGINATION.firstPage();break;case"prev":e=this.constructor.PAGINATION.currentPage()-1;break;case"next":e=this.constructor.PAGINATION.currentPage()+1;break;case"last":e=this.constructor.PAGINATION.lastPage();break;case"gap":e=null;break;default:e=i}return e},e.prototype.templateHtmlDataEmpty=function(){return""},e.prototype.templateHtml=function(){var t,s;return t=this.constructor.PAGINATION,s='<div class="pagination pagination-small pull-right">\n  <ul>\n    <li {{#unless hasFirst}}class="disabled"{{/unless}}>\n      <a href="javascript:void(0);" data-page="first">first</a>\n    </li>\n    <li {{#unless hasPrev}}class="disabled"{{/unless}}>\n      <a href="javascript:void(0);" data-page="prev">prev</a>\n    </li>\n    {{#each pages}}\n      {{#if this.gap}}\n        <li class="disabled">\n          <a href="javascript:void(0);" data-page=\'gap\'>...</a>\n        </li>\n      {{else}}\n        <li {{#if this.current}}class="active"{{/if}}>\n          <a href="javascript:void(0);" data-page={{this.number}}>{{this.number}}</a>\n        </li>\n      {{/if}}\n    {{/each}}\n    <li {{#unless hasNext}}class="disabled"{{/unless}}>\n      <a href=\'javascript:void(0);\' data-page="next">next</a>\n    </li>\n    <li {{#unless hasLast}}class="disabled"{{/unless}}>\n      <a href=\'javascript:void(0);\' data-page="last">last</a>\n    </li>\n  </ul>\n</div>',Handlebars.compile(s)(t.locals)},e}(t.Controller)}).call(this);

data/dist/spine.paginator.js

@@ -2,12 +2,19 @@
 // version: 0.1.0
 // author: vkill
 // license: MIT
-(function() {
-  var Extend, Model, Paginator, Spine;
+/*
+  Usage
+
+  data = ({name: String.fromCharCode(num)} for num in ['a'.charCodeAt(0)..'z'.charCodeAt(0)])
+  pagination = new Paginator(data, 2, {perPage: 3})
+  pagination.records
+  pagination.locals
+  pagination.buttons
+*/
 
-  Spine = this.Spine || require('spine');
 
-  Model = Spine.Model;
+(function() {
+  var Paginator, Spine, isArray;
 
   Paginator = (function() {
     Paginator.DEFAULT_PER_PAGE = 25;
@@ -22,6 +29,15 @@
 
     Paginator.RIGHT = 0;
 
+    Paginator.PAGE_TEXTS = {
+      first: 'first',
+      prev: 'prev',
+      current: 'current',
+      next: 'next',
+      last: 'last',
+      gap: 'gap'
+    };
+
     function Paginator(records, _page, options) {
       var outer_window;
 
@@ -29,6 +45,11 @@
       if (options == null) {
         options = {};
       }
+      if (!isArray(records)) {
+        records = [records];
+      }
+      this.originalRecords = records;
+      this.totalCount = this.originalRecords.length;
       this._page = parseInt(this._page);
       if (isNaN(this._page) || this._page <= 0) {
         this._page = 1;
@@ -50,8 +71,6 @@
       if (this.right === 0) {
         this.right = outer_window;
       }
-      this.originalRecords = this.cloneArray(records);
-      this.totalCount = this.originalRecords.length;
       this.skipbuildButtonsAndLocals = options.skipbuildButtonsAndLocals;
       this.records = [];
       this.buttons = [];
@@ -103,35 +122,6 @@
       return this.currentPage() >= this.lastPage();
     };
 
-    Paginator.prototype.pages = function() {
-      var currentPage, firstPage, last, lastPage, page, result, _i, _pages;
-
-      currentPage = this.currentPage();
-      firstPage = this.firstPage();
-      lastPage = this.lastPage();
-      _pages = [];
-      last = null;
-      for (page = _i = firstPage; firstPage <= lastPage ? _i <= lastPage : _i >= lastPage; page = firstPage <= lastPage ? ++_i : --_i) {
-        result = this.buildPage(page, last, currentPage, firstPage, lastPage);
-        if (result.isLeftOuter || result.isRightOuter || result.isInsideWindow) {
-          last = null;
-        } else {
-          last = 'gap';
-        }
-        _pages.push(result);
-      }
-      return _pages;
-    };
-
-    Paginator.prototype.curPage = function() {
-      var currentPage, firstPage, lastPage;
-
-      currentPage = this.currentPage();
-      firstPage = this.firstPage();
-      lastPage = this.lastPage();
-      return this.buildPage(currentPage, null, currentPage, firstPage, lastPage);
-    };
-
     Paginator.prototype.limitValue = function() {
       if (this.perPage > this.totalCount) {
         this.perPage = this.totalCount;
@@ -163,10 +153,39 @@
         isLeftOuter: page <= this.left,
         isRightOuter: (lastPage - page) < this.right,
         isInsideWindow: Math.abs(currentPage - page) <= this.window,
-        isWasTruncated: last === 'gap'
+        isWasTruncated: last === this.constructor.PAGE_TEXTS['gap']
       };
     };
 
+    Paginator.prototype.curPage = function() {
+      var currentPage, firstPage, lastPage;
+
+      currentPage = this.currentPage();
+      firstPage = this.firstPage();
+      lastPage = this.lastPage();
+      return this.buildPage(currentPage, null, currentPage, firstPage, lastPage);
+    };
+
+    Paginator.prototype.pages = function() {
+      var currentPage, firstPage, last, lastPage, page, result, _i, _pages;
+
+      currentPage = this.currentPage();
+      firstPage = this.firstPage();
+      lastPage = this.lastPage();
+      _pages = [];
+      last = null;
+      for (page = _i = firstPage; firstPage <= lastPage ? _i <= lastPage : _i >= lastPage; page = firstPage <= lastPage ? ++_i : --_i) {
+        result = this.buildPage(page, last, currentPage, firstPage, lastPage);
+        if (result.isLeftOuter || result.isRightOuter || result.isInsideWindow) {
+          last = null;
+        } else {
+          last = this.constructor.PAGE_TEXTS['gap'];
+        }
+        _pages.push(result);
+      }
+      return _pages;
+    };
+
     Paginator.prototype.buildButtonsAndLocals = function() {
       var curPage, page, pages, _buttons, _i, _len, _locals;
 
@@ -175,13 +194,13 @@
       curPage = this.curPage();
       pages = this.pages();
       if (!curPage.isFirst) {
-        _buttons.push('first');
+        _buttons.push(this.constructor.PAGE_TEXTS['first']);
         _locals.hasFirst = true;
       } else {
         _locals.hasFirst = false;
       }
       if (!curPage.isFirst) {
-        _buttons.push('prev');
+        _buttons.push(this.constructor.PAGE_TEXTS['prev']);
         _locals.hasPrev = true;
       } else {
         _locals.hasPrev = false;
@@ -191,7 +210,7 @@
         page = pages[_i];
         if (page.isLeftOuter || page.isRightOuter || page.isInsideWindow) {
           if (page.isCurrent) {
-            _buttons.push('current');
+            _buttons.push(this.constructor.PAGE_TEXTS['current']);
             _locals.pages.push({
               number: page.number,
               current: true
@@ -204,7 +223,7 @@
             });
           }
         } else if (!page.isWasTruncated) {
-          _buttons.push('gap');
+          _buttons.push(this.constructor.PAGE_TEXTS['gap']);
           _locals.pages.push({
             number: page.number,
             gap: true
@@ -212,13 +231,13 @@
         }
       }
       if (!curPage.isLast) {
-        _buttons.push('next');
+        _buttons.push(this.constructor.PAGE_TEXTS['next']);
         _locals.hasNext = true;
       } else {
         _locals.hasNext = false;
       }
       if (!curPage.isLast) {
-        _buttons.push('last');
+        _buttons.push(this.constructor.PAGE_TEXTS['last']);
         _locals.hasLast = true;
       } else {
         _locals.hasLast = false;
@@ -233,39 +252,58 @@
       return this.locals = _locals;
     };
 
-    Paginator.prototype.cloneArray = function(array) {
-      var value, _i, _len, _results;
-
-      _results = [];
-      for (_i = 0, _len = array.length; _i < _len; _i++) {
-        value = array[_i];
-        _results.push(value.clone());
-      }
-      return _results;
-    };
-
     return Paginator;
 
   })();
 
-  Extend = {
-    _perPaginateRecords: function() {
-      return this.records;
-    },
-    page: function(n, options) {
-      if (options == null) {
-        options = {};
-      }
-      return new Paginator(this._perPaginateRecords(), n, options);
-    }
-  };
-
-  Model.Paginator = {
-    extended: function() {
-      return this.extend(Extend);
-    }
+  isArray = function(value) {
+    return Object.prototype.toString.call(value) === '[object Array]';
   };
 
-  Spine.Paginator = Paginator;
+  Paginator.isArray = isArray;
+
+  if (this.MyPaginatorName != null) {
+    this[this.MyPaginatorName] = Paginator;
+  }
+
+  if (this.Spine != null) {
+    /*
+    # Spine Usage
+    
+    App = {}
+    
+    class App.User extends Spine.Model
+      @configure 'User', 'name' 
+      @extend Spine.Model.Paginator
+    
+    data = ({name: String.fromCharCode(num)} for num in ['a'.charCodeAt(0)..'z'.charCodeAt(0)])
+    
+    App.User.refresh(data)
+    pagination = App.User.page(2).per(5) #or App.User.page(2, {perPage: 5})
+    pagination.records
+    pagination.locals
+    pagination.buttons
+    App.User.PAGINATION = pagination
+    */
+
+    Paginator.SpineModelExtend = {
+      page: function(n, options) {
+        if (options == null) {
+          options = {};
+        }
+        return new Paginator(this._perPaginateRecords(), n, options);
+      },
+      _perPaginateRecords: function() {
+        return this.all();
+      }
+    };
+    Spine = this.Spine;
+    Spine.Paginator = Paginator;
+    Spine.Model.Paginator = {
+      extended: function() {
+        return this.extend(Paginator.SpineModelExtend);
+      }
+    };
+  }
 
 }).call(this);