Merge pull request #757 from gotdibbs/Issue258

Infinite Scroll Pagination for content screen

core/client/models/post.js

@@ -44,8 +44,15 @@
     });
 
     Ghost.Collections.Posts = Backbone.Collection.extend({
+        currentPage: 1,
+        totalPages: 0,
+        totalPosts: 0,
+        nextPage: 0,
+        prevPage: 0,
+
         url: Ghost.settings.apiRoot + '/posts',
         model: Ghost.Models.Post,
+
         parse: function (resp) {
             if (_.isArray(resp.posts)) {
                 this.limit = resp.limit;

core/client/views/blog.js

@@ -20,6 +20,8 @@
     // -----------------------
     ContentList = Ghost.View.extend({
 
+        isLoading: false,
+
         events: {
             'click .content-list-content'    : 'scrollHandler'
         },
@@ -27,15 +29,67 @@
         initialize: function (options) {
             this.$('.content-list-content').scrollClass({target: '.content-list', offset: 10});
             this.listenTo(this.collection, 'remove', this.showNext);
+            // Can't use backbone event bind (see: http://stackoverflow.com/questions/13480843/backbone-scroll-event-not-firing)
+            this.$('.content-list-content').scroll($.proxy(this.checkScroll, this));
         },
 
         showNext: function () {
+            if (this.isLoading) { return; }
             var id = this.collection.at(0).id;
             if (id) {
                 Backbone.trigger('blog:activeItem', id);
             }
         },
 
+        reportLoadError: function (response) {
+            var message = 'A problem was encountered while loading more posts';
+
+            if (response) {
+                // Get message from response
+                message += '; ' + Ghost.Views.Utils.getRequestErrorMessage(response);
+            } else {
+                message += '.';
+            }
+
+            Ghost.notifications.addItem({
+                type: 'error',
+                message: message,
+                status: 'passive'
+            });
+        },
+
+        checkScroll: function (event) {
+            var self = this,
+                element = event.target,
+                triggerPoint = 100;
+
+            // If we haven't passed our threshold, exit
+            if (this.isLoading || (element.scrollTop + element.clientHeight + triggerPoint <= element.scrollHeight)) {
+                return;
+            }
+
+            // If we've loaded the max number of pages, exit
+            if (this.collection.currentPage >=  this.collection.totalPages) {
+                return;
+            }
+
+            // Load moar posts!
+            this.isLoading = true;
+
+            this.collection.fetch({
+                data: {
+                    status: 'all',
+                    page: (self.collection.currentPage + 1),
+                    orderBy: ['updated_at', 'DESC']
+                }
+            }).then(function onSuccess(response) {
+                self.render();
+                self.isLoading = false;
+            }, function onError(e) {
+                self.reportLoadError(e);
+            });
+        },
+
         render: function () {
             this.collection.each(function (model) {
                 this.$('ol').append(this.addSubview(new ContentItem({model: model})).render().el);

core/server/models/post.js

@@ -259,7 +259,7 @@ Post = GhostBookshelf.Model.extend({
                     var totalPosts = resp[0].aggregate,
                         data = {
                             posts: collection.toJSON(),
-                            page: opts.page,
+                            page: parseInt(opts.page, 10),
                             limit: opts.limit,
                             pages: Math.ceil(totalPosts / opts.limit),
                             total: totalPosts

core/test/functional/admin/04_content_test.js

@@ -44,6 +44,20 @@ casper.test.begin("Content screen is correct", 17, function suite(test) {
 //        casper.clickLabel(testPost.title, "h3");
 //    });
 
+    casper.run(function () {
+        test.done();
+    });
+});
+
+casper.test.begin('Infinite scrolling', 1, function suite(test) {
+    test.filename = 'content_infinite_scrolling_test.png';
+
+    // Placeholder for infinite scrolling/pagination tests (will need to setup 16+ posts).
+
+    casper.start(url + "ghost/content/", function testTitleAndUrl() {
+        test.assertTitle("", "Ghost admin has no title");
+    }).viewport(1280, 1024);
+
     casper.run(function () {
         test.done();
     });