@flexilla/collapse
Version:
A versatile and interactive collapse component for creating collapsible sections in web applications, conserving space and improving user experience.
2 lines (1 loc) • 4.5 kB
JavaScript
(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a["@flexilla/collapse"]={}))})(this,(function(a){"use strict";var T=Object.defineProperty;var I=(a,n,r)=>n in a?T(a,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[n]=r;var l=(a,n,r)=>I(a,typeof n!="symbol"?n+"":n,r);const n=(t,e=document.body)=>e.querySelector(t),r=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),x=({element:t,callback:e,type:s,keysCheck:i})=>{const o=getComputedStyle(t),c=o.transition;if(c!=="none"&&c!==""&&!i.includes(c)){const u="transitionend",m=()=>{t.removeEventListener(u,m),e()};t.addEventListener(u,m,{once:!0})}else e()},w=({element:t,callback:e})=>{x({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},h=(t,e,s)=>{const i=new CustomEvent(e,{detail:s});t.dispatchEvent(i)},p=(t,e)=>{t.setAttribute("aria-hidden",e==="open"?"false":"true"),t.setAttribute("data-state",e)},y=(t,e="close",s="0px")=>{t.style.height=e==="open"?"auto":s,p(t,e)},b=t=>{if(t.getAttribute("data-state")==="open")return;p(t,"open");const e=t.scrollHeight;t.style.height=`${e}px`,w({element:t,callback:()=>{t.getAttribute("data-state")==="open"&&(t.style.height="auto")}})},E=(t,e="0px")=>{t.getAttribute("data-state")!=="close"&&(t.style.height=`${t.scrollHeight}px`,t.offsetHeight,t.style.height=e,p(t,"close"))};class g{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,s,i){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,s)||(window.$flexillaInstances[e].push({element:s,instance:i}),i)}static getInstance(e,s){var i,o;return this.initGlobalRegistry(),(o=(i=window.$flexillaInstances[e])==null?void 0:i.find(c=>c.element===s))==null?void 0:o.instance}static removeInstance(e,s){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(i=>i.element!==s))}static setup(e){e.setAttribute("data-fx-component","fx")}static initialized(e){e.setAttribute("data-component-initialized","initialized")}}const d=class d{constructor(e,s={},i){l(this,"element");l(this,"defaultState");l(this,"collapseId");l(this,"collapseTrigger");l(this,"options");l(this,"closeHeight");l(this,"show",()=>{var e,s;h(this.element,"before-expand",{isExpanded:!1}),this.collapseTrigger&&(this.collapseTrigger.ariaExpanded="true"),b(this.element),(s=(e=this.options).onToggle)==null||s.call(e,{isExpanded:!0}),h(this.element,"expanded",{isExpanded:!1})});l(this,"hide",()=>{var e,s;this.collapseTrigger&&(this.collapseTrigger.ariaExpanded="false"),E(this.element,`${this.closeHeight}px`),(s=(e=this.options).onToggle)==null||s.call(e,{isExpanded:!1}),h(this.element,"collapsed",{isExpanded:!1})});l(this,"toggle",()=>{var s,i;const e=this.element.dataset.state==="open";e?this.hide():this.show(),(i=(s=this.options).onToggle)==null||i.call(s,{isExpanded:!e})});l(this,"setCloseHeight",e=>{this.closeHeight=e});let o;if(o=typeof e=="string"?n(`${e}`):e,typeof e=="string"&&!o)throw new Error(`No element found matching selector: ${e}`);if(!(o instanceof HTMLElement))throw new Error("Provided element must be a valid HTMLElement or selector");this.element=o;const c=g.getInstance("collapse",this.element);if(c)return c;this.collapseId=this.element.getAttribute("id"),this.collapseTrigger=n(`${i}`)||n(`[data-collapse-trigger][data-target*='${this.collapseId}']`),this.options=s,this.defaultState=this.element.dataset.state?this.element.dataset.state==="open"?"open":"close":this.options.defaultState||"close",this.closeHeight=this.element.dataset.closeHeight?parseInt(this.element.dataset.closeHeight||"0"):this.options.closeHeight||0,this.initCollapse(),g.register("collapse",this.element,this)}initCollapse(){this.collapseTrigger instanceof HTMLElement&&(this.collapseTrigger.addEventListener("click",this.toggle),this.collapseTrigger.ariaExpanded=this.defaultState==="open"?"true":"false"),y(this.element,this.defaultState,`${this.closeHeight}px`)}cleanup(){this.collapseTrigger instanceof HTMLElement&&this.collapseTrigger.removeEventListener("click",this.toggle),g.removeInstance("collapse",this.element)}};l(d,"init",(e,s={},i)=>new d(e,s,i)),l(d,"autoInit",(e="[data-fx-collapse]")=>{const s=r(e);for(const i of s)new d(i)});let f=d;a.Collapse=f,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));