timeline update: ES6, components, refactoring, other

src/client/app.js

@@ -8,6 +8,10 @@ import Document from './components/Document';
 import Award from './components/Award';
 import GalleryItem from './components/GalleryItem';
 import TeamMemberProfile from './components/TeamMemberProfile';
+import Timeline from './components/Timeline';
+import TimelineRecord from './components/TimelineRecord';
+import TimelineRecordPost from './components/TimelineRecordPost';
+import TimelineRecordInstagram from './components/TimelineRecordInstagram';
 import AppController from './controllers/AppController';
 import HomeController from './controllers/HomeController';
 import ScheduleController from './controllers/ScheduleController';
@@ -106,9 +110,12 @@ app.run(($location, $rootScope, $http) => {
     RemoveNewline,
     Strip,
     UppercaseFirst,
-    require('./ui/timeline'),
     MainMenu,
     Breadcrumbs,
+    Timeline,
+    TimelineRecord,
+    TimelineRecordPost,
+    TimelineRecordInstagram,
     Document,
     Award,
     GalleryItem,

src/client/components/Timeline.js

@@ -0,0 +1,128 @@
+import template from '../../templates/components/timeline.html';
+
+function personByInstagram(list, instagram){
+    list = list.filter(function (member) {
+        try {
+            return member.contacts.instagram === instagram;
+        } catch (error) {
+            return false;
+        }
+    });
+
+    if(list.length){
+        return list[0].id;
+    }else{
+        return null;
+    }
+}
+
+function postText(post){
+    try{
+        return post.data.caption.text.replace(/#[\w_]+/, '')
+    }catch(error){
+        return "";
+    }
+}
+
+export default function(app) {
+    app.component('timeline', {
+        template: template,
+        controller: function($timeout, usSpinnerService, io, api, team){
+            let portion = 0;
+            let count = 10;
+            this.feed = [];
+
+            this.timelineUpdating = false;
+            usSpinnerService.stop('timelineMore');
+            //usSpinnerService.spin("timelineMore");
+
+            function toInstagram(post){
+                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: 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/11357496_464997000344800_2124591831_a.jpg',
+                    text: post.body,
+                    //text: postText(post),
+                    type: post.type
+                };
+            }
+
+            this.showFooter = () => this.feed && this.feed.length;
+
+            this.loadNext = () => {
+                this.timelineUpdating = true;
+                usSpinnerService.spin('timelineMore');
+
+                api.news.feed(count, portion)
+                    .error(error => {
+                        console.log(error);
+                    })
+                    .success(feed => {
+                        this.timelineUpdating = false;
+                        usSpinnerService.stop('timelineMore');
+
+                        let feed2 = feed.map(post => {
+                            if(post.type == 'instagram') return toInstagram(post);
+                            else return post;
+                        });
+
+                        portion++;
+                        this.feed = this.feed.concat(feed2);
+                    });
+            };
+
+            this.loadNext();
+
+            io.on('post', params => {
+                //let posts = params instanceof Array ? params : [params];
+                //
+                //let feed2 = posts.map(post => {
+                //    if(post.type == 'instagram') return toInstagram(post);
+                //    else return post;
+                //});
+
+                //this.$apply(() => {
+                //    this.feed = feed2.concat(this.feed);
+                //});
+            });
+        }
+    });
+
+    //app.directive("timelineRecord", function ($compile, $http, $sce, team) {
+    //    var templates = {
+    //        "post": ["/views/timeline-post.html", linkPost],
+    //        "instagram": ["/views/timeline-gram.html", linkGram]
+    //    };
+    //
+    //    function linkPost(scope, element, attrs) {
+    //        scope.message = $sce.trustAsHtml(scope.post.body);
+    //    }
+    //
+    //    function linkGram(scope, element, attrs) {
+    //    }
+    //
+    //    return {
+    //        restrict: "E",
+    //        scope: {
+    //            post:"=content"
+    //        },
+    //        link: function(scope, element, attrs){
+    //            var type = scope.post.type;
+    //            if(type in templates) {
+    //                $http.get(templates[type][0])
+    //                    .success(function (tpl) {
+    //                        element.html(tpl).show();
+    //                        $compile(element.contents())(scope);
+    //                        templates[type][1](scope, element, attrs);
+    //                    });
+    //            }
+    //
+    //        }
+    //    };
+    //});
+};

src/client/components/TimelineRecord.js

@@ -0,0 +1,11 @@
+import template from '../../templates/components/timeline-record.html';
+
+export default function (app) {
+    app.component('timelineRecord', {
+        bindings: {
+            post: '<',
+            type: '@'
+        },
+        template: template
+    });
+};

src/client/components/TimelineRecordInstagram.js

@@ -0,0 +1,10 @@
+import template from '../../templates/components/timeline-record-instagram.html';
+
+export default function (app) {
+    app.component('timelineRecordInstagram', {
+        bindings: {
+            post: '<'
+        },
+        template: template
+    });
+};

src/client/components/TimelineRecordPost.js

@@ -0,0 +1,13 @@
+import template from '../../templates/components/timeline-record-post.html';
+
+export default function (app) {
+    app.component('timelineRecordPost', {
+        bindings: {
+            post: '<'
+        },
+        template: template,
+        controller: function($sce){
+            this.message = $sce.trustAsHtml(this.post.body);
+        }
+    });
+};

src/client/ui/timeline.js

@@ -1,147 +0,0 @@
-/**
- * Created by tmshv on 23/11/14.
- */
-
-function personByInstagram(list, instagram){
-    list = list.filter(function (member) {
-        try {
-            return member.contacts.instagram === instagram;
-        } catch (error) {
-            return false;
-        }
-    });
-
-    if(list.length){
-        return list[0].id;
-    }else{
-        return null;
-    }
-}
-
-function postText(post){
-    try{
-        return post.data.caption.text.replace(/#[\w_]+/, "")
-    }catch(error){
-        return "";
-    }
-}
-
-module.exports = function(app) {
-    app.directive("timeline", function (team) {
-        function toInstagram(post){
-            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: 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/11357496_464997000344800_2124591831_a.jpg',
-                text: post.body,
-                //text: postText(post),
-                type: post.type
-            };
-        }
-
-        return {
-            templateUrl: "/views/timeline.html",
-            scope: {
-
-            },
-            link: function(scope, element, attrs){
-                scope.isEven = function(index){
-                    return index % 2 === 1;
-                }
-            },
-            controller: function($scope, $timeout, usSpinnerService, io, 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'];
-                };
-
-                $scope.showFooter = function () {
-                    var canLoadMore = true;
-                    return $scope.feed && $scope.feed.length && canLoadMore;
-                };
-
-                $scope.loadNext = function () {
-                    $scope.timelineUpdating = true;
-                    usSpinnerService.spin("timelineMore");
-
-                    api.news.feed(count, portion)
-                        .error(function(error) {
-                            console.log(error);
-                        })
-                        .success(function (list) {
-                            $scope.timelineUpdating = false;
-                            usSpinnerService.stop("timelineMore");
-
-                            var feed = list.map(function (post) {
-                                if(post.type == "instagram") return toInstagram(post);
-                                else return post;
-                            });
-
-                            portion++;
-                            $scope.feed = $scope.feed.concat(feed);
-                        });
-                };
-
-                $scope.loadNext();
-
-                io.on("post", function (params) {
-                    var posts = params instanceof Array ? params : [params];
-
-                    var feed = posts.map(function (post) {
-                        if(post.type == "instagram") return toInstagram(post);
-                        else return post;
-                    });
-
-                    $scope.$apply(function () {
-                        $scope.feed = feed.concat($scope.feed);
-                    });
-                });
-            }
-        };
-    });
-
-    app.directive("timelineRecord", function ($compile, $http, $sce, team) {
-        var templates = {
-            "post": ["/views/timeline-post.html", linkPost],
-            "instagram": ["/views/timeline-gram.html", linkGram]
-        };
-
-        function linkPost(scope, element, attrs) {
-            scope.message = $sce.trustAsHtml(scope.post.body);
-        }
-
-        function linkGram(scope, element, attrs) {
-        }
-
-        return {
-            restrict: "E",
-            scope: {
-                post:"=content"
-            },
-            link: function(scope, element, attrs){
-                var type = scope.post.type;
-                if(type in templates) {
-                    $http.get(templates[type][0])
-                        .success(function (tpl) {
-                            element.html(tpl).show();
-                            $compile(element.contents())(scope);
-                            templates[type][1](scope, element, attrs);
-                        });
-                }
-
-            }
-        };
-    });
-};

src/style/components/timeline-record-instagram.scss

@@ -0,0 +1,42 @@
+@import "../variables";
+
+$user-size: 40px;
+$half-margin: $single-margin/2;
+$image-border-radius: .35em;
+$image-border-thickness: $half-margin;
+
+.timeline-record-instagram {
+}
+
+.timeline-record-instagram__head {
+  margin-bottom: $single-margin;
+}
+
+.timeline-record-instagram__body {
+  img {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    border: $image-border-thickness solid white;
+    box-shadow: $white-shadow;
+    border-radius: $image-border-radius;
+    margin-bottom: $single-margin;
+  }
+}
+
+.timeline-record-instagram__user {
+  padding-top: $half-margin;
+
+  span {
+    margin-left: $half-margin;
+
+    line-height: $user-size;
+    vertical-align: top;
+  }
+
+  img {
+    width: $user-size;
+    height: $user-size;
+    border-radius: 50%;
+  }
+}

src/style/components/timeline-record-post.scss

@@ -0,0 +1,31 @@
+@import "../variables";
+
+.timeline-record-post {
+}
+
+.timeline-record-post__head {
+  margin-bottom: $single-margin;
+}
+
+.timeline-record-post__body{
+  padding-left: $single-margin;
+
+  ul{
+    list-style: none;
+    padding-left: $single-margin;
+  }
+
+  p, ul{
+    margin-bottom: $single-margin/2;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    border: .5em solid white;
+    box-shadow: 0 .2em 0.35em rgba(0, 0, 0, 0.35);
+    border-radius: .35em;
+    margin: 0 0 1em;
+  }
+}

src/style/components/timeline-record.scss

@@ -0,0 +1,11 @@
+@import "../variables";
+
+.timeline__record {
+  margin: 0 0 $double-margin;
+
+  .date {
+    //margin: 0 0 0.45em;
+    //font-size: 0.75em;
+    color: $light-color;
+  }
+}

src/style/components/timeline.scss

@@ -1,11 +1,12 @@
+@import "../variables";
+
 .timeline{
   display: flex;
   flex-direction: column;
-  width: 70%;
-  margin: 0 auto 2em;
+  margin: 0 auto $double-margin;
 }
 
-.timeline-footer{
+.timeline__footer{
   display: flex;
   justify-content: center;
 
@@ -15,7 +16,7 @@
 
     width: 100px;
     height: 40px;
-    border: 2px solid black;
+    border: 2px solid $dark-color;
     padding: 0 10px;
     background: none;
 
@@ -31,8 +32,8 @@
   }
 }
 
-@media screen and (max-device-width: 31.25em) {
+@media screen and (max-device-width: $desktop-width) {
   .timeline {
-    width: 98%;
+    //width: 98%;
   }
-}
+}

src/style/style.scss

@@ -3,3 +3,7 @@
 @import "./components/team-member-proifile";
 @import "./components/main-menu";
 @import "./components/breadcrumbs";
+@import "./components/timeline";
+@import "./components/timeline-record";
+@import "./components/timeline-record-post";
+@import "./components/timeline-record-instagram";

src/style/timeline-instagram.scss

@@ -1,34 +0,0 @@
-.timeline-record {
-  .instagram {
-    margin: 0 auto;
-    max-width: 640px;
-
-    .head {
-      width: 100%;
-      margin: 0 0 .5em;
-
-      .user {
-        span {
-          vertical-align: top;
-          line-height: 40px;
-        }
-
-        img {
-          width: 40px;
-          height: 40px;
-          border-radius: 50%;
-        }
-      }
-    }
-
-    .body img {
-      width: 100%;
-      height: auto;
-      box-sizing: border-box;
-      border: .5em solid white;
-      box-shadow: 0 .2em 0.35em rgba(0, 0, 0, 0.35);
-      border-radius: .35em;
-      margin: 0 0 1em;
-    }
-  }
-}

src/style/timeline-record.scss

@@ -1,8 +0,0 @@
-.timeline-record {
-  margin: 0 0 3em;
-  .date {
-    margin: 0 0 0.45em;
-    font-size: 0.75em;
-    color: #999;
-  }
-}

src/templates/components/timeline-record-instagram.html

@@ -0,0 +1,16 @@
+<div class="timeline-record-instagram">
+    <div class="timeline-record-instagram__head">
+        <p class="date">{{$ctrl.post.date | date : "dd.MM.yyyy"}}</p>
+        <div class="timeline-record-instagram__user">
+            <img ng-src="{{$ctrl.post.userpic}}" alt=""/>
+            <span>{{$ctrl.post.username}}</span>
+        </div>
+    </div>
+
+    <div class="timeline-record-instagram__body">
+        <a href="{{$ctrl.post.url}}" target="_blank" class="invisible">
+            <img ng-src="{{$ctrl.post.image}}" alt="">
+        </a>
+        <p>{{$ctrl.post.text | removeHashtags | strip}}</p>
+    </div>
+</div>

src/templates/components/timeline-record-post.html

@@ -0,0 +1,10 @@
+<div class="timeline-record-post">
+    <div class="timeline-record-post__head">
+        <div>
+            <p class="date">{{$ctrl.post.date | date : "dd.MM.yyyy"}}</p>
+            <!--<a href="#{{$ctrl.post.uri}}">{{$ctrl.post.date | date : "dd.MM.yyyy"}}</a>-->
+        </div>
+    </div>
+
+    <div class="timeline-record-post__body" ng-bind-html="$ctrl.message"></div>
+</div>

src/templates/components/timeline-record.html

@@ -0,0 +1,10 @@
+<div class="timeline__record"
+    ng-switch="$ctrl.type"
+>
+    <timeline-record-instagram post="$ctrl.post"
+        ng-switch-when="instagram"
+    ></timeline-record-instagram>
+    <timeline-record-post post="$ctrl.post"
+        ng-switch-default
+    ></timeline-record-post>
+</div>

src/templates/components/timeline.html

@@ -0,0 +1,13 @@
+<div class="timeline">
+    <timeline-record type="{{post.type}}" post="post"
+         ng-repeat="post in $ctrl.feed track by $index"
+    ></timeline-record>
+    <div class="timeline__footer" ng-show="showFooter()">
+        <button class="more"
+                ng-click="$ctrl.loadNext()"
+                ng-disabled="$ctrl.timelineUpdating">
+            <span us-spinner="{radius:5, width:2, length: 4}" spinner-key="timelineMore"></span>
+            <span ng-hide="$ctrl.timelineUpdating">Ещё</span>
+        </button>
+    </div>
+</div>

src/templates/views/timeline-gram.html

@@ -1,16 +0,0 @@
-<div class="instagram">
-    <div class="head">
-        <p class="date">{{post.date | date : "dd.MM.yyyy"}}</p>
-        <div class="user">
-            <img ng-src="{{post.userpic}}" alt=""/>
-            <span>{{post.username}}</span>
-        </div>
-    </div>
-
-    <div class="body">
-        <a href="{{post.url}}" target="_blank" class="invisible">
-            <img ng-src="{{post.image}}" alt="">
-        </a>
-        <p>{{post.text | removeHashtags | strip}}</p>
-    </div>
-</div>

src/templates/views/timeline-post.html

@@ -1,9 +0,0 @@
-<div class="head">
-    <div>
-        <p class="date"><a href="#{{post.uri}}">{{post.date | date : "dd.MM.yyyy"}}</a></p>
-    </div>
-</div>
-
-<div class="body">
-    <div class="message" ng-bind-html="message"></div>
-</div>

src/templates/views/timeline.html

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