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

@@ -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
+.comment_stream
-  %ul.show_comments{:class => ("hidden" if post.comments.size <= 3)}
+  - unless comments_expanded
-    %li
+    %ul.show_comments{:class => ("hidden" if post.comments.size <= 3)}
-      = comment_toggle( post)
+      %li
+        = comment_toggle( post)
 
-%ul.comments{:class => ('loaded' if post.comments.size <= 3)}
+  %ul.comments{:class => ('loaded' if post.comments.size <= 3)}
-  -if post.comments.size > 3 && !comments_expanded
+    -if post.comments.size > 3 && !comments_expanded
-    = render :partial => 'comments/comment', :collection => post.last_three_comments, :locals => {:post => post}
+      = render :partial => 'comments/comment', :collection => post.last_three_comments, :locals => {:post => post}
-  -else
+    -else
-    = render :partial => 'comments/comment', :collection => post.comments, :locals => {:post => post}
+      = render :partial => 'comments/comment', :collection => post.comments, :locals => {:post => post}
 
-- unless !user_signed_in? || @commenting_disabled
+  - unless !user_signed_in? || @commenting_disabled
-  .new_comment_form_wrapper{:class => comment_form_wrapper_class(post)}
+    .new_comment_form_wrapper{:class => comment_form_wrapper_class(post)}
-    = new_comment_form(post.id, current_user)
+      = new_comment_form(post.id, current_user)

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}))%>");
+   "<%= escape_javascript(render(:partial => 'comments/comment', :locals => { :comment => @comment, :person => current_user.person}))%>");
-
-Diaspora.page
-  .stream
-  .streamElements["<%= @comment.post.guid %>"]
-  .commentStream
-  .instantiateCommentWidgets();

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
-    Diaspora.page.directionDetector.updateBinds()
+      .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");
   }

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")),
+      hoverCard: this.instantiate("HoverCard", body.find("#hovercard"))
-      timeAgo: this.instantiate("TimeAgo", "abbr.timeago")
     });
   };
 

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");
 });

public/javascripts/widgets/comment-form.js

@@ -12,6 +12,7 @@
     });
 
     this.showCommentForm = function() {
+      self.commentFormElement.parent().removeClass("hidden");
       self.commentFormElement.addClass("open");
     };
   };

public/javascripts/widgets/comment-stream.js

@@ -4,37 +4,16 @@
 
     this.subscribe("widget/ready", function(evt, commentStream) {
       $.extend(self, {
-        commentStream: commentStream,
+        commentsList: commentStream.find("ul.comments"),
-        commentToggler: self.instantiate("CommentToggler", commentStream),
+        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.commentToggler.toggle(self.showComments, self.hideComments);
-      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.instantiateCommentWidgets();
     });
@@ -42,10 +21,41 @@
     this.instantiateCommentWidgets = function() {
       self.comments = {};
 
-      $.each(self.commentStream.find("li.comment"), function() {
+      self.commentsList.find("li.comment").each(function() {
-        self.comments[this.id] = self.instantiate("Comment", $(this));
+        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 {
+        $("<img/>", { 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;

public/javascripts/widgets/comment-toggler.js

@@ -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 {
-        $("<img/>", { 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;
-})();

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) {

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");

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"),
+        postScope: element.find("span.post_scope")
-        content: element.find(".content p")
       });
 
       // 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();
-      });
     });
   };
 

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.element = element.timeago();
-      self.updateTimeAgo();
-
-      if(Diaspora.I18n.language !== "en") {
-				$.each($.timeago.settings.strings, function(index) {
-	  			$.timeago.settings.strings[index] = Diaspora.I18n.t("timeago." + index);
-				});
-      }
     });
-
-    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;
 })();

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", "<li id='YEAH'>Comment</li>");
+      ContentUpdater.addCommentToPost(postGUID, "978124", "<li id='978124'>Comment</li>");
       expect(post.find("ul.comments li").length).toEqual(comments.length + 1);
 
-      ContentUpdater.addCommentToPost(postGUID, "YEAH", "<li id='YEAH'>Comment</li>");
+      ContentUpdater.addCommentToPost(postGUID, "978124", "<li id='978124'>Comment</li>");
       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");
 

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");
     });
   };

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");
+    });
+  });
+});

spec/javascripts/widgets/comment-toggler-spec.js

@@ -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");
-    });
-  });
-});