axentix
Version:
Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.
3 lines (2 loc) • 7.4 kB
JavaScript
(function(i,n){typeof exports=="object"&&typeof module!="undefined"?module.exports=n():typeof define=="function"&&define.amd?define(n):(i=typeof globalThis!="undefined"?globalThis:i||self,i.Sidenav=n())})(this,function(){"use strict";var et=Object.defineProperty;var F=i=>{throw TypeError(i)};var st=(i,n,a)=>n in i?et(i,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[n]=a;var b=(i,n,a)=>st(i,typeof n!="symbol"?n+"":n,a),T=(i,n,a)=>n.has(i)||F("Cannot "+a);var r=(i,n,a)=>(T(i,n,"read from private field"),a?a.call(i):n.get(i)),f=(i,n,a)=>n.has(i)?F("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(i):n.set(i,a),l=(i,n,a,C)=>(T(i,n,"write to private field"),C?C.call(i,a):n.set(i,a),a),L=(i,n,a)=>(T(i,n,"access private method"),a);var A,p,v,D,E,m,O,x,w,S,h,U,k,W,q,B;const i=[],n={components:[],plugins:[],prefix:"ax",mode:""},a=s=>n.components.find(e=>e.name===s).class,C=()=>{const s=n.components.filter(t=>t.dataDetection),e=n.plugins.filter(t=>t.dataDetection);return[...s,...e].map(t=>t.name)},M=(s,e)=>{if(!s.name||!s.class){console.error(`[Axentix] Error registering ${e} : Missing required parameters.`);return}if(n[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)"),n[e].push(s)},N=s=>{M(s,"components")},H=s=>s.replace(/[\w]([A-Z])/g,e=>e[0]+"-"+e[1]).toLowerCase(),P=(s,e="")=>{const t=H(s);return e?e+"-"+t:t},Z=(s,e,t,o,c="")=>{const d=e[0].toUpperCase()+e.slice(1).toLowerCase();C().includes(d)&&t!=="Collapsible"&&d!=="Sidenav"&&(s[e]=a(d).getDefaultOptions());const u=c?c+"-"+e:e,y=$(s[e],t,o,u);if(!(Object.keys(y).length===0&&s.constructor===Object))return y},$=(s,e,t,o="")=>Object.keys(s).reduce((c,d)=>{if(typeof s[d]=="object"&&s[d]!==null){const u=Z(s,d,e,t,o);u&&(c[d]=u)}else if(s[d]!==null){const u="data-"+e.toLowerCase()+"-"+P(d,o);if(t.hasAttribute(u)){const y=t.getAttribute(u);c[d]=typeof s[d]=="number"?Number(y):y,typeof s[d]=="boolean"&&(c[d]=y==="true")}}return c},{}),G=(s,e)=>{const t=Object.assign({},a(s).getDefaultOptions());return $(t,s,e)},J=()=>{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 o=a(t);new o(`#${e.id}`)}catch(o){console.error("[Axentix] Data: Unable to load "+t,o)}})},K=()=>{try{new Axentix.Axentix("all")}catch(s){console.error("[Axentix] Unable to auto init.",s)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&K(),J()});const R=(...s)=>s.reduce((e,t)=>{for(let o in t)e[o]=typeof t[o]=="object"&&t[o]!==null?R(e[o],t[o]):t[o];return e},{}),Q=(s,e,t)=>R(a(s).getDefaultOptions(),G(s,t),e),g=(s,e,t)=>{const o=new CustomEvent("ax."+e,{detail:{},bubbles:!0});s.dispatchEvent(o)},V=s=>i.filter(e=>e.type===s).map(e=>e.instance),X=s=>{const e=i.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===s);return e?e.instance:!1},Y=(s,e,t,o)=>{const c=s&&e?document.querySelector(`.ax-overlay[data-target="${t}"]`):document.createElement("div");return c.classList.add("ax-overlay"),c.style.transitionDuration=o+"ms",c.dataset.target=t,c},z=(s,e,t,o,c)=>{s&&(o?(e.addEventListener("click",t),document.body.appendChild(e),setTimeout(()=>{e.classList.add("active")},50)):(e.classList.remove("active"),setTimeout(()=>{e.removeEventListener("click",t),document.body.removeChild(e)},c)))},_=(s,e='[data-target="{ID}"]')=>Array.from(document.querySelectorAll(e.replace("{ID}",s)));class j{constructor(){b(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(e){if(e&&X(e))throw new Error(`Instance already exist on ${e}`)}sync(){g(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){g(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){g(this.el,"component.destroy"),this.removeListeners();const e=i.findIndex(t=>t.instance.el.id===this.el.id);i.splice(e,1)}}const tt={overlay:!0,bodyScrolling:!1,animationDuration:300};class I extends j{constructor(t,o){super();f(this,h);b(this,"options");f(this,A);f(this,p,!1);f(this,v,!1);f(this,D,!1);f(this,E,!1);f(this,m);f(this,O);f(this,x);f(this,w);f(this,S);try{this.preventDbInstance(t),i.push({type:"Sidenav",instance:this}),this.el=document.querySelector(t),this.options=Q("Sidenav",o,this.el),this.setup()}catch(c){console.error("[Axentix] Sidenav init error",c)}}setup(){g(this.el,"sidenav.setup"),l(this,A,_(this.el.id)),l(this,p,!1),l(this,v,!1),l(this,S,window.innerWidth),l(this,D,this.el.classList.contains("sidenav-fixed"));const t=V("Sidenav").find(o=>r(o,D));l(this,E,t&&t.el===this.el),l(this,m,document.querySelector('.layout, [class*="layout-"]')),r(this,m)&&r(this,E)&&L(this,h,k).call(this),this.setupListeners(),this.options.overlay&&l(this,O,Y(r(this,p),this.options.overlay,this.el.id,this.options.animationDuration)),r(this,m)&&r(this,D)&&L(this,h,W).call(this),this.el.style.transitionDuration=this.options.animationDuration+"ms"}setupListeners(){l(this,x,L(this,h,B).bind(this)),r(this,A).forEach(t=>t.addEventListener("click",r(this,x))),l(this,w,L(this,h,U).bind(this)),window.addEventListener("resize",r(this,w))}removeListeners(){r(this,A).forEach(t=>t.removeEventListener("click",r(this,x))),l(this,x,void 0),window.removeEventListener("resize",r(this,w)),l(this,w,void 0)}destroy(){g(this.el,"component.destroy"),this.removeListeners(),r(this,m)&&L(this,h,k).call(this);const t=i.findIndex(o=>o.instance.el.id===this.el.id);i.splice(t,1)}open(){r(this,p)||r(this,v)||(g(this.el,"sidenav.open"),l(this,p,!0),l(this,v,!0),this.el.classList.add("active"),z(this.options.overlay,r(this,O),r(this,x),!0,this.options.animationDuration),L(this,h,q).call(this,!1),setTimeout(()=>{l(this,v,!1),g(this.el,"sidenav.opened")},this.options.animationDuration))}close(){!r(this,p)||r(this,v)||(l(this,v,!0),g(this.el,"sidenav.close"),this.el.classList.remove("active"),z(this.options.overlay,r(this,O),r(this,x),!1,this.options.animationDuration),setTimeout(()=>{L(this,h,q).call(this,!0),l(this,p,!1),l(this,v,!1),g(this.el,"sidenav.closed")},this.options.animationDuration))}}return A=new WeakMap,p=new WeakMap,v=new WeakMap,D=new WeakMap,E=new WeakMap,m=new WeakMap,O=new WeakMap,x=new WeakMap,w=new WeakMap,S=new WeakMap,h=new WeakSet,U=function(t){const c=t.target.innerWidth;r(this,S)!==c&&this.close(),l(this,S,c)},k=function(){["layout-sidenav-right","layout-sidenav-both"].forEach(t=>r(this,m).classList.remove(t))},W=function(){if(!r(this,E))return;const t=Array.from(document.querySelectorAll(".sidenav")).filter(u=>u.classList.contains("sidenav-fixed")),{sidenavsRight:o,sidenavsLeft:c}=t.reduce((u,y)=>(y.classList.contains("sidenav-right")?u.sidenavsRight.push(y):u.sidenavsLeft.push(y),u),{sidenavsRight:[],sidenavsLeft:[]}),d=c.length>0&&o.length>0;o.length>0&&!d?r(this,m).classList.add("layout-sidenav-right"):d&&r(this,m).classList.add("layout-sidenav-both")},q=function(t){this.options.bodyScrolling||(document.body.style.overflow=t?"":"hidden")},B=function(t){t.preventDefault(),!(r(this,D)&&window.innerWidth>=960)&&(r(this,p)?this.close():this.open())},b(I,"getDefaultOptions",()=>tt),N({class:I,name:"Sidenav",dataDetection:!0,autoInit:{enabled:!0,selector:".sidenav"}}),I});