Rename dragdrop.js to editorToolbar.js (Outreachy)

app/assets/javascripts/application.js

@@ -47,7 +47,6 @@
 //  APPLICATION SCRIPTS:
 //= require setup.js
 //= require editor.js
-//= require editorHelper.js
 //= require like.js
 //= require main_image.js
 //= require restful_typeahead.js

app/assets/javascripts/editor.js

@@ -1,17 +1,4 @@
 // jQuery (document).ready function:
-$(function() {
-  // this click eventHandler assigns $D.selected to the appropriate comment form
-  // on pages with multiple comments, $D.selected needs to be accurate so that rich-text changes (bold, italic, etc.) go into the right comment form
-  // however, the editor is also used on pages with JUST ONE form, and no other comments, eg. /wiki/new & /wiki/edit, so this code needs to be reusable for that context
-  $('.rich-text-button').on('click', function(e) {
-    const { textArea, preview, dSelected } = getEditorParams(e.target); // defined in editorHelper.js
-    // assign dSelected
-    if (dSelected) { $D.selected = dSelected; }
-    $E.setState(textArea, preview);
-    const action = e.currentTarget.dataset.action // 'bold', 'italic', etc.
-    $E[action](); // call the appropriate editor function
-  });
-});
 
 $E = {
   initialize: function() {

app/assets/javascripts/dragdrop.js → app/assets/javascripts/editorToolbar.js

@@ -1,24 +1,59 @@
-jQuery(function() {
-/*
- * Based on the basic plugin from jQuery file upload: 
- * https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
- *
- * .dropzone is for inline images for both wiki and research notes, in:
- *   /app/views/editor/_editor.html.erb
- *   /app/views/wiki/edit.html.erb
- * #side-dropzone, is for the main image of research notes, in /app/views/editor/post.html.erb
-*/
+// this script is used in a variety of different contexts including:
+//   pages (wikis, questions, research notes) with multiple comments & editors for each comment
+//   pages with JUST ONE form, and no other comments, eg. /wiki/new & /wiki/edit
+//   /app/views/features/_form.html.erb
+//   /app/views/map/edit.html.erb
+//   the legacy editor: /app/views/editor/_editor.html.erb (if it's still in use live?)
 
-  function progressAll(elem, data) {
-    var progress = parseInt(data.loaded / data.total * 100, 10);
-    $(elem).css(
-      'width',
-      progress + '%'
-    );
+const getEditorParams = (targetDiv) => {
+  const closestCommentFormWrapper = targetDiv.closest('div.comment-form-wrapper'); // this returns null if there is no match
+  let params = {};
+  // there are no .comment-form-wrappers on /wiki/edit or /wiki/new
+  // these pages just have a single text-input form.
+  if (closestCommentFormWrapper) {
+    params['dSelected'] = $(closestCommentFormWrapper);
+    // assign the ID of the textarea within the closest comment-form-wrapper
+    params['textarea'] = closestCommentFormWrapper.querySelector('textarea').id;
+    params['preview'] = closestCommentFormWrapper.querySelector('.comment-preview').id;
+  } else {
+    // default to #text-input
+    // #text-input ID should be unique, and the only comment form on /wiki/new & /wiki/edit
+    params['textarea'] = 'text-input';
+    // #preview-main should be unique as well
+    params['preview'] = 'preview-main';
   }
+  return params;
+};
 
-  // these functions are also used on /wiki/edit and /wiki/new pages
+const progressAll = (elem, data) => {
+  var progress = parseInt(data.loaded / data.total * 100, 10);
+  $(elem).css(
+    'width',
+    progress + '%'
+  );
+}
+
+// attach eventListeners on document.load for toolbar rich-text buttons & image upload .dropzones
+$(function() {
+  // for rich-text buttons (bold, italic, header, and link):
+  // click eventHandler that assigns $D.selected to the appropriate comment form
+  // on pages with multiple comments, $D.selected needs to be accurate so that rich-text changes (bold, italic, etc.) go into the right comment form
+  $('.rich-text-button').on('click', function(e) {
+    const { textArea, preview, dSelected } = getEditorParams(e.target);
+    // assign dSelected
+    if (dSelected) { $D.selected = dSelected; }
+    $E.setState(textArea, preview);
+    const action = e.currentTarget.dataset.action // 'bold', 'italic', etc.
+    $E[action](); // call the appropriate editor function
+  });
+
+  // image upload event listeners for both:
+  //   1. click-to-upload
+  //   2. drag & drop
+  // based on the basic plugin from jQuery file upload: 
+  // https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
   $('.dropzone').each(function() {
+    // style changes for dragging an image over a dropzone
     $(this).on('dragenter',function(e) {
       e.preventDefault();
       $(e.currentTarget).addClass('hover');
@@ -28,8 +63,9 @@ jQuery(function() {
       $(e.currentTarget).removeClass('hover');
     });
 
+    // runs on drag & drop
     $(this).on('drop',function(e) {
-      const { textArea, preview, dSelected } = getEditorParams(e.target); // defined in editorHelper.js
+      const { textArea, preview, dSelected } = getEditorParams(e.target);
       e.preventDefault();
       if (dSelected) { $D.selected = dSelected; }
       $E.setState(textArea, preview);
@@ -44,11 +80,11 @@ jQuery(function() {
           'uid':$D.uid,
           'nid':$D.nid
         },
-        start: function(e) {
-          $(e.target).removeClass('hover');
-          // 'start' function runs:
+        // 'start' function runs:
           //   1. when user drag-and-drops image
           //   2. when user clicks on upload button.
+        start: function(e) {
+          $(e.target).removeClass('hover');
           // 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.
@@ -88,18 +124,17 @@ jQuery(function() {
           //    $('<p/>').text(file.name).appendTo(document.body);
           //});
         },
-
-        // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options
-        // fileuploadfail: function(e,data) {
-
-        // },
+        fileuploadfail: function(e, data) {
+          console.log(e);
+        },
         progressall: function (e, data) {
           const closestProgressBar = $($D.selected).closest('div.comment-form-wrapper').find('.progress-bar').eq(0);
           return progressAll(closestProgressBar, data);
         }
     });
   });
 
+  // #side-dropzone, is for the main image of research notes, in /app/views/editor/post.html.erb
   $('#side-dropzone').on('dragover',function(e) {
     e.preventDefault();
     $('#side-dropzone').addClass('hover');
@@ -133,13 +168,12 @@ jQuery(function() {
       $('.side-uploading').hide();
       $('#leadImage')[0].src = data.result.url;
       $('#leadImage').show();
-    // here append the image id to the note as the lead image
+      // here append the image id to the note as the lead image
       $('#main_image').val(data.result.id);
       $("#image_revision").append('<option selected="selected" id="'+data.result.id+'" value="'+data.result.url+'">Temp Image '+data.result.id+'</option>');
     },
-
-    // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options
-    fileuploadfail: function(e,data) {
+    fileuploadfail: function(e, data) {
+      console.log(e);
     },
     progressall: function (e, data) {
       return progressAll('#side-progress .progress-bar', data);

app/views/admin/assets.html.erb

@@ -6,7 +6,7 @@
 <%= javascript_include_tag  'advanced_search' %>
 <%= javascript_include_tag  'comment_expand' %>
 <%= javascript_include_tag  'dashboard' %>
-<%= javascript_include_tag  'dragdrop' %>
+<%= javascript_include_tag  'editorToolbar' %>
 <%= javascript_include_tag  'locationForm' %>
 <%= javascript_include_tag  'methods' %>
 <%= javascript_include_tag  'notes' %>

app/views/editor/post.html.erb

@@ -9,7 +9,7 @@
   </script>
 
   <%= javascript_include_tag "post" %>
-  <%= javascript_include_tag "dragdrop" %>
+  <%= javascript_include_tag "editorToolbar" %>
 
   <% if params[:template] == "question" %>
     <h4 class="d-lg-none">Ask a question</h4>

app/views/editor/question.html.erb

@@ -9,7 +9,7 @@
   </script>
 
   <%= javascript_include_tag "post" %>
-  <%= javascript_include_tag "dragdrop" %>
+  <%= javascript_include_tag "editorToolbar" %>
 
   <% if params[:template] == "question" %>
     <h4 class="d-lg-none">Ask a question</h4>

app/views/features/_form.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_include_tag "dragdrop" %>
+<%= javascript_include_tag "editorToolbar" %>
 
 <div class="form-group">
 <% if @node %>

app/views/map/edit.html.erb

@@ -1,5 +1,5 @@
 <div class="col-md-3">
-  <%= javascript_include_tag "dragdrop" %>
+  <%= javascript_include_tag "editorToolbar" %>
 
   <h4>Use good metadata!</h4>
   <p>Remember to tag maps with useful terms like "ndvi", "gulf-coast", etc.</p>

app/views/notes/_comments.html.erb

@@ -2,7 +2,7 @@
   <div id="comments" class="col-lg-10 comments">
     <% comments = @node.comments_viewable_by(current_user) %>
     <h3><span id="comment-count"><%= comments.size %></span> <%= translation('notes._comments.comments') %></h3>
-    <%= javascript_include_tag "dragdrop" %>
+    <%= javascript_include_tag "editorToolbar" %>
     <%= javascript_include_tag "comment" %>
     <div style="margin-bottom: 50px;" id="comments-list">
       <% comments.includes([:replied_comments, :node]).order('timestamp ASC').each do |comment| %>

app/views/questions/show.html.erb

@@ -55,7 +55,7 @@
   <% comments = @node.comments_viewable_by(current_user) %>
   <h3><span id="comment-count"><%= comments.size %></span> Comments</h3>
     <div id="comments-list">
-    <%= javascript_include_tag "dragdrop" %>
+    <%= javascript_include_tag "editorToolbar" %>
     <%= javascript_include_tag "comment" %>
       <% comments.includes([:node, :replied_comments]).order("timestamp ASC").each do |comment| %>
         <% if comment.reply_to.nil? %>

app/views/users/_photo.html.erb

@@ -6,7 +6,7 @@
   }
 </script>
 
-<%= javascript_include_tag "dragdrop" %>
+<%= javascript_include_tag "editorToolbar" %>
 
 <hr style="clear:both;" class="d-lg-none" />
 

app/views/wiki/edit.html.erb

@@ -1,5 +1,5 @@
 <div class="col-md-3">
-  <%= javascript_include_tag "dragdrop" %>
+  <%= javascript_include_tag "editorToolbar" %>
   <% if @related && @related.length > 0 %>
     <h3><%= translation('wiki.edit.did_you_mean') %>:</h3>
     <ul class="nav bullet">

config/environments/production.rb

@@ -26,7 +26,7 @@
   config.assets.digest = true
 
   # Add non-concatenated scripts
-  config.assets.precompile += ['dragdrop.js', 'post.js']
+  config.assets.precompile += ['editorToolbar.js', 'post.js']
 
   # Defaults to nil and saved in location specified by config.assets.prefix
   # config.assets.manifest = YOUR_PATH

config/environments/staging.rb

@@ -24,7 +24,7 @@
   config.assets.digest = true
 
   # Add non-concatenated scripts
-  config.assets.precompile += ['dragdrop.js', 'post.js']
+  config.assets.precompile += ['editorToolbar.js', 'post.js']
 
   # Defaults to nil and saved in location specified by config.assets.prefix
   # config.assets.manifest = YOUR_PATH

config/environments/staging_unstable.rb

@@ -24,7 +24,7 @@
   config.assets.digest = true
 
   # Add non-concatenated scripts
-  config.assets.precompile += ['dragdrop.js', 'post.js']
+  config.assets.precompile += ['editorToolbar.js', 'post.js']
 
   # Defaults to nil and saved in location specified by config.assets.prefix
   # config.assets.manifest = YOUR_PATH

config/initializers/assets.rb

@@ -7,7 +7,7 @@
   'comment_expand.js',
   'comment.js',
   'dashboard.js',
-  'dragdrop.js',
+  'editorToolbar.js',
   'locationForm.js',
   'methods.js',
   'notes.js',