@twobirds/microcomponents
Version:
Micro Components Organization Class
1 lines • 13.5 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.formValues=e():t.formValues=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}function s(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}t.r(e),t.d(e,{formValues:()=>G});var a=new Function("try {return this===window;}catch(e){ return false;}");let l=new Set;a()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>l.add(t)));class i{#t;#e=!1;#r=!1;constructor(t,e={},r="l"){this.#t=t,this.data=e,this.bubble=r}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#r}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var u=new Function("try {return this===window;}catch(e){ return false;}");let d=new Set;function f(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function m(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function p(t){return t&&t instanceof HTMLElement}function b(t,e,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),t.addEventListener(e,r,c)}function g(t,e,r={}){let n=t;if(!n._mc){let e=E?.debug;E.debug=!1,n._mc=new E(t),E.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),r}function h(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function y(t,e,r={},n="l"){let o=t?._mc;if(!o)return;let c=e instanceof i?new i(e.type,e.data,"l"):new i(e,r,"l"),s="string"!=typeof e?e:new i(e,r,n);[...Object.values(o)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(s.bubble)&&O(t,s)}function O(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=m(t,"",!0)?.[0].target;r&&E.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&E.trigger(t,e)}))}),0)}u()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>d.add(t)));class v{#n;constructor(t,e=!1){var r;this.#n=new WeakRef(t||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!u()||t.constructor===E)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((n=>{let o=/^one/.test(n),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),d.has("on"+s)&&b(e,s,(t=>{r.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends v{_mc={};constructor(t){super(t)}static trigger=y;trigger(t,e={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=t instanceof i?new i(t.type,t.data,"l"):new i(t,e,"l"),c="string"!=typeof t?t:new i(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&O(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof t?t:new i(t,e,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&O(n.target,o)}}}class E extends v{_mc={};constructor(t,e=!1){super(t)}static add=g;static remove=h;static trigger=y;trigger(t,e={},r){w.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return p(e)?m(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return p(e)?m(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!p(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=f([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return p(e)?f([...e.querySelectorAll("*[_mc]")],t):[]}}const A=new Map,_=new Map;function j(t){const e="./"+t.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",e),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",t),r.setAttribute("loading",""),b(r,"load",(t=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),b(r,"error",(t=>{console.error("could not load Custom Element code from",e)})),r}function S(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!A.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),r=(e.split("-").join("/"),j(e));b(r,"load",(()=>{A.set(e,customElements.get(t.tagName.toLowerCase()))})),A.set(e,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],r=e.filter((t=>!_.has(t)));r?.forEach((t=>{const e=j(t);b(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),r=e.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${t}";\n\t\t\timport { DC } from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${r}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${r}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${r}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${r}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;n.innerHTML=o,document.body.append(n)}),0);var e})),_.set(t,"loading"),document.head.append(e)}));const n=e.filter((t=>_.has(t)&&!_.get(t).length));n?.forEach((e=>{setTimeout((()=>{E.add(t,e,new(N.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let T=!1,k=null;function N(t=!0){return t?(T=t,k=new MutationObserver(S),setTimeout((()=>{k.observe(document.body,{childList:!0,subtree:!0}),S()}),5),window.autoload=window.autoload||N,T):(k?.disconnect(),k=null,T)}function C(t){return null!=t&&"object"==typeof t}function L(t){let e=new Set,r=/\{[^\{\}]*\}/g;return t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(r))).forEach((n=>{new Set(t.getAttribute(n)?.match(r)).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}N.state={CEs:A,MCs:_};const M=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class x extends E{data={};oldDisplay="";constructor(t){super(t);let e=this;L(t).forEach((t=>e.data[t]="")),H(e),e.#o(),delete e._mc}#o(){let t=this,e=t.target,r=!1;e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(e.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;t.data.observe((o=e.getAttribute(r),t=>{let c=o;n.forEach((e=>{c=c.replace(e,t[e.replace(/[\{\}]/g,"")])})),e.setAttribute(r,c)}))})),[...e.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;t.data.observe((c=n.nodeValue,r=>{let s=c;o.forEach((t=>{s=s.replace(t,r[t.replace(/[\{\}]/g,"")])})),Object.keys(r).some((t=>!!r[t]))&&(t.oldDisplay?e.style=t.oldDisplay:e.removeAttribute("style"),delete t.oldDisplay),n.nodeValue=s})),t.oldDisplay=e.getAttribute("style)")||"",r&&!M.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(t){let e=this,r={};Object.keys(t.data).forEach((n=>{e.data.hasOwnProperty(n)&&(r[n]=t.data[n])})),JSON.stringify(r)!==JSON.stringify(e.data)&&Object.assign(e.data,r)}}const P={};function q(t){let e=t.constructor.name;return P[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#c=!0;#s=[];constructor(t){super(t),this.constructor.callbacks=[],C(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#s}set callbacks(t){this.#s=t}observe(t){return this.#s.push(t),this}bind(t){const e=this;if(C(e.valueOf())){!function(t){var e;(e=t,(e instanceof HTMLElement?[e]:[]).concat([...e.querySelectorAll("*")]).filter((t=>!!L(t).length)).filter((t=>"STYLE"!==t.tagName))).forEach((t=>{t?._mc?._placeholders||E.add(t,"_placeholders",new x(t))}))}(t);const r=[...t.querySelectorAll("[_mc]")].filter((t=>!!t?._mc?._placeholders)),o=function(t){let e=n(t);r.forEach((t=>{t&&t._mc.trigger("data",e)}))};e.#s.push(o),e.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof e.valueOf(),e);return this}notify(t){let e=this,r=C(e.valueOf())&&e.valueOf()instanceof Array==0?structuredClone(Object.assign({},e)):e.valueOf();return void 0!==t&&(e.#c=t),e.#s.forEach((t=>{t(r)})),e}};return P[r]=o,o}(t)}const H=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(q(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(C(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(C(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(q(t))(structuredClone(Object.assign({},t))),s(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(q(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);class D{constructor(t){}}class V extends D{#a;constructor(t){super(t),this.#a=t}get val(){return new FormData(this.#a.form).get(this.#a.name)}set val(t){[...this.#a.form.querySelectorAll(`input[type="radio"][name="${this.#a.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class I extends D{#a;constructor(t){super(t),this.#a=t}get val(){return this.#a.checked}set val(t){this.#a.checked=t}}class $ extends D{#a;constructor(t){super(t),this.#a=t}get val(){return this.#a.value}set val(t){this.#a.value=t}}class F extends D{#a;#l=!1;constructor(t){super(t),this.#a=t,this.#l=t.multiple}get val(){const t=[];return[...this.#a.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#l?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#a.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class J extends D{#a;constructor(t){super(t),this.#a=t}get val(){return this.#a.value||""}set val(t){this.#a.value=t}}const R=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],r={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let n=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":n=new V(t);break;case"checkbox":n=new I(t);break;default:n=new $(t)}break;case"select":n=new F(t);break;case"textarea":n=new J(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}n&&(E.add(t,e,n),Object.defineProperty(r,e,{enumerable:!0,configurable:!0,get:()=>n.val,set:t=>{n.val!==t&&(n.val=t)}}))}})),r};function G(t,e,r){let n=R(r);t[e]=Object.assign({},n),H(t,e),s(n,t[e]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{b(r,"input",(r=>{t[e].notify()}))}))}return e})()));