add comments, move prestyle logic upward and add make conditional

rikschennink · Aug 24, 2018 · 60c049d · 60c049d
2 parents daa2246 + 106b595
commit 60c049d
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 59 deletions.
diff --git a/dist/fitty.min.js b/dist/fitty.min.js
diff --git a/dist/fitty.module.js b/dist/fitty.module.js
@@ -1,6 +1,6 @@
 /*
  * fitty v2.2.5 - Snugly resizes text to fit its parent container
- * Copyright (c) 2017 Rik Schennink <hello@rikschennink.nl> (http://rikschennink.nl/)
+ * Copyright (c) 2018 Rik Schennink <hello@rikschennink.nl> (http://rikschennink.nl/)
  */
 'use strict';
 
@@ -57,7 +57,7 @@ exports.default = function (w) {
   // redraws fitties so they nicely fit their parent container
   var redraw = function redraw(fitties) {
 
-    // getting info from the DOM should not trigger a reflow, let's gather as much intel as possible before triggering a reflow
+    // getting info from the DOM at this point should not trigger a reflow, let's gather as much intel as possible before triggering a reflow
 
     // check if styles of all fitties have been computed
     fitties.filter(function (f) {
@@ -69,14 +69,24 @@ exports.default = function (w) {
     // restyle elements that require pre-styling, this triggers a reflow, please try to prevent by adding CSS rules (see docs)
     fitties.filter(shouldPreStyle).forEach(applyStyle);
 
-    // we now determine which fitties should be redrawn, and if so, we calculate final styles for these fitties
-    fitties.filter(shouldRedraw).forEach(calculateStyles);
+    // we now determine which fitties should be redrawn
+    var fittiesToRedraw = fitties.filter(shouldRedraw);
+
+    // we calculate final styles for these fitties
+    fittiesToRedraw.forEach(calculateStyles);
 
     // now we apply the calculated styles from our previous loop
-    fitties.forEach(applyStyles);
+    fittiesToRedraw.forEach(function (f) {
+      applyStyle(f);
+      markAsClean(f);
+    });
 
     // now we dispatch events for all restyled fitties
-    fitties.forEach(dispatchFitEvent);
+    fittiesToRedraw.forEach(dispatchFitEvent);
+  };
+
+  var markAsClean = function markAsClean(f) {
+    return f.dirty = DrawState.IDLE;
   };
 
   var calculateStyles = function calculateStyles(f) {
@@ -121,6 +131,11 @@ exports.default = function (w) {
 
     var preStyle = false;
 
+    // if we already tested for prestyling we don't have to do it again
+    if (f.preStyleTestCompleted) {
+      return false;
+    }
+
     // should have an inline style, if not, apply
     if (!/inline-/.test(f.display)) {
       preStyle = true;
@@ -133,13 +148,10 @@ exports.default = function (w) {
       f.whiteSpace = 'nowrap';
     }
 
-    return preStyle;
-  };
+    // we don't have to do this twice
+    f.preStyleTestCompleted = true;
 
-  // apply styles to array of fitties and automatically mark as non dirty
-  var applyStyles = function applyStyles(f) {
-    applyStyle(f);
-    f.dirty = DrawState.IDLE;
+    return preStyle;
   };
 
   // apply styles to single fitty

diff --git a/src/fitty.js b/src/fitty.js
@@ -41,7 +41,7 @@ export default ((w) => {
   // redraws fitties so they nicely fit their parent container
   const redraw = fitties => {
 
-    // getting info from the DOM should not trigger a reflow, let's gather as much intel as possible before triggering a reflow
+    // getting info from the DOM at this point should not trigger a reflow, let's gather as much intel as possible before triggering a reflow
 
     // check if styles of all fitties have been computed
     fitties
@@ -53,18 +53,24 @@ export default ((w) => {
       .filter(shouldPreStyle)
       .forEach(applyStyle);
 
-    // we now determine which fitties should be redrawn, and if so, we calculate final styles for these fitties
-    fitties
-      .filter(shouldRedraw)
-      .forEach(calculateStyles);
+    // we now determine which fitties should be redrawn
+    const fittiesToRedraw = fitties.filter(shouldRedraw);
+
+    // we calculate final styles for these fitties
+    fittiesToRedraw.forEach(calculateStyles);
 
     // now we apply the calculated styles from our previous loop
-    fitties.forEach(applyStyles);
+    fittiesToRedraw.forEach(f => {
+      applyStyle(f);
+      markAsClean(f);
+    });
 
     // now we dispatch events for all restyled fitties
-    fitties.forEach(dispatchFitEvent);
+    fittiesToRedraw.forEach(dispatchFitEvent);
   };
 
+  const markAsClean = f => f.dirty = DrawState.IDLE;
+
   const calculateStyles = f => {
 
     // get available width from parent node
@@ -93,9 +99,7 @@ export default ((w) => {
   };
 
   // should always redraw if is not dirty layout, if is dirty layout, only redraw if size has changed
-  const shouldRedraw = f => {
-    return 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);
 
   // every fitty element is tested for invalid styles
   const computeStyle = f => {
@@ -117,6 +121,11 @@ export default ((w) => {
 
     let preStyle = false;
 
+    // if we already tested for prestyling we don't have to do it again
+    if (f.preStyleTestCompleted) {
+      return false;
+    }
+
     // should have an inline style, if not, apply
     if (!/inline-/.test(f.display)) {
       preStyle = true;
@@ -129,14 +138,10 @@ export default ((w) => {
       f.whiteSpace = 'nowrap';
     }
 
-    return preStyle;
-  };
+    // we don't have to do this twice
+    f.preStyleTestCompleted = true;
 
-
-  // apply styles to array of fitties and automatically mark as non dirty
-  const applyStyles = f => {
-    applyStyle(f);
-    f.dirty = DrawState.IDLE;
+    return preStyle;
   };
 
 

diff --git a/test.html b/test.html
@@ -8,51 +8,66 @@
     <title>Fitty Test Page</title>
 
     <style>
-        /* uncomment to test pre-style logic */
-        .fit {
+        .pre-style .fit {
             display:inline-block;
             white-space:nowrap;
         }
+
+        .fixed {
+            border-top:2px solid silver;
+            width:20em;
+        }
+
+        p {
+            margin:0;
+        }
     </style>
 
 </head>
 <body>
 
-<main></main>
+<main>
 
-<script src="dist/fitty.min.js"></script>
-<script>
+    <div class="pre-style fixed">
+        <p class="fit" style="color:red;">Integer</p>
+        <p class="fit" style="color:green;">Lorem ipsum dolor sit.</p>
+        <p class="fit" style="color:blue;">consectetur adipiscing elit.</p>
+        <p class="fit" style="color:purple;">aecenas elementum purus nec felis pellentesque, eget volutpat mauris vestibulum.</p>
+    </div>
 
-var lines = [
-	'Integer',
-    'Lorem ipsum dolor sit amet.',
-    'consectetur adipiscing elit.',
-    'Maecenas elementum purus nec felis pellentesque, eget volutpat mauris vestibulum.'
-];
+    <div class="pre-style">
+        <p class="fit" style="color:red;">Integer</p>
+        <p class="fit" style="color:green;">Lorem ipsum dolor sit.</p>
+        <p class="fit" style="color:blue;">consectetur adipiscing elit.</p>
+        <p class="fit" style="color:purple;">aecenas elementum purus nec felis pellentesque, eget volutpat mauris vestibulum.</p>
+    </div>
 
-var html = '';
-for (i=0;i<25;i++) {
-	lines.forEach(function(line) {
-		html += '<div class="fit" style="color:red;">' + line + '</div>';
-    });
-}
+    <div class="fixed">
+        <p class="fit" style="color:red;">Integer</p>
+        <p class="fit" style="color:green;">Lorem ipsum dolor sit.</p>
+        <p class="fit" style="color:blue;">consectetur adipiscing elit.</p>
+        <p class="fit" style="color:purple;">aecenas elementum purus nec felis pellentesque, eget volutpat mauris vestibulum.</p>
+    </div>    
 
-document.querySelector('main').innerHTML = html;
+    <div>
+        <p class="fit" style="color:red;">Integer</p>
+        <p class="fit" style="color:green;">Lorem ipsum dolor sit.</p>
+        <p class="fit" style="color:blue;">consectetur adipiscing elit.</p>
+        <p class="fit" style="color:purple;">aecenas elementum purus nec felis pellentesque, eget volutpat mauris vestibulum.</p>
+    </div>
+
+
+</main>
+
+<script src="dist/fitty.min.js"></script>
+<script>
 
 var fitties = [];
 
-// is delayed a bit so it's clear when fitty kicks in
+// is delayed a bit so it's clear in performance timeline when fitty kicks in
 setTimeout(function(){
     fitties = fitty('.fit');
-    console.log( fitties );
-
-    setTimeout(function(){
-        fitties.forEach(f => {
-            f.unsubscribe();
-        })
-    }, 3000);
-
-}, 1500);
+}, 1000);
 
 </script>