Resize text as user is typing

photown · Dec 26, 2023 · 09752f4 · 09752f4
1 parent 6facdfa
commit 09752f4
Showing 1 changed file with 16 additions and 1 deletion.
diff --git a/src/View.ts b/src/View.ts
@@ -173,7 +173,7 @@ export class View {
           "beforeend",
           `
           <div class="text draggable focused" tabindex="0">
-            <input type="text" class="text" value="" />
+            <input type="text" class="text" value="" size="20" />
             <div class="text-options focused">
               <div class="img-container drag-handle">
                 <img src="img/icon_drag.png" draggable="false" />
@@ -200,6 +200,11 @@ export class View {
         const newDraggable = draggables[draggables.length - 1] as HTMLElement;
         that.setupDraggable(newDraggable, draggables.length);
 
+        (
+          newDraggable.querySelector("input[type=text].text") as HTMLElement
+        ).addEventListener("input", function (event: Event) {
+          that.handleTextInputChange(event);
+        });
         (
           newDraggable.querySelector(
             "input[type=number].fontSize"
@@ -584,6 +589,16 @@ export class View {
     return [x, y];
   }
 
+  private handleTextInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const inputValue = input.value;
+    if (inputValue.length * 1.25 > input.size) {
+      input.size = Math.max(inputValue.length * 1.25, 20);
+    } else if (inputValue.length * 0.75 < input.size) {
+      input.size = Math.max(inputValue.length * 1.25, 20);
+    }
+  }
+
   private handleFontColorInputChange(event: Event, newDraggable: HTMLElement) {
     const inputValue = (event.target as HTMLInputElement).value;
     if (inputValue) {