Apply changes rikschennink#69

usestencil · Dec 19, 2022 · 62fa353 · 62fa353
1 parent e251efe
commit 62fa353
Showing 1 changed file with 22 additions and 7 deletions.
diff --git a/src/fitty.js b/src/fitty.js
@@ -70,29 +70,44 @@ export default ((w) => {
         // get available width from parent node
         f.availableWidth = f.element.parentNode.clientWidth;
 
-        // the space our target element uses
+
+        // get available height from parent node
+        f.availableHeight = f.element.parentNode.clientHeight;
+
+        // the width our target element uses
         f.currentWidth = f.element.scrollWidth;
 
+        // the height our target element uses
+        f.currentHeight = f.element.scrollHeight;
+
         // remember current font size
         f.previousFontSize = f.currentFontSize;
 
         // let's calculate the new font size
         f.currentFontSize = Math.min(
-            Math.max(f.minSize, (f.availableWidth / f.currentWidth) * f.previousFontSize),
+          Math.min(
+            Math.max(
+              f.minSize,
+              (f.availableWidth / f.currentWidth) * f.previousFontSize
+            ),
+            f.maxSize
+          ),
+          Math.min(
+            Math.max(
+              f.minSize,
+              (f.availableHeight / f.currentHeight) * f.previousFontSize
+            ),
             f.maxSize
+          )
         );
 
         // if allows wrapping, only wrap when at minimum font size (otherwise would break container)
         f.whiteSpace = f.multiLine && f.currentFontSize === f.minSize ? 'normal' : 'nowrap';
     };
 
     // should always redraw if is not dirty layout, if is dirty layout, only redraw if size has changed
-    const shouldRedraw = (f) =>
-        f.dirty !== DrawState.DIRTY_LAYOUT ||
-        (f.dirty === DrawState.DIRTY_LAYOUT &&
-            f.element.parentNode.clientWidth !== f.availableWidth);
+    const shouldRedraw = f => f.dirty !== DrawState.DIRTY_LAYOUT || (f.dirty === DrawState.DIRTY_LAYOUT && (f.element.parentNode.clientWidth !== f.availableWidth || f.element.parentNode.clientHeight !== f.availableHeight));    // every fitty element is tested for invalid styles
 
-    // every fitty element is tested for invalid styles
     const computeStyle = (f) => {
         // get style properties
         const style = w.getComputedStyle(f.element, null);