Disable Drag & Drop Upload on the Image Toolbar Button (publiclab#9118)

* merge comment editor refactor branches publiclab#9004

* add classes for small and large dropzones

* disable drag&drop on image upload button

* add data-form-ID attribute to large dropzone

* update selectors for large dropzone

app/assets/javascripts/editor.js

@@ -119,7 +119,7 @@ class Editor {
     if(this.textAreaValue == ""){
       this.textAreaElement.val(this.templates[template])
     }else if((this.textAreaValue == this.templates['event']) || (this.textAreaValue == this.templates['default']) || (this.textAreaValue == this.templates['support'])){
-        this.textAreaElement.val(this.templates[template])
+      this.textAreaElement.val(this.templates[template])
     }else{
       this.textAreaElement.val(this.textAreaValue+'\n\n'+this.templates[template])
     }

app/assets/javascripts/editorToolbar.js

@@ -44,10 +44,17 @@ $(function() {
       $E.setState(e.currentTarget.dataset.formId); // string that is: "main", "reply-123", "edit-123" etc.
     });
 
+    // disable drag-and-drop image upload on small dropzones
+    // small dropzones are the image upload button in the comment form toolbar
+    let dropZone = $(this);
+    if ($(this).hasClass("dropzone-small")) {
+      dropZone = null;
+    }
+
     $(this).fileupload({
       url: "/images",
         paramName: "image[photo]",
-        dropZone: $(this),
+        dropZone: dropZone,
         dataType: 'json',
         formData: {
           'uid':$D.uid,

app/assets/javascripts/post.js

@@ -22,7 +22,7 @@ jQuery(document).ready(function() {
     if (e.which == 32 || e.which == 13) publish()
   })
 
-  if (!$E.textAreaValue ) $E.apply_template(getUrlParameter('template') || "default")
+  if (!$E.textAreaValue) $E.apply_template(getUrlParameter('template') || "default")
 
   /* tag autocomplete */
   $('#taginput').typeahead({

app/views/comments/_form.html.erb

@@ -34,7 +34,7 @@
 
     <!-- most comment forms have two dropzones: 1) small button, 2) large form that covers textarea -->
     <!-- this is the large dropzone -->
-    <div id="dropzone-large-<%= comment_form_id %>" class="form-group dropzone" data-form-id="<%= comment_form_id %>">
+    <div id="dropzone-large-<%= comment_form_id %>" class="form-group dropzone dropzone-large" data-form-id="<%= comment_form_id %>">
       <%
         body = body || params[:body]
         # Look for comment templates

app/views/editor/_editor.html.erb

@@ -1,7 +1,7 @@
 <%# toolbar needs location & comment_id to make unique element IDs%>
 <%= render :partial => "editor/toolbar", :locals => { :location => :main } %>
 
-<div class="form-group dropzone">
+<div class="form-group dropzone dropzone-large" data-form-id="main">
   <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input-main" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
   <div class="imagebar">
     <div 

app/views/editor/_toolbar.html.erb

@@ -77,9 +77,9 @@
       class="upload-button btn btn-outline-secondary btn-sm"
     >
       <%# data-form-id is for setState on editor.js %>
-      <div id="dropzone-small-<%= toolbar_element_id %>" class="dropzone" data-form-id="<%= toolbar_element_id %>">
+      <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="" 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;">
             <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">

test/system/comment_test.rb

@@ -251,7 +251,7 @@ def get_path(page_type, path)
       # .dropzone is hidden, so reveal it:
       Capybara.ignore_hidden_elements = false
       # drag & drop the image. drop_in_dropzone simulates 'drop' event,  see application_system_test_case.rb
-      drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", '#comments-list + div .dropzone') # this CSS selects .dropzones that belong to sibling element immediately following #comments-list. technically, there are two .dropzones in the main comment form.
+      drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", '#comments-list + div .dropzone-large') # this CSS selects .dropzones that belong to sibling element immediately following #comments-list. technically, there are two .dropzones in the main comment form.
       Capybara.ignore_hidden_elements = true
       assert_selector('.progress')
       assert_selector('.uploading-text')
@@ -386,13 +386,13 @@ def get_path(page_type, path)
       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('.preview-btn')[0]
       # Upload the image
-      drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", ".dropzone")
+      drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", ".dropzone-large")
       # Wait for image upload to finish
       wait_for_ajax
       Capybara.ignore_hidden_elements = true
       # Toggle preview
+      reply_preview_button = page.all('.preview-btn')[0]
       reply_preview_button.click()
       # Make sure that image has been uploaded
       page.assert_selector('.comment-preview img', count: 1)
@@ -436,7 +436,7 @@ def get_path(page_type, path)
       # .dropzone is hidden, so reveal it for Capybara's finders:
       Capybara.ignore_hidden_elements = false
       # drag & drop the image. drop_in_dropzone simulates 'drop' event, see application_system_test_case.rb
-      drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", '#comments-list + div .dropzone') # this CSS selects .dropzones that belong to sibling element immediately following #comments-list. technically, there are two .dropzones in the main comment form.
+      drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", '#comments-list + div .dropzone-large') # this CSS selects .dropzones that belong to sibling element immediately following #comments-list. technically, there are two .dropzones in the main comment form.
       Capybara.ignore_hidden_elements = true
       wait_for_ajax
       # we need the ID of parent div that contains <p>comment_text</p>:

test/system/post_test.rb

@@ -109,7 +109,7 @@ def assert_page_does_not_reload(message = "page should not reload")
     visit '/wiki/new'
 
     # Upload the image
-    drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", ".dropzone")
+    drop_in_dropzone("#{Rails.root.to_s}/public/images/pl.png", ".dropzone-large")
 
     # Wait for image upload to finish
     wait_for_ajax