diff options
Diffstat (limited to 'app/src/web/ts/auto_resize_textarea.ts')
-rw-r--r-- | app/src/web/ts/auto_resize_textarea.ts | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/app/src/web/ts/auto_resize_textarea.ts b/app/src/web/ts/auto_resize_textarea.ts new file mode 100644 index 00000000..e170d14e --- /dev/null +++ b/app/src/web/ts/auto_resize_textarea.ts @@ -0,0 +1,31 @@ +// Credits to https://codepen.io/tomhodgins/pen/KgazaE +(function () { + const textareas = <NodeListOf<HTMLTextAreaElement>>document.querySelectorAll('textarea:not(.frostAutoExpand)'); + + const dataAttribute = 'data-frost-minHeight'; + + const _frostAutoExpand = (el: HTMLElement) => { + if (!el.hasAttribute(dataAttribute)) { + el.setAttribute(dataAttribute, el.offsetHeight.toString()); + } + // If no height is defined, have min bound to current height; + // otherwise we will allow for height decreases in case user deletes text + const minHeight = parseInt(el.getAttribute(dataAttribute) ?? '0'); + el.style.height = 'inherit'; + el.style.height = `${Math.max(el.scrollHeight, minHeight)}px`; + }; + function _frostExpandAll() { + textareas.forEach(_frostAutoExpand); + } + textareas.forEach(el => { + el.classList.add('frostAutoExpand') + const __frostAutoExpand = () => { + _frostAutoExpand(el) + }; + el.addEventListener('paste', __frostAutoExpand) + el.addEventListener('input', __frostAutoExpand) + el.addEventListener('keyup', __frostAutoExpand) + }); + window.addEventListener('load', _frostExpandAll) + window.addEventListener('resize', _frostExpandAll) +}).call(undefined); |