From e4dc043c915606da26cf689999ab03466efc5c12 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 19 Jan 2021 12:41:01 -0800 Subject: [PATCH 1/6] remove editorHelper #9004 --- app/assets/javascripts/application.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 16465a3c7c..5603577a7e 100644 --- a/app/assets/javascripts/application.js +++ b/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 From 9778cf979b9d021754f87cff6ff4239dbf9c7822 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 19 Jan 2021 12:41:43 -0800 Subject: [PATCH 2/6] deleted editorHelper & moved function to editorToolbar #9004 --- app/assets/javascripts/editorHelper.js | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 app/assets/javascripts/editorHelper.js diff --git a/app/assets/javascripts/editorHelper.js b/app/assets/javascripts/editorHelper.js deleted file mode 100644 index d38559f0bb..0000000000 --- a/app/assets/javascripts/editorHelper.js +++ /dev/null @@ -1,20 +0,0 @@ -// used in editor.js & dragdrop.js -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; -}; \ No newline at end of file From 0a7a63f7020e4989aabe22e0a5e9ed5034ca6318 Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 19 Jan 2021 12:43:29 -0800 Subject: [PATCH 3/6] moved rich-text eventListener to editorToolbar.js #9004 --- app/assets/javascripts/editor.js | 13 --- .../{dragdrop.js => editorToolbar.js} | 94 +++++++++++++------ 2 files changed, 64 insertions(+), 43 deletions(-) rename app/assets/javascripts/{dragdrop.js => editorToolbar.js} (63%) diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js index 11cbcb5e7e..91a246494d 100644 --- a/app/assets/javascripts/editor.js +++ b/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() { diff --git a/app/assets/javascripts/dragdrop.js b/app/assets/javascripts/editorToolbar.js similarity index 63% rename from app/assets/javascripts/dragdrop.js rename to app/assets/javascripts/editorToolbar.js index 64e79d4019..bf709fe6eb 100644 --- a/app/assets/javascripts/dragdrop.js +++ b/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,11 +124,9 @@ jQuery(function() { // $('

').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); @@ -100,6 +134,7 @@ jQuery(function() { }); }); + // #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(''); }, - - // 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); From bb802002bc65d6628f0b5a671bd7d002bc71db5d Mon Sep 17 00:00:00 2001 From: Will Gutierrez Date: Tue, 19 Jan 2021 12:44:44 -0800 Subject: [PATCH 4/6] rename dragdrop.js to editorToolbar.js #9004 --- app/views/admin/assets.html.erb | 2 +- app/views/comments/_form.html.erb | 2 +- app/views/editor/post.html.erb | 2 +- app/views/editor/question.html.erb | 2 +- app/views/features/_form.html.erb | 2 +- app/views/map/edit.html.erb | 2 +- app/views/users/_photo.html.erb | 2 +- app/views/wiki/edit.html.erb | 2 +- config/environments/production.rb | 2 +- config/environments/staging.rb | 2 +- config/environments/staging_unstable.rb | 2 +- config/initializers/assets.rb | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/views/admin/assets.html.erb b/app/views/admin/assets.html.erb index a82d073e06..70eb7fdfba 100644 --- a/app/views/admin/assets.html.erb +++ b/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' %> diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 886d12d68d..ed554b840a 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -104,7 +104,7 @@ } - <%= javascript_include_tag "dragdrop" %> + <%= javascript_include_tag "editorToolbar" %> <%= javascript_include_tag "comment.js" %> diff --git a/app/views/editor/post.html.erb b/app/views/editor/post.html.erb index 36aec43f40..c6a829ebad 100644 --- a/app/views/editor/post.html.erb +++ b/app/views/editor/post.html.erb @@ -9,7 +9,7 @@ <%= javascript_include_tag "post" %> - <%= javascript_include_tag "dragdrop" %> + <%= javascript_include_tag "editorToolbar" %> <% if params[:template] == "question" %>

Ask a question

diff --git a/app/views/editor/question.html.erb b/app/views/editor/question.html.erb index a6427554db..589939da49 100644 --- a/app/views/editor/question.html.erb +++ b/app/views/editor/question.html.erb @@ -9,7 +9,7 @@ <%= javascript_include_tag "post" %> - <%= javascript_include_tag "dragdrop" %> + <%= javascript_include_tag "editorToolbar" %> <% if params[:template] == "question" %>

