Count character count downwards instead of up

This commit is contained in:
Andreas Nedbal 2022-10-13 22:29:04 +02:00
parent 0983ffca3a
commit 724c241bed
4 changed files with 5 additions and 4 deletions

View File

@ -18,7 +18,7 @@ export default class extends Controller {
} }
update(): void { update(): void {
this.counterTarget.innerHTML = String(`${this.inputTarget.value.length} / ${this.maxValue}`); this.counterTarget.innerHTML = String(`${this.maxValue - this.inputTarget.value.length}`);
if (this.inputTarget.value.length > this.maxValue) { if (this.inputTarget.value.length > this.maxValue) {
if (!this.inputTarget.classList.contains('is-invalid') && !this.actionTarget.disabled) { if (!this.inputTarget.classList.contains('is-invalid') && !this.actionTarget.disabled) {

View File

@ -30,3 +30,4 @@
%span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 0 / 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 .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") %button.btn.btn-primary{ type: :button, name: "ab-comment-new-submit", data: { a_id: a.id, "character-count-target": "action" } }= t(".action")
%span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 160

View File

@ -18,7 +18,7 @@
- if user_signed_in? || user.privacy_allow_anonymous_questions? - if user_signed_in? || user.privacy_allow_anonymous_questions?
#question-box{ data: { controller: "character-count", "character-count-max-value": 512 }} #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" } } %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;" } .row{ style: "padding-top: 5px;" }
.col-6 .col-6
- if user_signed_in? - if user_signed_in?
- if user.privacy_allow_anonymous_questions? - if user.privacy_allow_anonymous_questions?
@ -30,7 +30,7 @@
%input{ name: "qb-anonymous", type: :hidden, value: false }/ %input{ name: "qb-anonymous", type: :hidden, value: false }/
.col-6 .col-6
%p.pull-right %p.pull-right
%span.text-muted{ data: { "character-count-target": "counter" } } 0 / 512 %span.text-muted.mr-1{ data: { "character-count-target": "counter" } } 512
%input{ name: "qb-to", type: "hidden", value: user.id }/ %input{ name: "qb-to", type: "hidden", value: user.id }/
%button.btn.btn-primary{ name: "qb-ask", %button.btn.btn-primary{ name: "qb-ask",
type: :button, type: :button,

View File

@ -9,7 +9,7 @@
.modal-body .modal-body
.form-group.has-feedback .form-group.has-feedback
%textarea.form-control{ name: "qb-all-question", placeholder: t(".placeholder"), data: { "character-count-target": "input" } } %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 %p.text-right.text-muted.form-control-feedback{ data: { "character-count-target": "counter" } } 512
.modal-footer .modal-footer
%button.btn.btn-default{ type: :button, data: { dismiss: :modal } }= t("voc.cancel") %button.btn.btn-default{ type: :button, data: { 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: { "character-count-target": "action", loading_text: t(".loading") } }= t(".action")