Bug: Show Image Upload Progress Bars in Edit Comment CLICK-to-Upload (#…

…9019) * add tests for image upload progress bars #9018 * fix image upload hover & progress bar issues #9018 * change ID references to class references #9018 * fix style for edit comment forms on questions #9018 * add classes to image upload progress bars #9018 * add classes; remove non-unique IDs #9018 * tweak image upload progress bar tests #9018 * forgot to remove screenshot #9018
publiclab · Jan 18, 2021 · 6d500fe · 6d500fe
1 parent f96ea1b
commit 6d500fe
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 77 deletions.
diff --git a/app/assets/javascripts/dragdrop.js b/app/assets/javascripts/dragdrop.js
@@ -17,34 +17,26 @@ jQuery(function() {
     );
   }
 
-  $('.dropzone').on('dragover',function(e) {
-    e.preventDefault();
-    $('.dropzone').addClass('hover');
-  });
-  $('#side-dropzone').on('dragover',function(e) {
-    e.preventDefault();
-    $('#side-dropzone').addClass('hover');
-  });
-  $('.dropzone').on('dragout',function(e) {
-    $('.dropzone').removeClass('hover');
-  });
-  $('#side-dropzone').on('dragout',function(e) {
-    $('#side-dropzone').removeClass('hover');
-  });
-  $('.dropzone').on('drop',function(e) {
-    const params = getEditorParams(e.target); // defined in editorHelper.js
-    e.preventDefault();
-    if (params.hasOwnProperty('dSelected')) {
-      $D.selected = params['dSelected'];
-    }
-    $E.initialize(params);
-  });
-  $('#side-dropzone').on('drop',function(e) {
-    e.preventDefault();
-  });
-
   // these functions are also used on /wiki/edit and /wiki/new pages
   $('.dropzone').each(function() {
+    $(this).on('dragenter',function(e) {
+      e.preventDefault();
+      $(e.currentTarget).addClass('hover');
+    });
+
+    $(this).on('dragleave',function(e) {
+      $(e.currentTarget).removeClass('hover');
+    });
+
+    $(this).on('drop',function(e) {
+      const params = getEditorParams(e.target); // defined in editorHelper.js
+      e.preventDefault();
+      if (params.hasOwnProperty('dSelected')) {
+        $D.selected = params['dSelected'];
+      }
+      $E.initialize(params);
+    });
+
     $(this).fileupload({
       url: "/images",
         paramName: "image[photo]",
@@ -55,30 +47,25 @@ jQuery(function() {
           'nid':$D.nid
         },
         start: function(e) {
+          $(e.target).removeClass('hover');
           // 'start' function runs:
           //   1. when user drag-and-drops image
           //   2. when user clicks on upload button.
           // for click-upload-button scenarios, it's important to set $D.selected here, because the 'drop' listener above doesn't run in those:
           $D.selected = $(e.target).closest('div.comment-form-wrapper');
           // the above line is redundant in drag & drop, because it's assigned in 'drop' listener too.
           // on /wiki/new & /wiki/edit, $D.selected will = undefined from this assignment
-          $('#imagebar .inline_image_drop').show();
-          $('#create_progress').show();
-          $('#create_uploading').show();
           elem = $($D.selected).closest('div.comment-form-wrapper').eq(0);
-          elem.find('#create_progress').eq(0).show();
-          elem.find('#create_uploading').eq(0).show();
-          elem.find('#create_prompt').eq(0).hide();
-          elem.find('.dropzone').eq(0).removeClass('hover');
+          elem.find('.progress-bar-container').eq(0).show();
+          elem.find('.uploading-text').eq(0).show();
+          elem.find('.choose-one-prompt-text').eq(0).hide();
         },
         done: function (e, data) {
-          $('#create_progress').hide();
-          $('#create_uploading').hide();
-          $('#imagebar .inline_image_drop').hide();
           elem = $($D.selected).closest('div.comment-form-wrapper').eq(0);
-          elem.find('#create_progress').hide();
-          elem.find('#create_uploading').hide();
-          elem.find('#create_prompt').show();
+          elem.find('.progress-bar-container').hide();
+          elem.find('.progress-bar').css('width', 0);
+          elem.find('.uploading-text').hide();
+          elem.find('.choose-one-prompt-text').show();
           var extension = data.result['filename'].split('.')[data.result['filename'].split('.').length - 1]; var file_url = data.result.url.split('?')[0]; var file_type;
           if (['gif', 'GIF', 'jpeg', 'JPEG', 'jpg', 'JPG', 'png', 'PNG'].includes(extension))
             file_type = 'image'
@@ -105,15 +92,27 @@ jQuery(function() {
         },
 
         // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options
-        fileuploadfail: function(e,data) {
+        // fileuploadfail: function(e,data) {
 
-        },
+        // },
         progressall: function (e, data) {
-            return progressAll('#create_progress .progress-bar', data);
+          const closestProgressBar = $($D.selected).closest('div.comment-form-wrapper').find('.progress-bar').eq(0);
+          return progressAll(closestProgressBar, data);
         }
     });
   });
 
+  $('#side-dropzone').on('dragover',function(e) {
+    e.preventDefault();
+    $('#side-dropzone').addClass('hover');
+  });
+  $('#side-dropzone').on('dragout',function(e) {
+    $('#side-dropzone').removeClass('hover');
+  });
+  $('#side-dropzone').on('drop',function(e) {
+    e.preventDefault();
+  });
+
   $('#side-dropzone').fileupload({
     url: "/images",
     paramName: "image[photo]",

diff --git a/app/assets/stylesheets/editor.css b/app/assets/stylesheets/editor.css
@@ -32,17 +32,17 @@ pre {
     background-color: #f5f5f5;
     border: 1px solid #ccc;
     border-radius: 4px;
+  }
 
-  // Account for some code outputs that place code tags in pre tags
+  /* Account for some code outputs that place code tags in pre tags */
   code {
-    padding: 0;
+    padding: 0px;
     font-size: inherit;
     color: inherit;
     white-space: pre-wrap;
     background-color: transparent;
     border-radius: 0;
   }
-}
 
 /* Adding the bug-btn stylings below, but they can be removed once the next 
 version of the editor is released. */
@@ -142,7 +142,7 @@ version of the editor is released. */
 }
 
 @media (max-width: 480px) {
-  #dropzone textarea {
+  .dropzone textarea {
     height:300px;
   }
 }
@@ -151,7 +151,7 @@ version of the editor is released. */
   margin-bottom:10px;
 }
 
-#dropzone textarea {
+.dropzone textarea {
   border-bottom:none;
   margin-bottom:0;
   -webkit-border-radius: 4px 4px 0 0;
@@ -160,7 +160,7 @@ version of the editor is released. */
   resize: vertical;
 }
 
-#imagebar {
+.imagebar {
   color: #aaa;
   border:1px solid #bbb;
   border-top:none;
@@ -171,31 +171,28 @@ version of the editor is released. */
 }
 
 @media (max-width: 768px) {
-  #imagebar {
+  .imagebar {
     width:100%;
   }
 }
 
-#imagebar p {
+.imagebar p {
   border-top:2px dotted #ddd;
   padding:8px 12px 0px;
 }
 
-#dropzone.hover #imagebar {
+.dropzone.hover .imagebar {
   background:#eee;
 }
 
-#dropzone.hover textarea {
-  background:#f8f8f8;
+.dropzone.hover textarea {
+  background:#f8f8f8
 }
 
-#imagebar .progress {
-  margin:10px;
-  width:30%;
-}
-
-#dropzone.hover textarea {
-  background:#f8f8f8;
+.imagebar .progress-bar-container {
+  margin: 10px;
+  width: 30%;
+  background-color: #aaa;
 }
 
 #side-progress {

diff --git a/app/assets/stylesheets/question.css b/app/assets/stylesheets/question.css
@@ -118,7 +118,6 @@ table th a:hover {
   visibility: hidden;
 }
 
-.question-show textarea,
 .question-show pre {
   margin: 0;
   padding: 0;

diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
@@ -14,15 +14,15 @@
 
     <div id="c<%= comment.id%>div" class="form-group">
     <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="c<%= comment.id%>text" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
-    <div id="imagebar">
-      <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-striped active pull-right">
-        <div id="c<%= comment.id%>progress-bar" class="progress-bar" style="width: 0%;"></div>
+    <div class="imagebar">
+      <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-bar-container active pull-right">
+        <div id="c<%= comment.id%>progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
       </div>
       <p>
-        <span id="c<%= comment.id%>uploading" class="uploading" style="display:none;">
+        <span id="c<%= comment.id%>uploading" class="uploading uploading-text" style="display:none;">
           <%= translation('comments._edit.uploading') %>
         </span>
-        <span id="c<%= comment.id%>prompt" class="prompt">
+        <span id="c<%= comment.id%>prompt" class="prompt choose-one-prompt-text">
           <span style="padding-right:4px;float:left;" class="hidden-xs">
           <%= raw translation('comments._edit.drag_and_drop') %>
           </span>
@@ -39,10 +39,6 @@
       </div>
     </div>
       <script type="application/javascript">
-        jQuery(document).ready(function() {
-          $E.initialize();
-        });
-
         function setInit(id) {
           var args = {
             'textarea': 'c'+id+'text',
@@ -83,6 +79,7 @@
           },
           done: function (e, data) {
             $('#c<%= comment.id%>progress').hide()
+            $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css('width', 0);
             $('#c<%= comment.id%>uploading').hide()
             $('#c<%= comment.id%>prompt').show()
             var is_image = false
@@ -107,7 +104,7 @@
             else $('#node_images').val(data.result.id)
           },
 
-          fileuploadfail: function(e,data) {},
+          // fileuploadfail: function(e,data) {},
           progressall: function (e, data) {
             var progress = parseInt(data.loaded / data.total * 100, 10);
             $('#c<%= comment.id%>progress #c<%= comment.id%>progress-bar').css(

diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
@@ -8,7 +8,7 @@
       <% end %>
       <h4 style="margin-top:0;"><%= title %></h4>
       <style>
-        #imagebar {
+        .imagebar {
           width:100%;
         }
         #new_contributor_msg {
@@ -61,15 +61,15 @@
           cols="40" 
           placeholder="<%= placeholder %>"><%= body %>
         </textarea>
-        <div id="imagebar">
-          <div id="create_progress" style="display:none;" class="progress float-right">
-            <div id="create_progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
+        <div class="imagebar">
+          <div style="display:none;" class="progress progress-bar-container float-right">
+            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%;"></div>
           </div>
           <p>
-            <span id="create_uploading" class="uploading" style="display:none;">
+            <span class="uploading-text" style="display:none;">
               <%= translation('comments._form.uploading') %>
             </span>
-            <span id="create_prompt" class="prompt">
+            <span class="prompt choose-one-prompt-text">
               <span style="padding-right:4px;float:left;" class="d-none d-md-inline">
                 <%= raw translation('comments._form.drag_and_drop') %>
               </span>

diff --git a/test/system/comment_test.rb b/test/system/comment_test.rb
@@ -510,6 +510,44 @@ def get_path(page_type, path)
       page.assert_no_selector("button[data-original-title='jeff reacted with thumbs up emoji'")
     end
 
+    test "#{page_type_string}: progress bars display for image DRAG & DROP in MAIN comment form" do
+      node_name == :wiki_page ? (visit nodes(node_name).path + '/comments') : (visit nodes(node_name).path)
+      # make a fresh comment in the main comment form
+      main_comment_form =  page.find('h4', text: /Post comment|Post Comment/).find(:xpath, '..') # title text on wikis is 'Post comment'
+      # before we drop an image, we need to make the main comment form the focus by clicking on "Preview," then hiding preview.
+      # otherwise, image upload in the next step won't be 'wired' to the "Post Comment" form.
+      main_comment_form.find('a', text: 'Preview').click.click
+      # .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.
+      Capybara.ignore_hidden_elements = true
+      assert_selector('.progress')
+      assert_selector('.uploading-text')
+    end
+
+    test "#{page_type_string}: progress bars display for EDIT comment form's image SELECT upload" do
+      # before we visit the page, add a jeff comment so that we can edit it.
+      nodes(node_name).add_comment({
+        uid: 2,
+        body: comment_text
+      })
+      visit get_path(page_type, nodes(node_name).path)
+      # open the edit comment form:
+      page.find("#edit-comment-btn").click
+      # find the parent of edit comment's fileinput:
+      comment_fileinput_parent_id = page.find('[id^=dropzone-small-edit-]')[:id] # 'begins with' CSS selector
+      comment_id_num = /dropzone-small-edit-(\d+)/.match(comment_fileinput_parent_id)[1]
+      # upload images
+      # the <inputs> that take image uploads are hidden, so reveal them:
+      Capybara.ignore_hidden_elements = false
+      # find edit comment's fileinput:
+      page.find('#fileinput-button-edit-' + comment_id_num).set("#{Rails.root.to_s}/public/images/pl.png")
+      Capybara.ignore_hidden_elements = true
+      assert_selector('#c' + comment_id_num + 'progress')
+      assert_selector('#c' + comment_id_num + 'uploading')
+    end
+
     test "#{page_type}: multiple comment boxes, post comments" do
       if page_type == :note
         visit nodes(:note_with_multiple_comments).path