1 line
5.8 KiB
JavaScript
1 line
5.8 KiB
JavaScript
const t=[5,1,0],e=`bitty-${t[0]}-${t[1]}`,n=new CSSStyleSheet;n.replaceSync(`${e} { display: block; }`),document.adoptedStyleSheets.push(n);class s extends Error{constructor(t){super(),Error.captureStackTrace&&Error.captureStackTrace(this,s),this.name="BittyError";for(let[e,n]of Object.entries(t))this[e]=n}}class i extends Event{constructor(t,e){super("bittyforward",{bubbles:!0}),this.fEvent=t,this.fSignal=e}}class a extends Event{constructor(t){super("bittytrigger",{bubbles:!0}),this.fSignal=t}}class o extends HTMLElement{constructor(){super(),this.config={listeners:["click","input"],license:"MIT",version:t}}async connectedCallback(){this.dataset.bittyid=self.crypto.randomUUID(),await this.makeConnection(),this.conn&&(this.conn.api=this,this.handleCatchBridge=this.handleCatch.bind(this),this.handleEventBridge=this.handleEvent.bind(this),this.setIds(this),this.addEventListeners(),await this.callBittyInit(),this.runElementDataInits(),this.runSendFromComponent(),await this.callBittyReady())}addEventListeners(){["bittyforward","bittytrigger"].forEach(t=>{document.addEventListener(t,t=>{this.handleEventBridge.call(this,t)})}),this.dataset.listeners&&(this.config.listeners=this.dataset.listeners.split(/\s+/m).map(t=>t.trim())),this.config.listeners.forEach(t=>{document.addEventListener(t,t=>{t.target&&t.target.nodeName&&t.target.nodeName.toLowerCase()!==e&&t.target.dataset&&t.target.dataset.send?this.handleEventBridge.call(this,t):this.handleCatchBridge.call(this,t)})})}async callBittyInit(){"function"==typeof this.conn.bittyInit&&("AsyncFunction"===this.conn.bittyInit[Symbol.toStringTag]?await this.conn.bittyInit():this.conn.bittyInit())}async callBittyReady(){"function"==typeof this.conn.bittyReady&&("AsyncFunction"===this.conn.bittyReady[Symbol.toStringTag]?await this.conn.bittyReady():this.conn.bittyReady())}connectedMoveCallback(){}doSubs(t,e){return e.forEach(e=>{const n=typeof e[1],s=Object.prototype.toString.call(e[1]);if("object"===n&&"[object Array]"===s){const n=e[1].map(t=>{const e=typeof t,n=Object.prototype.toString.call(t);return"object"===e&&"[object DocumentFragment]"===n?[...t.childNodes].map(t=>"[object Text]"===Object.prototype.toString.call(t)?t.wholeText:t.outerHTML).join(""):"object"===e?t.outerHTML:t}).join("");t=t.replaceAll(e[0],n)}else if("object"===n&&"[object DocumentFragment]"===s){const n=[];[...e[1].childNodes].forEach(t=>{"[object Text]"===Object.prototype.toString.call(t)?n.push(t.wholeText):n.push(t.outerHTML)}),t=t.replaceAll(e[0],n.join(""))}else t="object"==typeof e[1]?t.replaceAll(e[0],e[1].outerHTML):t.replaceAll(e[0],e[1])}),t}forward(t,e){const n=new i(t,e);this.dispatchEvent(n)}trigger(t){const e=new a(t);this.dispatchEvent(e)}async getElement(t,e=[],n={}){const s=await this.getHTML(t,e,n,"getElement");if(s.value){return{value:s.value.firstChild}}return s}async getHTML(t,e=[],n={}){const s=await this.getTXT(t,e,n,"getHTML");return s.error?s:{value:this.makeHTML(s.value,e)}}async getJSON(t,e=[],n={}){const i=await this.getTXT(t,e,n,"getJSON");if(i.error)return i;try{const t=JSON.parse(i.value);return{value:t}}catch(t){return{error:new s({type:"parsing"})}}}async getSVG(t,e=[],n={}){const s=await this.getTXT(t,e,n,"getSVG");if(s.error)return s;{const t=document.createElement("template");t.innerHTML=s.value;return{value:t.content.cloneNode(!0).querySelector("svg")}}}async getTXT(t,e=[],n={},i="getTXT"){let a=await fetch(t,n);try{if(a.ok){return{value:this.doSubs(await a.text(),e)}}throw new s({type:"fetching",message:`${i}() returned ${a.status} [${a.statusText}] in:\n${i}(${a.url}, ${JSON.stringify(e)}, ${JSON.stringify(n)})`,statusText:a.statusText,status:a.status,url:a.url,incomingMethod:i,subs:e,options:n})}catch(t){return console.error(`BittyError: ${t.message}`),{error:t}}}async handleCatch(t){"function"==typeof this.conn.bittyCatch&&await this.conn.bittyCatch(t)}async handleEvent(t){const e=this.querySelectorAll("[data-receive]");let n;"bittyforward"===t.type?(n=t.fSignal,t=t.fEvent):n="bittytrigger"===t.type?t.fSignal:t.target.dataset.send;for(const s of n.split(/\s+/)){let n=!1,i=s;const a=s.split(":");2===a.length&&"await"===a[0]&&(n=!0,i=a[1]);let o=!1;for(const s of e){const e=s.dataset.receive.split(/\s+/m);for(const a of e){let e=a;const r=a.split(":");2===r.length&&"await"===r[0]&&(e=r[1],n=!0),e===i&&this.conn[i]&&(n?await this.conn[i](t,s):this.conn[i](t,s),o=!0)}}!o&&this.conn[i]&&(n?await this.conn[i](t,null):this.conn[i](t,null))}}async loadCSS(t,e,n){const s=await this.getTXT(t,e,n,"loadCSS");if(s.error)return s;{const t=new CSSStyleSheet;t.replaceSync(s.value),document.adoptedStyleSheets.push(t);return{value:s.value}}}async makeConnection(){try{if(this.dataset.connect){const t=this.dataset.connect.split(/\s+/m).map(t=>t.trim());if(void 0!==window[t[0]])this.conn=new window[t[0]];else{const e=await import(t[0]);void 0===t[1]?this.conn=new e.default:this.conn=new e[t[1]]}}else window.BittyClass?this.conn=new window.BittyClass:console.error(`${e} error: No class to connect to.`)}catch(t){console.error(`${e} error: ${t} - ${this.dataset.connect}`)}}makeElement(t,e=[]){return this.makeHTML(t,e).firstChild}makeHTML(t,e=[]){const n=document.createElement("template");n.innerHTML=this.makeTXT(t,e).trim();const s=n.content.cloneNode(!0);return this.setIds(s),s}makeTXT(t,e=[]){return this.doSubs(t,e)}match(t,e,n="bittyid"){return void 0!==t.target.dataset[n]&&void 0!==e.dataset[n]&&t.target.dataset[n]===e.dataset[n]}runElementDataInits(){this.querySelectorAll("[data-init]").forEach(t=>{t.dataset.init.split(/\s+/m).forEach(e=>{this.conn[e]&&this.conn[e]({type:"bittydatainit"},t)})})}runSendFromComponent(){this.dataset.send&&this.handleEvent({type:"bittytagdatasend",target:this})}setProp(t,e){document.documentElement.style.setProperty(t,e)}setIds(t){t.querySelectorAll("*").forEach(t=>{const e=t.dataset;(e.receive||e.send||e.init&&!e.bittyid)&&(e.bittyid=self.crypto.randomUUID())})}}customElements.define(e,o); |