timeline update: ES6, components, refactoring, other
This commit is contained in:
tmshv committed
1 parent
761938b17a
commit
73a3361376
20 files changed
+314
-237
No files matched your search
+8
-1
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// }
|
||||
// };
|
||||
//});
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import template from '../../templates/components/timeline-record.html';
|
||||
|
||||
export default function (app) {
|
||||
app.component('timelineRecord', {
|
||||
bindings: {
|
||||
post: '<',
|
||||
type: '@'
|
||||
},
|
||||
template: template
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import template from '../../templates/components/timeline-record-instagram.html';
|
||||
|
||||
export default function (app) {
|
||||
app.component('timelineRecordInstagram', {
|
||||
bindings: {
|
||||
post: '<'
|
||||
},
|
||||
template: template
|
||||
});
|
||||
};
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
.timeline-record {
|
||||
margin: 0 0 3em;
|
||||
.date {
|
||||
margin: 0 0 0.45em;
|
||||
font-size: 0.75em;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user