Add Stimulus controller to relevant views

app/javascript/retrospring/features/answerbox/comment/count.ts

@@ -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');
-  }
-}

app/javascript/retrospring/features/answerbox/comment/index.ts

@@ -1,5 +1,4 @@
-import registerEvents from "retrospring/utilities/registerEvents"
+import registerEvents from "retrospring/utilities/registerEvents";
-import { commentCharacterCountHandler } from "./count";
 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: 'keyup', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
-    { type: 'input', target: '[name=ab-comment-new]', handler: commentCharacterCountHandler, global: true }
   ]);
 }

app/javascript/retrospring/features/answerbox/comment/new.ts

@@ -51,3 +51,12 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
       });
   }
 }
+
+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<HTMLButtonElement>(`button[name="ab-comment-new"][data-abc-id="${inboxId}"]`).click();
+  }
+}

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 } }
+  .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 } }
+    %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}" } 160
+    %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")

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
+        #question-box{ data: { controller: "character-count", "character-count-max-value": 512 }}
-          %textarea.form-control{ name: "qb-question", placeholder: t(".placeholder") }
+          %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?

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")