diff options
author | Allan Wang <me@allanwang.ca> | 2020-05-23 21:03:21 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-05-23 21:03:21 -0700 |
commit | ffce9e645572eefdcd837921214a2be026514b43 (patch) | |
tree | cca55166d7f70f7c92fa82fb903fea73fa523190 /app/src/web/ts | |
parent | 7c8e02d385d418ebae1f8f718b72c4170a1bc819 (diff) | |
parent | 0a0108e69d0e720634b1f0fdfb946fce7e714fe7 (diff) | |
download | frost-ffce9e645572eefdcd837921214a2be026514b43.tar.gz frost-ffce9e645572eefdcd837921214a2be026514b43.tar.bz2 frost-ffce9e645572eefdcd837921214a2be026514b43.zip |
Merge pull request #1682 from AllanWang/auto-resize-textarea
Auto resize textarea
Diffstat (limited to 'app/src/web/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); |