@flexilla/collapsible
Version:
A utility for creating collapsible sections in web applications, conserving space and improving user experience.
2 lines (1 loc) • 1.23 kB
JavaScript
(function(i,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(i=typeof globalThis<"u"?globalThis:i||self,n(i["@flexilla/collapsible"]={}))})(this,function(i){"use strict";const n=({element:t,callback:e,type:l,keysCheck:f})=>{const h=getComputedStyle(t),o=h.transition;if(o!=="none"&&o!==""&&!f.includes(o)){const a="transitionend",c=()=>{t.removeEventListener(a,c),e()};t.addEventListener(a,c,{once:!0})}else e()},d=({element:t,callback:e})=>{n({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},s=(t,e)=>{t.setAttribute("aria-hidden",e==="open"?"false":"true"),t.setAttribute("data-state",e)},p=(t,e="close",l="0px")=>{t.style.height=e==="open"?"auto":l,s(t,e)},u=t=>{if(t.getAttribute("data-state")==="open")return;s(t,"open");const e=t.scrollHeight;t.style.height=`${e}px`,d({element:t,callback:()=>{t.getAttribute("data-state")==="open"&&(t.style.height="auto")}})},r=(t,e="0px")=>{t.getAttribute("data-state")!=="close"&&(t.style.height=`${t.scrollHeight}px`,t.offsetHeight,t.style.height=e,s(t,"close"))};i.collapseElement=r,i.expandElement=u,i.initCollapsible=p,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});