From 0a0108e69d0e720634b1f0fdfb946fce7e714fe7 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Sat, 23 May 2020 20:49:26 -0700 Subject: Allow text area to fill with default min height --- app/src/web/ts/auto_resize_textarea.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'app/src/web/ts/auto_resize_textarea.ts') 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 = >document.querySelectorAll('textarea.frostAutoExpand'); + const textareas = >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) }; -- cgit v1.2.3