diff --git a/app/views/comments/create.js.erb b/app/views/comments/create.js.erb index 3bb7fa91b0..7456d2e763 100644 --- a/app/views/comments/create.js.erb +++ b/app/views/comments/create.js.erb @@ -1,23 +1,43 @@ +// this code runs after a new comment is posted. +// 1. it inserts the new comment into the DOM +// 2. it also creates image upload functionality for the new comment form (see /app/assets/javascripts/editorToolbar.js) + +// the new comment will have an 'edit comment' form that needs image upload functionality: +let fileUploadElements = [ + { + selector: '#comment-form-body-edit-<%= @comment.cid %>', + isButton: false + }, + { + selector: '#dropzone-small-edit-<%= @comment.cid %>', + isButton: true + } +]; +// if new comment is NOT a reply to another comment <% if @comment.reply_to.nil? %> - $("#comments-list").append('<%= escape_javascript(render :partial => "notes/comment", :locals => {comment: @comment, answer_id: @answer_id}) %>') + $("#comments-list").append('<%= escape_javascript(render :partial => "notes/comment", :locals => { comment: @comment }) %>'); + // the new comment will also have its own reply section + // this reply comment form needs image upload functionality + fileUploadElements = fileUploadElements.concat([ + { + selector: '#comment-form-body-reply-<%= @comment.cid %>', + isButton: false + }, + { + selector: '#dropzone-small-reply-<%= @comment.cid %>', + isButton: true + } + ]); <% else %> - $('#comment-<%= @comment.reply_to %>-reply').before('<%= escape_javascript(render :partial => "notes/comment", :locals => {comment: @comment, answer_id: @answer_id}) %>') +// new comment IS a reply to another comment +// no other elements need upload functionality + $('#comment-<%= @comment.reply_to %>-reply-toggle').before('<%= escape_javascript(render :partial => "notes/comment", :locals => {comment: @comment, answer_id: @answer_id}) %>') <% end %> -// create image upload functionality for fresh comment form +// create image upload functionality for fresh comment's elements // see editorToolbar.js -const replyFormBody = $('#comment-form-body-reply-<%= @comment.cid %>'); -const editFormBody = $('#comment-form-body-edit-<%= @comment.cid %>'); -const replyButton = $('#dropzone-small-reply-<%= @comment.cid %>'); -const editButton = $('#dropzone-small-edit-<%= @comment.cid %>'); -const replyFormOptions = getFileUploadOptions(replyFormBody, false); -const editFormOptions = getFileUploadOptions(editFormBody, false); -const replyButtonOptions = getFileUploadOptions(replyButton, true); -const editButtonOptions = getFileUploadOptions(editButton, true); -replyFormBody.fileupload(replyFormOptions); -editFormBody.fileupload(editFormOptions); -replyButton.fileupload(replyButtonOptions); -editButton.fileupload(editButtonOptions); - -$('#answer-<%= @answer_id %>-comment-section .help-block').remove(); +fileUploadElements.forEach(function(element) { + const options = getFileUploadOptions($(element.selector), element.isButton); + $(element.selector).fileupload(options); +}); notyNotification('mint', 3000, 'success', 'topRight', 'Comment Added!'); $('#comment-count')[0].innerHTML = parseInt($('#comment-count')[0].innerHTML, 10)+1; diff --git a/app/views/editor/_toolbar.html.erb b/app/views/editor/_toolbar.html.erb index f718d3aca7..003a23a009 100644 --- a/app/views/editor/_toolbar.html.erb +++ b/app/views/editor/_toolbar.html.erb @@ -52,6 +52,7 @@ data-placement="bottom" data-toggle="tooltip" class="link-button btn btn-outline-secondary btn-sm rich-text-button" href="javascript:void(0)" + style="color: #6c757d;" > @@ -66,7 +67,7 @@ <%# data-form-id is for setState on editor.js %>
-