diff --git a/app/javascript/retrospring/controllers/character_count_warning_controller.ts b/app/javascript/retrospring/controllers/character_count_warning_controller.ts new file mode 100644 index 00000000..8c1bfe07 --- /dev/null +++ b/app/javascript/retrospring/controllers/character_count_warning_controller.ts @@ -0,0 +1,30 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['input', 'warning']; + + declare readonly inputTarget: HTMLInputElement; + declare readonly warningTarget: HTMLElement; + + static values = { + warn: Number + }; + + declare readonly warnValue: number; + + connect(): void { + this.inputTarget.addEventListener('input', this.update.bind(this)); + } + + update(): void { + if (this.inputTarget.value.length > this.warnValue) { + if (this.warningTarget.classList.contains('d-none')) { + this.warningTarget.classList.remove('d-none'); + } + } else { + if (!this.warningTarget.classList.contains('d-none')) { + this.warningTarget.classList.add('d-none'); + } + } + } +} diff --git a/app/javascript/retrospring/initializers/stimulus.ts b/app/javascript/retrospring/initializers/stimulus.ts index fc65f20e..09ead0bf 100644 --- a/app/javascript/retrospring/initializers/stimulus.ts +++ b/app/javascript/retrospring/initializers/stimulus.ts @@ -2,6 +2,7 @@ import { Application } from "@hotwired/stimulus"; import AnnouncementController from "retrospring/controllers/announcement_controller"; import AutofocusController from "retrospring/controllers/autofocus_controller"; import CharacterCountController from "retrospring/controllers/character_count_controller"; +import CharacterCountWarningController from "retrospring/controllers/character_count_warning_controller"; /** * This module sets up Stimulus and our controllers @@ -15,4 +16,5 @@ export default function (): void { window['Stimulus'].register('announcement', AnnouncementController); window['Stimulus'].register('autofocus', AutofocusController); window['Stimulus'].register('character-count', CharacterCountController); + window['Stimulus'].register('character-count-warning', CharacterCountWarningController); } diff --git a/app/models/profile.rb b/app/models/profile.rb index df75ce61..b2927860 100644 --- a/app/models/profile.rb +++ b/app/models/profile.rb @@ -26,4 +26,6 @@ class Profile < ApplicationRecord def safe_name display_name.presence || user.screen_name end + + def question_length_limit = allow_long_questions ? nil : Question::SHORT_QUESTION_MAX_LENGTH end diff --git a/app/views/application/_questionbox.html.haml b/app/views/application/_questionbox.html.haml index 42c0731e..d56fefda 100644 --- a/app/views/application/_questionbox.html.haml +++ b/app/views/application/_questionbox.html.haml @@ -22,7 +22,7 @@ %strong= t(".status.require_user_html", sign_in: link_to(t("voc.login"), new_user_session_path), sign_up: link_to(t("voc.register"), new_user_registration_path)) - else - if user_signed_in? || user.privacy_allow_anonymous_questions? - #question-box{ data: { controller: "character-count", "character-count-max-value": 512 }} + #question-box{ data: user.profile.allow_long_questions ? {} : { controller: "character-count", "character-count-max-value": user.profile.question_length_limit }} %textarea.form-control{ name: "qb-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } } .row{ style: "padding-top: 5px;" } .col-6 @@ -36,7 +36,7 @@ %input{ name: "qb-anonymous", type: :hidden, value: false }/ .col-6 %p.pull-right - %span.text-muted.me-1{ data: { "character-count-target": "counter" } } 512 + %span.text-muted.me-1{ class: user.profile.allow_long_questions ? "d-none" : "", data: { "character-count-target": "counter" } }= Question::SHORT_QUESTION_MAX_LENGTH %input{ name: "qb-to", type: "hidden", value: user.id }/ %button.btn.btn-primary{ name: "qb-ask", type: :button, diff --git a/app/views/modal/_ask.html.haml b/app/views/modal/_ask.html.haml index 740a684a..00192b61 100644 --- a/app/views/modal/_ask.html.haml +++ b/app/views/modal/_ask.html.haml @@ -1,14 +1,14 @@ .modal.fade#modal-ask-followers{ aria: { hidden: true, labelledby: "modal-ask-followers-label" }, role: :dialog, tabindex: -1 } .modal-dialog - .modal-content{ data: { controller: "character-count", "character-count-max-value": 512 }} + .modal-content{ data: { controller: "character-count-warning", "character-count-warning-warn-value": Question::SHORT_QUESTION_MAX_LENGTH }} .modal-header %h5.modal-title#modal-ask-followers-label= t(".title") %button.btn-close{ data: { bs_dismiss: :modal }, type: :button } %span.visually-hidden= t("voc.close") .modal-body .form-group.has-feedback - %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } } - %p.text-end.text-muted.form-control-feedback{ data: { "character-count-target": "counter" } } 512 + %textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-warning-target": "input" } } + .alert.alert-warning.mt-3.d-none{ data: { "character-count-warning-target": "warning" } }= t('.long_question_warning') .modal-footer %button.btn.btn-default{ type: :button, data: { bs_dismiss: :modal } }= t("voc.cancel") - %button.btn.btn-primary{ name: "qb-all-ask", type: :button, data: { "character-count-target": "action", loading_text: t(".loading") } }= t(".action") + %button.btn.btn-primary{ name: "qb-all-ask", type: :button, data: { loading_text: t(".loading") } }= t(".action") diff --git a/config/locales/views.en.yml b/config/locales/views.en.yml index efe4373a..c0589eea 100644 --- a/config/locales/views.en.yml +++ b/config/locales/views.en.yml @@ -254,6 +254,7 @@ en: placeholder: "Type your question here…" action: "Ask" loading: "Asking…" + long_question_warning: "This question will only be sent to those who allow long questions." comment_smiles: title: "People who smiled this comment" none: "No one has smiled this comment yet."