From 73a3361376f59be62d296cafac051e0ffcf1ec22 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Mon, 22 Feb 2016 16:15:42 +0300 Subject: [PATCH] timeline update: ES6, components, refactoring, other --- src/client/app.js | 9 +- src/client/components/Timeline.js | 128 +++++++++++++++ src/client/components/TimelineRecord.js | 11 ++ .../components/TimelineRecordInstagram.js | 10 ++ src/client/components/TimelineRecordPost.js | 13 ++ src/client/ui/timeline.js | 147 ------------------ .../components/timeline-record-instagram.scss | 42 +++++ .../components/timeline-record-post.scss | 31 ++++ src/style/components/timeline-record.scss | 11 ++ src/style/{ => components}/timeline.scss | 15 +- src/style/style.scss | 4 + src/style/timeline-instagram.scss | 34 ---- src/style/timeline-record.scss | 8 - .../components/timeline-record-instagram.html | 16 ++ .../components/timeline-record-post.html | 10 ++ src/templates/components/timeline-record.html | 10 ++ src/templates/components/timeline.html | 13 ++ src/templates/views/timeline-gram.html | 16 -- src/templates/views/timeline-post.html | 9 -- src/templates/views/timeline.html | 16 -- 20 files changed, 315 insertions(+), 238 deletions(-) create mode 100644 src/client/components/Timeline.js create mode 100644 src/client/components/TimelineRecord.js create mode 100644 src/client/components/TimelineRecordInstagram.js create mode 100644 src/client/components/TimelineRecordPost.js delete mode 100644 src/client/ui/timeline.js create mode 100644 src/style/components/timeline-record-instagram.scss create mode 100644 src/style/components/timeline-record-post.scss create mode 100644 src/style/components/timeline-record.scss rename src/style/{ => components}/timeline.scss (66%) delete mode 100644 src/style/timeline-instagram.scss delete mode 100644 src/style/timeline-record.scss create mode 100644 src/templates/components/timeline-record-instagram.html create mode 100644 src/templates/components/timeline-record-post.html create mode 100644 src/templates/components/timeline-record.html create mode 100644 src/templates/components/timeline.html delete mode 100644 src/templates/views/timeline-gram.html delete mode 100644 src/templates/views/timeline-post.html delete mode 100644 src/templates/views/timeline.html diff --git a/src/client/app.js b/src/client/app.js index a47e614b..897d8812 100644 --- a/src/client/app.js +++ b/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, diff --git a/src/client/components/Timeline.js b/src/client/components/Timeline.js new file mode 100644 index 00000000..0e869b4a --- /dev/null +++ b/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); + // }); + // } + // + // } + // }; + //}); +}; \ No newline at end of file diff --git a/src/client/components/TimelineRecord.js b/src/client/components/TimelineRecord.js new file mode 100644 index 00000000..e5cd98ef --- /dev/null +++ b/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 + }); +}; \ No newline at end of file diff --git a/src/client/components/TimelineRecordInstagram.js b/src/client/components/TimelineRecordInstagram.js new file mode 100644 index 00000000..fed699b6 --- /dev/null +++ b/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 + }); +}; \ No newline at end of file diff --git a/src/client/components/TimelineRecordPost.js b/src/client/components/TimelineRecordPost.js new file mode 100644 index 00000000..fd7bee0d --- /dev/null +++ b/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); + } + }); +}; \ No newline at end of file diff --git a/src/client/ui/timeline.js b/src/client/ui/timeline.js deleted file mode 100644 index 5bcf0310..00000000 --- a/src/client/ui/timeline.js +++ /dev/null @@ -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); - }); - } - - } - }; - }); -}; \ No newline at end of file diff --git a/src/style/components/timeline-record-instagram.scss b/src/style/components/timeline-record-instagram.scss new file mode 100644 index 00000000..4a228149 --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/src/style/components/timeline-record-post.scss b/src/style/components/timeline-record-post.scss new file mode 100644 index 00000000..d37cb650 --- /dev/null +++ b/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; + } +} diff --git a/src/style/components/timeline-record.scss b/src/style/components/timeline-record.scss new file mode 100644 index 00000000..2f0ff77e --- /dev/null +++ b/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; + } +} diff --git a/src/style/timeline.scss b/src/style/components/timeline.scss similarity index 66% rename from src/style/timeline.scss rename to src/style/components/timeline.scss index a0739c55..b109cc3c 100644 --- a/src/style/timeline.scss +++ b/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%; } -} \ No newline at end of file +} diff --git a/src/style/style.scss b/src/style/style.scss index d65f641c..b4913191 100644 --- a/src/style/style.scss +++ b/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"; diff --git a/src/style/timeline-instagram.scss b/src/style/timeline-instagram.scss deleted file mode 100644 index efd3fee4..00000000 --- a/src/style/timeline-instagram.scss +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/src/style/timeline-record.scss b/src/style/timeline-record.scss deleted file mode 100644 index d67abfa4..00000000 --- a/src/style/timeline-record.scss +++ /dev/null @@ -1,8 +0,0 @@ -.timeline-record { - margin: 0 0 3em; - .date { - margin: 0 0 0.45em; - font-size: 0.75em; - color: #999; - } -} diff --git a/src/templates/components/timeline-record-instagram.html b/src/templates/components/timeline-record-instagram.html new file mode 100644 index 00000000..5ccaf387 --- /dev/null +++ b/src/templates/components/timeline-record-instagram.html @@ -0,0 +1,16 @@ +
+
+

