Refactor & Add Comments to create.js.erb; Style Fixes for Question Co…

…mments & Toolbar Buttons (publiclab#9195)

* stop instantiating fileupload for non-existent elements; add comments

* style fixes for toolbar buttons

* shorten width of comment container

app/views/comments/create.js.erb

@@ -1,23 +1,43 @@
+// this code runs after a new comment is posted.
+//   1. it inserts the new comment into the DOM
+//   2. it also creates image upload functionality for the new comment form (see /app/assets/javascripts/editorToolbar.js)
+
+// the new comment will have an 'edit comment' form that needs image upload functionality:
+let fileUploadElements = [
+  {
+    selector: '#comment-form-body-edit-<%= @comment.cid %>',
+    isButton: false
+  },
+  {
+    selector: '#dropzone-small-edit-<%= @comment.cid %>',
+    isButton: true
+  }
+];
+// if new comment is NOT a reply to another comment
 <% if @comment.reply_to.nil? %>
-  $("#comments-list").append('<%= escape_javascript(render :partial => "notes/comment", :locals => {comment: @comment, answer_id: @answer_id}) %>')
+  $("#comments-list").append('<%= escape_javascript(render :partial => "notes/comment", :locals => { comment: @comment }) %>');
+   // the new comment will also have its own reply section
+  // this reply comment form needs image upload functionality
+  fileUploadElements = fileUploadElements.concat([
+    {
+      selector: '#comment-form-body-reply-<%= @comment.cid %>',
+      isButton: false
+    },
+    {
+      selector: '#dropzone-small-reply-<%= @comment.cid %>',
+      isButton: true
+    }
+  ]);
 <% else %>
-  $('#comment-<%= @comment.reply_to %>-reply').before('<%= escape_javascript(render :partial => "notes/comment", :locals => {comment: @comment, answer_id: @answer_id}) %>')
+// new comment IS a reply to another comment
+// no other elements need upload functionality
+  $('#comment-<%= @comment.reply_to %>-reply-toggle').before('<%= escape_javascript(render :partial => "notes/comment", :locals => {comment: @comment, answer_id: @answer_id}) %>')
 <% end %>
-// create image upload functionality for fresh comment form
+// create image upload functionality for fresh comment's elements
 // see editorToolbar.js
-const replyFormBody = $('#comment-form-body-reply-<%= @comment.cid %>');
-const editFormBody = $('#comment-form-body-edit-<%= @comment.cid %>');
-const replyButton = $('#dropzone-small-reply-<%= @comment.cid %>');
-const editButton = $('#dropzone-small-edit-<%= @comment.cid %>');
-const replyFormOptions = getFileUploadOptions(replyFormBody, false);
-const editFormOptions = getFileUploadOptions(editFormBody, false);
-const replyButtonOptions = getFileUploadOptions(replyButton, true);
-const editButtonOptions = getFileUploadOptions(editButton, true);
-replyFormBody.fileupload(replyFormOptions);
-editFormBody.fileupload(editFormOptions);
-replyButton.fileupload(replyButtonOptions);
-editButton.fileupload(editButtonOptions);
-
-$('#answer-<%= @answer_id %>-comment-section .help-block').remove();
+fileUploadElements.forEach(function(element) {
+  const options = getFileUploadOptions($(element.selector), element.isButton);
+  $(element.selector).fileupload(options);
+});
 notyNotification('mint', 3000, 'success', 'topRight', 'Comment Added!');
 $('#comment-count')[0].innerHTML = parseInt($('#comment-count')[0].innerHTML, 10)+1;

app/views/editor/_toolbar.html.erb

@@ -52,6 +52,7 @@
       data-placement="bottom" 
       data-toggle="tooltip" 
       class="link-button btn btn-outline-secondary btn-sm rich-text-button" href="javascript:void(0)" 
+      style="color: #6c757d;"
     >
       <i class="fa fa-link"></i>
     </a>
@@ -66,7 +67,7 @@
       <%# data-form-id is for setState on editor.js %>
       <div id="dropzone-small-<%= toolbar_element_id %>" class="dropzone dropzone-small" data-form-id="<%= toolbar_element_id %>">
         <span id="create_prompt" class="prompt">
-          <label class="fileinput-dropzone-label" for="fileinput-button-<%= toolbar_element_id %>" style="margin-bottom: 0;">
+          <label class="fileinput-dropzone-label" for="fileinput-button-<%= toolbar_element_id %>" style="margin-bottom: 0; cursor: pointer;">
             <input id="fileinput-button-<%= toolbar_element_id %>" class="fileinput" type="file" name="image[photo]" accept="image/*" style="display:none;" />
             <i class="fa fa-image"></i>
             <span class="d-md-none">
@@ -111,6 +112,7 @@
       class="help-button btn btn-outline-secondary btn-sm" 
       target="_blank" 
       href="/wiki/authoring-help"
+      style="color: #6c757d;"
     >
       <i class="fa fa-question-circle"></i>
     </a>

app/views/questions/show.html.erb

@@ -10,7 +10,7 @@
   });
 </script>
 <%= javascript_include_tag('question') %>
