axentix/dist/components/dropdown/dropdown.min.js

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

(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.Dropdown=n())})(this,function(){"use strict";var X=Object.defineProperty;var q=i=>{throw TypeError(i)};var Y=(i,n,o)=>n in i?X(i,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[n]=o;var E=(i,n,o)=>Y(i,typeof n!="symbol"?n+"":n,o),T=(i,n,o)=>n.has(i)||q("Cannot "+o);var r=(i,n,o)=>(T(i,n,"read from private field"),o?o.call(i):n.get(i)),g=(i,n,o)=>n.has(i)?q("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(i):n.set(i,o),c=(i,n,o,A)=>(T(i,n,"write to private field"),A?A.call(i,o):n.set(i,o),o),L=(i,n,o)=>(T(i,n,"access private method"),o);var u,y,f,d,v,w,x,p,H,R,S,V,b;const i=[],n={components:[],plugins:[],prefix:"ax",mode:""},o=s=>n.components.find(e=>e.name===s).class,A=()=>{const s=n.components.filter(t=>t.dataDetection),e=n.plugins.filter(t=>t.dataDetection);return[...s,...e].map(t=>t.name)},$=(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)},U=s=>{$(s,"components")},N=s=>s.replace(/[\w]([A-Z])/g,e=>e[0]+"-"+e[1]).toLowerCase(),B=(s,e="")=>{const t=N(s);return e?e+"-"+t:t},F=(s,e,t,a,m="")=>{const l=e[0].toUpperCase()+e.slice(1).toLowerCase();A().includes(l)&&t!=="Collapsible"&&l!=="Sidenav"&&(s[e]=o(l).getDefaultOptions());const D=m?m+"-"+e:e,C=k(s[e],t,a,D);if(!(Object.keys(C).length===0&&s.constructor===Object))return C},k=(s,e,t,a="")=>Object.keys(s).reduce((m,l)=>{if(typeof s[l]=="object"&&s[l]!==null){const D=F(s,l,e,t,a);D&&(m[l]=D)}else if(s[l]!==null){const D="data-"+e.toLowerCase()+"-"+B(l,a);if(t.hasAttribute(D)){const C=t.getAttribute(D);m[l]=typeof s[l]=="number"?Number(C):C,typeof s[l]=="boolean"&&(m[l]=C==="true")}}return m},{}),M=(s,e)=>{const t=Object.assign({},o(s).getDefaultOptions());return k(t,s,e)},P=()=>{document.querySelectorAll("[data-ax]").forEach(e=>{let t=e.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!A().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,e);return}try{const a=o(t);new a(`#${e.id}`)}catch(a){console.error("[Axentix] Data: Unable to load "+t,a)}})},Z=()=>{try{new Axentix.Axentix("all")}catch(s){console.error("[Axentix] Unable to auto init.",s)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&Z(),P()});const I=(...s)=>s.reduce((e,t)=>{for(let a in t)e[a]=typeof t[a]=="object"&&t[a]!==null?I(e[a],t[a]):t[a];return e},{}),z=(s,e,t)=>I(o(s).getDefaultOptions(),M(s,t),e),h=(s,e,t)=>{const a=new CustomEvent("ax."+e,{detail:{},bubbles:!0});s.dispatchEvent(a)},G=s=>i.filter(e=>e.type===s).map(e=>e.instance),J=s=>{const e=i.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===s);return e?e.instance:!1},K=(s,e='[data-target="{ID}"]')=>Array.from(document.querySelectorAll(e.replace("{ID}",s)));class Q{constructor(){E(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(e){if(e&&J(e))throw new Error(`Instance already exist on ${e}`)}sync(){h(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){h(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){h(this.el,"component.destroy"),this.removeListeners();const e=i.findIndex(t=>t.instance.el.id===this.el.id);i.splice(e,1)}}const W={animationDuration:300,animationType:"none",hover:!1,autoClose:!0,preventViewport:!1,closeOnClick:!0};class O extends Q{constructor(t,a){super();g(this,p);E(this,"options");g(this,u);g(this,y);g(this,f,!1);g(this,d,!1);g(this,v);g(this,w);g(this,x);try{this.preventDbInstance(t),i.push({type:"Dropdown",instance:this}),this.el=document.querySelector(t),this.options=z("Dropdown",a,this.el),this.setup()}catch(m){console.error("[Axentix] Dropdown init error",m)}}setup(){h(this.el,"dropdown.setup"),c(this,u,this.el.querySelector(".dropdown-content")),c(this,y,K(this.el.id)[0]),c(this,f,!1),c(this,d,!!this.el.classList.contains("active")),this.options.hover?this.el.classList.add("active-hover"):this.setupListeners(),this.options.preventViewport&&this.el.classList.add("dropdown-vp"),L(this,p,H).call(this)}setupListeners(){this.options.hover||(c(this,w,L(this,p,S).bind(this)),r(this,y).addEventListener("click",r(this,w)),c(this,v,L(this,p,R).bind(this)),document.addEventListener("click",r(this,v),!0),c(this,x,L(this,p,b).bind(this)),this.options.preventViewport&&window.addEventListener("scroll",r(this,x)))}removeListeners(){this.options.hover||(r(this,y).removeEventListener("click",r(this,w)),c(this,w,void 0),document.removeEventListener("click",r(this,v),!0),c(this,v,void 0),this.options.preventViewport&&window.removeEventListener("scroll",r(this,x)),c(this,x,void 0))}open(){r(this,d)||(h(this.el,"dropdown.open"),r(this,u).style.display="flex",this.options.preventViewport&&L(this,p,b).call(this),setTimeout(()=>{this.el.classList.add("active"),c(this,d,!0)},10),this.options.autoClose&&L(this,p,V).call(this),this.options.animationType!=="none"?(c(this,f,!0),setTimeout(()=>{c(this,f,!1),h(this.el,"dropdown.opened")},this.options.animationDuration)):h(this.el,"dropdown.opened"))}close(){r(this,d)&&(h(this.el,"dropdown.close"),this.el.classList.remove("active"),this.options.animationType!=="none"?(c(this,f,!0),setTimeout(()=>{r(this,u).style.display="",c(this,f,!1),c(this,d,!1),h(this.el,"dropdown.closed")},this.options.animationDuration)):(r(this,u).style.display="",c(this,d,!1),h(this.el,"dropdown.closed")))}}return u=new WeakMap,y=new WeakMap,f=new WeakMap,d=new WeakMap,v=new WeakMap,w=new WeakMap,x=new WeakMap,p=new WeakSet,H=function(){const t=["none","fade"];this.options.animationType=this.options.animationType.toLowerCase(),t.includes(this.options.animationType)||(this.options.animationType="none"),this.options.animationType==="fade"&&!this.options.hover&&(r(this,u).style.transitionDuration=this.options.animationDuration+"ms",this.el.classList.add("dropdown-anim-fade"))},R=function(t){t.target===r(this,y)||r(this,f)||!r(this,d)||!this.options.closeOnClick&&t.target.closest(".dropdown-content")||this.close()},S=function(t){t.preventDefault(),!r(this,f)&&(r(this,d)?this.close():this.open())},V=function(){G("Dropdown").forEach(t=>{t.el.id!==this.el.id&&t.close()})},b=function(){const t=r(this,u).getBoundingClientRect(),a=t.height-(t.bottom-(window.innerHeight||document.documentElement.clientHeight))-10;r(this,u).style.maxHeight=a+"px"},E(O,"getDefaultOptions",()=>W),U({class:O,name:"Dropdown",dataDetection:!0,autoInit:{enabled:!0,selector:".dropdown"}}),O});