UNPKG

axentix

Version:

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

3 lines (2 loc) 6.69 kB
(function(i,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o():typeof define=="function"&&define.amd?define(o):(i=typeof globalThis!="undefined"?globalThis:i||self,i.Fab=o())})(this,function(){"use strict";var Q=Object.defineProperty;var T=i=>{throw TypeError(i)};var V=(i,o,n)=>o in i?Q(i,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):i[o]=n;var O=(i,o,n)=>V(i,typeof o!="symbol"?o+"":o,n),k=(i,o,n)=>o.has(i)||T("Cannot "+n);var c=(i,o,n)=>(k(i,o,"read from private field"),n?n.call(i):o.get(i)),u=(i,o,n)=>o.has(i)?T("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(i):o.set(i,n),l=(i,o,n,C)=>(k(i,o,"write to private field"),C?C.call(i,n):o.set(i,n),n),E=(i,o,n)=>(k(i,o,"access private method"),n);var d,p,D,m,g,x,v,y,a,q,S,$,M,R;const i=[],o={components:[],plugins:[],prefix:"ax",mode:""},n=s=>o.components.find(e=>e.name===s).class,C=()=>{const s=o.components.filter(t=>t.dataDetection),e=o.plugins.filter(t=>t.dataDetection);return[...s,...e].map(t=>t.name)},U=(s,e)=>{if(!s.name||!s.class){console.error(`[Axentix] Error registering ${e} : Missing required parameters.`);return}if(o[e].some(t=>t.name===s.name)){console.error(`[Axentix] Error registering ${e} : Already exist.`);return}s.autoInit&&(s.autoInit.selector=s.autoInit.selector+=":not(.no-axentix-init)"),o[e].push(s)},N=s=>{U(s,"components")},P=s=>s.replace(/[\w]([A-Z])/g,e=>e[0]+"-"+e[1]).toLowerCase(),X=(s,e="")=>{const t=P(s);return e?e+"-"+t:t},Y=(s,e,t,r,f="")=>{const h=e[0].toUpperCase()+e.slice(1).toLowerCase();C().includes(h)&&t!=="Collapsible"&&h!=="Sidenav"&&(s[e]=n(h).getDefaultOptions());const b=f?f+"-"+e:e,A=w(s[e],t,r,b);if(!(Object.keys(A).length===0&&s.constructor===Object))return A},w=(s,e,t,r="")=>Object.keys(s).reduce((f,h)=>{if(typeof s[h]=="object"&&s[h]!==null){const b=Y(s,h,e,t,r);b&&(f[h]=b)}else if(s[h]!==null){const b="data-"+e.toLowerCase()+"-"+X(h,r);if(t.hasAttribute(b)){const A=t.getAttribute(b);f[h]=typeof s[h]=="number"?Number(A):A,typeof s[h]=="boolean"&&(f[h]=A==="true")}}return f},{}),H=(s,e)=>{const t=Object.assign({},n(s).getDefaultOptions());return w(t,s,e)},W=()=>{document.querySelectorAll("[data-ax]").forEach(e=>{let t=e.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!C().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. Did you forget to register him ?`,e);return}try{const r=n(t);new r(`#${e.id}`)}catch(r){console.error("[Axentix] Data: Unable to load "+t,r)}})},Z=()=>{try{new Axentix.Axentix("all")}catch(s){console.error("[Axentix] Unable to auto init.",s)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&Z(),W()});const F=(...s)=>s.reduce((e,t)=>{for(let r in t)e[r]=typeof t[r]=="object"&&t[r]!==null?F(e[r],t[r]):t[r];return e},{}),z=(s,e,t)=>F(n(s).getDefaultOptions(),H(s,t),e),L=(s,e,t)=>{const r=new CustomEvent("ax."+e,{detail:{},bubbles:!0});s.dispatchEvent(r)},B=s=>{const e=i.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===s);return e?e.instance:!1},G=(s,e='[data-target="{ID}"]')=>Array.from(document.querySelectorAll(e.replace("{ID}",s)));class J{constructor(){O(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(e){if(e&&B(e))throw new Error(`Instance already exist on ${e}`)}sync(){L(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){L(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){L(this.el,"component.destroy"),this.removeListeners();const e=i.findIndex(t=>t.instance.el.id===this.el.id);i.splice(e,1)}}const K={animationDuration:300,hover:!0,direction:"top",position:"bottom-right",offsetX:"1rem",offsetY:"1.5rem"};class I extends J{constructor(t,r){super();u(this,a);O(this,"options");u(this,d,!1);u(this,p,!1);u(this,D);u(this,m);u(this,g);u(this,x);u(this,v);u(this,y);try{this.preventDbInstance(t),i.push({type:"Fab",instance:this}),this.el=document.querySelector(t),this.options=z("Fab",r,this.el),this.setup()}catch(f){console.error("[Axentix] Fab init error",f)}}setup(){L(this.el,"fab.setup"),l(this,d,!1),l(this,p,!1),l(this,D,G(this.el.id)[0]),l(this,m,this.el.querySelector(".fab-menu")),E(this,a,q).call(this),this.setupListeners(),this.el.style.transitionDuration=this.options.animationDuration+"ms",E(this,a,S).call(this)}setupListeners(){this.options.hover?(l(this,g,this.open.bind(this)),l(this,x,this.close.bind(this)),this.el.addEventListener("mouseenter",c(this,g)),this.el.addEventListener("mouseleave",c(this,x))):(l(this,y,E(this,a,R).bind(this)),this.el.addEventListener("click",c(this,y))),l(this,v,E(this,a,M).bind(this)),document.addEventListener("click",c(this,v),!0)}removeListeners(){this.options.hover?(this.el.removeEventListener("mouseenter",c(this,g)),this.el.removeEventListener("mouseleave",c(this,x)),l(this,g,void 0),l(this,x,void 0)):(this.el.removeEventListener("click",c(this,y)),l(this,y,void 0)),document.removeEventListener("click",c(this,v),!0),l(this,v,void 0)}open(){c(this,p)||(L(this.el,"fab.open"),l(this,d,!0),l(this,p,!0),this.el.classList.add("active"),setTimeout(()=>{l(this,d,!1)},this.options.animationDuration))}close(){c(this,p)&&(L(this.el,"fab.close"),l(this,d,!0),l(this,p,!1),this.el.classList.remove("active"),setTimeout(()=>{l(this,d,!1)},this.options.animationDuration))}}return d=new WeakMap,p=new WeakMap,D=new WeakMap,m=new WeakMap,g=new WeakMap,x=new WeakMap,v=new WeakMap,y=new WeakMap,a=new WeakSet,q=function(){["right","left","top","bottom"].includes(this.options.direction)||(this.options.direction="top"),["top-right","top-left","bottom-right","bottom-left"].includes(this.options.position)||(this.options.position="bottom-right")},S=function(){this.options.position.split("-")[0]==="top"?this.el.style.top=this.options.offsetY:this.el.style.bottom=this.options.offsetY,this.options.position.split("-")[1]==="right"?this.el.style.right=this.options.offsetX:this.el.style.left=this.options.offsetX,(this.options.direction==="right"||this.options.direction==="left")&&this.el.classList.add("fab-dir-x"),E(this,a,$).call(this)},$=function(){if(this.options.direction==="top"||this.options.direction==="bottom"){const t=c(this,D).clientHeight;this.options.direction==="top"?c(this,m).style.bottom=t+"px":c(this,m).style.top=t+"px"}else{const t=c(this,D).clientWidth;this.options.direction==="right"?c(this,m).style.left=t+"px":c(this,m).style.right=t+"px"}},M=function(t){!this.el.contains(t.target)&&c(this,p)&&this.close()},R=function(t){t.preventDefault(),!c(this,d)&&(c(this,p)?this.close():this.open())},O(I,"getDefaultOptions",()=>K),N({class:I,name:"Fab",dataDetection:!0,autoInit:{enabled:!0,selector:".fab:not(i)"}}),I});