Ask a question

diff --git a/app/views/features/_form.html.erb b/app/views/features/_form.html.erb index a1e096af70..7008ab46d4 100644 --- a/app/views/features/_form.html.erb +++ b/app/views/features/_form.html.erb @@ -1,4 +1,4 @@ -<%= javascript_include_tag "dragdrop" %> +<%= javascript_include_tag "editorToolbar" %>
<% if @node %> diff --git a/app/views/map/edit.html.erb b/app/views/map/edit.html.erb index f738bf1ed7..a25bbba2cd 100644 --- a/app/views/map/edit.html.erb +++ b/app/views/map/edit.html.erb @@ -1,5 +1,5 @@
- <%= javascript_include_tag "dragdrop" %> + <%= javascript_include_tag "editorToolbar" %>

Use good metadata!

Remember to tag maps with useful terms like "ndvi", "gulf-coast", etc.

diff --git a/app/views/users/_photo.html.erb b/app/views/users/_photo.html.erb index a286b7e8c5..2ddc6f3c29 100644 --- a/app/views/users/_photo.html.erb +++ b/app/views/users/_photo.html.erb @@ -6,7 +6,7 @@ } -<%= javascript_include_tag "dragdrop" %> +<%= javascript_include_tag "editorToolbar" %>
diff --git a/app/views/wiki/edit.html.erb b/app/views/wiki/edit.html.erb index c959a0349c..eb0a10d8ec 100644 --- a/app/views/wiki/edit.html.erb +++ b/app/views/wiki/edit.html.erb @@ -1,5 +1,5 @@
- <%= javascript_include_tag "dragdrop" %> + <%= javascript_include_tag "editorToolbar" %> <% if @related && @related.length > 0 %>

<%= translation('wiki.edit.did_you_mean') %>:

    diff --git a/config/environments/production.rb b/config/environments/production.rb index fb2eafa7c8..e4ad0cc837 100644 --- a/config/environments/production.rb +++ b/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 diff --git a/config/environments/staging.rb b/config/environments/staging.rb index 5619c9080c..7f1a542f3d 100644 --- a/config/environments/staging.rb +++ b/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 diff --git a/config/environments/staging_unstable.rb b/config/environments/staging_unstable.rb index 0ad2184817..5387216d05 100644 --- a/config/environments/staging_unstable.rb +++ b/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 diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 951b720edc..07a39a1508 100644 --- a/config/initializers/assets.rb +++ b/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', From 4e7283e42f4b0ff21dd50d42f3d1b7d47a3ad37c Mon Sep 17 00:00:00 2001 From: noi5e Date: Wed, 20 Jan 2021 10:06:31 -0800 Subject: [PATCH 5/6] rename dragdrop.js to editorToolbar.js --- app/views/notes/_comments.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/notes/_comments.html.erb b/app/views/notes/_comments.html.erb index 985a6c14d0..03c33466db 100644 --- a/app/views/notes/_comments.html.erb +++ b/app/views/notes/_comments.html.erb @@ -2,7 +2,7 @@
    <% comments = @node.comments_viewable_by(current_user) %>

    <%= comments.size %> <%= translation('notes._comments.comments') %>

    - <%= javascript_include_tag "dragdrop" %> + <%= javascript_include_tag "editorToolbar" %> <%= javascript_include_tag "comment" %>
    <% comments.includes([:replied_comments, :node]).order('timestamp ASC').each do |comment| %> From aec346c80ee1a425ae85ec7782172975b290d1ce Mon Sep 17 00:00:00 2001 From: noi5e Date: Wed, 20 Jan 2021 10:07:18 -0800 Subject: [PATCH 6/6] rename dragdrop.js to editorToolbar.js --- app/views/questions/show.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/questions/show.html.erb b/app/views/questions/show.html.erb index 9bb7fee155..fb0c49ef74 100644 --- a/app/views/questions/show.html.erb +++ b/app/views/questions/show.html.erb @@ -55,7 +55,7 @@ <% comments = @node.comments_viewable_by(current_user) %>

    <%= comments.size %> Comments

    - <%= 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? %>