Implement new single post view.
This commit is contained in:
Roger Braun
parent
46d2240ed4
commit
958793e338
9 changed files with 212 additions and 0 deletions
40
app/assets/javascripts/app/pages/single-post-viewer.js
Normal file
40
app/assets/javascripts/app/pages/single-post-viewer.js
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
app.pages.SinglePostViewer = app.views.Base.extend({
|
||||||
|
templateName: "single-post-viewer",
|
||||||
|
|
||||||
|
subviews : {
|
||||||
|
"#single-post-content" : "singlePostContentView",
|
||||||
|
'#single-post-interactions' : 'singlePostInteractionsView'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize : function(options) {
|
||||||
|
this.model = new app.models.Post({ id : options.id });
|
||||||
|
this.model.preloadOrFetch().done(_.bind(this.initViews, this));
|
||||||
|
this.model.interactions.fetch() //async, yo, might want to throttle this later.
|
||||||
|
this.setupLightbox()
|
||||||
|
},
|
||||||
|
|
||||||
|
setupLightbox : function(){
|
||||||
|
this.lightbox = Diaspora.BaseWidget.instantiate("Lightbox");
|
||||||
|
this.lightbox.set({
|
||||||
|
imageParent: '.photo_attachments',
|
||||||
|
imageSelector: 'img.stream-photo'
|
||||||
|
});
|
||||||
|
this.$el.delegate("a.stream-photo-link", "click", this.lightbox.lightboxImageClicked);
|
||||||
|
},
|
||||||
|
|
||||||
|
initViews : function() {
|
||||||
|
this.singlePostContentView = new app.views.SinglePostContent({model: this.model});
|
||||||
|
this.singlePostInteractionsView = new app.views.SinglePostInteractions({model: this.model});
|
||||||
|
this.render();
|
||||||
|
},
|
||||||
|
|
||||||
|
postRenderTemplate : function() {
|
||||||
|
if(this.model.get("title")){
|
||||||
|
// formats title to html...
|
||||||
|
var html_title = app.helpers.textFormatter(this.model.get("title"), this.model);
|
||||||
|
//... and converts html to plain text
|
||||||
|
document.title = $('<div>').html(html_title).text();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
app.views.SinglePostActions = app.views.Feedback.extend({
|
||||||
|
templateName: "single-post-viewer/single-post-actions",
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
app.views.SinglePostCommentStream = app.views.CommentStream.extend({
|
||||||
|
|
||||||
|
postRenderTemplate: function() {
|
||||||
|
app.views.CommentStream.prototype.postRenderTemplate.apply(this)
|
||||||
|
this.$(".new_comment_form_wrapper").removeClass('hidden')
|
||||||
|
},
|
||||||
|
|
||||||
|
presenter: function(){
|
||||||
|
return _.extend(this.defaultPresenter(), {
|
||||||
|
moreCommentsCount : 0,
|
||||||
|
showExpandCommentsLink : false,
|
||||||
|
commentsCount : this.model.interactions.commentsCount()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
app.views.SinglePostContent = app.views.Base.extend({
|
||||||
|
templateName: 'single-post-viewer/single-post-content',
|
||||||
|
|
||||||
|
subviews : {
|
||||||
|
"#single-post-actions" : "singlePostActionsView",
|
||||||
|
'#real-post-content' : 'postContentView',
|
||||||
|
".oembed" : "oEmbedView",
|
||||||
|
".opengraph" : "openGraphView"
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize : function() {
|
||||||
|
this.singlePostActionsView = new app.views.SinglePostActions({model: this.model});
|
||||||
|
this.oEmbedView = new app.views.OEmbed({model : this.model});
|
||||||
|
this.openGraphView = new app.views.OpenGraph({model : this.model});
|
||||||
|
this.postContentView = new app.views.StatusMessage({model: this.model});
|
||||||
|
},
|
||||||
|
|
||||||
|
presenter : function() {
|
||||||
|
return _.extend(this.defaultPresenter(), {
|
||||||
|
authorIsCurrentUser : this.authorIsCurrentUser(),
|
||||||
|
showPost : this.showPost(),
|
||||||
|
text : app.helpers.textFormatter(this.model.get("text"), this.model)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
authorIsCurrentUser : function() {
|
||||||
|
return app.currentUser.authenticated() && this.model.get("author").id == app.user().id
|
||||||
|
},
|
||||||
|
|
||||||
|
showPost : function() {
|
||||||
|
return (app.currentUser.get("showNsfw")) || !this.model.get("nsfw")
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
app.views.SinglePostInteractions = app.views.Base.extend({
|
||||||
|
templateName: "single-post-viewer/single-post-interactions",
|
||||||
|
|
||||||
|
subviews: {
|
||||||
|
'#comments': 'commentStreamView'
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize : function() {
|
||||||
|
this.model.interactions.on('change', this.render, this);
|
||||||
|
this.commentStreamView = new app.views.SinglePostCommentStream({model: this.model})
|
||||||
|
},
|
||||||
|
|
||||||
|
presenter : function(){
|
||||||
|
var interactions = this.model.interactions
|
||||||
|
return {
|
||||||
|
likes : interactions.likes.toJSON(),
|
||||||
|
comments : interactions.comments.toJSON(),
|
||||||
|
reshares : interactions.reshares.toJSON(),
|
||||||
|
commentsCount : interactions.commentsCount(),
|
||||||
|
likesCount : interactions.likesCount(),
|
||||||
|
resharesCount : interactions.resharesCount(),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<div class='pull-right'>
|
||||||
|
<div class="post-time">
|
||||||
|
<time datetime="{{created_at}}" />
|
||||||
|
</div>
|
||||||
|
<div class='pull-right'>
|
||||||
|
<a href="#" rel="auth-required" class="label like" title="{{#if userLike}} {{t "viewer.unlike"}} {{else}} {{t "viewer.like"}} {{/if}}">
|
||||||
|
{{#if userLike}}
|
||||||
|
<i class="icon-heart icon-red"></i>
|
||||||
|
{{else}}
|
||||||
|
<i class="icon-heart icon-white"></i>
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{{#if userCanReshare}}
|
||||||
|
<a href="#" rel="auth-required" class="label reshare" title="{{#if userReshare}} {{t "viewer.reshared"}} {{else}} {{t "viewer.reshare"}} {{/if}}">
|
||||||
|
{{#if userReshare}}
|
||||||
|
<i class="icon-retweet icon-blue"></i>
|
||||||
|
{{else}}
|
||||||
|
<i class="icon-retweet icon-white"></i>
|
||||||
|
{{/if}}
|
||||||
|
</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<div id='head' class='row-fluid'>
|
||||||
|
<div id='author' class='span6'>
|
||||||
|
<div class="img pull-left">
|
||||||
|
{{#linkToPerson author}}
|
||||||
|
<div class="profile-image-container small" style="background-image : url('{{avatar.small}}');" data-placement="right"></div>
|
||||||
|
{{/linkToPerson}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd">
|
||||||
|
{{#linkToPerson author}}
|
||||||
|
{{name}}
|
||||||
|
{{/linkToPerson}}
|
||||||
|
|
||||||
|
{{#if root}}
|
||||||
|
<div>
|
||||||
|
<i class="icon-retweet"></i>
|
||||||
|
{{#linkToPerson root.author}}
|
||||||
|
{{name}}
|
||||||
|
{{/linkToPerson}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<div class='public-info'>
|
||||||
|
{{#unless public}}
|
||||||
|
<i class="icon-lock"> </i>
|
||||||
|
{{/unless}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id='single-post-actions' class='span6'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id='body' class='row-fluid'>
|
||||||
|
<div id='real-post-content' class='span12'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div id='reshares'>
|
||||||
|
<span class='label reshare'>
|
||||||
|
<i class='icon-retweet icon-white'></i>
|
||||||
|
{{resharesCount}}
|
||||||
|
</span>
|
||||||
|
{{#each reshares}}
|
||||||
|
{{{personImage author 'small' "micro"}}}
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
<div id='likes'>
|
||||||
|
<span class='label like'>
|
||||||
|
<i class='icon-heart icon-white'></i>
|
||||||
|
{{likesCount}}
|
||||||
|
</span>
|
||||||
|
{{#each likes}}
|
||||||
|
{{{personImage author 'small' "micro"}}}
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
<div id='comments-meta'>
|
||||||
|
<span class='label comments'>
|
||||||
|
<i class='icon-comment icon-white'></i>
|
||||||
|
{{commentsCount}}
|
||||||
|
</span>
|
||||||
|
{{#each comments}}
|
||||||
|
{{{personImage author 'small' "micro"}}}
|
||||||
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
<div id='comments'>
|
||||||
|
</div>
|
||||||
8
app/assets/templates/single-post-viewer_tpl.jst.hbs
Normal file
8
app/assets/templates/single-post-viewer_tpl.jst.hbs
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div id='single-post-container' class='container-fluid'>
|
||||||
|
<div class='row-fluid'>
|
||||||
|
<div id='single-post-content' class='span6'>
|
||||||
|
</div>
|
||||||
|
<div id='single-post-interactions' class='span6'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Reference in a new issue