end of day

docs/fontScale.mjs.html

@@ -29,35 +29,40 @@
             <pre class="prettyprint source linenums"><code>/** @module fontScale */
 
 /**
- * Scale an element's font size to fit inside the given width.
- * @param {HTMLElement} element 
- * @param {Int} width defaults to `window.innerWidth`
- * @returns {Promise&lt;Int>} resulting font size in px
+ * Scale an element's font size so that it doesn't overflow the viewport.
+ * Note that some css may be required for this to work,
+ * for example setting `display: flex;` on the parent element,
+ * and this function relies on the element being visible.
+ * If you want to keep your element invisible until font scaling finishes,
+ * use `opacity: 0;`
+ * @param {HTMLElement} element the element to be scaled
+ * @param {Number} maxHeight maximum font size (which is equivalent to pixel hight)
+ * @returns {Number} the resulting font size
  */
-export function fontScale(element,width=innerWidth){
+export function fontScale(element,maxHeight=innerHeight){
     return new Promise(function(resolve){
-        let fontSize=0
-        element.style.fontSize=fontSize+'px'
-        width-=element.clientWidth
-        function down(){
-            if(element.clientWidth>=width){
-                fontSize-=1
-                element.style.fontSize=fontSize+'px'
-                requestAnimationFrame(down)
+        function scaleup(){
+            let size=parseInt(getComputedStyle(element).fontSize)
+            let bounds=element.getBoundingClientRect()
+            if(bounds.right&lt;innerWidth &amp;&amp; size&lt;maxHeight){
+                element.style.fontSize=size+1+'px'
+                setTimeout(scaleup)
             }else{
-                resolve(fontSize)
+                setTimeout(scaledown)
+            }
+            
+        }
+        function scaledown(){
+            let size=parseInt(getComputedStyle(element).fontSize)
+            let bounds=element.getBoundingClientRect()
+            if(bounds.right>innerWidth || size>maxHeight){
+                element.style.fontSize=size-1+'px'
+                setTimeout(scaledown)
+            }else{
+                resolve(size)
             }
         }
-        function up(){
-            if(element.clientWidth&lt;width){
-                fontSize+=10
-                element.style.fontSize=fontSize+'px'
-                requestAnimationFrame(up)
-            }else{
-                requestAnimationFrame(down)
-            }
-        }
-        requestAnimationFrame(up)
+        setTimeout(scaleup)
     })
 }
 
@@ -71,13 +76,13 @@ export default fontScale</code></pre>
 </div>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-CSSRandom.html">CSSRandom</a></li><li><a href="module-FileReaderAsync.html">FileReaderAsync</a></li><li><a href="module-FormDataDeep.html">FormDataDeep</a></li><li><a href="module-fontScale.html">fontScale</a></li></ul><h3>Classes</h3><ul><li><a href="module-FileReaderAsync.FileReaderAsync.html">FileReaderAsync</a></li><li><a href="module-FormDataDeep.FormDataDeep.html">FormDataDeep</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-AssetLoader.html">AssetLoader</a></li><li><a href="module-CSSRandom.html">CSSRandom</a></li><li><a href="module-FileReaderAsync.html">FileReaderAsync</a></li><li><a href="module-FormDataDeep.html">FormDataDeep</a></li><li><a href="module-fontScale.html">fontScale</a></li></ul><h3>Classes</h3><ul><li><a href="module-FileReaderAsync.FileReaderAsync.html">FileReaderAsync</a></li><li><a href="module-FormDataDeep.FormDataDeep.html">FormDataDeep</a></li></ul>
 </nav>
 
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 13:47:25 GMT+0000 (Coordinated Universal Time)
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Thu Dec 08 2022 17:50:32 GMT+0000 (Coordinated Universal Time)
 </footer>
 
 <script> prettyPrint(); </script>