Added infinite scroll

biomed-frontend/bower.json

@@ -14,6 +14,7 @@
     "imagesloaded": "~3.1.8",
     "jquery-colorbox": "~1.5.14",
     "angular-foundation": "~0.4.0",
-    "font-awesome": "~4.3.0"
+    "font-awesome": "~4.3.0",
+    "ngInfiniteScroll": "~1.2.0"
   }
 }

biomed-frontend/gulpfile.js

@@ -36,7 +36,8 @@ gulp.task('vendor', function() {
             'vendor/masonry/dist/masonry.pkgd.js',
             'vendor/angular-masonry/angular-masonry.js',
             'vendor/imagesloaded/imagesloaded.pkgd.js',
-            'vendor/jquery-colorbox/jquery.colorbox.js'
+            'vendor/jquery-colorbox/jquery.colorbox.js',
+            'vendor/ngInfiniteScroll/build/ng-infinite-scroll.js'
         ])
         .pipe(sourcemaps.init({loadMaps: true}))
         .pipe(concat('vendor.js'))

biomed-frontend/src/app/index.js

@@ -4,7 +4,8 @@ angular.module('biomed-frontend', [
     'ngResource',
     'angular-loading-bar',
     'wu.masonry',
-    'mm.foundation'
+    'mm.foundation',
+    'infinite-scroll'
 ])
 .factory('Posts', function($resource) {
 	return $resource('/api/v1/posts/:_id',
@@ -23,28 +24,42 @@ angular.module('biomed-frontend', [
         .state('site.list', {
             url: '/',
             templateUrl: 'app/list.html',
-            resolve: {
+            controller: function($scope, $timeout, $sce, $location, $anchorScroll, Posts) {
-                posts: function(Posts) {
-                    return Posts.query({
-                        'status': 'posted',
-                        'sort': '-postedOn',
-                    }).$promise;
-                }
-            },
-            controller: function($scope, posts, $timeout, $sce, $location, $anchorScroll) {
                 $scope.posts = [];
 
-                angular.forEach(posts, function(post) {
+                var deferred = false;
-                    if (post.previewHtml) {
+                var more = true;
-                        post.previewHtml = $sce.trustAsHtml(post.previewHtml);
-                    }
 
-                    $scope.posts.push(post);
+                var loadNextPage = function() {
-                });
+                    if (more && (!deferred || deferred.$resolved)) {
+                        var query = {
+                            'status': 'posted',
+                            'sort': '-postedOn',
+                            'limit': 10,
+                            'skip': $scope.posts.length
+                        };
+
+                        deferred = Posts.query(query, function(posts) {
+                            more = posts.length > 0;
+
+                            angular.forEach(posts, function(post) {
+                                if (post.previewHtml) {
+                                    post.previewHtml = $sce.trustAsHtml(post.previewHtml);
+                                }
+
+                                $scope.posts.push(post);
+                            });
+                        });
+                    }
+                }
 
                 $scope.showMore = function(post) {
                     return post.details || post.gallery.length > 0;
                 }
+
+                $scope.addMoreItems = function() {
+                    loadNextPage();
+                }
             }
         })
         .state('site.details', {

biomed-frontend/src/app/list.html

@@ -1,4 +1,4 @@
-<div class="masonry-container" masonry preserve-order masonry-options="{isFitWidth: true}">
+<div class="masonry-container" masonry preserve-order masonry-options="{isFitWidth: true}" infinite-scroll="addMoreItems()" infinite-scroll-distance="2">
 	<div ng-repeat="post in posts" class="masonry-brick">
 		<div class="box col3">
 			<div class="thumbnail">