diff --git a/app/javascript/retrospring/features/answerbox/comment/hotkey.ts b/app/javascript/retrospring/features/answerbox/comment/hotkey.ts new file mode 100644 index 00000000..0e15dd7f --- /dev/null +++ b/app/javascript/retrospring/features/answerbox/comment/hotkey.ts @@ -0,0 +1,7 @@ +export function commentHotkeyHandler(event: Event): void { + const button = event.target as HTMLButtonElement; + const id = button.dataset.aId; + + document.querySelector(`#ab-comments-section-${id}`).classList.remove('d-none'); + document.querySelector(`[name="ab-comment-new"][data-a-id="${id}"]`).focus(); +} diff --git a/app/javascript/retrospring/features/answerbox/comment/index.ts b/app/javascript/retrospring/features/answerbox/comment/index.ts index c98d043b..3e5a0f81 100644 --- a/app/javascript/retrospring/features/answerbox/comment/index.ts +++ b/app/javascript/retrospring/features/answerbox/comment/index.ts @@ -4,10 +4,12 @@ import { commentComposeEnd, commentComposeStart, commentCreateClickHandler, comm import { commentReportHandler } from "./report"; import { commentSmileHandler } from "./smile"; import { commentToggleHandler } from "./toggle"; +import { commentHotkeyHandler } from "retrospring/features/answerbox/comment/hotkey"; export default (): void => { registerEvents([ { type: 'click', target: '[name=ab-comments]', handler: commentToggleHandler, global: true }, + { type: 'click', target: '[name=ab-open-and-comment]', handler: commentHotkeyHandler, global: true }, { type: 'click', target: '[name=ab-smile-comment]', handler: commentSmileHandler, global: true }, { type: 'click', target: '[data-action=ab-comment-report]', handler: commentReportHandler, global: true }, { type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true }, diff --git a/app/views/answerbox/_comments.html.haml b/app/views/answerbox/_comments.html.haml index 70456738..023990e9 100644 --- a/app/views/answerbox/_comments.html.haml +++ b/app/views/answerbox/_comments.html.haml @@ -25,6 +25,7 @@ %span.caret = render "actions/comment", comment: comment, answer: a - if user_signed_in? + %button.d-none{ name: "ab-open-and-comment", data: { a_id: a.id, selection_hotkey: "c" } } .comment__compose-wrapper{ name: "ab-comment-new-group", data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 }