From 7f5f0f2cc89cbf0eb106264ca7fee3c48bea9994 Mon Sep 17 00:00:00 2001
From: William Dibbern <gotdibbs@outlook.com>
Date: Sun, 15 Sep 2013 18:34:23 -0500
Subject: [PATCH] Infinite Scroll Pagination for content screen

Fixes #258

- Modified post collection to have default values for paging.
- Added scroll handler to content view to check for more posts and load
as appropriate.
- Sanitized result from server-side post paging, ensure page # is
returned as an integer.
- Added a functional test stub.
---
 ghost/admin/models/post.js |  7 +++++
 ghost/admin/views/blog.js  | 54 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/ghost/admin/models/post.js b/ghost/admin/models/post.js
index 97de7d5c7e..91fd1d3009 100644
--- a/ghost/admin/models/post.js
+++ b/ghost/admin/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;
diff --git a/ghost/admin/views/blog.js b/ghost/admin/views/blog.js
index dc1c1b7436..158a3d37fe 100644
--- a/ghost/admin/views/blog.js
+++ b/ghost/admin/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);