Fix #5757 (+2 squashed commits)

Squashed commits:
[e10acde] Open reactions after commenting
[aceea75] Fix hound remarks and reactions tests
The ".comment_action" should be active when the
user clicks on "a.show comments"

[d1deae5] Fix hound remarks
[f5db5dd] Keep current instead of scrolling to first comment
[be63092] Remove unused evt parameter

app/assets/javascripts/mobile/mobile_comments.js

@@ -6,7 +6,7 @@
 
 $(document).ready(function() {
 
-  $(".stream").on("tap click", "a.back_to_stream_element_top", function(evt) {
+  $(".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({
@@ -16,23 +16,45 @@ $(document).ready(function() {
 
   $(".stream").on("tap click", "a.show_comments", function(evt){
     evt.preventDefault();
-    var toggleReactionsLink = $(this),
+    toggleComments($(this));
-        bottomBar = toggleReactionsLink.closest(".bottom_bar").first(),
+  });
-        commentActionLink = bottomBar.find("a.comment_action"),
+
-        commentsContainer = function() { return bottomBar.find(".comment_container").first(); },
+  function toggleComments(toggleReactionsLink) {
-        existingCommentsContainer = commentsContainer();
     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");
-    } else if (existingCommentsContainer.length > 0) {
+  }
+  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');
+    toggleReactionsLink.addClass("active");
-      commentsContainer().find("time.timeago").timeago();
+    existingCommentsContainer.find("time.timeago").timeago();
-    } else {
+  }
+  function showUnloadedComments(toggleReactionsLink, bottomBar, commentActionLink) {
+    var commentsContainer = commentsContainerLazy(bottomBar);
     $.ajax({
-        url: toggleReactionsLink.attr('href'),
+      url: toggleReactionsLink.attr("href"),
-        success: function(data) {
+      success: function (data) {
         $(data).insertAfter(bottomBar.children(".show_comments").first());
         showCommentBox(commentActionLink);
         toggleReactionsLink.addClass("active");
@@ -40,36 +62,40 @@ $(document).ready(function() {
       }
     });
   }
-  });
+  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({
+      $("html,body").animate({
         scrollTop: lastComment.offset().top
       }, 1000);
     }
   };
 
-  $(".stream").on("tap click", "a.comment_action", function(evt){
-    evt.preventDefault();
-    showCommentBox(this);
-    var bottomBar = $(this).closest(".bottom_bar").first();
-    scrollToOffset(bottomBar.find(".comment_container").first());
-  });
-
   function showCommentBox(link){
-    var link = $(link);
+    var commentActionLink = $(link);
-    if(link.hasClass("inactive")) {
+    if(commentActionLink.hasClass("inactive")) {
       $.ajax({
-        url: link.attr("href"),
+        url: commentActionLink.attr("href"),
         beforeSend: function(){
-          link.addClass("loading");
+          commentActionLink.addClass("loading");
         },
-        context: link,
+        context: commentActionLink,
         success: function(data){
-          appendCommentBox.call(this, link, data);
+          appendCommentBox.call(this, commentActionLink, data);
         }
       });
     }
@@ -82,21 +108,14 @@ $(document).ready(function() {
     bottomBar.append(data);
     var textArea = bottomBar.find("textarea.comment_box").first()[0];
     MBP.autogrow(textArea);
-    scrollToFirstComment(bottomBar);
-  }
-
-  function scrollToFirstComment(bottomBar) {
-    $("html, body").animate({
-      scrollTop: bottomBar.offset().top - 54
-    }, 500);
   }
 
   $(".stream").on("submit", ".new_comment", function(evt) {
     evt.preventDefault();
     var form = $(this);
-    $.post(form.attr('action')+"?format=mobile", form.serialize(), function(data) {
+    $.post(form.attr("action")+"?format=mobile", form.serialize(), function(data) {
       updateStream(form, data);
-    }, 'html');
+    }, "html");
   });
 
   function updateStream(form, data) {
@@ -104,7 +123,7 @@ $(document).ready(function() {
     addNewComments(bottomBar, data);
     updateCommentCount(bottomBar);
     updateReactionCount(bottomBar);
-    handleNewCommentBox(form, bottomBar);
+    handleCommentShowing(form, bottomBar);
     bottomBar.find("time.timeago").timeago();
   }
 
@@ -129,16 +148,12 @@ $(document).ready(function() {
     }));
   }
 
-  function handleNewCommentBox(form, bottomBar) {
+  function handleCommentShowing(form, bottomBar) {
-    form.parent().remove();
+    var formContainer = form.parent();
+    formContainer.remove();
     var commentActionLink = bottomBar.find("a.comment_action").first();
     commentActionLink.addClass("inactive");
-    showCommentBoxIfApplicable(bottomBar, commentActionLink);
-  }
-  function showCommentBoxIfApplicable(bottomBar, commentActionLink) {
     var toggleReactionsLink = bottomBar.find(".show_comments").first();
-    if (toggleReactionsLink.hasClass("active")) {
+    showComments(toggleReactionsLink);
-      showCommentBox(commentActionLink);
-    }
   }
 });

app/views/comments/_new_comment.mobile.haml

@@ -8,7 +8,7 @@
       %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
+          = 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 pull-right"
           .clearfix
 

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"