diff options
author | Allan Wang <me@allanwang.ca> | 2020-05-23 20:49:26 -0700 |
---|---|---|
committer | Allan Wang <me@allanwang.ca> | 2020-05-23 20:49:26 -0700 |
commit | 0a0108e69d0e720634b1f0fdfb946fce7e714fe7 (patch) | |
tree | cca55166d7f70f7c92fa82fb903fea73fa523190 /app/src/web/ts | |
parent | 28c105cb0cc9593930f069584662380a7674c249 (diff) | |
download | frost-0a0108e69d0e720634b1f0fdfb946fce7e714fe7.tar.gz frost-0a0108e69d0e720634b1f0fdfb946fce7e714fe7.tar.bz2 frost-0a0108e69d0e720634b1f0fdfb946fce7e714fe7.zip |
Allow text area to fill with default min height
Diffstat (limited to 'app/src/web/ts')
-rw-r--r-- | app/src/web/ts/auto_resize_textarea.ts | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/app/src/web/ts/auto_resize_textarea.ts b/app/src/web/ts/auto_resize_textarea.ts index f690d4c0..e170d14e 100644 --- a/app/src/web/ts/auto_resize_textarea.ts +++ b/app/src/web/ts/auto_resize_textarea.ts @@ -1,15 +1,24 @@ // Credits to https://codepen.io/tomhodgins/pen/KgazaE (function () { - const textareas = <NodeListOf<HTMLTextAreaElement>>document.querySelectorAll('textarea.frostAutoExpand'); + const textareas = <NodeListOf<HTMLTextAreaElement>>document.querySelectorAll('textarea:not(.frostAutoExpand)'); + + const dataAttribute = 'data-frost-minHeight'; const _frostAutoExpand = (el: HTMLElement) => { - el.style.height = 'inherit' - el.style.height = `${el.scrollHeight}px` + 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) }; |