Merge pull request #6066 from theworldbright/5483-fix-mobile-stream-comments

Fix for #5483 and #5757 (mobile stream comments)

app/assets/javascripts/mobile/mobile.js

@@ -20,6 +20,7 @@
 //= require mobile/mobile_file_uploader
 //= require mobile/profile_aspects
 //= require mobile/tag_following
+//= require mobile/mobile_comments.js
 
 $(document).ready(function(){
 
@@ -127,147 +128,6 @@ $(document).ready(function(){
     }
   });
 
-  /* Show comments */
-  $("a.show_comments", ".stream").bind("tap click", function(evt){
-    evt.preventDefault();
-    var link = $(this),
-        parent = link.closest(".bottom_bar").first(),
-        commentsContainer = function(){ return parent.find(".comment_container").first(); },
-        existingCommentsContainer = commentsContainer();
-
-    if( link.hasClass('active') ) {
-      existingCommentsContainer.hide();
-      if(!link.hasClass('bottom_collapse')){
-        link.removeClass('active');
-      } else {
-        parent.find(".show_comments").first().removeClass('active');
-      }
-
-      $('html,body').scrollTop(parent.offset().top - parent.closest(".stream_element").height() - 8);
-
-    } else if( existingCommentsContainer.length > 0) {
-
-      if(!existingCommentsContainer.hasClass('noComments')) {
-        $.ajax({
-          url: link.attr('href'),
-          success: function(data){
-            parent.append($(data).find('.comments_container').html());
-            link.addClass('active');
-            existingCommentsContainer.show();
-            scrollToOffset(parent, commentsContainer());
-            commentsContainer().find('time.timeago').timeago();
-          }
-        });
-      } else {
-        existingCommentsContainer.show();
-        existingCommentsContainer.find('time.timeago').timeago();
-      }
-
-      link.addClass('active');
-
-    } else {
-      $.ajax({
-        url: link.attr('href'),
-        success: function(data){
-          parent.append(data);
-          link.addClass('active');
-          scrollToOffset(parent, commentsContainer());
-          commentsContainer().find('time.timeago').timeago();
-        }
-      });
-    }
-  });
-
-  var scrollToOffset = function(parent, commentsContainer){
-    var commentCount = commentsContainer.find("li.comment").length;
-    if( commentCount > 3 ) {
-      var lastComment = commentsContainer.find("li:nth-child("+(commentCount-4)+")");
-      $('html,body').animate({
-        scrollTop: lastComment.offset().top
-      }, 1000);
-    }
-  };
-
-  $(".stream").delegate("a.comment_action", "tap click", function(evt){
-    evt.preventDefault();
-    var link = $(this);
-
-    if(link.hasClass('inactive')) {
-      var parent = link.closest(".bottom_bar").first(),
-          container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container').first();
-
-      $.ajax({
-        url: link.attr('href'),
-        beforeSend: function(){
-          link.addClass('loading');
-        },
-        context: link,
-        success: function(data){
-          var textarea = function(target) { return target.closest(".stream_element").find('textarea.comment_box').first()[0] };
-          link.removeClass('loading');
-
-          if(!link.hasClass("add_comment_bottom_link")){
-            link.removeClass('inactive');
-          }
-
-          container.hide();
-          parent.append(data);
-
-          MBP.autogrow(textarea($(this)));
-        }
-      });
-    }
-  });
-
-  $(".stream").delegate("a.cancel_new_comment", "tap click", function(evt){
-    evt.preventDefault();
-    var link = $(this),
-        form = link.closest("form"),
-        commentActionLink = link.closest(".bottom_bar").find("a.comment_action").first(),
-        container = link.closest('.bottom_bar').find('.add_comment_bottom_link_container');
-
-    if(container.length > 0 ){
-      container.first().show();
-    }
-
-    commentActionLink.addClass("inactive");
-    form.remove();
-  });
-
-  $(document).on("submit", ".new_comment", function(evt){
-    evt.preventDefault();
-    var form = $(this);
-
-    $.post(form.attr('action')+"?format=mobile", form.serialize(), function(data){
-      var bottomBar = form.closest('.bottom_bar').first(),
-          container = bottomBar.find('.add_comment_bottom_link_container'),
-          commentActionLink = bottomBar.find("a.comment_action").first(),
-          reactionLink = bottomBar.find(".show_comments").first(),
-          commentCount = bottomBar.find(".comment_count");
-
-      if(container.length > 0) {
-        container.before(data);
-        form.remove();
-        container.show();
-
-      } else {
-        var comments = $("<ul class='comments'></ul>");
-        container = $("<div class='comments_container not_all_present'></div>");
-
-        comments.html(data);
-        container.append(comments);
-        form.remove();
-        container.appendTo(bottomBar);
-      }
-
-      reactionLink.text(reactionLink.text().replace(/(\d+)/, function(match){ return parseInt(match) + 1; }));
-      commentCount.text(commentCount.text().replace(/(\d+)/, function(match){ return parseInt(match) + 1; }));
-      commentActionLink.addClass("inactive");
-      bottomBar.find('time.timeago').timeago();
-    }, 'html');
-  });
-
-
   $(".service_icon").bind("tap click", function() {
     var service = $(this).toggleClass("dim"),
       selectedServices = $("#new_status_message .service_icon:not(.dim)"),

app/assets/javascripts/mobile/mobile_comments.js

+/*
+ *  Copyright (c) 2010-2011, Diaspora Inc.  This file is
+ *   licensed under the Affero General Public License version 3 or later.  See
+ *   the COPYRIGHT file.
+ */
+
+$(document).ready(function() {
+
+  $(".stream").on("tap click", "a.back_to_stream_element_top", function() {
+    var bottomBar = $(this).closest(".bottom_bar").first();
+    var streamElement = bottomBar.parent();
+    $("html, body").animate({
+      scrollTop: streamElement.offset().top - 54
+    }, 1000);
+  });
+
+  $(".stream").on("tap click", "a.show_comments", function(evt){
+    evt.preventDefault();
+    toggleComments($(this));
+  });
+
+  function toggleComments(toggleReactionsLink) {
+    if (toggleReactionsLink.hasClass("active")) {
+      hideComments(toggleReactionsLink);
+    } else {
+      showComments(toggleReactionsLink);
+    }
+  }
+  function hideComments(toggleReactionsLink) {
+    var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
+        commentsContainer = commentsContainerLazy(bottomBar),
+        existingCommentsContainer = commentsContainer();
+    existingCommentsContainer.hide();
+    toggleReactionsLink.removeClass("active");
+  }
+  function showComments(toggleReactionsLink) {
+    var bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
+        commentsContainer = commentsContainerLazy(bottomBar),
+        existingCommentsContainer = commentsContainer(),
+        commentActionLink = bottomBar.find("a.comment_action");
+    if (existingCommentsContainer.length > 0) {
+      showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink);
+    } else {
+      showUnloadedComments(toggleReactionsLink, bottomBar, commentActionLink);
+    }
+  }
+  function showLoadedComments(toggleReactionsLink, existingCommentsContainer, commentActionLink) {
+    existingCommentsContainer.show();
+    showCommentBox(commentActionLink);
+    toggleReactionsLink.addClass("active");
+    existingCommentsContainer.find("time.timeago").timeago();
+  }
+  function showUnloadedComments(toggleReactionsLink, bottomBar, commentActionLink) {
+    var commentsContainer = commentsContainerLazy(bottomBar);
+    $.ajax({
+      url: toggleReactionsLink.attr("href"),
+      success: function (data) {
+        $(data).insertAfter(bottomBar.children(".show_comments").first());
+        showCommentBox(commentActionLink);
+        toggleReactionsLink.addClass("active");
+        commentsContainer().find("time.timeago").timeago();
+      }
+    });
+  }
+  function commentsContainerLazy(bottomBar) {
+    return function() {
+      return bottomBar.find(".comment_container").first();
+    };
+  }
+
+  $(".stream").on("tap click", "a.comment_action", function(evt) {
+    evt.preventDefault();
+    showCommentBox(this);
+    var bottomBar = $(this).closest(".bottom_bar").first();
+    var commentContainer = bottomBar.find(".comment_container").first();
+    scrollToOffset(commentContainer);
+  });
+  var scrollToOffset = function(commentsContainer){
+    var commentCount = commentsContainer.find("li.comment").length;
+    if ( commentCount > 3 ) {
+      var lastComment = commentsContainer.find("li:nth-child("+(commentCount-3)+")");
+      $("html,body").animate({
+        scrollTop: lastComment.offset().top
+      }, 1000);
+    }
+  };
+
+  function showCommentBox(link){
+    var commentActionLink = $(link);
+    if(commentActionLink.hasClass("inactive")) {
+      $.ajax({
+        url: commentActionLink.attr("href"),
+        beforeSend: function(){
+          commentActionLink.addClass("loading");
+        },
+        context: commentActionLink,
+        success: function(data){
+          appendCommentBox.call(this, commentActionLink, data);
+        }
+      });
+    }
+  }
+
+  function appendCommentBox(link, data) {
+    link.removeClass("loading");
+    link.removeClass("inactive");
+    var bottomBar = link.closest(".bottom_bar").first();
+    bottomBar.append(data);
+    var textArea = bottomBar.find("textarea.comment_box").first()[0];
+    MBP.autogrow(textArea);
+  }
+
+  $(".stream").on("submit", ".new_comment", function(evt) {
+    evt.preventDefault();
+    var form = $(this);
+    $.post(form.attr("action")+"?format=mobile", form.serialize(), function(data) {
+      updateStream(form, data);
+    }, "html");
+  });
+
+  function updateStream(form, data) {
+    var bottomBar = form.closest(".bottom_bar").first();
+    addNewComments(bottomBar, data);
+    updateCommentCount(bottomBar);
+    updateReactionCount(bottomBar);
+    handleCommentShowing(form, bottomBar);
+    bottomBar.find("time.timeago").timeago();
+  }
+
+  function addNewComments(bottomBar, data) {
+    var commentsContainer = bottomBar.find(".comment_container").first();
+    var comments = commentsContainer.find(".comments").first();
+    comments.append(data);
+  }
+
+  // Fix for no comments
+  function updateCommentCount(bottomBar) {
+    var commentCount = bottomBar.find(".comment_count");
+    commentCount.text(commentCount.text().replace(/(\d+)/, function (match) {
+      return parseInt(match) + 1;
+    }));
+  }
+  // Fix for no reactions
+  function updateReactionCount(bottomBar) {
+    var toggleReactionsLink = bottomBar.find(".show_comments").first();
+    toggleReactionsLink.text(toggleReactionsLink.text().replace(/(\d+)/, function (match) {
+      return parseInt(match) + 1;
+    }));
+  }
+
+  function handleCommentShowing(form, bottomBar) {
+    var formContainer = form.parent();
+    formContainer.remove();
+    var commentActionLink = bottomBar.find("a.comment_action").first();
+    commentActionLink.addClass("inactive");
+    var toggleReactionsLink = bottomBar.find(".show_comments").first();
+    showComments(toggleReactionsLink);
+  }
+});

app/assets/stylesheets/mobile/mobile.scss

@@ -416,13 +416,6 @@ h3 {  margin-top: 0; }
     }
   }
 
