Sha256: 30d504466fd8711ebb17c2e2809bde90f3b2c08bb8027d213e9be0fd2dbd7653
Contents?: true
Size: 1.27 KB
Versions: 20
Compression:
Stored size: 1.27 KB
Contents
/* global IntersectionObserver */
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
static get targets () {
return ['textarea', 'count']
}
connect () {
onVisible(this.textareaTarget, () => { this.update() })
}
update () {
this.resize()
this.updateCount()
}
resize () {
this.textareaTarget.style.height = 'auto'
this.textareaTarget.setAttribute('style', 'height:' + (this.textareaTarget.scrollHeight) + 'px;overflow-y:hidden;')
}
updateCount () {
if (this.textareaTarget.getAttribute('maxlength')) {
this.updateCountLength()
}
}
updateCountLength () {
const currentLength = this.textareaTarget.value.length
const maximumLength = this.textareaTarget.getAttribute('maxlength')
this.countTarget.textContent = `${currentLength}/${maximumLength}`
}
}
// Custom callback event that triggers when an element becomes visible.
// Solves the bug where textarea fields are not properly sized when they (or their parent) or hidden.
function onVisible (element, callback) {
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
callback(element)
observer.disconnect()
}
})
}).observe(element)
}
Version data entries
20 entries across 20 versions & 2 rubygems