end of day

2022-12-08 17:50:37 +00:00
parent 5a26216726
commit 3ed59e05b4
15 changed files with 555 additions and 79 deletions
@@ -0,0 +1,60 @@
+/** @module AssetLoader */
+
+/**
+ * Loads a data url and returns the resulting element, font face, or when the type is unrecognized, a fetch response.
+ * @param {String} dataURL
+ * @param {String} id
+ */
+export async function loadAsset(dataURL,id=undefined){
+    const type=dataURL.split(';')[0].split(':')[1]
+    switch(type){
+        case 'text/css':{
+            const style=new HTMLStyleElement()
+            style.id=id
+            style.innerHTML=atob(dataURL.split(',')[1])
+            return style
+        }
+        case 'text/html':{
+            const element=new HTMLElement()
+            element.id=id
+            element.outerHTML=atob(dataURL.split(',')[1])
+            return element
+        }
+        case 'text/javascript':{
+            const script=new HTMLScriptElement()
+            script.id=id
+            script.innerHTML=atob(dataURL.split(',')[1])
+            return script
+        }
+        default:{
+            const mtype=type.split('/')[0]
+            switch(mtype){
+                case 'audio':{
+                    const audio=new HTMLAudioElement()
+                    audio.id=id
+                    audio.src=dataURL
+                    return audio
+                }
+                case 'font':{
+                    return await new FontFace(id,dataURL).load()
+                }
+                case 'image':{
+                    const img=new HTMLImageElement()
+                    img.id=id
+                    img.src=dataURL
+                    return img
+                }
+                case 'video':{
+                    const video=new HTMLVideoElement()
+                    video.id=id
+                    video.src=dataURL
+                }
+                default:{
+                    return await fetch(dataURL)
+                }
+            }
+        }
+    }
+}
+
+export default loadAsset
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: AssetLoader.mjs</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: AssetLoader.mjs</h1>
+
+    
+
+
+
+    
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/** @module AssetLoader */
+
+/**
+ * Loads a data url and returns the resulting element, font face, or when the type is unrecognized, a fetch response.
+ * @param {String} dataURL
+ * @param {String} id
+ */
+export async function loadAsset(dataURL,id=undefined){
+    const type=dataURL.split(';')[0].split(':')[1]
+    switch(type){
+        case 'text/css':{
+            const style=new HTMLStyleElement()
+            style.id=id
+            style.innerHTML=atob(dataURL.split(',')[1])
+            return style
+        }
+        case 'text/html':{
+            const element=new HTMLElement()
+            element.id=id
+            element.outerHTML=atob(dataURL.split(',')[1])
+            return element
+        }
+        case 'text/javascript':{
+            const script=new HTMLScriptElement()
+            script.id=id
+            script.innerHTML=atob(dataURL.split(',')[1])
+            return script
+        }
+        default:{
+            const mtype=type.split('/')[0]
+            switch(mtype){
+                case 'audio':{
+                    const audio=new HTMLAudioElement()
+                    audio.id=id
+                    audio.src=dataURL
+                    return audio
+                }
+                case 'font':{
+                    return await new FontFace(id,dataURL).load()
+                }
+                case 'image':{
+                    const img=new HTMLImageElement()
+                    img.id=id
+                    img.src=dataURL
+                    return img
+                }
+                case 'video':{
+                    const video=new HTMLVideoElement()
+                    video.id=id
+                    video.src=dataURL
+                }
+                default:{
+                    return await fetch(dataURL)
+                }
+            }
+        }
+    }
+}
+
+export default loadAsset</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <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 Thu Dec 08 2022 17:50:32 GMT+0000 (Coordinated Universal Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>
@@ -43,13 +43,13 @@
 </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>
@@ -85,13 +85,13 @@ export default FileReaderAsync</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>
@@ -204,13 +204,13 @@ export default FormDataDeep</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>
@@ -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>
@@ -56,13 +56,13 @@ This code is made publicly available under the license terms of the <a href="LIC
 </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>
@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Module: AssetLoader</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Module: AssetLoader</h1>
+
+    
+
+
+
+
+<section>
+
+<header>
+    
+</header>
+
+<article>
+    <div class="container-overview">
+    
+        
+
+        
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="AssetLoader.mjs.html">AssetLoader.mjs</a>, <a href="AssetLoader.mjs.html#line1">line 1</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+        
+    
+    </div>
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+        <h3 class="subsection-title">Methods</h3>
+
+        
+            
+
+    
+
+    
+    <h4 class="name" id=".loadAsset"><span class="type-signature">(static) </span>loadAsset<span class="signature">(dataURL, id)</span><span class="type-signature"></span></h4>
+    
+
+    
+
+
+
+<div class="description">
+    <p>Loads a data url and returns the resulting element, font face, or when the type is unrecognized, a fetch response.</p>
+</div>
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+    
+
+<table class="params">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>dataURL</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>id</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+
+
+
+
+
+<dl class="details">
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="AssetLoader.mjs.html">AssetLoader.mjs</a>, <a href="AssetLoader.mjs.html#line8">line 8</a>
+    </li></ul></dd>
+    
+
+    
+
+    
+
+    
+</dl>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+        
+    
+
+    
+
+    
+</article>
+
+</section>
+
+
+
+
+</div>
+
+<nav>
+    <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 Thu Dec 08 2022 17:50:32 GMT+0000 (Coordinated Universal Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>
@@ -114,13 +114,13 @@
 </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>
@@ -954,13 +954,13 @@
 </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>
@@ -119,13 +119,13 @@
 </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>
@@ -388,13 +388,13 @@
 </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>
@@ -555,13 +555,13 @@
 </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>
@@ -106,7 +106,7 @@
    

    
-    <h4 class="name" id=".fontScale"><span class="type-signature">(static) </span>fontScale<span class="signature">(element, width)</span><span class="type-signature"> &rarr; {Promise.&lt;Int>}</span></h4>
+    <h4 class="name" id=".fontScale"><span class="type-signature">(static) </span>fontScale<span class="signature">(element, maxHeight)</span><span class="type-signature"> &rarr; {Number}</span></h4>
    

    
@@ -114,7 +114,12 @@


 <div class="description">
-    <p>Scale an element's font size to fit inside the given width.</p>
+    <p>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 <code>display: flex;</code> 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 <code>opacity: 0;</code></p>
 </div>


@@ -166,20 +171,20 @@

            

-            <td class="description last"></td>
+            <td class="description last"><p>the element to be scaled</p></td>
        </tr>

    

        <tr>
            
-                <td class="name"><code>width</code></td>
+                <td class="name"><code>maxHeight</code></td>
            

            <td class="type">
            
                
-<span class="param-type">Int</span>
+<span class="param-type">Number</span>


            
@@ -189,7 +194,7 @@

            

-            <td class="description last"><p>defaults to <code>window.innerWidth</code></p></td>
+            <td class="description last"><p>maximum font size (which is equivalent to pixel hight)</p></td>
        </tr>

    
@@ -230,7 +235,7 @@
    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="fontScale.mjs.html">fontScale.mjs</a>, <a href="fontScale.mjs.html#line9">line 9</a>
+        <a href="fontScale.mjs.html">fontScale.mjs</a>, <a href="fontScale.mjs.html#line14">line 14</a>
    </li></ul></dd>
    

@@ -259,7 +264,7 @@

        
 <div class="param-desc">
-    <p>resulting font size in px</p>
+    <p>the resulting font size</p>
 </div>


@@ -270,7 +275,7 @@
    </dt>
    <dd>
        
-<span class="param-type">Promise.&lt;Int></span>
+<span class="param-type">Number</span>


    </dd>
@@ -298,13 +303,13 @@
 </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>
@@ -1,35 +1,40 @@
 /** @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<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<innerWidth && size<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<width){
-                fontSize+=10
-                element.style.fontSize=fontSize+'px'
-                requestAnimationFrame(up)
-            }else{
-                requestAnimationFrame(down)
-            }
-        }
-        requestAnimationFrame(up)
+        setTimeout(scaleup)
    })
 }