From b5345705d50537e144e5b8bdbd4645b4fe3d54cc Mon Sep 17 00:00:00 2001 From: Vlada Date: Fri, 24 May 2024 16:51:28 +0200 Subject: [PATCH] feat(input): add input character counter change listener --- .../javascripts/folio/input/character_counter.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/assets/javascripts/folio/input/character_counter.js b/app/assets/javascripts/folio/input/character_counter.js index 3fbb3c9fc..ba0da5df0 100644 --- a/app/assets/javascripts/folio/input/character_counter.js +++ b/app/assets/javascripts/folio/input/character_counter.js @@ -36,12 +36,14 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window if (this.maxValue) { wrap.classList.toggle('text-danger', length > this.maxValue) } + console.log(current) current.innerText = length } addElementToFormGroup () { const formGroup = this.element.closest('.form-group') + const input = formGroup.querySelector('input, textarea') if (!formGroup) { throw new Error('Missing parent form-group element.') @@ -84,6 +86,8 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window } } + this.bindChangeEventListener(input) + wrap.appendChild(document.createTextNode(` ${Folio.i18n(window.Folio.Input.CharacterCounter.i18n, 'shortForCharacter')}`)) this.element.insertAdjacentElement('afterend', wrap) @@ -97,4 +101,10 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window if (!wrap.parentNode) return wrap.parentNode.removeChild(wrap) } + + bindChangeEventListener (input) { + if (input) { + input.addEventListener('change', this.onInput.bind(this)) + } + } })