timeline more; spinner; common update;

assets/style/timeline.scss

@@ -167,4 +167,31 @@
       }
     }
   }
+}
+
+.timeline-end{
+  width: 50%;
+  margin: 0 auto;
+  text-align: center;
+
+  button.more{
+    position: relative;
+    top: -2px;
+
+    width: 100px;
+    height: 40px;
+    border: 2px solid black;
+    padding: 0 10px;
+    background: none;
+
+    font-size: 14pt;
+
+    &:hover{
+      background: gainsboro;
+    }
+
+    &:active{
+      top: 0;
+    }
+  }
 }

bower.json

@@ -25,6 +25,7 @@
     "angular-route": "~1.3.3",
     "angular-animate": "~1.3.3",
     "angular": "~1.3.3",
-    "angulartics": "~0.17.2"
+    "angulartics": "~0.17.2",
+    "angular-spinner": "~0.6.1"
   }
 }

client/api/news.js

@@ -2,12 +2,14 @@
  * Created by tmshv on 22/11/14.
  */
 
+var query = require("../../utils/net").query;
+
 function APIFeed(http){
     this.request = http;
 }
 
-APIFeed.prototype.feed = function() {
-    return this.request.get("/news");
+APIFeed.prototype.feed = function(count, portion) {
+    return this.request.get("/news?"+query([["count", count], ["portion", portion]]));
 };
 
 module.exports = APIFeed;

client/app.js

@@ -6,7 +6,8 @@ var app = angular.module("hudozhka", [
     "hudozhka.data",
     "ngRoute",
     "angulartics",
-    "angulartics.google.analytics"
+    "angulartics.google.analytics",
+    "angularSpinner"
 ]);
 
 app.config(function ($locationProvider, $routeProvider) {

client/ui/timeline.js

@@ -38,34 +38,60 @@ module.exports = function(app) {
                     return index % 2 === 1;
                 }
             },
-            controller: function($scope, api){
+            controller: function($scope, $timeout, usSpinnerService, api){
+                var portion = 0;
+                var count = 10;
+                $scope.feed = [];
+
+                $scope.timelineUpdating = false;
+                usSpinnerService.stop("timelineMore");
+                //usSpinnerService.spin("timelineMore");
+
                 $scope.recordClass = function (i) {
                     return i['type'];
                 };
 
-                api.news.feed()
-                    .success(function (list) {
-                        var feed = list.map(function (post) {
-                            if(post.type == "instagram"){
-                                var author_id = personByInstagram(team.team, post.data.author);
-                                var name = author_id ? team.short(author_id) : post.data.author;
+                $scope.loadNext = function () {
+                    $scope.timelineUpdating = true;
+                    usSpinnerService.spin("timelineMore");
 
-                                return {
-                                    date: post.date,
-                                    image: post.data.image.standard_resolution.url,
-                                    url: post.data.url,
-                                    username: name,
-                                    //userpic: post.data.user.profile_picture,
-                                    text: post.body,
-                                    //text: postText(post),
-                                    type: post.type
-                                };
-                            }else{
-                                return post;
-                            }
+                    api.news.feed(count, portion)
+                        .error(function(error) {
+                            console.log(error);
+                        })
+                        .success(function (list) {
+                            $scope.timelineUpdating = false;
+                            usSpinnerService.stop("timelineMore");
+                            //$timeout(function () {
+                            //
+                            //}, 5000);
+
+                            var feed = list.map(function (post) {
+                                if(post.type == "instagram"){
+                                    var author_id = personByInstagram(team.team, post.data.author);
+                                    var name = author_id ? team.short(author_id) : post.data.author;
+
+                                    return {
+                                        date: post.date,
+                                        image: post.data.image.standard_resolution.url,
+                                        url: post.data.url,
+                                        username: name,
+                                        //userpic: post.data.user.profile_picture,
+                                        text: post.body,
+                                        //text: postText(post),
+                                        type: post.type
+                                    };
+                                }else{
+                                    return post;
+                                }
+                            });
+
+                            portion++;
+                            $scope.feed = $scope.feed.concat(feed);
                         });
-                        $scope.feed = feed;
-                    });
+                };
+
+                $scope.loadNext();
             }
         };
     });
@@ -81,7 +107,6 @@ module.exports = function(app) {
         }
 
         function linkGram(scope, element, attrs) {
-            scope.lal = "LAL";
         }
 
         return {

templates/index.html

@@ -18,6 +18,8 @@
     <script src="/bower_components/angular-animate/angular-animate.min.js"></script>
     <script src="/bower_components/angulartics/dist/angulartics.min.js"></script>
     <script src="/bower_components/angulartics/dist/angulartics-ga.min.js"></script>
+    <script src="/bower_components/spin.js/spin.js"></script>
+    <script src="/bower_components/angular-spinner/angular-spinner.min.js"></script>
 
     <link rel="stylesheet" href="/bower_components/fotorama/fotorama.css">
     <script src="/bower_components/fotorama/fotorama.js"></script>

templates/views/timeline.html

@@ -1,8 +1,16 @@
 <div class="timeline">
     <timeline-record class="timeline-record {{recordClass(post)}}"
                      content="post"
-                     ng-repeat="post in feed"
+                     ng-repeat="post in feed track by $index"
                      ng-class="{left: isEven($index), right: !isEven($index)}">
 
     </timeline-record>
+    <div class="timeline-end">
+        <button class="more"
+                ng-click="loadNext()"
+                ng-disabled="timelineUpdating">
+            <span us-spinner="{radius:5, width:4, length: 4}" spinner-key="timelineMore"></span>
+            <span ng-hide="timelineUpdating">Ещё</span>
+        </button>
+    </div>
 </div>

utils/net.js

@@ -0,0 +1,15 @@
+/**
+ * Created by tmshv on 08/03/15.
+ */
+
+module.exports = {
+    query: function(list){
+        var params = list.reduce(function (query, param) {
+                var q = param[0] + "=" + param[1];
+                query.push(q);
+                return query;
+            }, [])
+            .join("&");
+        return params
+    }
+};