From a3649b8d09748f5e9255d8fea8ac727d43db7574 Mon Sep 17 00:00:00 2001 From: Nick Karnik Date: Sat, 13 Oct 2018 11:24:53 -0700 Subject: [PATCH] Added the ability to press Ctrl+Enter Or Command+Enter to submit comments. (#885) * Resolves #245 * This is applied to root level comments as well as nested replies. * We are ensuring that user has commented at least once which means they have accepted the code of conduct before Style changes as per suggestions in code review --- .gitignore | 3 ++ .../initializeCommentsPage.js.erb | 31 +++++++++++++++++++ .../utilities/buildCommentFormHTML.js.erb | 2 +- app/views/comments/_form.html.erb | 1 + 4 files changed, 36 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 8500a4f7c..bee8ca41b 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,6 @@ yarn-error.log # Ignore package-lock.json because we use yarn package-lock.json + +#Jetbrains Tools +.idea/ diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb index 5affc5a0e..a2e8d081d 100644 --- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb +++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb @@ -1,3 +1,5 @@ +const ENTER_KEY_CODE = 13; + function initializeCommentsPage() { if (document.getElementById('comments-container')) { toggleCodeOfConduct(); @@ -270,6 +272,35 @@ function handleKeyUp(event) { handleSizeChange(event); } +function handleKeyDown(event) { + // If Ctrl+Enter OR Command+Enter is pressed + if((event.ctrlKey || event.metaKey) && event.keyCode === ENTER_KEY_CODE) { + // Get user details and extract code of conduct & comment count + var user = userData(); + if (!user) { + return; + } + + var commentCount = user.number_of_comments; + + // var codeOfConduct = user.checked_code_of_conduct; + // Code of conduct is false the first time even if the user has accepted it + // so we are not using it in the check below + // It also seems unnecessary if comment count >= 1 indicates that + // it was previously accepted + + // Ensure that user has commented at least once + // and we have a non-empty comment to post + if (commentCount >= 1 && + 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} input[type="submit"].comment-action-button`); + submitButton.click(); + } + } +} + function handleSizeChange(event) { var lines = event.target.value.split(/\r*\n/); var lineCount = lines.length; diff --git a/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb b/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb index 2b79323fc..3e7d31090 100644 --- a/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb +++ b/app/assets/javascripts/utilities/buildCommentFormHTML.js.erb @@ -19,7 +19,7 @@ function buildCommentFormHTML(commentableId, commentableType, parentId) { \ \ \ - \ + \ '+previewDiv+'\ '+codeOfConductHTML+'\ \ diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb index 58bfc5e82..9982fdf9e 100644 --- a/app/views/comments/_form.html.erb +++ b/app/views/comments/_form.html.erb @@ -23,6 +23,7 @@ onfocus: "handleFocus(event)", onblur: "handleBlur(event)", onkeyup: "handleKeyUp(event)", + onkeydown: "handleKeyDown(event)", id: "text-area", readonly: !user_signed_in?, autofocus: @comment.persisted?,