Infinite paging, first pass WIP

Author: bruno-c

Gruntfile.js

@@ -63,7 +63,8 @@ module.exports = function (grunt) {
           "src/header.js",
           "src/body.js",
           "src/footer.js",
-          "src/grid.js"
+          "src/grid.js",
+          "src/container.js"
         ],
         dest: "lib/backgrid.js"
       }

lib/backgrid.js

@@ -2,7 +2,7 @@
   backgrid
   http://github.com/wyuenho/backgrid
 
-  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors <[email protected]>
+  Copyright (c) 2014 Jimmy Yuen Ho Wong and contributors <[email protected]>
   Licensed under the MIT license.
 */
 
@@ -2872,5 +2872,79 @@ var Grid = Backgrid.Grid = Backbone.View.extend({
   }
 
 });
-return Backgrid;
+
+/*
+  backgrid
+  http://github.com/wyuenho/backgrid
+
+  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Licensed under the MIT license.
+*/
+
+var Container = Backgrid.Container = Backbone.View.extend({
+  events: {
+    "scroll": "onScroll"
+  },
+
+  /** @property */
+  prefetch: 1,
+
+  /** @property */
+  throttle: 200,
+
+  /** @property */
+  tagName: "div",
+
+  /** @property */
+  className: "backgrid-container",
+
+  initialize: function (options) {
+    if (!options.grid) throw "grid is a mandatory options for Backgrid.Container";
+
+    this.height = options.height || 200;
+    this.throttle = options.throttle || this.throttle;
+    this.grid = options.grid;
+    this.onScroll = _.debounce(_.bind(this.onScroll, this), this.throttle);
+    this.indicator = $("<h1>HEY I'M LOADING OVER HERE</h1>").hide();
+
+    this.listenTo(this.grid.collection.pageableCollection, "request", this.onRequest);
+  },
+
+  onScroll: function (e) {
+    var top = e.target.scrollTop,
+        prefetch = this.prefetch,
+        maxScrollTop = e.target.scrollHeight - this.$el.height(),
+        collection = this.grid.collection.pageableCollection,
+        indicator = this.indicator,
+        next;
+
+    if (top >= maxScrollTop) {
+      if (next = collection.getNextPage({
+        scrolling: true
+      })) {
+        next.then(function() {
+          prefetch && collection.hasNext() && collection.getNextPage({
+            scrolling: true
+          });
+        }).always(function() {
+          indicator.hide();
+        });
+      }
+    }
+  },
+
+  onRequest: function (collection, xhr, options) {
+    if (options.scrolling) this.indicator.show();
+  },
+
+  render: function () {
+    this.grid.render().$el.appendTo(this.$el.css({
+      height: this.height + "px",
+      overflow: "scroll"
+    }));
+    this.indicator.detach().appendTo(this.grid.footer.el);
+    this.delegateEvents();
+    return this;
+  }
+});return Backgrid;
 }));

lib/backgrid.min.js

@@ -0,0 +1,74 @@
+/*
+  backgrid
+  http://github.com/wyuenho/backgrid
+
+  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Licensed under the MIT license.
+*/
+
+var Container = Backgrid.Container = Backbone.View.extend({
+  events: {
+    "scroll": "onScroll"
+  },
+
+  /** @property */
+  prefetch: 1,
+
+  /** @property */
+  throttle: 200,
+
+  /** @property */
+  tagName: "div",
+
+  /** @property */
+  className: "backgrid-container",
+
+  initialize: function (options) {
+    if (!options.grid) throw "grid is a mandatory options for Backgrid.Container";
+
+    this.height = options.height || 200;
+    this.throttle = options.throttle || this.throttle;
+    this.grid = options.grid;
+    this.onScroll = _.debounce(_.bind(this.onScroll, this), this.throttle);
+    this.indicator = $("<h1>HEY I'M LOADING OVER HERE</h1>").hide();
+
+    this.listenTo(this.grid.collection.pageableCollection, "request", this.onRequest);
+  },
+
+  onScroll: function (e) {
+    var top = e.target.scrollTop,
+        prefetch = this.prefetch,
+        maxScrollTop = e.target.scrollHeight - this.$el.height(),
+        collection = this.grid.collection.pageableCollection,
+        indicator = this.indicator,
+        next;
+
+    if (top >= maxScrollTop) {
+      if (next = collection.getNextPage({
+        scrolling: true
+      })) {
+        next.then(function() {
+          prefetch && collection.hasNext() && collection.getNextPage({
+            scrolling: true
+          });
+        }).always(function() {
+          indicator.hide();
+        });
+      }
+    }
+  },
+
+  onRequest: function (collection, xhr, options) {
+    if (options.scrolling) this.indicator.show();
+  },
+
+  render: function () {
+    this.grid.render().$el.appendTo(this.$el.css({
+      height: this.height + "px",
+      overflow: "scroll"
+    }));
+    this.indicator.detach().appendTo(this.grid.footer.el);
+    this.delegateEvents();
+    return this;
+  }
+});

