From dc947e449b7b4a3724fc858c4262212cdd37be62 Mon Sep 17 00:00:00 2001 From: Dan Hansen Date: Tue, 30 Aug 2011 20:54:03 -0500 Subject: [PATCH] fix issues with comment stream, fix likes, merge comment stream and comment toggler widgets. make timeago widget a simple wrapper for $.fn.timeago (we don't really need this.) --- app/views/comments/_comments.haml | 25 ++++---- app/views/comments/create.js.erb | 8 +-- public/javascripts/content-updater.js | 16 +++-- public/javascripts/diaspora.js | 3 +- public/javascripts/stream.js | 51 --------------- public/javascripts/widgets/comment-form.js | 1 + public/javascripts/widgets/comment-stream.js | 64 +++++++++++-------- public/javascripts/widgets/comment-toggler.js | 43 ------------- public/javascripts/widgets/comment.js | 4 +- .../widgets/notifications-badge.js | 4 +- public/javascripts/widgets/stream-element.js | 31 +++++---- public/javascripts/widgets/timeago.js | 36 +++-------- spec/javascripts/content-updater-spec.js | 13 ++-- spec/javascripts/helpers/SpecHelper.js | 1 - .../widgets/comment-stream-spec.js | 57 +++++++++++++++++ .../widgets/comment-toggler-spec.js | 32 ---------- 16 files changed, 157 insertions(+), 232 deletions(-) delete mode 100644 public/javascripts/widgets/comment-toggler.js create mode 100644 spec/javascripts/widgets/comment-stream-spec.js delete mode 100644 spec/javascripts/widgets/comment-toggler-spec.js diff --git a/app/views/comments/_comments.haml b/app/views/comments/_comments.haml index 48e88a985..ead494267 100644 --- a/app/views/comments/_comments.haml +++ b/app/views/comments/_comments.haml @@ -1,17 +1,18 @@ -# Copyright (c) 2010, Diaspora Inc. This file is -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. -- unless comments_expanded - %ul.show_comments{:class => ("hidden" if post.comments.size <= 3)} - %li - = comment_toggle( post) +.comment_stream + - unless comments_expanded + %ul.show_comments{:class => ("hidden" if post.comments.size <= 3)} + %li + = comment_toggle( post) -%ul.comments{:class => ('loaded' if post.comments.size <= 3)} - -if post.comments.size > 3 && !comments_expanded - = render :partial => 'comments/comment', :collection => post.last_three_comments, :locals => {:post => post} - -else - = render :partial => 'comments/comment', :collection => post.comments, :locals => {:post => post} + %ul.comments{:class => ('loaded' if post.comments.size <= 3)} + -if post.comments.size > 3 && !comments_expanded + = render :partial => 'comments/comment', :collection => post.last_three_comments, :locals => {:post => post} + -else + = render :partial => 'comments/comment', :collection => post.comments, :locals => {:post => post} -- unless !user_signed_in? || @commenting_disabled - .new_comment_form_wrapper{:class => comment_form_wrapper_class(post)} - = new_comment_form(post.id, current_user) + - unless !user_signed_in? || @commenting_disabled + .new_comment_form_wrapper{:class => comment_form_wrapper_class(post)} + = new_comment_form(post.id, current_user) diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb index a41607636..96650cf8b 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -1,9 +1,3 @@ ContentUpdater.addCommentToPost("<%= @comment.post.guid %>", "<%= @comment.guid%>", - "<%= escape_javascript(render(:partial => 'comments/comment', :locals => { :comment => @comment, :person => current_user.person}))%>"); - -Diaspora.page - .stream - .streamElements["<%= @comment.post.guid %>"] - .commentStream - .instantiateCommentWidgets(); \ No newline at end of file + "<%= escape_javascript(render(:partial => 'comments/comment', :locals => { :comment => @comment, :person => current_user.person}))%>"); \ No newline at end of file diff --git a/public/javascripts/content-updater.js b/public/javascripts/content-updater.js index 635bf88ca..b324f7fbc 100644 --- a/public/javascripts/content-updater.js +++ b/public/javascripts/content-updater.js @@ -18,8 +18,6 @@ var ContentUpdater = { }); Diaspora.page.publish("stream/postAdded", [postGUID]); - Diaspora.page.timeAgo.updateTimeAgo(); - Diaspora.page.directionDetector.updateBinds(); } }, @@ -41,16 +39,22 @@ var ContentUpdater = { $(html).appendTo(comments).fadeIn("fast"); - Diaspora.page.timeAgo.updateTimeAgo(); - Diaspora.page.directionDetector.updateBinds() + Diaspora.page + .stream + .streamElements[postGUID] + .commentStream + .publish("comment/added", [$("#"+commentGUID)]); }, addLikesToPost: function(postGUID, html) { - var likesContainer = $(".likes_container", "#" + postGUID) + var likesContainer = $(".likes.on_post .likes_container", "#" + postGUID) .fadeOut("fast") .html(html); - Diaspora.page.stream.streamElements[postGUID].likes.publish("widget/ready", [likesContainer]); + Diaspora.page + .stream + .streamElements[postGUID] + .likes.publish("widget/ready", [likesContainer]); likesContainer.fadeIn("fast"); } diff --git a/public/javascripts/diaspora.js b/public/javascripts/diaspora.js index f4394a3b6..5d7a17ca0 100644 --- a/public/javascripts/diaspora.js +++ b/public/javascripts/diaspora.js @@ -63,8 +63,7 @@ directionDetector: this.instantiate("DirectionDetector"), flashMessages: this.instantiate("FlashMessages"), header: this.instantiate("Header", body.find("header")), - hoverCard: this.instantiate("HoverCard", body.find("#hovercard")), - timeAgo: this.instantiate("TimeAgo", "abbr.timeago") + hoverCard: this.instantiate("HoverCard", body.find("#hovercard")) }); }; diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index e536772cd..f549a48ac 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -7,12 +7,8 @@ var Stream = { selector: "#main_stream", initialize: function() { - //Diaspora.page.timeAgo.updateTimeAgo(); // this is not needed because - // we do this in both streamelement - // and comment widgets Diaspora.page.directionDetector.updateBinds(); - //audio links Stream.setUpAudioLinks(); }, @@ -28,33 +24,6 @@ var Stream = { box.toggle(); } }); - -// this.setUpComments(); - }, - - setUpComments: function(){ - // comment link form focus - $(".focus_comment_textarea", this.selector).live('click', function(evt) { - Stream.focusNewComment($(this), evt); - }); - - $("textarea.comment_box", this.selector).live("focus", function(evt) { - if (this.value === undefined || this.value === ''){ - var commentBox = $(this); - commentBox - .parent().parent() - .addClass("open"); - } - }); - $("textarea.comment_box", this.selector).live("blur", function(evt) { - if (this.value === undefined || this.value === ''){ - var commentBox = $(this); - commentBox - .parent().parent() - .removeClass("open"); - } - }); - }, setUpAudioLinks: function() { @@ -70,30 +39,10 @@ var Stream = { link.remove(); } }); - }, - - focusNewComment: function(toggle, evt) { - evt.preventDefault(); - var post = toggle.closest(".stream_element"); - var commentBlock = post.find(".new_comment_form_wrapper"); - var textarea = post.find(".new_comment textarea"); - - if(commentBlock.hasClass("hidden")) { - commentBlock.removeClass("hidden"); - textarea.focus(); - } else { - if(commentBlock.children().length <= 1) { - commentBlock.addClass("hidden"); - } else { - textarea.focus(); - } - } } }; $(document).ready(function() { if( $(Stream.selector).length == 0 ) { return } Stream.initializeLives(); -// Diaspora.page.subscribe("stream/reloaded", Stream.initialize, Stream); -// Diaspora.page.publish("stream/reloaded"); }); diff --git a/public/javascripts/widgets/comment-form.js b/public/javascripts/widgets/comment-form.js index 0873bef9e..6a7548d8c 100644 --- a/public/javascripts/widgets/comment-form.js +++ b/public/javascripts/widgets/comment-form.js @@ -12,6 +12,7 @@ }); this.showCommentForm = function() { + self.commentFormElement.parent().removeClass("hidden"); self.commentFormElement.addClass("open"); }; }; diff --git a/public/javascripts/widgets/comment-stream.js b/public/javascripts/widgets/comment-stream.js index 16475eb5c..ab4cbdf64 100644 --- a/public/javascripts/widgets/comment-stream.js +++ b/public/javascripts/widgets/comment-stream.js @@ -4,37 +4,16 @@ this.subscribe("widget/ready", function(evt, commentStream) { $.extend(self, { - commentStream: commentStream, - commentToggler: self.instantiate("CommentToggler", commentStream), + commentsList: commentStream.find("ul.comments"), + commentToggler: commentStream.find(".toggle_post_comments"), comments: {} }); - self.commentStream.delegate(".new_comment", "ajax:failure", function() { + self.commentsList.delegate(".new_comment", "ajax:failure", function() { Diaspora.Alert.show(Diaspora.I18n.t("failed_to_post_message")); }); - // doesn't belong here. - self.commentStream.parents(".stream_element").delegate("a.focus_comment_textarea", "click", function(evt) { - evt.preventDefault(); - - var post = $(this).closest(".stream_element"), - commentBlock = post.find(".new_comment_form_wrapper"), - commentForm = commentBlock.find("form"), - textarea = post.find(".new_comment textarea"); - - if(commentBlock.hasClass("hidden")) { - commentBlock.removeClass("hidden"); - commentForm.addClass("open"); - textarea.focus(); - } else { - if(commentBlock.children().length <= 1) { - commentBlock.addClass("hidden").removeClass("open"); - - } else { - textarea.focus(); - } - } - }); + self.commentToggler.toggle(self.showComments, self.hideComments); self.instantiateCommentWidgets(); }); @@ -42,10 +21,41 @@ this.instantiateCommentWidgets = function() { self.comments = {}; - $.each(self.commentStream.find("li.comment"), function() { - self.comments[this.id] = self.instantiate("Comment", $(this)); + self.commentsList.find("li.comment").each(function() { + self.publish("comment/added", [$("#" + this.id)]); }); }; + + this.showComments = function(evt) { + evt.preventDefault(); + + if(self.commentsList.hasClass("loaded")) { + self.commentToggler.html(Diaspora.I18n.t("comments.hide")); + self.commentsList.removeClass("hidden"); + } + else { + $("", { alt: "loading", src: "/images/ajax-loader.gif"}).appendTo(self.commentToggler); + + $.get(self.commentToggler.attr("href"), function(data) { + self.commentToggler.html(Diaspora.I18n.t("comments.hide")); + + self.commentsList.html(data); + + self.instantiateCommentWidgets(); + }); + } + }; + + this.hideComments = function(evt) { + evt.preventDefault(); + + self.commentToggler.html(Diaspora.I18n.t("comments.show")); + self.commentsList.addClass("hidden"); + }; + + this.subscribe("comment/added", function(evt, comment) { + self.comments[comment.attr("id")] = self.instantiate("Comment", comment); + }); }; Diaspora.Widgets.CommentStream = CommentStream; diff --git a/public/javascripts/widgets/comment-toggler.js b/public/javascripts/widgets/comment-toggler.js deleted file mode 100644 index 6493663e5..000000000 --- a/public/javascripts/widgets/comment-toggler.js +++ /dev/null @@ -1,43 +0,0 @@ -(function() { - var CommentToggler = function() { - var self = this; - - this.subscribe("widget/ready", function(evt, commentStream) { - $.extend(self, { - commentStream: commentStream, - commentToggle: commentStream.siblings(".show_comments").find(".toggle_post_comments"), - postGuid: commentStream.parents(".stream_element").first().attr("id") - }); - - self.commentToggle.toggle(self.showComments, self.hideComments); - }); - - this.showComments = function(evt) { - evt.preventDefault(); - - if(self.commentStream.hasClass("loaded")) { - self.commentToggle.html(Diaspora.I18n.t("comments.hide")); - self.commentStream.removeClass("hidden"); - } - else { - $("", { alt: "loading", src: "/images/ajax-loader.gif"}).appendTo(self.commentToggle); - - $.get(self.commentToggle.attr("href"), function(data) { - self.commentToggle.html(Diaspora.I18n.t("comments.hide")); - self.commentStream.html(data) - .addClass("loaded"); - self.globalPublish("commentStream/" + self.postGuid + "/loaded"); - }); - } - }; - - this.hideComments = function(evt) { - evt.preventDefault(); - - self.commentStream.addClass("hidden"); - self.commentToggle.html(Diaspora.I18n.t("comments.show")); - }; - }; - - Diaspora.Widgets.CommentToggler = CommentToggler; -})(); \ No newline at end of file diff --git a/public/javascripts/widgets/comment.js b/public/javascripts/widgets/comment.js index 78cc78f2a..270133755 100644 --- a/public/javascripts/widgets/comment.js +++ b/public/javascripts/widgets/comment.js @@ -6,21 +6,19 @@ $.extend(self, { comment: comment, deleteCommentLink: comment.find("a.comment_delete"), - timeAgo: self.instantiate("TimeAgo", comment), + timeAgo: self.instantiate("TimeAgo", comment.find("abbr.timeago")), content: comment.find(".content span") }); self.deleteCommentLink.click(self.removeComment); self.deleteCommentLink.tipsy({ trigger: "hover" }); - // collapse long comments self.content.expander({ slicePoint: 200, widow: 18, expandText: Diaspora.I18n.t("show_more"), userCollapse: false }); - }); this.removeComment = function(evt) { diff --git a/public/javascripts/widgets/notifications-badge.js b/public/javascripts/widgets/notifications-badge.js index 6d3f5d19e..26e7a314c 100644 --- a/public/javascripts/widgets/notifications-badge.js +++ b/public/javascripts/widgets/notifications-badge.js @@ -12,8 +12,6 @@ ajaxLoader: dropdown.find(".ajax_loader") }); - self.timeago = self.instantiate("TimeAgo"); - self.badgeLink.toggle(self.showDropdown, self.hideDropdown); self.dropdown.click(function(evt) { @@ -72,7 +70,7 @@ })) .appendTo(self.dropdownNotifications); - self.timeago.updateTimeAgo(".notification_element abbr.timeago"); + notificationElement.find("abbr.timeago").timeago(); if(notification.unread) { notificationElement.addClass("unread"); diff --git a/public/javascripts/widgets/stream-element.js b/public/javascripts/widgets/stream-element.js index 62952b1ad..0093b9794 100644 --- a/public/javascripts/widgets/stream-element.js +++ b/public/javascripts/widgets/stream-element.js @@ -7,15 +7,18 @@ $.extend(self, { commentForm: self.instantiate("CommentForm", element.find("form.new_comment")), - commentStream: self.instantiate("CommentStream", element.find("ul.comments")), + commentStream: self.instantiate("CommentStream", element.find(".comment_stream")), embedder: self.instantiate("Embedder", element.find("div.content")), likes: self.instantiate("Likes", element.find("div.likes_container")), lightBox: self.instantiate("Lightbox", element), + timeAgo: self.instantiate("TimeAgo", element.find(".timeago a abbr.timeago")), + + content: element.find(".content p"), deletePostLink: element.find("a.stream_element_delete"), + focusCommentLink: element.find("a.focus_comment_textarea"), hidePostLoader: element.find("img.hide_loader"), hidePostUndo: element.find("a.stream_element_hide_undo"), - postScope: element.find("span.post_scope"), - content: element.find(".content p") + postScope: element.find("span.post_scope") }); // tipsy tooltips @@ -30,22 +33,24 @@ userCollapse: false }); - self.deletePostLink.bind("click", function(evt) { + self.deletePostLink.click(function(evt) { + evt.preventDefault(); + self.deletePostLink.toggleClass("hidden"); self.hidePostLoader.toggleClass("hidden"); }); - self.hidePostUndo.bind("click", function(evt) { + self.focusCommentLink.click(function(evt) { + evt.preventDefault(); + + self.commentForm.commentInput.focus(); + }); + + self.hidePostUndo.click(function(evt) { + evt.preventDefault(); + self.hidePostLoader.toggleClass("hidden"); }); - - self.globalSubscribe("post/" + self.postGuid + "/comment/added", function(evt, comment) { - self.commentStream.publish("comment/added", comment); - }); - - self.globalSubscribe("commentStream/" + self.postGuid + "/loaded", function(evt) { - self.commentStream.instantiateCommentWidgets(); - }); }); }; diff --git a/public/javascripts/widgets/timeago.js b/public/javascripts/widgets/timeago.js index f02f30cc6..888ac0320 100644 --- a/public/javascripts/widgets/timeago.js +++ b/public/javascripts/widgets/timeago.js @@ -3,37 +3,17 @@ * the COPYRIGHT file. */ (function() { - var TimeAgo = function() { + if(Diaspora.I18n.language !== "en") { + $.each($.timeago.settings.strings, function(index) { + $.timeago.settings.strings[index] = Diaspora.I18n.t("timeago." + index); + }); + } + + Diaspora.Widgets.TimeAgo = function() { var self = this; - this.selector = "abbr.timeago"; this.subscribe("widget/ready", function(evt, element) { - self.element = element; - self.updateTimeAgo(); - - if(Diaspora.I18n.language !== "en") { - $.each($.timeago.settings.strings, function(index) { - $.timeago.settings.strings[index] = Diaspora.I18n.t("timeago." + index); - }); - } + self.element = element.timeago(); }); - - this.timeAgoElement = function(selector) { - return $((typeof selector === "string") ? selector : this.selector); - }; - - this.updateTimeAgo = function() { - if (arguments.length > 1) { - var newElements = Array.prototype.slice.call(arguments,1); - $(newElements).find(self.selector).timeago(); - } - else { - self.timeAgoElement().timeago(); - } - }; - - this.globalSubscribe("stream/scrolled stream/reloaded", self.updateTimeAgo); }; - - Diaspora.Widgets.TimeAgo = TimeAgo; })(); diff --git a/spec/javascripts/content-updater-spec.js b/spec/javascripts/content-updater-spec.js index 2832dc95f..199297c8f 100644 --- a/spec/javascripts/content-updater-spec.js +++ b/spec/javascripts/content-updater-spec.js @@ -64,17 +64,23 @@ describe("ContentUpdater", function() { spec.loadFixture("aspects_index_with_posts"); post = $(".stream_element:first"), postGUID = post.attr("id"); + + + Diaspora.page.stream = { streamElements: { } }; + + Diaspora.page.stream.streamElements[postGUID] = { + commentStream: {publish: $.noop} + }; }); it("adds a comment to a post only if it doesn't already exist", function() { var comments = post.find("ul.comments li"); - ContentUpdater.addCommentToPost(postGUID, "YEAH", "
  • Comment
    • "); + ContentUpdater.addCommentToPost(postGUID, "978124", "
  • Comment
    • "); expect(post.find("ul.comments li").length).toEqual(comments.length + 1); - ContentUpdater.addCommentToPost(postGUID, "YEAH", "
  • Comment
    • "); + ContentUpdater.addCommentToPost(postGUID, "978124", "
  • Comment
    • "); expect(post.find("ul.comments li").length).toEqual(comments.length + 1); - }); }); @@ -86,7 +92,6 @@ describe("ContentUpdater", function() { Diaspora.Page = "AspectsIndex"; Diaspora.instantiatePage(); - post = $(".stream_element:first"), postGUID = post.attr("id"); diff --git a/spec/javascripts/helpers/SpecHelper.js b/spec/javascripts/helpers/SpecHelper.js index ad9d9aa43..ccb456878 100644 --- a/spec/javascripts/helpers/SpecHelper.js +++ b/spec/javascripts/helpers/SpecHelper.js @@ -19,7 +19,6 @@ beforeEach(function() { Diaspora.Pages.TestPage = function() { var self = this; this.subscribe("page/ready", function() { - self.timeAgo = self.instantiate("TimeAgo", "abbr.timeago"); self.directionDetector = self.instantiate("DirectionDetector"); }); }; diff --git a/spec/javascripts/widgets/comment-stream-spec.js b/spec/javascripts/widgets/comment-stream-spec.js new file mode 100644 index 000000000..1a2432119 --- /dev/null +++ b/spec/javascripts/widgets/comment-stream-spec.js @@ -0,0 +1,57 @@ +describe("Diaspora.Widgets.CommentStream", function() { + var commentStream; + beforeEach(function() { + jasmine.Clock.useMock(); + spec.loadFixture("aspects_index_with_posts"); + Diaspora.I18n.locale = { }; + + var post = $(".stream_element:first"), + postGUID = post.attr("id"); + + commentStream = Diaspora.BaseWidget.instantiate("CommentStream", $(".stream_element:first .comment_stream")); + }); + + describe("hideComments", function() { + + }); + + describe("toggling comments", function() { + it("toggles class hidden on the comments ul", function () { + + expect($("ul.comments:first")).not.toHaveClass("hidden"); + + commentStream.hideComments($.Event()); + + jasmine.Clock.tick(200); + + expect($("ul.comments:first")).toHaveClass("hidden"); + + commentStream.showComments($.Event()); + + jasmine.Clock.tick(200); + + expect($("ul.comments:first")).not.toHaveClass("hidden"); + }); + + it("changes the text on the show comments link", function() { + Diaspora.I18n.loadLocale({'comments' : { + 'show': 'show comments translation', + 'hide': 'hide comments translation' + }}, 'en'); + + var link = $("a.toggle_post_comments:first"); + + commentStream.showComments($.Event()); + + jasmine.Clock.tick(200); + + expect(link.text()).toEqual("hide comments translation"); + + commentStream.hideComments($.Event()); + + jasmine.Clock.tick(200); + + expect(link.text()).toEqual("show comments translation"); + }); + }); +}); \ No newline at end of file diff --git a/spec/javascripts/widgets/comment-toggler-spec.js b/spec/javascripts/widgets/comment-toggler-spec.js deleted file mode 100644 index 25f9a66c6..000000000 --- a/spec/javascripts/widgets/comment-toggler-spec.js +++ /dev/null @@ -1,32 +0,0 @@ -/* Copyright (c) 2010, Diaspora Inc. This file is - * licensed under the Affero General Public License version 3 or later. See - * the COPYRIGHT file. - */ - -describe("Diaspora.Widgets.CommentToggler", function() { - var commentToggler; - beforeEach(function() { - jasmine.Clock.useMock(); - spec.loadFixture("aspects_index_with_posts"); - Diaspora.I18n.locale = { }; - commentToggler = Diaspora.BaseWidget.instantiate("CommentToggler", $(".stream_element:first ul.comments")); - }); - - describe("toggleComments", function() { - it("toggles class hidden on the comments ul", function () { - expect($("ul.comments:first")).not.toHaveClass("hidden"); - commentToggler.hideComments($.Event()); - jasmine.Clock.tick(200); - expect($("ul.comments:first")).toHaveClass("hidden"); - }); - - it("changes the text on the show comments link", function() { - var link = $("a.toggle_post_comments:first"); - Diaspora.I18n.loadLocale({'comments' : {'show': 'comments.show pl'}}, 'en'); - expect(link.text()).toEqual("Hide all comments"); - commentToggler.hideComments($.Event()); - jasmine.Clock.tick(200); - expect(link.text()).toEqual("comments.show pl"); - }); - }); -});