-<div id="legacy-editor-container" class="col-lg-9 note-show question-show">
+<div class="col-lg-9 note-show question-show">
 
    <% if @node.main_image %>
     <a class="main-image" style="max-width:100%;width:800px;" href="<%= @node.main_image.path(:original) %>">
@@ -58,34 +58,36 @@
   <hr />
 
   <% comments = @node.comments_viewable_by(current_user) %>
-  <h3><span id="comment-count"><%= comments.size %></span> Comments</h3>
-  <div id="comments-list">
-  <%= javascript_include_tag "editorToolbar" %>
-  <%= javascript_include_tag "comment" %>
-    <% comments.includes([:node, :replied_comments]).order("timestamp ASC").each do |comment| %>
-      <% if comment.reply_to.nil? %>
-        <%= render :partial => "notes/comment", :locals => {:comment => comment} %>
+  <div id="legacy-editor-container" class="col-lg-10">
+    <h3><span id="comment-count"><%= comments.size %></span> Comments</h3>
+    <div id="comments-list">
+    <%= javascript_include_tag "editorToolbar" %>
+    <%= javascript_include_tag "comment" %>
+      <% comments.includes([:node, :replied_comments]).order("timestamp ASC").each do |comment| %>
+        <% if comment.reply_to.nil? %>
+          <%= render :partial => "notes/comment", :locals => {:comment => comment} %>
+        <% end %>
+      <% end %>
+    </div>
+    <div id="answer-0-comment" style="margin-top: 30px;">
+      <div id="answer-0-comment-section">
+      <% if current_user %>
+        <div class="d-inline" id="question-comment-form">
+          <%= render :partial => "comments/form", :locals => { 
+            title: "Post Comment", 
+            comment: false, 
+            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", 
+            type: "question", 
+            url1: '/conduct', 
+            author: current_user.title, 
+            is_new_contributor: current_user.is_new_contributor?, 
+            location: :main # toolbar needs this to create dropzone ID
+          } %> 
+        </div>
+      <% else %>
+        <p><a data-toggle="modal" data-target="#loginModal">Log in</a> to comment</p>
       <% end %>
-    <% end %>
-  </div>
-  <div id="answer-0-comment" style="margin-top: 30px;">
-    <div id="answer-0-comment-section">
-    <% if current_user %>
-      <div class="d-inline" id="question-comment-form">
-        <%= render :partial => "comments/form", :locals => { 
-          title: "Post Comment", 
-          comment: false, 
-          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", 
-          type: "question", 
-          url1: '/conduct', 
-          author: current_user.title, 
-          is_new_contributor: current_user.is_new_contributor?, 
-          location: :main # toolbar needs this to create dropzone ID
-        } %> 
       </div>
-    <% else %>
-      <p><a data-toggle="modal" data-target="#loginModal">Log in</a> to comment</p>
-    <% end %>
     </div>
   </div>
 </div>