src/container.js

@@ -0,0 +1,66 @@
+/*
+  backgrid
+  http://github.com/wyuenho/backgrid
+
+  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
+  Licensed under the MIT license.
+*/
+describe("A Container", function () {
+  var Book = Backbone.Model.extend({});
+  var Books = Backbone.Collection.extend({
+    model: Book
+  });
+
+  var books;
+  var grid;
+  var container;
+
+  beforeEach(function () {
+    books = new Books([{
+      id: 1,
+      title: "Alice's Adventures in Wonderland"
+    }, {
+      id: 2,
+      title: "A Tale of Two Cities"
+    }, {
+      id: 3,
+      title: "The Catcher in the Rye"
+    }]);
+
+    grid = new Backgrid.Grid({
+      columns: [{
+        name: "title",
+        cell: "string"
+      }],
+      collection: books,
+      footer: Backgrid.Footer
+    });
+
+    container = new Backgrid.Container({
+      grid: grid
+    });
+  });
+
+  it("throws if the grid isn't passed as an option", function () {
+    expect(function(){
+      new Backgrid.Container({});
+    }).toThrow("grid is a mandatory options for Backgrid.Container");
+  });
+
+  it("renders the grid within it when rendered", function () {
+    spyOn(grid, "trigger");
+    spyOn(grid.header, "render").andCallThrough();
+    spyOn(grid.footer, "render").andCallThrough();
+    spyOn(grid.body, "render").andCallThrough();
+
+    container.render();
+
+    expect(grid.el.tagName).toBe("TABLE");
+    expect(grid.header.render.calls.length).toBe(1);
+    expect(grid.footer.render.calls.length).toBe(1);
+    expect(grid.body.render.calls.length).toBe(1);
+    expect(grid.trigger.calls.length).toBe(1);
+    expect(grid.trigger).toHaveBeenCalledWith("backgrid:rendered", grid);
+  });
+
+});

test/container.js

@@ -3,17 +3,17 @@
   <head>
     <meta charset="utf-8">
     <title>Backgrid.js Jasmine Spec Runner</title>
-    
+
     <link rel="stylesheet" type="text/css" href="vendor/css/jasmine.css">
     <script src="vendor/js/jasmine.js"></script>
     <script src="vendor/js/jasmine-html.js"></script>
-    
+
     <script src="vendor/js/jquery.js"></script>
     <script src="vendor/js/underscore.js"></script>
     <script src="vendor/js/backbone.js"></script>
     <script src="vendor/js/backbone-pageable.js"></script>
     <script src="../lib/backgrid.js"></script>
-    
+
     <script src="preamble.js"></script>
     <script src="column.js"></script>
     <script src="formatter.js"></script>
@@ -22,7 +22,8 @@
     <script src="body.js"></script>
     <script src="header.js"></script>
     <script src="grid.js"></script>
-    
+    <script src="container.js"></script>
+
     <script>
       (function () {
         var jasmineEnv = jasmine.getEnv();
@@ -41,9 +42,9 @@
         });
       }());
     </script>
-    
+
   </head>
-  
+
   <body>
   </body>
 </html>