implement autopaging and proper loading symbols fix #45 and #26

css/items.css

@@ -25,6 +25,15 @@
 	height: 100%;
 }
 
+#app-content.autopaging:after {
+	content: '';
+	background-image: url('%webroot%/core/img/loading.gif');
+	background-position: center;
+	background-repeat: no-repeat;
+	display: block;
+	height: 100%;
+}
+
 #app-content.loading {
 	background-image: url('%webroot%/core/img/loading.gif');
 	background-position: center;

js/app/controllers/itemcontroller.coffee

@@ -23,14 +23,15 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 
 angular.module('News').controller 'ItemController',
 ['$scope', 'ItemBusinessLayer', 'FeedModel', 'FeedLoading', 'FeedBusinessLayer',
-'Language',
+'Language', 'AutoPageLoading',
 ($scope, ItemBusinessLayer, FeedModel, FeedLoading, FeedBusinessLayer,
-Language) ->
+Language, AutoPageLoading) ->
 
 	class ItemController
 
-		constructor: (@_$scope, @_itemBusinessLayer, @_feedModel, @_feedLoading,
-		              @_feedBusinessLayer, @_language) ->
+		constructor: (@_$scope, @_itemBusinessLayer, @_feedModel,
+		              @_feedLoading, @_autoPageLoading, @_feedBusinessLayer,
+		              @_language) ->
 			@_autoPaging = true
 
 			@_$scope.itemBusinessLayer = @_itemBusinessLayer
@@ -40,6 +41,9 @@ Language) ->
 			@_$scope.isLoading = =>
 				return @_feedLoading.isLoading()
 
+			@_$scope.isAutoPaging = =>
+				return @_autoPageLoading.isLoading()
+
 			@_$scope.getFeedTitle = (feedId) =>
 				feed = @_feedModel.getById(feedId)
 				if angular.isDefined(feed)
@@ -67,5 +71,5 @@ Language) ->
 
 
 	return new ItemController($scope, ItemBusinessLayer, FeedModel, FeedLoading,
-	                          FeedBusinessLayer, Language)
+	                          AutoPageLoading, FeedBusinessLayer, Language)
 ]

js/public/app.js

@@ -439,17 +439,18 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 
 (function() {
   angular.module('News').controller('ItemController', [
-    '$scope', 'ItemBusinessLayer', 'FeedModel', 'FeedLoading', 'FeedBusinessLayer', 'Language', function($scope, ItemBusinessLayer, FeedModel, FeedLoading, FeedBusinessLayer, Language) {
+    '$scope', 'ItemBusinessLayer', 'FeedModel', 'FeedLoading', 'FeedBusinessLayer', 'Language', 'AutoPageLoading', function($scope, ItemBusinessLayer, FeedModel, FeedLoading, FeedBusinessLayer, Language, AutoPageLoading) {
       var ItemController;
 
       ItemController = (function() {
-        function ItemController(_$scope, _itemBusinessLayer, _feedModel, _feedLoading, _feedBusinessLayer, _language) {
+        function ItemController(_$scope, _itemBusinessLayer, _feedModel, _feedLoading, _autoPageLoading, _feedBusinessLayer, _language) {
           var _this = this;
 
           this._$scope = _$scope;
           this._itemBusinessLayer = _itemBusinessLayer;
           this._feedModel = _feedModel;
           this._feedLoading = _feedLoading;
+          this._autoPageLoading = _autoPageLoading;
           this._feedBusinessLayer = _feedBusinessLayer;
           this._language = _language;
           this._autoPaging = true;
@@ -458,6 +459,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
           this._$scope.isLoading = function() {
             return _this._feedLoading.isLoading();
           };
+          this._$scope.isAutoPaging = function() {
+            return _this._autoPageLoading.isLoading();
+          };
           this._$scope.getFeedTitle = function(feedId) {
             var feed;
 
@@ -491,7 +495,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
         return ItemController;
 
       })();
-      return new ItemController($scope, ItemBusinessLayer, FeedModel, FeedLoading, FeedBusinessLayer, Language);
+      return new ItemController($scope, ItemBusinessLayer, FeedModel, FeedLoading, AutoPageLoading, FeedBusinessLayer, Language);
     }
   ]);
 

templates/main.php

@@ -37,7 +37,10 @@
 
 	</div>
 
-	<div id="app-content" ng-class="{loading: isLoading()}"
+	<div id="app-content" ng-class="{
+			loading: isLoading(),
+			autopaging: isAutoPaging()
+		}"
 		ng-controller="ItemController" 
 		news-item-scroll
 		item-shortcuts>