From 1636bdf4c8354ec60b6744499be9cfd1b62bd37c Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Thu, 29 Oct 2020 09:33:11 +0100 Subject: [PATCH] Autoresize on comment textarea + comment submit on `CMD/CTRL+Return` (#11115) * . * whoops * revert typo * Handle glitches and edge cases. Co-authored-by: Ben Halpern --- .../initializeCommentsPage.js.erb | 42 ++++++------------- .../utilities/buildCommentFormHTML.js.erb | 2 +- app/assets/stylesheets/views/comments.scss | 13 +----- app/views/comments/_form.html.erb | 2 - 4 files changed, 16 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb index 96f1251f6..2a49de7ab 100644 --- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb +++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb @@ -126,6 +126,7 @@ function initializeCommentsPage() { commentWrapper = event.target.closest('.inner-comment'); commentWrapper.classList.add("replying"); commentWrapper.innerHTML += buildCommentFormHTML(commentableId, commentableType, parentId); + initializeCommentsPage(); setTimeout(function () { commentWrapper.getElementsByTagName('textarea')[0].focus(); @@ -178,6 +179,11 @@ function handleCommentSubmit(event) { event.preventDefault(); var form = event.target; form.classList.add('submitting'); + var textarea = form.getElementsByClassName('comment-textarea')[0]; + if (textarea) { + textarea.style.height = null; + textarea.blur(); + } var parentComment = document.getElementById("comment-node-" + event.target.dataset.commentId); var body = JSON.stringify({ @@ -221,8 +227,7 @@ function handleCommentSubmit(event) { else if (mainCommentsForm) { var mainCommentsForm = document.getElementById("new_comment"); mainCommentsForm.classList.remove("submitting"); - const textArea = document.getElementById("text-area"); - textArea.classList.remove('embiggened-max', 'embiggened-more', 'embiggened'); + const textArea = form.querySelector(".comment-textarea"); textArea.closest('.comment-form').classList.remove('comment-form--initiated'); textArea.value = newComment.comment_template || ""; var preview = document.getElementById("preview-div"); @@ -275,15 +280,6 @@ function handleFocus(event) { } } -function handleBlur(event) { - setTimeout(function () { - var el = document.getElementById('text-area'); - if (el.value.length == 0) { - el.classList.remove('embiggened-max', 'embiggened-more', 'embiggened'); - } - }, 100); -} - function handleKeyUp(event) { handleSizeChange(event); handleButtonsActivation(event); @@ -299,10 +295,7 @@ function handleSubmit(event) { var codeOfConduct = user.checked_code_of_conduct; if (codeOfConduct && event.target.value.trim() !== '') { - // get a reference to the submit button for the text area (first level comment vs. reply comment) - var parentFormId = event.target.parentElement.parentElement.id || event.target.parentElement.id; - var submitButton = document.querySelector('#' + parentFormId + ' button[type="submit"].comment-action-button'); - submitButton.click(); + event.target.closest('form').querySelector('button[type="submit"]').click(); } } @@ -403,19 +396,9 @@ function handleFormClose(event) { } function handleSizeChange(event) { - var lines = event.target.value.split(/\r*\n/); var textarea = event.target; - var lineCount = lines.length; - if (lineCount > 10) { - textarea.classList.add('embiggened-max'); - textarea.classList.remove('embiggened-more', 'embiggened'); - } else if (lineCount > 3) { - textarea.classList.add('embiggened-more'); - textarea.classList.remove('embiggened-max', 'embiggened'); - } else { - textarea.classList.add('embiggened'); - textarea.classList.remove('embiggened-more', 'embiggened-max'); - } + var oldHeight = parseInt(textarea.style.height.replace('px','')); + textarea.style.height = textarea.scrollHeight + (textarea.scrollHeight > oldHeight ? 15 : 0) + "px"; } function handleButtonsActivation(event) { @@ -431,8 +414,9 @@ function handleButtonsActivation(event) { } function validateField(event) { - if (document.getElementById('text-area')) { - var commentField = document.getElementById('text-area').value; + var textarea = event.target.closest('.comment-form').querySelector('.comment-textarea'); + if (textarea) { + var commentField = textarea.value; if (commentField == '') { event.preventDefault(); } diff --git a/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb b/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb index 393e334d3..cd80cb238 100644 --- a/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb +++ b/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb @@ -18,7 +18,7 @@ function buildCommentFormHTML(commentableId, commentableType, parentId) {
- +
diff --git a/app/assets/stylesheets/views/comments.scss b/app/assets/stylesheets/views/comments.scss index 372f5ad3b..0b72597c1 100644 --- a/app/assets/stylesheets/views/comments.scss +++ b/app/assets/stylesheets/views/comments.scss @@ -30,16 +30,7 @@ .comment-textarea { resize: vertical; padding: 0.5em; - - &.embiggened { - height: 96px; - } - &.embiggened-more { - height: 256px; - } - &.embiggened-max { - height: 384px; - } + max-height: 40vh; } &__toolbar, @@ -49,7 +40,7 @@ &--initiated { .comment-textarea { - height: 96px; + height: 128px; } } diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 73636a729..6f354e19a 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -36,12 +36,10 @@ <%= f.text_area :body_markdown, placeholder: "Add to the discussion", onfocus: "handleFocus(event)", - onblur: "handleBlur(event)", onkeyup: "handleKeyUp(event)", onkeydown: "handleKeyDown(event)", oninput: "handleChange(event)", id: "text-area", - # autofocus: @comment.persisted?, required: true, class: "crayons-textfield comment-textarea crayons-textfield--ghost", 'aria-label': "Add a comment to the discussion" %>