Bug: Fix CLICK-to-Upload Image Cross-Wiring Issues (publiclab#8987)

* add new image upload system tests

* rename comment fixtures

* assign D.selected in start; rewrite drop assignment publiclab#8926

* specify E.refresh conditional call in E.wrap publiclab#8926

app/assets/javascripts/dragdrop.js

@@ -33,25 +33,27 @@ jQuery(function() {
   });
   $('.dropzone').on('drop',function(e) {
     // this 'drop' listener is also reused for pages with just one form, ie. /wiki/new
-    $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0);
+    const closestCommentFormWrapper = e.target.closest('div.comment-form-wrapper'); // this returns null if there is no match
     e.preventDefault();
     let params = {};
-    // $D.selected will look different for multi vs. single form pages, because of what $.closest returns:
-    //   multiple comments: { 0: the_closest_element }
-    //   /wiki/new: .comment-form-wrapper doesn't exist!
-    if ($D.selected.hasOwnProperty(0)) { // eg. jQuery finds a .comment-form-wrapper somewhere on the page.
-      params['textarea'] = $D.selected[0].querySelector('textarea').id // assign the ID of the textarea within the closest comment-form-wrapper
+    // there are no .comment-form-wrappers on /wiki/edit or /wiki/new
+    // these pages just have a single text-input form.
+    if (closestCommentFormWrapper) {
+      $D.selected = $(closestCommentFormWrapper);
+      // assign the ID of the textarea within the closest comment-form-wrapper
+      params['textarea'] = closestCommentFormWrapper.querySelector('textarea').id;
     } else {
       // default to #text-input
       // ideally there should only be one per page
-      params['textarea'] = 'text-input' 
+      params['textarea'] = 'text-input';
     }
     $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).fileupload({
       url: "/images",
@@ -63,6 +65,13 @@ jQuery(function() {
           'nid':$D.nid
         },
         start: function(e) {
+          // '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();

app/assets/javascripts/editor.js

@@ -1,13 +1,16 @@
 $E = {
   initialize: function(args) {
     args = args || {}
+    // title
+    $E.title = $('#title')
+    // textarea
     args['textarea'] = args['textarea'] || 'text-input'
     $E.textarea = $('#'+args['textarea'])
-    $E.title = $('#title')
+    $E.textarea.bind('input propertychange',$E.save)
+    // preview
     args['preview'] = args['preview'] || 'preview'
     $E.preview = $('#'+args['preview'])
-    $E.textarea.bind('input propertychange',$E.save)
-
+
     marked.setOptions({
       gfm: true,
       tables: true,
@@ -23,24 +26,25 @@ $E = {
         return code;
       }
     });
-
   },
   is_editing: function() {
     return ($E.textarea[0].selectionStart == 0 && $E.textarea[0].selectionEnd == 0)
   },
-
   refresh: function() {
-      if($D.selected) {
-          $E.textarea = ($D.selected).find('textarea').eq(0);
-          $E.preview = ($D.selected).find('#preview').eq(0);
-          $E.textarea.bind('input propertychange',$E.save);
-      }
+    // textarea
+    $E.textarea = ($D.selected).find('textarea').eq(0);
+    $E.textarea.bind('input propertychange',$E.save);
+    // preview
+    $E.preview = ($D.selected).find('#preview').eq(0);
   },
-
   // wraps currently selected text in textarea with strings a and b
   wrap: function(a,b,args) {
-    var isWiki = (window.location + '').includes('wiki');
-    if (!isWiki) this.refresh();
+    // this RegEx is: /wiki/ + any char not "/" + /edit
+    const isWikiCommentPage = (/\/wiki\/[^\/]+\/edit/).test(window.location.pathname);
+    // we don't need to refresh $E's values if we're on a page with a single comment form, ie. /wiki/new or /wiki/edit
+    if (window.location.pathname !== "/wiki/new" && !isWikiCommentPage && $D.selected) {
+      this.refresh();
+    }
     var len = $E.textarea.val().length;
     var start = $E.textarea[0].selectionStart;
     var end = $E.textarea[0].selectionEnd;
@@ -68,7 +72,6 @@ $E = {
   image: function(src) {
     $E.wrap('\n![',']('+src+')\n')
   },
-
   h1: function() {
     $E.wrap('#','')
   },
@@ -123,7 +126,6 @@ $E = {
   toggle_preview: function (comment_id = null) {
     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) {

test/fixtures/comments.yml

@@ -218,21 +218,21 @@ ouija_comment_3:
   comment: O
   timestamp: <%= Time.now.to_i + 30 %>
 
-wiki_comment_1: # wiki fixture for testing multiple comments
+pokemon_comment_1: # wiki fixture for testing multiple comments
   uid: 1
   nid: 42
   status: 1
   comment: Squirtle
   timestamp: <%= Time.now.to_i + 10 %>
 
-wiki_comment_2:
+pokemon_comment_2:
   uid: 5
   nid: 42
   status: 1
   comment: Charmander
   timestamp: <%= Time.now.to_i + 20 %>
 
-wiki_comment_3:
+pokemon_comment_3:
   uid: 6
   nid: 42
   status: 1