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
This commit is contained in:
Nick Karnik 2018-10-13 11:24:53 -07:00 committed by Ben Halpern
parent 75c4388e53
commit a3649b8d09
4 changed files with 36 additions and 1 deletions

3
.gitignore vendored
View file

@ -46,3 +46,6 @@ yarn-error.log
# Ignore package-lock.json because we use yarn
package-lock.json
#Jetbrains Tools
.idea/

View file

@ -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;

View file

@ -19,7 +19,7 @@ function buildCommentFormHTML(commentableId, commentableType, parentId) {
<input value="' + commentableId + '" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />\
<input value="' + commentableType + '" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />\
<input value="' + parentId + '" type="hidden" name="comment[parent_id]" id="comment_parent_id" />\
<textarea id="textarea-for-' + parentId + '" class="embiggened" name="comment[body_markdown]" id="comment_body_markdown" required></textarea>\
<textarea id="textarea-for-' + parentId + '" class="embiggened" name="comment[body_markdown]" id="comment_body_markdown" required onkeydown="handleKeyDown.bind(this)(event)"></textarea>\
'+previewDiv+'\
'+codeOfConductHTML+'\
<a href="/p/editor_guide" class="markdown-guide" target="_blank" title="Markdown Guide">\

View file

@ -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?,