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