From 93d1a4e2cb88993bb681df7ee68e304dc6609fc0 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sun, 2 Oct 2022 22:10:04 +0200 Subject: [PATCH] Add Stimulus controller to relevant views --- .../features/answerbox/comment/count.ts | 19 ------------------- .../features/answerbox/comment/index.ts | 8 +++----- .../features/answerbox/comment/new.ts | 11 ++++++++++- app/views/answerbox/_comments.haml | 8 +++++--- app/views/application/_questionbox.haml | 7 ++++--- app/views/modal/_ask.haml | 8 +++++--- 6 files changed, 27 insertions(+), 34 deletions(-) delete mode 100644 app/javascript/retrospring/features/answerbox/comment/count.ts diff --git a/app/javascript/retrospring/features/answerbox/comment/count.ts b/app/javascript/retrospring/features/answerbox/comment/count.ts deleted file mode 100644 index 2650bb3d..00000000 --- a/app/javascript/retrospring/features/answerbox/comment/count.ts +++ /dev/null @@ -1,19 +0,0 @@ -export function commentCharacterCountHandler(event: Event): void { - const input = event.target as HTMLInputElement; - const id = input.dataset.aId; - const counter = document.querySelector(`#ab-comment-charcount-${id}`); - const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`); - - if (group.classList.contains('has-error')) { - group.classList.remove('has-error'); - } - - counter.innerHTML = String(160 - input.value.length); - if (Number(counter.innerHTML) < 0) { - counter.classList.remove('text-muted'); - counter.classList.add('text-danger'); - } else { - counter.classList.remove('text-danger'); - counter.classList.add('text-muted'); - } -} \ No newline at end of file diff --git a/app/javascript/retrospring/features/answerbox/comment/index.ts b/app/javascript/retrospring/features/answerbox/comment/index.ts index 29604203..dd5e2ab6 100644 --- a/app/javascript/retrospring/features/answerbox/comment/index.ts +++ b/app/javascript/retrospring/features/answerbox/comment/index.ts @@ -1,5 +1,4 @@ -import registerEvents from "retrospring/utilities/registerEvents" -import { commentCharacterCountHandler } from "./count"; +import registerEvents from "retrospring/utilities/registerEvents"; import { commentDestroyHandler } from "./destroy"; import { commentCreateHandler } from "./new"; import { commentReportHandler } from "./report"; @@ -12,7 +11,6 @@ export default (): void => { { 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 }, - { type: 'keyup', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }, - { type: 'input', target: '[name=ab-comment-new]', handler: commentCharacterCountHandler, global: true } + { type: 'keyup', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true } ]); -} \ No newline at end of file +} diff --git a/app/javascript/retrospring/features/answerbox/comment/new.ts b/app/javascript/retrospring/features/answerbox/comment/new.ts index 6f729165..22b02451 100644 --- a/app/javascript/retrospring/features/answerbox/comment/new.ts +++ b/app/javascript/retrospring/features/answerbox/comment/new.ts @@ -50,4 +50,13 @@ export function commentCreateHandler(event: KeyboardEvent): boolean { input.disabled = false; }); } -} \ No newline at end of file +} + +export function commentInputHandler(event: KeyboardEvent): void { + const input = event.target as HTMLInputElement; + const inboxId = input.dataset.id; + + if (event.keyCode == 13 && (event.ctrlKey || event.metaKey)) { + document.querySelector(`button[name="ab-comment-new"][data-abc-id="${inboxId}"]`).click(); + } +} diff --git a/app/views/answerbox/_comments.haml b/app/views/answerbox/_comments.haml index e7b206eb..f509f418 100644 --- a/app/views/answerbox/_comments.haml +++ b/app/views/answerbox/_comments.haml @@ -25,6 +25,8 @@ %span.caret = render "actions/comment", comment: comment, answer: a - if user_signed_in? - .form-group.has-feedback.comment__input-group{ name: "ab-comment-new-group", data: { a_id: a.id } } - %input.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id } } - %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}" } 160 + .form-group.has-feedback.comment__input-group.input-group{ name: "ab-comment-new-group", data: { a_id: a.id, controller: "character-count", "character-count-max-value": 160 } } + %input.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } } + %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 0 / 160 + .input-group-append + %button.btn.btn-primary{ type: :button, name: "ab-comment-new-submit", data: { a_id: a.id, "character-count-target": "action" } }= t(".action") diff --git a/app/views/application/_questionbox.haml b/app/views/application/_questionbox.haml index 066a4dcd..6984c2f7 100644 --- a/app/views/application/_questionbox.haml +++ b/app/views/application/_questionbox.haml @@ -16,8 +16,8 @@ %strong= t(".status.blocked") - else - if user_signed_in? || user.privacy_allow_anonymous_questions? - #question-box - %textarea.form-control{ name: "qb-question", placeholder: t(".placeholder") } + #question-box{ data: { controller: "character-count", "character-count-max-value": 512 }} + %textarea.form-control{ name: "qb-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } } .row{ style: "padding-top: 5px; padding-left: 5px; padding-right: 5px;" } .col-6 - if user_signed_in? @@ -30,10 +30,11 @@ %input{ name: "qb-anonymous", type: :hidden, value: false }/ .col-6 %p.pull-right + %span.text-muted{ data: { "character-count-target": "counter" } } 0 / 512 %input{ name: "qb-to", type: "hidden", value: user.id }/ %button.btn.btn-primary{ name: "qb-ask", type: :button, - data: { loading_text: t(".load"), promote: user_signed_in? ? "false" : "true" } } + data: { loading_text: t(".load"), promote: user_signed_in? ? "false" : "true", "character-count-target": "action" } } Ask - unless user_signed_in? - if user.privacy_allow_anonymous_questions? diff --git a/app/views/modal/_ask.haml b/app/views/modal/_ask.haml index 36ed3544..667c763c 100644 --- a/app/views/modal/_ask.haml +++ b/app/views/modal/_ask.haml @@ -1,13 +1,15 @@ .modal.fade#modal-ask-followers{ aria: { hidden: true, labelledby: "modal-ask-followers-label" }, role: :dialog, tabindex: -1 } .modal-dialog - .modal-content + .modal-content{ data: { controller: "character-count", "character-count-max-value": 512 }} .modal-header %h5.modal-title#modal-ask-followers-label= t(".title") %button.close{ data: { dismiss: :modal }, type: :button } %span{ aria: { hidden: true } } × %span.sr-only= t("voc.close") .modal-body - %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder") } + .form-group.has-feedback + %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } } + %p.text-right.text-muted.form-control-feedback{ data: { "character-count-target": "counter" } } 0 / 512 .modal-footer %button.btn.btn-default{ type: :button, data: { dismiss: :modal } }= t("voc.cancel") - %button.btn.btn-primary{ name: "qb-all-ask", type: :button, data: { loading_text: t(".loading") } }= t(".action") + %button.btn.btn-primary{ name: "qb-all-ask", type: :button, data: { "character-count-target": "action", loading_text: t(".loading") } }= t(".action")