Fix #120 Detachable paginator

cloudflarearchive · Apr 23, 2013 · 1c63f51 · 1c63f51
1 parent cb754da
commit 1c63f51
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 66 deletions.
diff --git a/src/extensions/paginator/backgrid-paginator.css b/src/extensions/paginator/backgrid-paginator.css
@@ -6,25 +6,25 @@
   Licensed under the MIT @license.
 */
 
-.backgrid .paginator td {
+.backgrid.paginator {
   margin: 20px 0;
   text-align: center;
 }
 
-.backgrid .paginator ul {
+.backgrid.paginator ul {
   display: inline-block;
   *display: inline;
   margin-bottom: 0;
   margin-left: 0;
   *zoom: 1;
 }
 
-.backgrid .paginator ul > li {
+.backgrid.paginator ul > li {
   display: inline;
 }
 
-.backgrid .paginator ul > li > a,
-.backgrid .paginator ul > li > span {
+.backgrid.paginator ul > li > a,
+.backgrid.paginator ul > li > span {
   float: left;
   width: 30px;
   height: 30px;
@@ -33,21 +33,21 @@
   text-decoration: none;
 }
 
-.backgrid .paginator ul > li > a:hover,
-.backgrid .paginator ul > .active > a,
-.backgrid .paginator ul > .active > span {
+.backgrid.paginator ul > li > a:hover,
+.backgrid.paginator ul > .active > a,
+.backgrid.paginator ul > .active > span {
   background-color: #f5f5f5;
 }
 
-.backgrid .paginator ul > .active > a,
-.backgrid .paginator ul > .active > span {
+.backgrid.paginator ul > .active > a,
+.backgrid.paginator ul > .active > span {
   color: #999999;
   cursor: default;
 }
 
-.backgrid .paginator ul > .disabled > span,
-.backgrid .paginator ul > .disabled > a,
-.backgrid .paginator ul > .disabled > a:hover {
+.backgrid.paginator ul > .disabled > span,
+.backgrid.paginator ul > .disabled > a,
+.backgrid.paginator ul > .disabled > a:hover {
   color: #999999;
   cursor: default;
 }
diff --git a/src/extensions/paginator/backgrid-paginator.js b/src/extensions/paginator/backgrid-paginator.js
@@ -11,24 +11,28 @@
   "use strict";
 
   /**
-     Paginator is a Footer element that re-renders a large result set in a table
-     by splitting it across multiple pages. If the result set is still larger,
-     the page handles are rendered within a sliding window, with 10 indexed page
-     handles each by default, plus the fast forward, fast backward, previous and
+     Paginator is a Backgrid extension that renders a series of configurable
+     pagination handles. This extension is best used for splitting a large data
+     set across multiple pages. If the number of pages is larger then a
+     threshold, which is set to 10 by default, the page handles are rendered
+     within a sliding window, plus the fast forward, fast backward, previous and
      next page handles. The fast forward, fast backward, previous and next page
      handles can be turned off.
 
      @class Backgrid.Extension.Paginator
   */
-  Backgrid.Extension.Paginator = Backgrid.Footer.extend({
+  Backgrid.Extension.Paginator = Backbone.View.extend({
 
     /** @property */
-    className: "paginator",
+    className: "backgrid paginator",
 
     /** @property */
     windowSize: 10,
 
-    /** @property */
+    /**
+       @property {Object} fastForwardHandleLabels You can disable specific
+       handles by setting its value to `null`.
+    */
     fastForwardHandleLabels: {
       first: "《",
       prev: "〈",
@@ -37,7 +41,7 @@
     },
 
     /** @property */
-    template: _.template('<tr><td colspan="<%= colspan %>"><ul><% _.each(handles, function (handle) { %><li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>><a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a></li><% }); %></ul></td></tr>'),
+    template: _.template('<ul><% _.each(handles, function (handle) { %><li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>><a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a></li><% }); %></ul>'),
 
     /** @property */
     events: {
@@ -54,7 +58,13 @@
        @param {boolean} [options.fastForwardHandleLabels] Whether to render fast forward buttons.
     */
     initialize: function (options) {
-      Backgrid.Footer.prototype.initialize.call(this, options);
+      Backgrid.requireOptions(options, ["columns", "collection"]);
+
+      this.columns = options.columns;
+      if (!(this.columns instanceof Backbone.Collection)) {
+        this.columns = new Backgrid.Columns(this.columns);
+      }
+
       var columns = this.columns;
       this.listenTo(columns, "add", this.render);
       this.listenTo(columns, "remove", this.render);
@@ -179,19 +189,11 @@
        cell that spans all the columns.
     */
     render: function () {
-
       this.$el.empty();
 
-      var colspan = _.reduce(
-        this.columns.pluck("renderable"),
-        function (accum, renderable) {
-          return renderable ? accum + 1 : accum;
-        }, 0);
-
-      this.$el.append($(this.template({
-        colspan: colspan,
+      this.$el.append(this.template({
         handles: this.makeHandles()
-      })));
+      }));
 
       this.delegateEvents();
 

diff --git a/test/extensions/paginator.js b/test/extensions/paginator.js
@@ -35,23 +35,6 @@ describe("A Paginator", function () {
       paginator.render();
     });
 
-    it("renders a cell with the right column span", function () {
-      expect(paginator.el.tagName).toBe("TFOOT");
-      expect(paginator.$el.find("tr > td[colspan=1]").length).toBe(1);
-
-      paginator.columns.add({name: "year", cell: "integer"});
-      expect(paginator.$el.find("tr > td[colspan=2]").length).toBe(1);
-
-      paginator.columns.remove(paginator.columns.last());
-      expect(paginator.$el.find("tr > td[colspan=1]").length).toBe(1);
-
-      paginator.columns.add({name: "price", cell: "number", renderable: false});
-      expect(paginator.$el.find("tr > td[colspan=1]").length).toBe(1);
-
-      paginator.columns.last().set("renderable", true);
-      expect(paginator.$el.find("tr > td[colspan=2]").length).toBe(1);
-    });
-
     it("has page handles that go to the correct pages when clicked", function () {
       paginator.$el.find("a").eq("3").click();
       expect(books.state.currentPage).toBe(2);
@@ -156,23 +139,6 @@ describe("A Paginator", function () {
       paginator.render();
     });
 
-    it("renders a cell with the right column span", function () {
-      expect(paginator.el.tagName).toBe("TFOOT");
-      expect(paginator.$el.find("tr > td[colspan=1]").length).toBe(1);
-
-      paginator.columns.add({name: "year", cell: "integer"});
-      expect(paginator.$el.find("tr > td[colspan=2]").length).toBe(1);
-
-      paginator.columns.remove(paginator.columns.last());
-      expect(paginator.$el.find("tr > td[colspan=1]").length).toBe(1);
-
-      paginator.columns.add({name: "price", cell: "number", renderable: false});
-      expect(paginator.$el.find("tr > td[colspan=1]").length).toBe(1);
-
-      paginator.columns.last().set("renderable", true);
-      expect(paginator.$el.find("tr > td[colspan=2]").length).toBe(1);
-    });
-
     it("has page handles that go to the correct pages when clicked", function () {
       paginator.windowSize = 1;
       paginator.render();