From 3a47ae99843467cf24325170f7763f0de679c4b9 Mon Sep 17 00:00:00 2001 From: noi5e Date: Fri, 8 Jan 2021 14:25:29 -0800 Subject: [PATCH] Bug: Fix Image Drag & Drop Cross-Wiring in Edit Comment Form (#8897) * add test for comment image crosswiring * wrap everything in comment-form-wrapper, assign .selected in drop listener (#8670) * delete defunct function, fix indentation & spacing #8670 * rewrite tests that rely on comment-form-wrapper * remove deprecated code, comments; fix indent * initialize on pageload (#8670) * rewrite for multiple file inputs * change test to focus on image drag & drop #8670 * restore E.initialize call in drop #8670 * undo E.initialize call #8670 * assign unique IDs to comment form textareas #8670 * change ID selectors to class ones to match new IDs #8670 * fix indentation #8670 * change ID reference to class reference #8670 * initialize E with parameters in drop listener #8670 * update tests for new text-input selectors #8670 * change ID text-input reference to class ref #8670 * change text-input ID to class #8670 * drop: initialize E with params #8670 * remove semicolon --- app/assets/javascripts/atwho_autocomplete.js | 2 +- app/assets/javascripts/comment.js | 16 +- app/assets/javascripts/dragdrop.js | 334 +++++++------------ app/assets/javascripts/editor.js | 2 +- app/helpers/application_helper.rb | 12 + app/views/comments/_edit.html.erb | 268 ++++++++------- app/views/comments/_form.html.erb | 31 +- app/views/wiki/edit.html.erb | 4 +- test/application_system_test_case.rb | 61 ++-- test/system/comment_test.rb | 120 +++++-- 10 files changed, 427 insertions(+), 423 deletions(-) diff --git a/app/assets/javascripts/atwho_autocomplete.js b/app/assets/javascripts/atwho_autocomplete.js index 4ffe8dc8c1..16ff63b839 100644 --- a/app/assets/javascripts/atwho_autocomplete.js +++ b/app/assets/javascripts/atwho_autocomplete.js @@ -38,7 +38,7 @@ limit: 100 } - $('textarea#text-input') + $('textarea.text-input') .atwho(at_config) .atwho(hashtags_config) .atwho(emojis_config); diff --git a/app/assets/javascripts/comment.js b/app/assets/javascripts/comment.js index 42e6b77c2a..c95319bce3 100644 --- a/app/assets/javascripts/comment.js +++ b/app/assets/javascripts/comment.js @@ -3,20 +3,20 @@ $('.comment-form').each(function() { if(!$(this).hasClass('bound-success')) { $(this).addClass('bound-success').bind('ajax:success', function(e, data, status, xhr){ - $(this).find('#text-input').prop('disabled',false); - $(this).find('#text-input').val(''); + $(this).find('.text-input').prop('disabled',false); + $(this).find('.text-input').val(''); $('#comments-container').append(xhr.responseText); $(this).find(".btn-primary").button('reset'); $(this).find('#preview').hide(); - $(this).find('#text-input').show(); + $(this).find('.text-input').show(); $(this).find('#preview-btn').button('toggle'); }); } if(!$(this).hasClass('bound-beforeSend')) { $(this).addClass('bound-beforeSend').bind('ajax:beforeSend', function(event){ - $(this).find("#text-input").prop('disabled',true) - $(this).find('#text-input').val(''); + $(this).find(".text-input").prop('disabled',true) + $(this).find('.text-input').val(''); $(this).find(".btn-primary").button('loading',true); }); } @@ -24,10 +24,10 @@ if(!$(this).hasClass('bound-error')) { $(this).addClass('bound-error').bind('ajax:error', function(e,response){ notyNotification('mint', 3000, 'error', 'topRight', 'Some error occured while adding comment'); - $(this).find('#text-input').prop('disabled',false); + $(this).find('.text-input').prop('disabled',false); $(this).find('.control-group').addClass('has-error') $(this).find('.control-group .help-block ').remove() - $(this).find('#text-input').val(''); + $(this).find('.text-input').val(''); $(this).find('.control-group').append('Error: there was a problem.') }); } @@ -35,7 +35,7 @@ if(!$(this).hasClass('bound-keypress')) { $(this).addClass('bound-keypress'); - $(this).find('#text-input').val(''); + $(this).find('.text-input').val(''); $(this).on('keypress', function (e) { var isPostCommentShortcut = (e.ctrlKey && e.keyCode === 10) || (e.metaKey && e.keyCode === 13); diff --git a/app/assets/javascripts/dragdrop.js b/app/assets/javascripts/dragdrop.js index 9696089d05..7bd2af46eb 100644 --- a/app/assets/javascripts/dragdrop.js +++ b/app/assets/javascripts/dragdrop.js @@ -1,4 +1,4 @@ -jQuery(document).ready(function() { +jQuery(function() { /* * Based on the basic plugin from jQuery file upload: * https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin @@ -9,216 +9,138 @@ jQuery(document).ready(function() { * #side-dropzone, is for the main image of research notes, in /app/views/editor/post.html.erb */ - function progressAll(elem, data) { - var progress = parseInt(data.loaded / data.total * 100, 10); - $(elem).css( - 'width', - progress + '%' - ); - } + function progressAll(elem, data) { + var progress = parseInt(data.loaded / data.total * 100, 10); + $(elem).css( + 'width', + progress + '%' + ); + } - $('.dropzone').bind('dragover',function(e) { - e.preventDefault(); - $('.dropzone').addClass('hover'); - }); - $('#side-dropzone').bind('dragover',function(e) { - e.preventDefault(); - $('#side-dropzone').addClass('hover'); - }); - $('.dropzone').bind('dragout',function(e) { - $('.dropzone').removeClass('hover'); - }); - $('#side-dropzone').bind('dragout',function(e) { - $('#side-dropzone').removeClass('hover'); - }); - $('.dropzone').bind('drop',function(e) { - $D.selected = $(e.target.closest('div.comment-form-wrapper')).eq(0); - e.preventDefault(); - $E.initialize({}); - }); - $('#side-dropzone').bind('drop',function(e) { - e.preventDefault(); - }); + $('.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) { + $D.selected = $(e.target).closest('div.comment-form-wrapper').eq(0); + e.preventDefault(); + let params = {}; + if ($D.selected.hasOwnProperty(0)) { + params['textarea'] = $D.selected[0].querySelector('textarea').id + } else { + params['textarea'] = 'text-input' + } + $E.initialize(params); + }); + $('#side-dropzone').on('drop',function(e) { + e.preventDefault(); + }); - $('.dropzone').each(function () { - $(this).fileupload({ - url: "/images", - paramName: "image[photo]", - dropZone: $(this), - dataType: 'json', - formData: { - 'uid':$D.uid, - 'nid':$D.nid - }, - start: function(e) { - $('#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'); - }, - 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(); - 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' - else if (['csv', 'CSV'].includes(extension)) - file_type = 'csv' - switch (file_type) { - case 'image': - orig_image_url = file_url + '?s=o' // size = original - $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js - break - case 'csv': - $E.wrap('[graph:' + file_url + ']', '', {'newline': true}) - break - default: - $E.wrap(' ','', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js - } - // here append the image id to the wiki edit form: - if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')) - else $('#node_images').val(data.result.id) - // eventual handling of multiple files; must add "multiple" to file input and handle on server side: - //$.each(data.result.files, function (index, file) { - // $('

').text(file.name).appendTo(document.body); - //}); - }, + $('.dropzone').each(function() { + $(this).fileupload({ + url: "/images", + paramName: "image[photo]", + dropZone: $(this), + dataType: 'json', + formData: { + 'uid':$D.uid, + 'nid':$D.nid + }, + start: function(e) { + $('#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'); + }, + 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(); + 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' + else if (['csv', 'CSV'].includes(extension)) + file_type = 'csv' + switch (file_type) { + case 'image': + orig_image_url = file_url + '?s=o' // size = original + $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js + break; + case 'csv': + $E.wrap('[graph:' + file_url + ']', '', {'newline': true}) + break; + default: + $E.wrap(' ','', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js + } + // here append the image id to the wiki edit form: + if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')) + else $('#node_images').val(data.result.id) + // eventual handling of multiple files; must add "multiple" to file input and handle on server side: + //$.each(data.result.files, function (index, file) { + // $('

').text(file.name).appendTo(document.body); + //}); + }, - // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options - fileuploadfail: function(e,data) { + // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options + fileuploadfail: function(e,data) { - }, - progressall: function (e, data) { - return progressAll('#create_progress .progress-bar', data); - } - }); + }, + progressall: function (e, data) { + return progressAll('#create_progress .progress-bar', data); + } }); + }); - // $('.dropzone').off('drop').on('drop', function (e) { - // e.preventDefault(); - // elem = $(e.target.closest('div.comment-form-wrapper')).find('.dropzone').eq(0); - // $D.selected = $(e.target.closest('div.comment-form-wrapper')); - // uploadImage(elem); - // }); - // - // $('input[type="file"]').off().on('change', function (e) { - // e.preventDefault(); - // elem = $(e.target.closest('div.comment-form-wrapper')).find('.dropzone').eq(0); - // uploadImage(elem); - // }); - // - // - // function uploadImage(elem) { - // elem.fileupload({ - // url: "/images", - // paramName: "image[photo]", - // dropZone: $('.dropzone'), - // dataType: 'json', - // formData: { - // 'uid':$D.uid, - // 'nid':$D.nid - // }, - // start: function(e) { - // if($D.selected) { - // ($D.selected).find('#create_progress').eq(0).show(); - // ($D.selected).find('#create_uploading').eq(0).show(); - // ($D.selected).find('#create_prompt').eq(0).hide(); - // ($D.selected).find('.dropzone').eq(0).removeClass('hover'); - // } - // }, - // done: function (e, data) { - // if($D.selected) { - // ($D.selected).find('#create_progress').hide(); - // ($D.selected).find('#create_uploading').hide(); - // ($D.selected).find('#create_prompt').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' - // else if (['csv', 'CSV'].includes(extension)) - // file_type = 'csv' - // - // switch (file_type) { - // case 'image': - // orig_image_url = file_url + '?s=o' // size = original - // $E.wrap('[![', '](' + file_url + ')](' + orig_image_url + ')', {'newline': true, 'fallback': data.result['filename']}) // on its own line; see /app/assets/js/editor.js - // break - // case 'csv': - // $E.wrap('[graph:' + file_url + ']', {'newline': true, 'fallback': data.result['filename']}) - // break - // default: - // $E.wrap(' ','', {'newline': true, 'fallback': data.result['filename'].replace(/[()]/g , "-")}) // on its own line; see /app/assets/js/editor.js - // } - // - // // here append the image id to the wiki edit form: - // if ($('#node_images').val() && $('#node_images').val().split(',').length > 1) $('#node_images').val([$('#node_images').val(),data.result.id].join(',')) - // else $('#node_images').val(data.result.id) - // - // // eventual handling of multiple files; must add "multiple" to file input and handle on server side: - // //$.each(data.result.files, function (index, file) { - // // $('

').text(file.name).appendTo(document.body); - // //}); - // }, - // - // // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options - // fileuploadfail: function(e,data) { - // - // }, - // progressall: function (e, data) { - // var progress = parseInt(data.loaded / data.total * 100, 10); - // $('#create_progress-bar').css( - // 'width', - // progress + '%' - // ); - // } - // }); - // } - - - $('#side-dropzone').fileupload({ - url: "/images", - paramName: "image[photo]", - dropZone: $('#side-dropzone'), - dataType: 'json', - formData: { - 'uid':$D.uid, - 'nid':$D.nid - }, - start: function(e) { - $('.side-dropzone').css('border-color','#ccc'); - $('.side-dropzone').css('background','none'); - $('#side-progress').show(); - $('#side-dropzone').removeClass('hover'); - $('.side-uploading').show(); - }, - done: function (e, data) { - $('#side-progress').hide(); - $('#side-dropzone').show(); - $('.side-uploading').hide(); - $('#leadImage')[0].src = data.result.url; - $('#leadImage').show(); - // here append the image id to the note as the lead image - $('#main_image').val(data.result.id); - $("#image_revision").append(''); - }, + $('#side-dropzone').fileupload({ + url: "/images", + paramName: "image[photo]", + dropZone: $('#side-dropzone'), + dataType: 'json', + formData: { + 'uid':$D.uid, + 'nid':$D.nid + }, + start: function(e) { + $('.side-dropzone').css('border-color','#ccc'); + $('.side-dropzone').css('background','none'); + $('#side-progress').show(); + $('#side-dropzone').removeClass('hover'); + $('.side-uploading').show(); + }, + done: function (e, data) { + $('#side-progress').hide(); + $('#side-dropzone').show(); + $('.side-uploading').hide(); + $('#leadImage')[0].src = data.result.url; + $('#leadImage').show(); + // 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) { - }, - progressall: function (e, data) { - return progressAll('#side-progress .progress-bar', data); - } - }); + // see callbacks at https://github.com/blueimp/jQuery-File-Upload/wiki/Options + fileuploadfail: function(e,data) { + }, + progressall: function (e, data) { + return progressAll('#side-progress .progress-bar', data); + } + }); }); diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js index b73dd695ec..7a37e22a98 100644 --- a/app/assets/javascripts/editor.js +++ b/app/assets/javascripts/editor.js @@ -131,7 +131,7 @@ $E = { const currentComment = $('#'+comment_id).parent('.control-group') $E.preview = currentComment.siblings('#preview') dropzone = currentComment.siblings('.dropzone') - $E.textarea = dropzone.children('#text-input') + $E.textarea = dropzone.children('.text-input') } else { previewBtn = $(this.textarea.context).find('#post_comment'); dropzone = $(this.textarea.context).find('.dropzone'); diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 7e56ce6ec6..2cce471887 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -77,6 +77,18 @@ def get_large_dropzone_id(location, reply_to) end end + # used in views/comments/_form.html.erb + def get_textarea_id(location, reply_to) + case location + when :main + 'text-input' + when :reply + 'text-input-reply-' + reply_to.to_s + when :responses + 'text-input-responses' + end + end + def locale_name_pairs I18n.available_locales.map do |locale| [I18n.t('language', locale: locale), locale] diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb index 34c7df59ed..8986fde89c 100644 --- a/app/views/comments/_edit.html.erb +++ b/app/views/comments/_edit.html.erb @@ -1,153 +1,151 @@ -

- \ No newline at end of file diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index a07e227dfe..a9ac3eeb6a 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -1,13 +1,12 @@
" <% if local_assigns[:aid].blank? %>method="post"<% end %>> - <% if current_user && current_user.id == @node.uid %> - Add a template + + Add a template + <% end %> -

<%= title %>

-