Merge branch 'ajaxy-comments'

3 files changed, 106 insertions, 97 deletions

diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js
index 55d03ce99..690f47612 100644
--- a/public/javascripts/stream.js
+++ b/public/javascripts/stream.js
@@ -52,7 +52,7 @@ var Stream = {
   },
 
   setUpComments: function(){
-    $("a.show_post_comments:not(.show)", this.selector).live('click', Stream.toggleComments);
+    $("a.toggle_post_comments:not(.show)", this.selector).live('click', Stream.toggleComments);
     // comment link form focus
     $(".focus_comment_textarea", this.selector).live('click', function(evt) {
       Stream.focusNewComment($(this), evt);
@@ -66,7 +66,7 @@ var Stream = {
       var element = $(this),
         target = element.parents(".comment"),
         post = element.closest(".stream_element"),
-        toggler = post.find(".show_post_comments");
+        toggler = post.find(".toggle_post_comments");
 
       target.hide("blind", { direction: "vertical" }, 300, function() {
         $(this).remove();
@@ -126,42 +126,58 @@ var Stream = {
 
   toggleComments: function(evt) {
     evt.preventDefault();
-    var $this = $(this),
-      showUl = $(this).closest("li"),
-      commentBlock = $this.closest(".stream_element").find("ul.comments", ".content"),
-      commentBlockMore = $this.closest(".stream_element").find(".older_comments", ".content")
-
-    if( commentBlockMore.hasClass("inactive") ) {
-      commentBlockMore.fadeIn(150, function() {
-        commentBlockMore.removeClass("inactive");
-        commentBlockMore.removeClass("hidden");
+
+    var $toggler = $(this),
+        comments = $toggler.closest('.stream_element').find('ul.comments');
+
+    if (comments.hasClass('loaded') && !comments.hasClass('hidden')){
+      Stream.hideComments.apply($toggler);
+    }else {
+      Stream.showComments.apply($toggler);
+    }
+  },
+  showComments: function(){
+    var commentList = this.closest('.stream_element').find('ul.comments'),
+        toggle = this;
+
+    if( commentList.hasClass('loaded') ){
+        toggle.html(Diaspora.widgets.i18n.t("comments.hide"));
+        commentList.removeClass('hidden');
+    }
+    else {
+      toggle.append("<img alt='loading' src='/images/ajax-loader.gif' />");
+      $.ajax({
+        url: this.attr('href'),
+        success: function(data){
+          toggle.html(Diaspora.widgets.i18n.t("comments.hide"));
+          commentList.html(data)
+                     .addClass('loaded');
+          Diaspora.widgets.publish("stream/scrolled")
+        }
       });
-      $this.html(Diaspora.widgets.i18n.t("comments.hide"));
-    } else {
-      if(commentBlock.hasClass("hidden")) {
-        commentBlock.removeClass("hidden");
-        showUl.css("margin-bottom","-1em");
-        $this.html(Diaspora.widgets.i18n.t("comments.hide"));
-      }else{
-        commentBlock.addClass("hidden");
-        showUl.css("margin-bottom","1em");
-        $this.html(Diaspora.widgets.i18n.t("comments.show"));
-      }
     }
   },
 
+  hideComments: function(){
+    var commentList = this.closest('.stream_element').find('ul.comments');
+    commentList.addClass('hidden');
+    this.html(Diaspora.widgets.i18n.t("comments.show"));
+  },
+
   focusNewComment: function(toggle, evt) {
     evt.preventDefault();
-    var commentBlock = toggle.closest(".stream_element").find("ul.comments", ".content");
+    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");
-      commentBlock.find("textarea").focus();
+      textarea.focus();
     } else {
       if(commentBlock.children().length <= 1) {
         commentBlock.addClass("hidden");
       } else {
-        commentBlock.find("textarea").focus();
+        textarea.focus();
       }
     }
   }
diff --git a/public/javascripts/web-socket-receiver.js b/public/javascripts/web-socket-receiver.js
index 76761a29a..ddd36e354 100644
--- a/public/javascripts/web-socket-receiver.js
+++ b/public/javascripts/web-socket-receiver.js
@@ -97,16 +97,16 @@ var WebSocketReceiver = {
           $(html).fadeIn("fast", function(){})
         );
       } else {
-        $('.comments li:last', post).before(
+        $('.comments', post).append(
           $(html).fadeIn("fast", function(){})
         );
       }
 
-      var toggler = $('.show_post_comments', post).parent();
+      var toggler = $('.toggle_post_comments', post).parent();
 
       if(toggler.length > 0){
         toggler.html(
-          toggler.html().replace(/\d+/,$('.comments', post).find('li').length -1)
+          toggler.html().replace(/\d+/,$('.comments', post).find('li').length)
         );
 
         if( !$(".comments", post).is(':visible') ) {
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
index c13d41ee4..f4b960511 100644
--- a/public/stylesheets/sass/application.sass
+++ b/public/stylesheets/sass/application.sass
@@ -481,11 +481,6 @@ ul.as-selections
       :font
         :size 1em
 
-  .comments
-    :padding
-      :bottom 6px
-    > li:last-child
-      :border-bottom none
   .comment_box
     :width 475px
     :margin
@@ -552,23 +547,6 @@ ul.as-selections
       :background none
       :border none
 
-
-.stream ul.comments
-  :padding
-    :bottom 6px
-
-  > li:last-child
-    :border-bottom none
-
-  .avatar
-    :width 30px
-    :height 30px
-
-  .comment_box
-    :margin
-      :bottom 5px
-
-
 .submit_button
   :text
     :align right
@@ -576,8 +554,12 @@ ul.as-selections
 ul.comments,
 ul.show_comments,
 .likes_container
+
+  .avatar
+    :width 30px
+    :height 30px
+
   :margin 0
-    :top 0.5em
   :padding 0
 
   :font
@@ -587,14 +569,6 @@ ul.show_comments,
 
   :position relative
 
-  form
-    textarea
-      :width 365px
-      :height 21px
-
-  input
-    :display none
-
   li
     :list
       :style none
@@ -603,12 +577,6 @@ ul.show_comments,
     :border
       :bottom 1px dotted #aaa
 
-    .new_comment
-      :min-height 35px
-      p
-        :margin
-          :bottom 0
-
     .from
       :font
         :size 1em
@@ -627,7 +595,7 @@ ul.show_comments,
       :padding
         :left 36px
         :right 10px
-        
+
       p
         :margin
           :bottom 0
@@ -636,41 +604,68 @@ ul.show_comments,
     .right
       :right 4px
 
-    form
+    .avatar
+      :position absolute
+      :display inline
+
+ul.show_comments
+  :padding
+    :bottom 6px
+  :margin
+    :top 6px
+
+form.new_comment
+  :padding 8px 5px
+  .avatar
+    :position absolute
+    :display inline
+    :width 30px
+    :height 30px
+
+  :min-height 35px
+
+  input
+    :display none
+
+  :margin
+    :bottom -4px
+
+  :font
+    :size 1em
+
+  .submit_button
+    input
       :margin
-        :top -5px
-        :bottom -4px
-      :font
-        :size 1em
+        :right 0
 
-      .submit_button
-        input
-          :margin
-            :right 0
+  textarea
+    :width 365px
+    :height 21px
 
-      textarea
-        :font
-          :size 1em
-        :margin
-          :bottom -3px
+    :font
+      :size 1em
+    :margin
+      :top 0
+      :bottom -3px
 
-      p
-        :position relative
-        :left 35px
+  p
+    :margin
+      :bottom 0
+      :top -10px
+    :position relative
+    :left 35px
 
-    .avatar
-      :position absolute
-      :display inline
+  &.open
+    .submit_button
+      :display block
+      :margin
+        :top 5px
+        :bottom 2px
+        :right 2px
+
+    input
+      :display inline-block
 
-    form.open
-      .submit_button
-        :display block
-        :margin
-          :top 5px
-          :bottom 2px
-          :right 2px
-      input
-        :display inline-block
 
 .comments
   .timeago
@@ -2209,8 +2204,6 @@ h3,h4
 
 
 ul.show_comments
-  :margin
-    :bottom -0.5em
   :border
     :top 1px dotted #aaa