diff --git a/AssetLoader.mjs b/AssetLoader.mjs new file mode 100644 index 0000000..ccb7dae --- /dev/null +++ b/AssetLoader.mjs @@ -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 \ No newline at end of file diff --git a/docs/AssetLoader.mjs.html b/docs/AssetLoader.mjs.html new file mode 100644 index 0000000..bfb7aa7 --- /dev/null +++ b/docs/AssetLoader.mjs.html @@ -0,0 +1,110 @@ + + + + + JSDoc: Source: AssetLoader.mjs + + + + + + + + + + +
+ +

Source: AssetLoader.mjs

+ + + + + + +
+
+ 
/** @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
+
+
+ + + + +
+ + + +
+ + + + + + + diff --git a/docs/CSSRandom.mjs.html b/docs/CSSRandom.mjs.html index f35fa86..53ed41e 100644 --- a/docs/CSSRandom.mjs.html +++ b/docs/CSSRandom.mjs.html @@ -43,13 +43,13 @@
diff --git a/docs/FileReaderAsync.mjs.html b/docs/FileReaderAsync.mjs.html index 8eff2f4..e697cf8 100644 --- a/docs/FileReaderAsync.mjs.html +++ b/docs/FileReaderAsync.mjs.html @@ -85,13 +85,13 @@ export default FileReaderAsync
diff --git a/docs/FormDataDeep.mjs.html b/docs/FormDataDeep.mjs.html index c7aaa63..f90969b 100644 --- a/docs/FormDataDeep.mjs.html +++ b/docs/FormDataDeep.mjs.html @@ -204,13 +204,13 @@ export default FormDataDeep
diff --git a/docs/fontScale.mjs.html b/docs/fontScale.mjs.html index 7e16485..d1d668e 100644 --- a/docs/fontScale.mjs.html +++ b/docs/fontScale.mjs.html @@ -29,35 +29,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)
     })
 }
 
@@ -71,13 +76,13 @@ export default fontScale

diff --git a/docs/index.html b/docs/index.html index 7acfdb4..11c45aa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -56,13 +56,13 @@ This code is made publicly available under the license terms of the Home

Modules

Classes

+

Home

Modules

Classes


diff --git a/docs/module-AssetLoader.html b/docs/module-AssetLoader.html new file mode 100644 index 0000000..08de5d7 --- /dev/null +++ b/docs/module-AssetLoader.html @@ -0,0 +1,291 @@ + + + + + JSDoc: Module: AssetLoader + + + + + + + + + + +
+ +

Module: AssetLoader

+ + + + + + +
+ +
+ +
+ +
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + +

Methods

+ + + + + + + +

(static) loadAsset(dataURL, id)

+ + + + + + +
+

Loads a data url and returns the resulting element, font face, or when the type is unrecognized, a fetch response.

+
+ + + + + + + + + +
Parameters:
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
dataURL + + +String + + + +
id + + +String + + + +
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Source:
+
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/module-CSSRandom.html b/docs/module-CSSRandom.html index 6a88543..8906e7e 100644 --- a/docs/module-CSSRandom.html +++ b/docs/module-CSSRandom.html @@ -114,13 +114,13 @@
diff --git a/docs/module-FileReaderAsync.FileReaderAsync.html b/docs/module-FileReaderAsync.FileReaderAsync.html index 1fb6a6d..363b7f0 100644 --- a/docs/module-FileReaderAsync.FileReaderAsync.html +++ b/docs/module-FileReaderAsync.FileReaderAsync.html @@ -954,13 +954,13 @@
diff --git a/docs/module-FileReaderAsync.html b/docs/module-FileReaderAsync.html index 6ce15b7..859e4d9 100644 --- a/docs/module-FileReaderAsync.html +++ b/docs/module-FileReaderAsync.html @@ -119,13 +119,13 @@
diff --git a/docs/module-FormDataDeep.FormDataDeep.html b/docs/module-FormDataDeep.FormDataDeep.html index d0883f2..3e55532 100644 --- a/docs/module-FormDataDeep.FormDataDeep.html +++ b/docs/module-FormDataDeep.FormDataDeep.html @@ -388,13 +388,13 @@
diff --git a/docs/module-FormDataDeep.html b/docs/module-FormDataDeep.html index e29df98..d60c018 100644 --- a/docs/module-FormDataDeep.html +++ b/docs/module-FormDataDeep.html @@ -555,13 +555,13 @@
diff --git a/docs/module-fontScale.html b/docs/module-fontScale.html index a3266fd..6af6a97 100644 --- a/docs/module-fontScale.html +++ b/docs/module-fontScale.html @@ -106,7 +106,7 @@ -

(static) fontScale(element, width) → {Promise.<Int>}

+

(static) fontScale(element, maxHeight) → {Number}

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

Scale an element's font size to fit inside the given width.

+

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;

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

the element to be scaled

- width + maxHeight -Int +Number @@ -189,7 +194,7 @@ -

defaults to window.innerWidth

+

maximum font size (which is equivalent to pixel hight)

@@ -230,7 +235,7 @@
Source:
@@ -259,7 +264,7 @@
-

resulting font size in px

+

the resulting font size

@@ -270,7 +275,7 @@
-Promise.<Int> +Number
@@ -298,13 +303,13 @@
diff --git a/fontScale.mjs b/fontScale.mjs index 1aa3f60..305d0e8 100644 --- a/fontScale.mjs +++ b/fontScale.mjs @@ -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} 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.rightinnerWidth || size>maxHeight){ + element.style.fontSize=size-1+'px' + setTimeout(scaledown) + }else{ + resolve(size) } } - function up(){ - if(element.clientWidth