Resize textarea if screen height is small or changes

jessepav · Jun 5, 2024 · d2f38ef · d2f38ef
1 parent 3305eb2
commit d2f38ef
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/css/guided-typing.css b/css/guided-typing.css
@@ -245,6 +245,11 @@ display-keyboard {
   margin-bottom: 1em;
 }
 
+.input-holder {
+  margin: 0;
+  padding: 0;
+}
+
 .settings-icons-holder {
   position: fixed;
   right: 2px;

diff --git a/js/guided-typing.mjs b/js/guided-typing.mjs
@@ -277,6 +277,15 @@ function checkBrowserFeatures() {
     }
 }
 
+function sizeTextarea(sectionEl, textarea, keyboard) {
+    const ELEMENT_SPACING_HEIGHT = 25,  // height of padding and borders around elements
+          TEXTAREA_MIN_HEIGHT = 50;     // empirically, one comfortable line of text
+    const viewportHeight = document.documentElement.clientHeight;
+    const remainingHeight = viewportHeight - sectionEl.offsetHeight - keyboard.offsetHeight - ELEMENT_SPACING_HEIGHT;
+    const textareaHeight = Math.max(TEXTAREA_MIN_HEIGHT, Math.min(sectionEl.offsetHeight, remainingHeight));
+    textarea.style.height = `${textareaHeight}px`;
+}
+
 async function main() {
     checkBrowserFeatures();
 
@@ -337,7 +346,6 @@ async function main() {
         if (selected) {
             if (!nextEl || !nextEl.classList.contains("input-holder")) {
                 const textarea = document.createElement("textarea");
-                textarea.style.height = `${sectionEl.offsetHeight}px`;
                 // Use the first two words of the section text as a placeholder
                 const sectionText = sectionEl.innerText;
                 let breakIdx = sectionText.indexOf(' ');
@@ -363,6 +371,7 @@ async function main() {
                     if (textarea.nextElementSibling != keyboard)
                         textarea.after(keyboard);
                     sectionEl.scrollIntoView(true);
+                    sizeTextarea(sectionEl, textarea, keyboard);
                     processTextInput(textarea, expandedText, successCheck, keyboard);
                 });
                 textarea.addEventListener('input', ev => {
@@ -392,6 +401,13 @@ async function main() {
             }
         }
     });
+    window.addEventListener('resize', () => {
+        if (keyboard.parentElement) {
+            const textarea = keyboard.previousElementSibling;
+            const sectionEl = textarea.parentElement.previousElementSibling;
+            sizeTextarea(sectionEl, textarea, keyboard);
+        }
+    });
 }
 
 window.addEventListener('load', main());