Merge pull request #6406 from cmrd-senya/comment-expand-optimization-2 (16618e10) · Commits · Gigadoc 2 / diaspora

Changelog.md

+1 −0

Original line number	Diff line number	Diff line
		@@ -137,6 +137,7 @@ The command will report queues that still have jobs and launch sidekiq process f
		* Remove outdated columns from posts table [#6940](https://github.com/diaspora/diaspora/pull/6940)
		* Remove some unused routes [#6781](https://github.com/diaspora/diaspora/pull/6781)
		* Consolidate sidekiq queues [#6950](https://github.com/diaspora/diaspora/pull/6950)
		* Don't re-render the whole comment stream when adding comments [#6406](https://github.com/diaspora/diaspora/pull/6406)

		## Bug fixes
		* Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

app/assets/javascripts/app/views/comment_stream_view.js

+32 −17

Original line number	Diff line number	Diff line
		@@ -21,16 +21,10 @@ app.views.CommentStream = app.views.Base.extend({

		setupBindings: function() {
		this.model.comments.bind('add', this.appendComment, this);
		this.model.bind("commentsExpanded", this.storeTextareaValue, this);
		this.model.bind("commentsExpanded", this.render, this);
		},

		postRenderTemplate : function() {
		this.model.comments.each(this.appendComment, this);

		// add autoexpanders to new comment textarea
		this.$("textarea").val(this.textareaValue);
		autosize.update(this.$("textarea"));
		},

		presenter: function(){
		@@ -62,34 +56,55 @@ app.views.CommentStream = app.views.Base.extend({
		}
		},

		_insertPoint: 0, // An index of the comment added in the last call of this.appendComment

		// This adjusts this._insertPoint according to timestamp value
		_moveInsertPoint: function(timestamp, commentBlocks) {
		if (commentBlocks.length === 0) {
		this._insertPoint = 0;
		return;
		}

		if (this._insertPoint > commentBlocks.length) {
		this._insertPoint = commentBlocks.length;
		}

		while (this._insertPoint > 0 && timestamp < commentBlocks.eq(this._insertPoint - 1).find("time").attr("datetime")) {
		this._insertPoint--;
		}
		while (this._insertPoint < commentBlocks.length &&
		timestamp > commentBlocks.eq(this._insertPoint).find("time").attr("datetime")) {
		this._insertPoint++;
		}
		},

		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.Comment({
		model: comment
		}).render().el);
		var commentHtml = new app.views.Comment({model: comment}).render().el;
		var commentBlocks = this.$(".comments div.comment.media");
		this._moveInsertPoint(comment.get("created_at"), commentBlocks);
		if (this._insertPoint === commentBlocks.length) {
		this.$(".comments").append(commentHtml);
		} else {
		commentBlocks.eq(this._insertPoint).before(commentHtml);
		}
		this._insertPoint++;
		},

		commentTextareaFocused: function(){
		this.$("form").removeClass('hidden').addClass("open");
		},

		storeTextareaValue: function(){
		this.textareaValue = this.$('textarea').val();
		},

		expandComments: function(evt){
		if(evt){ evt.preventDefault(); }
		var self = this;

		this.model.comments.fetch({
		success : function(resp){
		self.model.set({
		comments : resp.models,
		all_comments_loaded : true
		});
		self.$("div.comment.show_comments").addClass("hidden");

		self.model.trigger("commentsExpanded", self);
		}

app/assets/templates/comment-stream_tpl.jst.hbs

+6 −8

Original line number	Diff line number	Diff line
		{{#unless all_comments_loaded}}
		<div class="show_comments comment {{#unless showExpandCommentsLink}} hidden {{/unless}}">
		<div class="media">
		<a href="/posts/{{id}}#comments" class="toggle_post_comments">
		@@ -6,7 +5,6 @@
		</a>
		</div>
		</div>
		{{/unless}}

		<div class="comments"> </div>

spec/javascripts/app/views/comment_stream_view_spec.js

+18 −14

Original line number	Diff line number	Diff line
		@@ -5,20 +5,11 @@ describe("app.views.CommentStream", function(){
		});

		describe("binds", function() {
		it("re-renders on a commentsExpanded trigger", function(){
		spyOn(this.view, "render");
		it("calls appendComment on insertion to the comments collection", function() {
		spyOn(this.view, "appendComment");
		this.view.setupBindings();
		this.view.model.trigger("commentsExpanded");
		expect(this.view.render).toHaveBeenCalled();
		});
		});

		describe("postRenderTemplate", function(){
		it("autoResizes the new comment textarea", function(){
		spyOn(window.autosize, "update");
		this.view.postRenderTemplate();
		expect(window.autosize.update).toHaveBeenCalled();
		expect(window.autosize.update.calls.mostRecent().args[0].selector).toBe("textarea");
		this.view.model.comments.push(factory.comment());
		expect(this.view.appendComment).toHaveBeenCalled();
		});
		});

		@@ -79,10 +70,23 @@ describe("app.views.CommentStream", function(){
		this.view.appendComment(comment);
		expect(comment.set).toHaveBeenCalled();
		});

		it("sorts comments in the right order", function() {
		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(4000).toJSON(), "text": "4"}));
		this.view.appendComment(factory.comment({"created_at": new Date(5000).toJSON(), "text": "5"}));
		this.view.appendComment(factory.comment({"created_at": new Date(6000).toJSON(), "text": "6"}));
		this.view.appendComment(factory.comment({"created_at": new Date(1000).toJSON(), "text": "1"}));
		this.view.appendComment(factory.comment({"created_at": new Date(3000).toJSON(), "text": "3"}));

		expect(this.view.$(".comments div.comment.media").length).toEqual(6);
		expect(this.view.$(".comments div.comment.media div.comment-content p").text()).toEqual("123456");
		});
		});

		describe("expandComments", function() {
		it("refills the comment textbox on success", function() {
		it("doesn't drop the comment textbox value on success", function() {
		this.view.render();
		this.view.$("textarea").val("great post!");
		this.view.expandComments();