/**
+ * On import, sets the global css variable `--random` to `Math.random()` before each draw
+ * @module CSSRandom
+ */
+(function CSSRandom() {
+ document.documentElement.style.setProperty('--random', Math.random())
+ requestAnimationFrame(CSSRandom)
+})()/** @module FileReaderAsync */
+
+/** @class */
+export class FileReaderAsync {
+ /**
+ * @param {String} type The return type (ArrayBuffer, BinaryString, Text, DataURL)
+ * @param {Blob} blob The `Blob` to read
+ * @returns {Promise<ArrayBuffer>} The `Blob` data
+ */
+ static readAs(type,blob){
+ return new Promise((resolve,reject)=>{
+ const fileReader=new FileReader()
+ fileReader.onload=(event)=>resolve(event.target.result)
+ fileReader.onabort=(event)=>reject(event)
+ fileReader.onerror=(event)=>reject(event)
+ fileReader['readAs'+type](blob)
+ })
+ }
+ /**
+ * @param {Blob} blob The `Blob` to read
+ * @returns {Promise<ArrayBuffer>} The `Blob` data
+ */
+ readAsArrayBuffer(blob) {
+ return FileReaderAsync.readAs('ArrayBuffer',blob)
+ }
+ /**
+ * @depreciated see https://developer.mozilla.org/en-US/docs/Web/API/FileReaderSync/readAsBinaryString
+ * @param {Blob} blob The `Blob` to read
+ * @returns {Promise<String>} The `Blob` data
+ */
+ readAsBinaryString(blob) {
+ return FileReaderAsync.readAs('BinaryString',blob)
+ }
+ /**
+ * @param {Blob} blob The `Blob` to read
+ * @returns {Promise<String>} The `Blob` data
+ */
+ readAsText(blob) {
+ return FileReaderAsync.readAs('Text',blob)
+ }
+ /**
+ * @param {Blob} blob The `Blob` to read
+ * @returns {Promise<String>} The `Blob` data
+ */
+ readAsDataURL(blob) {
+ return FileReaderAsync.readAs('DataURL',blob)
+ }
+}/** @module FormDataDeep */
+
+/**
+ * Usage: `Array<HTMLElement>.filter(removeChildren)`
+ *
+ * Removes elements from the array which are children of other elements in the array.
+ */
+export function removeChildren(element,index,array){
+ for(const sibling of array){
+ if(!sibling.isSameNode(element) && sibling.contains(element)){
+ return false
+ }
+ }
+ return true
+}
+/**
+ * Appends a new value onto an existing key inside an object, or adds the key if it does not already exist.
+ * @param {Object} object
+ * @param {String} name
+ * @param {*} value
+ */
+export function append(object,name,value){
+ if(name in object){
+ if(object[name] instanceof Array){
+ object[name].push(value)
+ }else{
+ object[name]=[formDataDeep[name],value]
+ }
+ }else{
+ object[name]=value
+ }
+}
+/**
+ * Get `form` data as an object, including nested forms.
+ * @param {HTMLFormElement} form
+ * @param {Boolean} primitives whether to convert string values to primitives. Defaults `false`.
+ */
+export function getFormDataDeep(form,primitives=false){
+ const formDataDeep={}
+ const formData=new FormData(form)
+ for(const name of formData.keys()){
+ const value=formData.getAll(name)
+ if(value.length==0){
+ continue
+ }
+ if(primitives){
+ for(let i=0;i<value.length;i++){
+ if(!isNaN(+value[i])){
+ value[i]=+value[i]
+ }
+ if(value[i]=='on'){
+ value[i]=true
+ }
+ }
+ }
+ if(value.length==1){
+ formDataDeep[name]=value[0]
+ }else{
+ formDataDeep[name]=value
+ }
+ }
+ for(const child of [...form.querySelectorAll('form')].filter(removeChildren)){
+ const value=getFormDataDeep(child,primitives)
+ if(Object.keys(value)==0){
+ continue
+ }
+ const name=child.name
+ append(formDataDeep,name,value)
+ }
+ return formDataDeep
+}
+/**
+ * Convenience class to have a similar interface to FormData
+ */
+export class FormDataDeep extends FormData {
+ /**
+ * Get `form` data as an object, including nested forms.
+ * @param {HTMLFormElement | Object} form the root form element, or a JSON Object containing form data.
+ * @param {Boolean} primitives whether to convert string values to primitives. Defaults `false`.
+ */
+ constructor(form,primitives=false){
+ if(form instanceof HTMLFormElement){
+ Object.assign(this,getFormDataDeep(form,primitives))
+ }else{
+ Object.assign(this,form)
+ }
+ }
+ append(name,value,filename=undefined){
+ if(filename!==undefined){
+ value=new File([value],filename)
+ }
+ append(this,name,value)
+ }
+ delete(name){
+ delete this[name]
+ }
+ entries(){
+ return Object.entries(this).filter((value)=>!value instanceof Function)
+ }
+ get(name){
+ if(this[name] instanceof Array){
+ return this[name].at(-1)
+ }else{
+ return this[name]
+ }
+ }
+ getAll(name){
+ if(this[name] instanceof Array){
+ return this[name]
+ }else{
+ return [this[name]]
+ }
+ }
+ has(name){
+ return name in this
+ }
+ keys(){
+ return this.entries().keys()
+ }
+ set(name,value,filename=undefined){
+ if(filename!==undefined){
+ value=new File([value],filename)
+ }
+ this[name]=value
+ }
+ values(){
+ return this.entries().values()
+ }
+ /**
+ * Applies the values in this object to the target form.
+ * @param {HTMLFormElement} form
+ */
+ apply(form){
+ for(const element of form.elements){
+ const name=element.name
+ if(! name in this){
+ continue
+ }
+ let value
+ if(this[name] instanceof Array){
+ value=this[name].shift()
+ }else{
+ value=this[name]
+ delete this[name]
+ }
+ switch(element.type){
+ case 'radio':
+ case 'checkbox':{
+ element.checked=true
+ break
+ }
+ default:{
+ element.value=value
+ break
+ }
+ }
+ }
+ for(const child of [...form.querySelectorAll('form')].filter(removeChildren)){
+ const name=child.name
+ if(! name in this){
+ continue
+ }
+ new FormDataDeep(this[name]).apply(form)
+ }
+ }
+}This is a collection of common code I use when writing javascript. +This code is made publicly available under the license terms of the AGPL.
On import, sets the global css variable --random to Math.random() before each draw
| Name | + + +Type | + + + + + +Description | +
|---|---|---|
blob |
+
+
+ + + +Blob + + + + | + + + + + +The |
+
The Blob data
| Name | + + +Type | + + + + + +Description | +
|---|---|---|
blob |
+
+
+ + + +Blob + + + + | + + + + + +The |
+
The Blob data
| Name | + + +Type | + + + + + +Description | +
|---|---|---|
blob |
+
+
+ + + +Blob + + + + | + + + + + +The |
+
The Blob data
| Name | + + +Type | + + + + + +Description | +
|---|---|---|
blob |
+
+
+ + + +Blob + + + + | + + + + + +The |
+
The Blob data
| Name | + + +Type | + + + + + +Description | +
|---|---|---|
type |
+
+
+ + + +String + + + + | + + + + + +The return type (ArrayBuffer, BinaryString, Text, DataURL) |
+
blob |
+
+
+ + + +Blob + + + + | + + + + + +The |
+
The Blob data
Convenience class to have a similar interface to FormData
Get form data as an object, including nested forms.
| Name | + + +Type | + + + + +Default | + + +Description | +
|---|---|---|---|
form |
+
+
+ + + +HTMLFormElement +| + +Object + + + + | + + + + ++ + | + + +the root form element, or a JSON Object containing form data. |
+
primitives |
+
+
+ + + +Boolean + + + + | + + + + ++ + false + + | + + +whether to convert string values to primitives. Defaults |
+
Applies the values in this object to the target form.
+| Name | + + +Type | + + + + + +Description | +
|---|---|---|
form |
+
+
+ + + +HTMLFormElement + + + + | + + + + + ++ |
Appends a new value onto an existing key inside an object, or adds the key if it does not already exist.
+| Name | + + +Type | + + + + + +Description | +
|---|---|---|
object |
+
+
+ + + +Object + + + + | + + + + + ++ |
name |
+
+
+ + + +String + + + + | + + + + + ++ |
value |
+
+
+ + + +* + + + + | + + + + + ++ |
Get form data as an object, including nested forms.
| Name | + + +Type | + + + + + +Description | +
|---|---|---|
form |
+
+
+ + + +HTMLFormElement + + + + | + + + + + ++ |
primitives |
+
+
+ + + +Boolean + + + + | + + + + + +whether to convert string values to primitives. Defaults |
+
Usage: Array<HTMLElement>.filter(removeChildren)
Removes elements from the array which are children of other elements in the array.
+