Unverified Commit 70954786 authored by Steffen van Bergerem's avatar Steffen van Bergerem Committed by Dennis Schubert

Refactor SPV post interactions

closes #7089
parent 0e5141dd
...@@ -12,6 +12,7 @@ Note: Although this is a minor release, the configuration file changed because t ...@@ -12,6 +12,7 @@ Note: Although this is a minor release, the configuration file changed because t
* Load jQuery in the head on mobile [#7086](https://github.com/diaspora/diaspora/pull/7086) * Load jQuery in the head on mobile [#7086](https://github.com/diaspora/diaspora/pull/7086)
* Use translation for NodeInfo services [#7102](https://github.com/diaspora/diaspora/pull/7102) * Use translation for NodeInfo services [#7102](https://github.com/diaspora/diaspora/pull/7102)
* Adopt new Mapbox tile URIs [#7066](https://github.com/diaspora/diaspora/pull/7066) * Adopt new Mapbox tile URIs [#7066](https://github.com/diaspora/diaspora/pull/7066)
* Refactored post interactions on the single post view [#7089](https://github.com/diaspora/diaspora/pull/7089)
## Bug fixes ## Bug fixes
* Post comments no longer get collapsed when interacting with a post [#7040](https://github.com/diaspora/diaspora/pull/7040) * Post comments no longer get collapsed when interacting with a post [#7040](https://github.com/diaspora/diaspora/pull/7040)
......
...@@ -13,9 +13,8 @@ app.views.CommentStream = app.views.Base.extend({ ...@@ -13,9 +13,8 @@ app.views.CommentStream = app.views.Base.extend({
"click .toggle_post_comments": "expandComments" "click .toggle_post_comments": "expandComments"
}, },
initialize: function(options) { initialize: function() {
this.commentTemplate = options.commentTemplate; this.CommentView = app.views.Comment;
this.setupBindings(); this.setupBindings();
}, },
...@@ -84,7 +83,7 @@ app.views.CommentStream = app.views.Base.extend({ ...@@ -84,7 +83,7 @@ app.views.CommentStream = app.views.Base.extend({
// on post ownership in the Comment view. // on post ownership in the Comment view.
comment.set({parent : this.model.toJSON()}); comment.set({parent : this.model.toJSON()});
var commentHtml = new app.views.Comment({model: comment}).render().el; var commentHtml = new this.CommentView({model: comment}).render().el;
var commentBlocks = this.$(".comments div.comment.media"); var commentBlocks = this.$(".comments div.comment.media");
this._moveInsertPoint(comment.get("created_at"), commentBlocks); this._moveInsertPoint(comment.get("created_at"), commentBlocks);
if (this._insertPoint >= commentBlocks.length) { if (this._insertPoint >= commentBlocks.length) {
......
...@@ -4,7 +4,10 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({ ...@@ -4,7 +4,10 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({
tooltipSelector: "time, .control-icons a", tooltipSelector: "time, .control-icons a",
initialize: function(){ initialize: function(){
this.CommentView = app.views.ExpandedComment;
$(window).on('hashchange',this.highlightPermalinkComment); $(window).on('hashchange',this.highlightPermalinkComment);
this.setupBindings();
this.model.comments.on("reset", this.render, this);
}, },
highlightPermalinkComment: function() { highlightPermalinkComment: function() {
...@@ -24,16 +27,6 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({ ...@@ -24,16 +27,6 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({
_.defer(this.highlightPermalinkComment); _.defer(this.highlightPermalinkComment);
}, },
appendComment: function(comment) {
// Set the post as the comment's parent, so we can check
// on post ownership in the Comment view.
comment.set({parent : this.model.toJSON()});
this.$(".comments").append(new app.views.ExpandedComment({
model: comment
}).render().el);
},
presenter: function(){ presenter: function(){
return _.extend(this.defaultPresenter(), { return _.extend(this.defaultPresenter(), {
moreCommentsCount : 0, moreCommentsCount : 0,
......
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.SinglePostInteractionCounts = app.views.Base.extend({
templateName: "single-post-viewer/single-post-interaction-counts",
tooltipSelector: ".avatar.micro",
initialize: function() {
this.model.interactions.on("change", this.render, this);
},
presenter: function() {
var interactions = this.model.interactions;
return {
likes: interactions.likes.toJSON(),
reshares: interactions.reshares.toJSON(),
commentsCount: interactions.commentsCount(),
likesCount: interactions.likesCount(),
resharesCount: interactions.resharesCount()
};
}
});
// @license-end
...@@ -2,28 +2,19 @@ ...@@ -2,28 +2,19 @@
app.views.SinglePostInteractions = app.views.Base.extend({ app.views.SinglePostInteractions = app.views.Base.extend({
templateName: "single-post-viewer/single-post-interactions", templateName: "single-post-viewer/single-post-interactions",
tooltipSelector: ".avatar.micro",
className: "framed-content", className: "framed-content",
subviews: { subviews: {
'#comments': 'commentStreamView' "#comments": "commentStreamView",
"#interaction-counts": "interactionCountsView"
}, },
initialize : function() { commentStreamView: function() {
this.model.interactions.on('change', this.render, this); return new app.views.SinglePostCommentStream({model: this.model});
this.commentStreamView = new app.views.SinglePostCommentStream({model: this.model});
}, },
presenter : function(){ interactionCountsView: function() {
var interactions = this.model.interactions; return new app.views.SinglePostInteractionCounts({model: this.model});
return { }
likes : interactions.likes.toJSON(),
comments : interactions.comments.toJSON(),
reshares : interactions.reshares.toJSON(),
commentsCount : interactions.commentsCount(),
likesCount : interactions.likesCount(),
resharesCount : interactions.resharesCount(),
};
},
}); });
// @license-end // @license-end
{{#if resharesCount}}
<div id="reshares" class="clearfix">
<div class="count">
<i class="entypo-reshare middle gray"></i>
<span>{{resharesCount}}</span>
</div>
<div class="interaction-avatars">
{{#each reshares}}
{{#linkToAuthor author}}
{{{personImage this "small" "micro"}}}
{{/linkToAuthor}}
{{/each}}
</div>
</div>
{{/if}}
{{#if likesCount}}
<div id="likes" class="clearfix">
<div class="count">
<i class="entypo-heart middle gray"></i>
<span>{{likesCount}}</span>
</div>
<div class="interaction-avatars">
{{#each likes}}
{{#linkToAuthor author}}
{{{personImage this "small" "micro"}}}
{{/linkToAuthor}}
{{/each}}
</div>
</div>
{{/if}}
{{#if commentsCount}}
<div id="comments-meta" class="clearfix">
<div class="count">
<i class="entypo-comment middle gray"></i>
<span>{{commentsCount}}</span>
</div>
</div>
{{else}}
<div class="no-comments">
<h4>{{t "comments.no_comments" }}</h4>
</div>
{{/if}}
{{#if resharesCount}} <div id="interaction-counts">
<div id="reshares" class="clearfix"> </div>
<div class="count"> <div id="comments">
<i class="entypo-reshare middle gray"></i>
<span>{{resharesCount}}</span>
</div>
<div class="interaction-avatars">
{{#each reshares}}
{{#linkToAuthor author}}
{{{personImage this 'small' 'micro'}}}
{{/linkToAuthor}}
{{/each}}
</div>
</div>
{{/if}}
{{#if likesCount}}
<div id="likes" class="clearfix">
<div class="count">
<i class="entypo-heart middle gray"></i>
<span>{{likesCount}}</span>
</div>
<div class="interaction-avatars">
{{#each likes}}
{{#linkToAuthor author}}
{{{personImage this 'small' 'micro'}}}
{{/linkToAuthor}}
{{/each}}
</div>
</div>
{{/if}}
{{#if commentsCount}}
<div id="comments-meta" class="clearfix">
<div class="count">
<i class="entypo-comment middle gray"></i>
<span>{{commentsCount}}</span>
</div>
</div>
{{else}}
<div class="no-comments">
<h4>{{t "comments.no_comments" }}</h4>
</div>
{{/if}}
<div id='comments'>
</div> </div>
...@@ -79,6 +79,19 @@ describe("app.views.CommentStream", function(){ ...@@ -79,6 +79,19 @@ describe("app.views.CommentStream", function(){
expect(comment.set).toHaveBeenCalled(); expect(comment.set).toHaveBeenCalled();
}); });
it("uses this.CommentView for the Comment view", function() {
var comment = factory.comment();
this.view.CommentView = app.views.Comment;
spyOn(app.views.Comment.prototype, "initialize");
this.view.appendComment(comment);
expect(app.views.Comment.prototype.initialize).toHaveBeenCalled();
this.view.CommentView = app.views.StatusMessage;
spyOn(app.views.StatusMessage.prototype, "initialize");
this.view.appendComment(comment);
expect(app.views.StatusMessage.prototype.initialize).toHaveBeenCalled();
});
it("sorts comments in the right order", function() { it("sorts comments in the right order", function() {
this.view.render(); this.view.render();
this.view.appendComment(factory.comment({"created_at": new Date(2000).toJSON(), "text": "2"})); this.view.appendComment(factory.comment({"created_at": new Date(2000).toJSON(), "text": "2"}));
......
describe("app.views.SinglePostCommentStream", function() {
beforeEach(function() {
this.post = factory.post();
this.view = new app.views.SinglePostCommentStream({model: this.post});
});
describe("initialize", function() {
it("sets this.CommentView to app.views.ExpandedComment", function() {
expect(this.view.CommentView).toBe(app.views.ExpandedComment);
});
it("calls render when the comments collection has been resetted", function() {
spyOn(app.views.SinglePostCommentStream.prototype, "render");
this.view.initialize();
expect(app.views.SinglePostCommentStream.prototype.render).not.toHaveBeenCalled();
this.post.comments.reset();
expect(app.views.SinglePostCommentStream.prototype.render).toHaveBeenCalled();
});
it("calls setupBindings", function() {
spyOn(app.views.SinglePostCommentStream.prototype, "setupBindings");
this.view.initialize();
expect(app.views.SinglePostCommentStream.prototype.setupBindings).toHaveBeenCalled();
});
});
});
describe("app.views.SinglePostContent", function() { describe("app.views.SinglePostContent", function() {
beforeEach(function(){ beforeEach(function() {
this.post = factory.post(); this.post = factory.post();
this.view = new app.views.SinglePostContent({model : this.post}); this.view = new app.views.SinglePostContent({model: this.post});
}); });
describe("map", function() { describe("map", function() {
context("with location provided", function() { context("with location provided", function() {
beforeEach(function(){ beforeEach(function() {
this.post.set({location : factory.location()}); this.post.set({location: factory.location()});
spec.content().html(this.view.render().el); spec.content().html(this.view.render().el);
gon.appConfig = { map: {mapbox: {enabled: false }}}; gon.appConfig = {map: {mapbox: {enabled: false}}};
}); });
it("initializes the leaflet map", function() { it("initializes the leaflet map", function() {
...@@ -24,7 +24,7 @@ describe("app.views.SinglePostContent", function() { ...@@ -24,7 +24,7 @@ describe("app.views.SinglePostContent", function() {
}); });
context("without location provided", function() { context("without location provided", function() {
beforeEach(function(){ beforeEach(function() {
spec.content().html(this.view.render().el); spec.content().html(this.view.render().el);
}); });
......
describe("app.views.SinglePostInteractionCounts", function() {
beforeEach(function() {
this.post = factory.post();
this.view = new app.views.SinglePostInteractionCounts({model: this.post});
});
describe("initialize", function() {
it("calls render when the interactions change", function() {
spyOn(app.views.SinglePostInteractionCounts.prototype, "render");
this.view.initialize();
expect(app.views.SinglePostInteractionCounts.prototype.render).not.toHaveBeenCalled();
this.post.interactions.trigger("change");
expect(app.views.SinglePostInteractionCounts.prototype.render).toHaveBeenCalled();
});
});
});
describe("app.views.SinglePostInteractions", function() {
beforeEach(function() {
this.post = factory.post();
this.view = new app.views.SinglePostInteractions({model: this.post});
});
describe("render", function() {
it("initializes the SinglePostInteractionCounts view", function() {
spyOn(app.views.SinglePostInteractionCounts.prototype, "initialize");
this.view.render();
expect(app.views.SinglePostInteractionCounts.prototype.initialize).toHaveBeenCalled();
});
it("initializes the SinglePostCommentStream view", function() {
spyOn(app.views.SinglePostCommentStream.prototype, "initialize");
this.view.render();
expect(app.views.SinglePostCommentStream.prototype.initialize).toHaveBeenCalled();
});
});
describe("interaction changes", function() {
it("don't drop the comment textbox value", function() {
this.view.render();
this.view.$("textarea").val("great post!");
expect(this.view.$("#likes").length).toBe(0);
this.view.model.interactions.set({"likes_count": 1});
this.view.model.interactions.trigger("change");
expect(this.view.$("#likes").length).toBe(1);
expect(this.view.$("textarea").val()).toEqual("great post!");
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment