Feature: Add Unique Preview Button IDs (publiclab#9012)

* rename method for making comment element IDs

* add unique IDs + new classes for preview buttons

* capitalize comment in wiki Post comment form

* change references to new preview button classes & IDs

* change preview ID to match comment editor's

* change CSS for new comment preview IDs

* change preview button CSS selector

app/assets/javascripts/comment.js

@@ -7,9 +7,9 @@
         $(this).find('.text-input').val('');
         $('#comments-container').append(xhr.responseText);
         $(this).find(".btn-primary").button('reset');
-        $(this).find('#preview').hide();
+        $(this).find('.comment-preview').hide();
         $(this).find('.text-input').show();
-        $(this).find('#preview-btn').button('toggle');
+        $(this).find('.preview-btn').button('toggle');
       });
     }
 

app/assets/javascripts/editor.js

@@ -8,7 +8,7 @@ $E = {
     $E.textarea = $('#'+args['textarea'])
     $E.textarea.bind('input propertychange',$E.save)
     // preview
-    args['preview'] = args['preview'] || 'preview'
+    args['preview'] = args['preview'] || 'preview-main'
     $E.preview = $('#'+args['preview'])
 
     marked.setOptions({
@@ -35,7 +35,7 @@ $E = {
     $E.textarea = ($D.selected).find('textarea').eq(0);
     $E.textarea.bind('input propertychange',$E.save);
     // preview
-    $E.preview = ($D.selected).find('#preview').eq(0);
+    $E.preview = ($D.selected).find('.comment-preview').eq(0);
   },
   // wraps currently selected text in textarea with strings a and b
   wrap: function(a,b,args) {
@@ -123,25 +123,17 @@ $E = {
   generate_preview: function(id,text) {
     $('#'+id)[0].innerHTML = marked(text)
   },
-  toggle_preview: function (comment_id = null) {
+  toggle_preview: function() {
     let previewBtn;
     let dropzone;
     // if the element is part of a multi-comment page,
     // ensure to grab the current element and not the other comment element.
-    if (comment_id) {
-      previewBtn = $('#' + comment_id);
-      const currentComment = $('#'+comment_id).parent('.control-group')
-      $E.preview = currentComment.siblings('#preview')
-      dropzone = currentComment.siblings('.dropzone')
-      $E.textarea = dropzone.children('.text-input')
-    } else {
-      previewBtn = $(this.textarea.context).find('#post_comment');
-      dropzone = $(this.textarea.context).find('.dropzone');
-    }
+    previewBtn = $(this.textarea.context).find('.preview-btn');
+    dropzone = $(this.textarea.context).find('.dropzone');
 
-    $E.preview[0].innerHTML = marked($E.textarea.val())
-    $E.preview.toggle()
-    dropzone.toggle()
+    $E.preview[0].innerHTML = marked($E.textarea.val());
+    $E.preview.toggle();
+    dropzone.toggle();
 
     this.toggleButtonPreviewMode(previewBtn);
   },

app/assets/stylesheets/editor.css

@@ -86,18 +86,18 @@ version of the editor is released. */
     border-radius: 3px;
 }
 
+.comment-preview {
+  margin:0;
+  margin-bottom:10px;
+  background:white;
+}
+
 .moderation-notice {
   font-style: italic;
   color: #888;
   padding-left: 8px;
 }
 
-#preview {
-  margin:0;
-  margin-bottom:10px;
-  background:white;
-}
-
 .side-dropzone, .profile-dropzone {
   border:4px dashed #ccc;
   color: #aaa;

app/helpers/application_helper.rb

@@ -66,7 +66,7 @@ def feature_node(title)
   end
 
   # used in views/comments/_form.html.erb
-  def get_large_dropzone_id(location, reply_to)
+  def get_comment_form_id(location, reply_to)
     case location
     when :main
       '-main'

app/views/comments/_form.html.erb

@@ -34,8 +34,8 @@
       <!-- most comment forms have two dropzones: 1) small button, 2) large form that covers textarea -->
       <!-- this is the large dropzone -->
       <!-- get_large_dropzone_id defined in application_helper.rb -->
-      <% dropzone_large_id = get_large_dropzone_id(location, local_assigns[:reply_to]) %>
-      <div id="dropzone-large<%= dropzone_large_id %>" class="form-group dropzone">
+      <% comment_form_id = get_comment_form_id(location, local_assigns[:reply_to]) %>
+      <div id="dropzone-large<%= comment_form_id %>" class="form-group dropzone">
         <%
           body = body || params[:body]
           # Look for comment templates
@@ -74,8 +74,8 @@
                 <%= raw translation('comments._form.drag_and_drop') %>
               </span>
               <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
-              <label for="fileinput-choose-one<%= dropzone_large_id %>">
-                <input id="fileinput-choose-one<%= dropzone_large_id %>" type="file" name="image[photo]" style="display:none;" />
+              <label for="fileinput-choose-one<%= comment_form_id %>">
+                <input id="fileinput-choose-one<%= comment_form_id %>" type="file" name="image[photo]" style="display:none;" />
                 <a onClick="handleClick()" style="cursor: pointer;" class="d-none d-md-inline text-underline">choose one</a>
                 <span class="d-md-none">
                   <i class="fa fa-upload"></i>
@@ -87,7 +87,7 @@
         </div>
       </div>
 
-      <div id="preview" style="background: white; display: none;">
+      <div id="preview<%= comment_form_id %>" class="comment-preview" style="background: white; display: none;">
       </div>
       <script>
         jQuery(document).ready(function() {
@@ -120,7 +120,7 @@
           </a>
           <a class="btn btn-outline-secondary" onClick="$('#c<%= comment.cid %>show').toggle();$('#c<%= comment.cid %>edit').toggle()"><%= translation('comments._form.cancel') %></a>
         <% else %>
-          <a class="btn btn-outline-secondary preview-btn>" id="post_comment" data-previewing-text="Hide Preview" onClick="handleClick();$E.toggle_preview()"><%= translation('comments._form.preview') %></a>
+          <a class="btn btn-outline-secondary preview-btn" id="toggle-preview-button<%= comment_form_id %>" data-previewing-text="Hide Preview" onClick="handleClick();$E.toggle_preview()"><%= translation('comments._form.preview') %></a>
         <% end %>
         <span style="color:#888;"> &nbsp;
           <br class="d-md-none" /><%= raw translation('comments._form.logged_in', :username => current_user.username) %> &nbsp;

app/views/editor/_editor.html.erb

@@ -17,7 +17,7 @@
   </div>
 </div>
 
-<div class="well" id="preview" style="display:none;"> </div>
+<div class="well" id="preview-main" style="display:none;"> </div>
 
 <script>
   jQuery(document).ready(function() {

config/locales/en.yml

@@ -208,7 +208,7 @@ en:
       preview_topics: "This preview is not yet published and is not part of any topics yet."
     _comments:
       comments: "Comments"
-      post_comment: "Post comment"
+      post_comment: "Post Comment"
       post_placeholder: "Help the author refine their post, or point them at other
         helpful information on the site. Mention users by @username to notify them
         of this thread by email"

test/system/comment_test.rb

@@ -70,7 +70,7 @@ def get_path(page_type, path)
       visit get_path(page_type, nodes(node_name).path)
       fill_in("body", with: comment_text)
       # preview comment
-      find("#post_comment").click
+      find("#toggle-preview-button-main").click
       find("p", text: comment_text)
       # publish comment
       click_on "Publish"
@@ -80,7 +80,7 @@ def get_path(page_type, path)
       first("p", text: "Reply to this comment...").click()
       fill_in("body", with: comment_response_text)
       # preview reply
-      first("#post_comment").click
+      first(".preview-btn").click
       find("p", text: comment_response_text)
     end
 
@@ -115,7 +115,7 @@ def get_path(page_type, path)
       assert_selector('h1', text: title_text)
       fill_in("body", with: comment_text)
       # preview comment
-      find("#post_comment").click
+      find("#toggle-preview-button-main").click
       find("p", text: comment_text)
       # publish comment
       click_on "Publish"
@@ -126,8 +126,8 @@ def get_path(page_type, path)
     test "#{page_type_string}: comment preview button works" do
       visit get_path(page_type, nodes(node_name).path)
       find("p", text: "Reply to this comment...").click()
-      reply_preview_button = page.all('#post_comment')[0]
-      comment_preview_button = page.all('#post_comment')[1]
+      reply_preview_button = page.all('.preview-btn')[0]
+      comment_preview_button = page.all('.preview-btn')[1]
       # Toggle preview
       reply_preview_button.click()
       # Make sure that buttons are not binded with each other
@@ -148,7 +148,7 @@ def get_path(page_type, path)
       # Toggle preview
       main_comment_form.find('a', text: 'Preview').click
       # Make sure that image has been uploaded
-      page.assert_selector('#preview img', count: 1)
+      page.assert_selector('#preview-main img', count: 1)
     end
 
     # navigate to page, immediately upload into EDIT form by SELECTing image
@@ -200,14 +200,14 @@ def get_path(page_type, path)
       wait_for_ajax
       Capybara.ignore_hidden_elements = true
       page.all('a', text: 'Preview')[0].click
-      assert_selector('#comment-' + comment_id_num + '-reply-section #preview img', count: 1)
+      assert_selector('#comment-' + comment_id_num + '-reply-section img', count: 1)
     end
 
     test "#{page_type_string}: IMMEDIATE image DRAG & DROP into REPLY comment form" do
       Capybara.ignore_hidden_elements = false
       visit get_path(page_type, nodes(node_name).path)
       find("p", text: "Reply to this comment...").click()
-      reply_preview_button = page.all('#post_comment')[0]
+      reply_preview_button = page.all('.preview-btn')[0]
       # Upload the image
       drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", ".dropzone")
       # Wait for image upload to finish
@@ -216,7 +216,7 @@ def get_path(page_type, path)
       # Toggle preview
       reply_preview_button.click()
       # Make sure that image has been uploaded
-      page.assert_selector('#preview img', count: 1)
+      page.assert_selector('.comment-preview img', count: 1)
     end
 
     test "#{page_type_string}: IMMEDIATE image CHOOSE ONE upload into REPLY comment form" do
@@ -235,7 +235,7 @@ def get_path(page_type, path)
       # Toggle preview
       reply_preview_button.click()
       # Make sure that image has been uploaded
-      page.assert_selector('#preview img', count: 1)
+      page.assert_selector('.comment-preview img', count: 1)
     end
 
     # Cross-Wiring Bugs
@@ -284,7 +284,7 @@ def get_path(page_type, path)
       main_comment_form.find('a', text: 'Preview').click
       # once preview is open, the images are embedded in the page.
       # there should only be 1 image in the main comment form!
-      preview_imgs = page.all('#preview img').size
+      preview_imgs = page.all('#preview-main img').size
       assert_equal(1, preview_imgs)
     end
 
@@ -325,7 +325,7 @@ def get_path(page_type, path)
       # once preview is open, the images are embedded in the page.
       # there should be 1 image in main, and 1 image in edit
       assert_selector('#c' + comment_id_num + 'preview img', count: 1)
-      assert_selector('#preview img', count: 1)
+      assert_selector('#preview-main img', count: 1)
     end
 
     # cross-wiring test
@@ -365,7 +365,7 @@ def get_path(page_type, path)
       page.find('#c' + edit_id_num + 'edit a', text: 'Preview').click
       page.first('a', text: 'Preview').click
       assert_selector('#c' + edit_id_num + 'preview img', count: 1)
-      assert_selector('#preview img', count: 1)
+      assert_selector('.comment-preview img', count: 1)
     end
 
     test "#{page_type_string}: ctrl/cmd + enter comment publishing keyboard shortcut" do

test/system/post_test.rb

@@ -119,7 +119,7 @@ def assert_page_does_not_reload(message = "page should not reload")
     find('.preview-btn').click()
 
     # Make sure that image has been uploaded
-    page.assert_selector('#preview img', count: 1)
+    page.assert_selector('#preview-main img', count: 1)
   end
 
   test "changing and reverting versions works correctly for wiki" do