Fix "Publish comment" button when restoring a page from browser cache

We need to use page body event delegation so it will work with any
element even with the ones added through ajax, in this case the
annotation comments box form. By doing this way we do not need
this code on the server response anymore.

Furthermore JS events defined at ajax responses are not part of
application javascript and are lost when restoring a page from
browser cache, you can try to apply the same event delegation
technique to the `erb` file and it wont work just because events
added dinamically are not treated the same than `application.js`
code.

To reproduce the error:

  1. Load an annotatable draft version
  2. Move to any other page
  3. Go back

Now "Publish comment" button wont work.

app/assets/javascripts/legislation_annotatable.js

@@ -186,6 +186,15 @@
         }
       };
     },
+    initCommentFormToggler: function() {
+      $("body").on("click", ".comment-box a.publish-comment", function(e) {
+        e.preventDefault();
+        var annotation_id = $(this).closest(".comment-box").data("id");
+        $("a.publish-comment").hide();
+        $("#js-comment-form-annotation-" + annotation_id).toggle();
+        $("#js-comment-form-annotation-" + annotation_id + " textarea").trigger("focus");
+      });
+    },
     initialize: function() {
       var current_user_id;
       $("body").on("renderLegislationAnnotation", App.LegislationAnnotatable.renderAnnotationComments);
@@ -226,6 +235,8 @@
           });
         });
       });
+
+      App.LegislationAnnotatable.initCommentFormToggler();
     },
     destroy: function() {
       if ($(".legislation-annotatable").length > 0) {

app/views/legislation/annotations/_comments_box.html.erb

@@ -1,4 +1,4 @@
-<div class="comment-box" id="comments-box-<%= annotation.id %>">
+<div class="comment-box" id="comments-box-<%= annotation.id %>" data-id="<%= annotation.id %>">
   <div class="comment-header">
     <%= render "comment_header", annotation: annotation %>
   </div>

app/views/legislation/annotations/_comments_box_form.js.erb

@@ -1,13 +1,3 @@
-$("#comments-box-<%= annotation.id %> a.publish-comment").on({
-  click: function(e) {
-    e.preventDefault();
-    $("a.publish-comment").hide();
-    $("#js-comment-form-annotation-<%= annotation.id %>").toggle();
-    $("#js-comment-form-annotation-<%= annotation.id %> textarea").focus();
-    return;
-  }
-});
-
 <% if comment.errors.any? %>
   $("#comments-box-<%= @annotation.id %> a.publish-comment").hide();
   $("#js-comment-form-annotation-<%= annotation.id %>").toggle();

spec/system/legislation/draft_versions_spec.rb

@@ -254,6 +254,28 @@ describe "Legislation Draft Versions" do
       expect(page).to have_content "A collaborative legislation process"
       expect(page).to have_css(".annotator-hl", count: 1)
     end
+
+    scenario "When page is restored from browser cache publish comment button keeps working" do
+      create(:legislation_annotation, draft_version: draft_version, text: "my annotation")
+
+      visit legislation_process_draft_version_path(draft_version.process, draft_version)
+
+      find(:css, ".annotator-hl").click
+
+      click_link "Help"
+
+      expect(page).to have_content "CONSUL is a platform for citizen participation"
+
+      go_back
+
+      expect(page).to have_content "A collaborative legislation process"
+
+      click_link "Publish Comment"
+      fill_in "comment[body]", with: "My interesting comment"
+      click_button "Publish comment"
+
+      expect(page).to have_content "My interesting comment"
+    end
   end
 
   context "Merged annotations", :js do