{{$ctrl.post.date | date : "dd.MM.yyyy"}}

+
+ + {{$ctrl.post.username}} +
+
+ +
+ +

{{$ctrl.post.text | removeHashtags | strip}}

+
+
\ No newline at end of file diff --git a/src/templates/components/timeline-record-post.html b/src/templates/components/timeline-record-post.html new file mode 100644 index 00000000..2e6e48ec --- /dev/null +++ b/src/templates/components/timeline-record-post.html @@ -0,0 +1,10 @@ +
+
+
+

{{$ctrl.post.date | date : "dd.MM.yyyy"}}

+ +
+
+ +
+
\ No newline at end of file diff --git a/src/templates/components/timeline-record.html b/src/templates/components/timeline-record.html new file mode 100644 index 00000000..4ce34451 --- /dev/null +++ b/src/templates/components/timeline-record.html @@ -0,0 +1,10 @@ +
+ + +
\ No newline at end of file diff --git a/src/templates/components/timeline.html b/src/templates/components/timeline.html new file mode 100644 index 00000000..a0920914 --- /dev/null +++ b/src/templates/components/timeline.html @@ -0,0 +1,13 @@ +
+ +
+ +
+
\ No newline at end of file diff --git a/src/templates/views/timeline-gram.html b/src/templates/views/timeline-gram.html deleted file mode 100644 index e1e0e6b4..00000000 --- a/src/templates/views/timeline-gram.html +++ /dev/null @@ -1,16 +0,0 @@ -
-
-

{{post.date | date : "dd.MM.yyyy"}}

-
- - {{post.username}} -
-
- -
- -

{{post.text | removeHashtags | strip}}

-
-
\ No newline at end of file diff --git a/src/templates/views/timeline-post.html b/src/templates/views/timeline-post.html deleted file mode 100644 index 35c733d5..00000000 --- a/src/templates/views/timeline-post.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
-

{{post.date | date : "dd.MM.yyyy"}}

-
-
- -
-
-
\ No newline at end of file diff --git a/src/templates/views/timeline.html b/src/templates/views/timeline.html deleted file mode 100644 index 21887935..00000000 --- a/src/templates/views/timeline.html +++ /dev/null @@ -1,16 +0,0 @@ -
- - - -
- -
-
\ No newline at end of file