Content inside minjs
(The raw file follows this syntax highlighted file.)
"use strict";
import * as R from "ramda";import anime from "animejs/lib/anime.es.js";import {create} from "free-style"
const l=console.log;const neon=R.allPass([R.isNotNil,R.complement(R.isEmpty)]);const eon=R.anyPass([R.isNil,R.isEmpty])
/* calling store returns an object like: {
get state(), // Returns the current state object - this is a **getter**
mod(o), // Modifies the state object (where cs is a clone of s) to be the result of: post(R.mergeRight(s,pre(o,cs)),cs)
any(h) // Appends the niladic func (h) to the handlers (hs), which are each called any time s and s' are different after s.mod is called
on(l,h) // Appends the niladic func (h) to the handlers (ls) - h is called if the lens' (l) values in s and s' are different after s.mod is called
} */
const store=(o={},pre=R.identity,post=R.identity,...ihs)=>{let s=o;let hs=ihs;let ls=[]
return {get state(){return s},mod:(o)=>{const cs=R.clone(s);const ns=post(R.mergeRight(s,pre(o,cs)),cs)
if(R.complement(R.equals)(ns,s)){s=ns;R.map(R.call,hs);R.map((l)=>{l(ns,cs)},ls)}return {onceAfter:(fn)=>eon(fn) ? ()=>{} : fn(s)}
},any:(h)=>{hs=R.append(h,hs)},on:(l,h)=>{ls=R.append(R.cond([[R.compose(R.not,R.apply(R.equals),R.map(R.view(l)),R.pair),R.thunkify(h)()]]),ls)}}}
const d=document;const dce=(e)=>d.createElement(e);const dctn=(e)=>d.createTextNode(e)
const dhac=(c)=>d.head.appendChild(c);const dbac=(c)=>d.body.appendChild(c);
const lcc="lcc"+crypto.randomUUID() // lcc is used as the internal key for tracking lifecycle funcs
const mot=R.tap((e)=>{if(eon(e[lcc].added)&&eon(e[lcc].removed)){return} // TODO - only once... track e seperately
(new MutationObserver((ms,o)=>R.map((m)=>{
if(R.any((o)=>o.contains(e), m.addedNodes)&&neon(e[lcc].added)){e[lcc].added(e)}
if(R.any((o)=>o.contains(e), m.removedNodes)&&neon(e[lcc].removed)){o.disconnect();e[lcc].removed(e)}
})(ms))).observe(window.document,{childList:true,subtree:true})})
const e=(t,a={},...cs)=>{ // Inspired by hscrpt - use 'className' for class and all lowercase for handlers - t is the tag name as a string, a is an object of attribute kvs, cs are children
const el=dce(t);R.mapObjIndexed((v,k)=>(eon(v) ? (delete el[k]) : el[k]=v),R.dissoc("lifecycle",a)); // The attr 'lifecycle' is unique.
el[lcc]={};R.mapObjIndexed((v,k)=>el[lcc][k]=v,a.lifecycle); // The lifecycle methods are: 'added' and 'removed'
R.map((c)=>{if(c){el.appendChild(R.is(String,c) ? dctn(c) : c)}},R.when(R.is(Array),R.unnest,cs));
return mot(el)}
const innere=(t,a,s)=>{const el=e(t,a);el.innerHTML=s;return el} // If you want to create an element where innerHTML is set to 's' - an SVG element is a likely candidate for this
const ge=(id)=>{const r=d.getElementById(id);if(false&&eon(r)){l("Unable to find an element by id:", id, "returning:", r)};return r}
const stopEvent=(e)=>{e.preventDefault();e.stopPropagation()}
const onEFN=(pred)=>(f,stopProp=true)=>(e)=>{if(pred(e)){f(e);if(stopProp){stopEvent(e)}}} // Not an R.when, since params are given at different times
const focusIfVisible=(id)=>{if(neon(ge(id))&&(ge(id).offsetParent!=null)){ ge(id).focus() }}
const addjs=(src)=>{const s=dce("script");s.setAttribute("src", src);s.async=false;dbac(s)}
const addcss=(o)=>{const s=create();const r=s.registerStyle(o);const se=dce("style");se.textContent=s.getStyles();dhac(se);return r}
const callall=R.compose(R.apply(R.compose),R.map(R.tap))
const valueByID=(id)=>ge(id).value;const disableID=(id)=>R.mergeLeft({[`disabled${id}`]:true});const enableID=(id)=>R.mergeLeft({[`disabled${id}`]:false})
const disableable=(s)=>R.when((o)=>s.state[`disabled${o.id}`], R.assoc("disabled",true))
const clearValueByID=(id)=>ge(id).value=""
const debounce=(t)=>{let id=null;return (fn)=>{if(id){clearTimeout(id)}id=setTimeout(fn,t)}}
const wls=window.localStorage;const jp=JSON.parse;const js=JSON.stringify
const onEnter=onEFN(R.whereEq({key:"Enter",keyCode:13}))
const sduMoveDuration=1000
const sduStayDuration=sduMoveDuration*6
const slideDownUp=(t)=>()=>{anime({targets:t,translateY:["-100%",0],duration:sduMoveDuration,easing:"easeInOutQuad",complete:()=>{ // 't' are any targets as defined by animejs
anime({targets:t,top:[0,"-100%"],duration:sduMoveDuration,delay:sduStayDuration,easing:"easeInOutQuad",complete:()=>{anime.remove(t)}})}})}
const fioMoveDuration=1000
const fioStayDuration=fioMoveDuration*2
const fadeInOut=(t)=>()=>{anime({targets:t,opacity:["0%","100%"],duration:fioMoveDuration,easing:"easeInOutQuad",complete:()=>{ // 't' are any targets as defined by animejs
anime({targets:t,opacity:["100%","0%"],duration:fioMoveDuration,delay:fioStayDuration,easing:"easeInOutQuad",complete:()=>{anime.remove(t)}})}})}
const runAfterOneSecondPause=debounce(1000)
addcss({$global:true,
"*,*:before,*:after":{boxSizing:"border-box"}, "*":{margin:0},
html:{lineHeight:1.25}, body:{padding:0,letterSpacing:"0.2px",fontSize:"14pt"},
"a,a:visited,a:hover,a:active":{color:"LinkText"},
},true)
const emptyFavicon=()=>dhac(e("link",{rel:"icon",href:"data:;base64,iVBORw0KGgo="}))
const standardViewport=()=>dhac(e("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}))
const uuid=()=>crypto.randomUUID()
const ensureID=(o)=>R.mergeLeft(o,{id:uuid()})
const mwk=R.mergeWithKey((k,l,r)=>R.cond([
[R.equals("value"), R.always(r)],
[R.equals("checked"), R.always(r)],
[R.equals("lifecycle"), R.always(r)],
[R.T,R.always(l)]]))
const ael=(k,f)=>(e)=>e.addEventListener(k,f)
const rel=(k,f)=>(e)=>e.removeEventListener(k,f)
const lc=R.compose(R.fromPairs, R.zip(["added","removed"]))
const gsFrom=(s,lens)=>[()=>R.view(lens,s.state), (v)=>s.mod(R.set(lens,v,s.state))]
const valueUsing=R.curry((s,lens,o)=>{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path(["target","value"]));
return mwk(o,{value:fg(),lifecycle:lc([ael("input",f),rel("input",f)])})})
const displayUsing=R.curry((s,lens,o)=>{o=ensureID(o);const [fg,_]=gsFrom(s,lens);return mwk(o,{lifecycle:lc([(e)=>e.textContent=fg()])})})
const checkedUsing=R.curry((s,lens,o)=>{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path(["target","checked"]));
return mwk(o,{checked:fg(),lifecycle:lc([ael("change",f),rel("change",f)])})})
const display=R.curry((s,fg,o)=>{o=ensureID(o);s.any(()=>ge(o.id).textContent=fg());return mwk(o,{lifecycle:lc([(e)=>e.textContent=fg()])})})
const direct=(t,l,s,f)=>{const id=uuid();s.on(l,()=>ge(id).replaceChildren(f()));return e(t,{id:id,style:"display:contents"},f())}
const dek=(id)=>`disabled${id}` // Next line is: ...DEA, ...DEL, ...Disable, ...Enable
const deToggle=(id,s)=>[()=>R.lensPath([dek(id)]),()=>R.when((o)=>s.state[dek(o.id)],R.assoc("disabled",true)),()=>s.mod({[dek(id)]:true}),()=>s.mod({[dek(id)]:false})]
Object.assign(globalThis,{
R,anime,
l,neon,eon,
store,
d,dce,dctn,dhac,dbac,
e,innere,
ge,
stopEvent,onEFN,onEnter,
focusIfVisible,
addjs,
addcss,
callall,
valueByID,disableID,enableID,clearValueByID,
disableable,
debounce,runAfterOneSecondPause,
wls,jp,js,
slideDownUp,fadeInOut,
emptyFavicon,standardViewport,
uuid,
ensureID,
ael,rel,
lc,
gsFrom,
valueUsing,displayUsing,display,direct,
dek,deToggle,
})
The raw file follows...
"use strict";
import * as R from "ramda";import anime from "animejs/lib/anime.es.js";import {create} from "free-style"
const l=console.log;const neon=R.allPass([R.isNotNil,R.complement(R.isEmpty)]);const eon=R.anyPass([R.isNil,R.isEmpty])
/* calling store returns an object like: {
get state(), // Returns the current state object - this is a **getter**
mod(o), // Modifies the state object (where cs is a clone of s) to be the result of: post(R.mergeRight(s,pre(o,cs)),cs)
any(h) // Appends the niladic func (h) to the handlers (hs), which are each called any time s and s' are different after s.mod is called
on(l,h) // Appends the niladic func (h) to the handlers (ls) - h is called if the lens' (l) values in s and s' are different after s.mod is called
} */
const store=(o={},pre=R.identity,post=R.identity,...ihs)=>{let s=o;let hs=ihs;let ls=[]
return {get state(){return s},mod:(o)=>{const cs=R.clone(s);const ns=post(R.mergeRight(s,pre(o,cs)),cs)
if(R.complement(R.equals)(ns,s)){s=ns;R.map(R.call,hs);R.map((l)=>{l(ns,cs)},ls)}return {onceAfter:(fn)=>eon(fn) ? ()=>{} : fn(s)}
},any:(h)=>{hs=R.append(h,hs)},on:(l,h)=>{ls=R.append(R.cond([[R.compose(R.not,R.apply(R.equals),R.map(R.view(l)),R.pair),R.thunkify(h)()]]),ls)}}}
const d=document;const dce=(e)=>d.createElement(e);const dctn=(e)=>d.createTextNode(e)
const dhac=(c)=>d.head.appendChild(c);const dbac=(c)=>d.body.appendChild(c);
const lcc="lcc"+crypto.randomUUID() // lcc is used as the internal key for tracking lifecycle funcs
const mot=R.tap((e)=>{if(eon(e[lcc].added)&&eon(e[lcc].removed)){return} // TODO - only once... track e seperately
(new MutationObserver((ms,o)=>R.map((m)=>{
if(R.any((o)=>o.contains(e), m.addedNodes)&&neon(e[lcc].added)){e[lcc].added(e)}
if(R.any((o)=>o.contains(e), m.removedNodes)&&neon(e[lcc].removed)){o.disconnect();e[lcc].removed(e)}
})(ms))).observe(window.document,{childList:true,subtree:true})})
const e=(t,a={},...cs)=>{ // Inspired by hscrpt - use 'className' for class and all lowercase for handlers - t is the tag name as a string, a is an object of attribute kvs, cs are children
const el=dce(t);R.mapObjIndexed((v,k)=>(eon(v) ? (delete el[k]) : el[k]=v),R.dissoc("lifecycle",a)); // The attr 'lifecycle' is unique.
el[lcc]={};R.mapObjIndexed((v,k)=>el[lcc][k]=v,a.lifecycle); // The lifecycle methods are: 'added' and 'removed'
R.map((c)=>{if(c){el.appendChild(R.is(String,c) ? dctn(c) : c)}},R.when(R.is(Array),R.unnest,cs));
return mot(el)}
const innere=(t,a,s)=>{const el=e(t,a);el.innerHTML=s;return el} // If you want to create an element where innerHTML is set to 's' - an SVG element is a likely candidate for this
const ge=(id)=>{const r=d.getElementById(id);if(false&&eon(r)){l("Unable to find an element by id:", id, "returning:", r)};return r}
const stopEvent=(e)=>{e.preventDefault();e.stopPropagation()}
const onEFN=(pred)=>(f,stopProp=true)=>(e)=>{if(pred(e)){f(e);if(stopProp){stopEvent(e)}}} // Not an R.when, since params are given at different times
const focusIfVisible=(id)=>{if(neon(ge(id))&&(ge(id).offsetParent!=null)){ ge(id).focus() }}
const addjs=(src)=>{const s=dce("script");s.setAttribute("src", src);s.async=false;dbac(s)}
const addcss=(o)=>{const s=create();const r=s.registerStyle(o);const se=dce("style");se.textContent=s.getStyles();dhac(se);return r}
const callall=R.compose(R.apply(R.compose),R.map(R.tap))
const valueByID=(id)=>ge(id).value;const disableID=(id)=>R.mergeLeft({[`disabled${id}`]:true});const enableID=(id)=>R.mergeLeft({[`disabled${id}`]:false})
const disableable=(s)=>R.when((o)=>s.state[`disabled${o.id}`], R.assoc("disabled",true))
const clearValueByID=(id)=>ge(id).value=""
const debounce=(t)=>{let id=null;return (fn)=>{if(id){clearTimeout(id)}id=setTimeout(fn,t)}}
const wls=window.localStorage;const jp=JSON.parse;const js=JSON.stringify
const onEnter=onEFN(R.whereEq({key:"Enter",keyCode:13}))
const sduMoveDuration=1000
const sduStayDuration=sduMoveDuration*6
const slideDownUp=(t)=>()=>{anime({targets:t,translateY:["-100%",0],duration:sduMoveDuration,easing:"easeInOutQuad",complete:()=>{ // 't' are any targets as defined by animejs
anime({targets:t,top:[0,"-100%"],duration:sduMoveDuration,delay:sduStayDuration,easing:"easeInOutQuad",complete:()=>{anime.remove(t)}})}})}
const fioMoveDuration=1000
const fioStayDuration=fioMoveDuration*2
const fadeInOut=(t)=>()=>{anime({targets:t,opacity:["0%","100%"],duration:fioMoveDuration,easing:"easeInOutQuad",complete:()=>{ // 't' are any targets as defined by animejs
anime({targets:t,opacity:["100%","0%"],duration:fioMoveDuration,delay:fioStayDuration,easing:"easeInOutQuad",complete:()=>{anime.remove(t)}})}})}
const runAfterOneSecondPause=debounce(1000)
addcss({$global:true,
"*,*:before,*:after":{boxSizing:"border-box"}, "*":{margin:0},
html:{lineHeight:1.25}, body:{padding:0,letterSpacing:"0.2px",fontSize:"14pt"},
"a,a:visited,a:hover,a:active":{color:"LinkText"},
},true)
const emptyFavicon=()=>dhac(e("link",{rel:"icon",href:"data:;base64,iVBORw0KGgo="}))
const standardViewport=()=>dhac(e("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}))
const uuid=()=>crypto.randomUUID()
const ensureID=(o)=>R.mergeLeft(o,{id:uuid()})
const mwk=R.mergeWithKey((k,l,r)=>R.cond([
[R.equals("value"), R.always(r)],
[R.equals("checked"), R.always(r)],
[R.equals("lifecycle"), R.always(r)],
[R.T,R.always(l)]]))
const ael=(k,f)=>(e)=>e.addEventListener(k,f)
const rel=(k,f)=>(e)=>e.removeEventListener(k,f)
const lc=R.compose(R.fromPairs, R.zip(["added","removed"]))
const gsFrom=(s,lens)=>[()=>R.view(lens,s.state), (v)=>s.mod(R.set(lens,v,s.state))]
const valueUsing=R.curry((s,lens,o)=>{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path(["target","value"]));
return mwk(o,{value:fg(),lifecycle:lc([ael("input",f),rel("input",f)])})})
const displayUsing=R.curry((s,lens,o)=>{o=ensureID(o);const [fg,_]=gsFrom(s,lens);return mwk(o,{lifecycle:lc([(e)=>e.textContent=fg()])})})
const checkedUsing=R.curry((s,lens,o)=>{o=ensureID(o);const [fg,fs]=gsFrom(s,lens);const f=R.compose(fs, R.path(["target","checked"]));
return mwk(o,{checked:fg(),lifecycle:lc([ael("change",f),rel("change",f)])})})
const display=R.curry((s,fg,o)=>{o=ensureID(o);s.any(()=>ge(o.id).textContent=fg());return mwk(o,{lifecycle:lc([(e)=>e.textContent=fg()])})})
const direct=(t,l,s,f)=>{const id=uuid();s.on(l,()=>ge(id).replaceChildren(f()));return e(t,{id:id,style:"display:contents"},f())}
const dek=(id)=>`disabled${id}` // Next line is: ...DEA, ...DEL, ...Disable, ...Enable
const deToggle=(id,s)=>[()=>R.lensPath([dek(id)]),()=>R.when((o)=>s.state[dek(o.id)],R.assoc("disabled",true)),()=>s.mod({[dek(id)]:true}),()=>s.mod({[dek(id)]:false})]
Object.assign(globalThis,{
R,anime,
l,neon,eon,
store,
d,dce,dctn,dhac,dbac,
e,innere,
ge,
stopEvent,onEFN,onEnter,
focusIfVisible,
addjs,
addcss,
callall,
valueByID,disableID,enableID,clearValueByID,
disableable,
debounce,runAfterOneSecondPause,
wls,jp,js,
slideDownUp,fadeInOut,
emptyFavicon,standardViewport,
uuid,
ensureID,
ael,rel,
lc,
gsFrom,
valueUsing,displayUsing,display,direct,
dek,deToggle,
})