-  .show_comments.bottom_collapse {
-    position: absolute;
-    right: 10px;
-    top: 14px;
-    padding: 5px 10px;
-  }
-
   #bottom_bar_tabs {
     display: table;
     width: 100%;

app/views/comments/_new_comment.mobile.haml

@@ -2,10 +2,15 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-= form_tag( post_comments_path(post_id), id: "new_comment_on_#{post_id}", class: 'new_comment', autocomplete: "off") do
-  %fieldset
-    .control-group
-      = hidden_field_tag :post_id,  post_id, id: "post_id_on_#{post_id}"
-      = text_area_tag :text, nil, class: "col-md-12 comment_box form-control form-group", id: "comment_text_on_#{post_id}", placeholder: t('.comment'), autofocus: true
-      = submit_tag t('.comment'), id: "comment_submit_#{post_id}", 'data-disable-with' => t('.commenting'), class: "btn btn-primary pull-right"
-      .clearfix
+.add_comment_bottom_link_container
+  = link_to "#", class: "back_to_stream_element_top pull-right" do
+    = image_tag "mobile/arrow_up_small.png"
+
+  - if user_signed_in?
+    = form_tag( post_comments_path(post_id), id: "new_comment_on_#{post_id}", class: "new_comment", autocomplete: "off") do
+      %fieldset
+        .control-group
+          = hidden_field_tag :post_id,  post_id, id: "post_id_on_#{post_id}"
+          = text_area_tag :text, nil, class: "col-md-12 comment_box form-control form-group", id: "comment_text_on_#{post_id}", placeholder: t(".comment")
+          = submit_tag t(".comment"), id: "comment_submit_#{post_id}", 'data-disable-with' => t(".commenting"), class: "btn btn-primary btn-block"
+          .clearfix

app/views/shared/_post_stats.mobile.haml

@@ -12,10 +12,3 @@
 
   %ul.comments
     = render partial: "comments/comment", collection: @post.comments.for_a_stream, locals: {post: @post}
-
-    %li.comment.add_comment_bottom_link_container
-      = link_to "#", class: "show_comments bottom_collapse active" do
-        = image_tag "mobile/arrow_up_small.png"
-
-      - if user_signed_in?
-        = link_to t("comments.new_comment.comment"), new_post_comment_path(@post), class: "add_comment_bottom_link btn btn-default comment_action inactive"

features/mobile/reactions.feature

@@ -33,7 +33,7 @@ Feature: reactions mobile post
     And I should see "1 reaction" within ".show_comments"
     And I click on selector "a.show_comments"
     And I should see "1" within ".comment_count"
-    When I click on selector "a.image_link.comment_action.inactive"
+    When I click on selector "a.image_link.comment_action"
     And I click on selector "a.remove"
     And I confirm the alert
     Then I should not see "1 reaction" within ".show_comments"