UNPKG

@js-components/accordion

Version:
12 lines (11 loc) 7.58 kB
/*! * @js-components/accordion 1.3.0 * Lightweight, accessible and customizable Accordion * https://github.com/abhy12/JS-Components/blob/master/src/components/accordion#readme * * Copyright (c) Abhishek Yesankar * * Released under the GNU License * */(()=>{"use strict";var A={};A.d=(e,t)=>{for(var n in t)A.o(t,n)&&!A.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},A.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var $={};A.d($,{default:()=>gt});function N(e=8){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",n=t.length;let r="";for(let i=0;i<e;i++)r+=t.charAt(Math.floor(Math.random()*n));return r}function K(e){let t=N();for(;document.getElementById(t);)t=N();e.id=t}function h(e){return e instanceof HTMLElement}function Q(e,t,n,r){let i=[];return typeof e=="string"&&r.id?i=tt(r,t,n,e):typeof e=="string"&&!r.id?i=S(t,n,e):i=S(t),i}function Z(e,t,n){e.setAttribute(T,t),e.setAttribute("aria-expanded",`${!n}`),e.setAttribute("aria-controls",t),d(e,n)}function S(e,t=a,n=f){let r=Array.from(e.querySelectorAll(n));return r=r.filter(i=>i.closest(t)===e),r}function tt(e,t,n=a,r=f){const i=S(t,n,r),o=document.querySelectorAll(k(e.id)),s=[];return i&&i.forEach(c=>s.push(c)),o.length>0&&o.forEach(c=>s.push(c)),s}function m(e){if(I(e)||E(e))return!1;const t=e.getBoundingClientRect().height;B(e),e.style.height=t+"px",setTimeout(()=>{e.style.height="0"},5),F(e,()=>{e.style.display="none"});const n=e.closest(a);return h(n)&&d(n),e.setAttribute(W,"true"),P(e.id,!0),!0}function et(e){const t=z(e);if(t)for(let n=0;n<t.length;n++)t[n]!==e&&(E(t[n])||m(t[n]))}function D(e){if(I(e)||!E(e))return!1;at(e)!=="toggle"&&et(e);let t=0;B(e),e.style.display="",e.style.height="auto",t=e.getBoundingClientRect().height,e.style.height="0",setTimeout(()=>{e.style.height=t+"px"},0),F(e);const n=e.closest(a);return n&&d(n,!1),e.setAttribute(W,"false"),P(e.id,!1),!0}function M(e){return E(e)?D(e):m(e)}function P(e,t){document.querySelectorAll(k(e)).forEach(r=>{t?(r.setAttribute("aria-expanded","false"),d(r)):t||(r.setAttribute("aria-expanded","true"),d(r,!1))})}function q(e){if(!(e.target instanceof Element))return;const t=e.target.closest(f);if(!(t instanceof HTMLElement))return;const n=t.getAttribute(T);if(!n)return;const r=document.querySelector(`${u}#${n}`);!(r instanceof HTMLElement)||I(r)||M(r)}const l="jsc",nt=60,y=300,R="colexping",w=`${l}-initialized`,_=`data-${l}-accordion-container`,p=`[${_}]`,b=`data-${l}-accordion-item`,a=`[${b}]`,g=`data-${l}-accordion`,u=`[${g}]`,T=`data-${l}-target`,f=`[${T}]`,W="data-collapse",x=`data-accordion-${l}-type`,H=`data-${l}-duration`,rt=`--${l}-ac-duration`,G="expanded",j="collapsed",U=`data-${l}-wrapper-selector`,X=`data-${l}-accordion-selector`,J=`data-${l}-trigger-selector`;function Et(e){return e.getAttribute(_)!==null}function k(e){return`[${T}="${e}"]`}function C(e,t,n,r=void 0,i=!0){if(!h(e))return!1;const o=ot(e,t,n);if(!o)return!1;e.setAttribute(b,"true");const s=Q(r,e,t,o);return it(o,i),s.forEach(c=>{o&&o.id&&Z(c,o.id,i)}),d(e,i),!0}function it(e,t=!0){e.id===""&&K(e),e.getAttribute(g)!=="false"&&e.setAttribute(g,"true"),e.setAttribute("data-collapse",t+""),t&&(e.style.display="none")}function L(e){const t=e.closest(p);if(t instanceof HTMLElement)return t}function ot(e,t,n=u){const r=e.querySelector(n);return h(r)&&r.closest(t)===e?r:null}function st(e){const t=e.getAttribute(U);return t||a}function ct(e){const t=e.getAttribute(X);return t||g}function lt(e){const t=e.getAttribute(J);return t||f}function O(e){let t;if(e){const n=e.getAttribute(H);n!==null&&typeof+n=="number"&&+n>0&&(t=+n)}return t}function z(e){const t=e.closest(p);if(t){let n=e.parentElement;for(;n?.getAttribute(b)===null&&n!==t;)n=n.parentElement;if(n&&n.parentElement){const r=[];return n.parentElement.querySelectorAll(`:scope > ${a}`).forEach(o=>{const s=o.querySelector(u);s&&s instanceof HTMLElement&&s.closest(a)===o&&r.push(s)}),r}}return null}function E(e){return e.dataset.collapse==="true"}function B(e,t){typeof t=="function"&&t(),e.classList.add(R);let n=y;const r=L(e);if(r){const i=O(r);i&&(n=i)}e.style.transition=`height ${n}ms ease-in-out`}function F(e,t){let n=y;const r=L(e);if(r){const i=O(r);i&&(n=i)}n+=nt,setTimeout(()=>{typeof t=="function"&&t(),e.style.transition="",e.style.height="",e.classList.remove(R)},n)}function I(e){const t=z(e);if(t){for(let n=0;n<t.length;n++)if(t[n].classList.contains(R))return!0}return!1}function at(e){var t;return(t=e.closest(p))==null?void 0:t.getAttribute(x)}function v(e,t){if(Number.isInteger(t)&&t>0){const n=e.querySelector(`${a}:nth-child(${t}) ${u}`);if(n&&n instanceof HTMLElement)return n}return null}function d(e,t=!0){t?(e.classList.add(j),e.classList.remove(G)):(e.classList.add(G),e.classList.remove(j))}function V(){document.querySelectorAll(`${p}:not(.${w})`).forEach(t=>{t.querySelectorAll(a).length>0&&new Y({container:t,wrapper:a,accordion:u,trigger:f})})}function ut(){ft(),document.body.addEventListener("click",q)}function ft(){document.body.removeEventListener("click",q,!1)}const dt={subtree:!0,childList:!0},At=e=>{for(const t of e){if(!h(t.target)||t.type!=="childList")continue;const n=t.target,r=L(n);if(!r)continue;const i=st(r),o=ct(r),s=lt(r);t.addedNodes.forEach(c=>{h(c)&&(c.closest(i)===c&&C(c,i,o,s),c.querySelectorAll(i).forEach(Tt=>{C(Tt,i,o,s)}))})}},ht=new MutationObserver(At);function pt(e){ht.observe(e,dt)}class Y{constructor(t){if(this.firstElExpand=!0,this.initiated=!1,!t||!t.container)return this;let n=t.container;if(typeof n=="string"&&(n=document.querySelector(n)),!(n instanceof HTMLElement))return this;if(this.container=n,typeof t.wrapper=="string"&&t.wrapper!==""?this.wrapperSelector=t.wrapper:typeof t.accordionElWrapper=="string"&&t.accordionElWrapper!==""&&(this.wrapperSelector=t.accordionElWrapper),typeof t.accordion=="string"&&t.accordion!==""?this.accordionSelector=t.accordion:typeof t.accordionEl=="string"&&t.accordionEl!==""&&(this.accordionSelector=t.accordionEl),typeof t.trigger=="string"?this.triggerSelector=t.trigger:typeof t.button=="string"&&(this.triggerSelector=t.button),(t.firstElExpand===!1||t.firstElExpend===!1)&&(this.firstElExpand=!1),(t.toggleType==="toggle"||t.type==="toggle")&&this.container.setAttribute(x,"toggle"),typeof t.duration=="number"&&t.duration>0)this.duration=t.duration;else{const r=O(this.container);this.duration=y,r&&(this.duration=r)}this._init()}_init(){this.initiated=!0,this.container.setAttribute(_,"true"),this.container.setAttribute(H,""+this.duration),this.container.style.setProperty(rt,this.duration+"ms"),this.container.classList.add(w),pt(this.container);const t=this.wrapperSelector?this.wrapperSelector:a,n=this.container.querySelectorAll(t),r=this.accordionSelector?this.accordionSelector:u,i=[];this.container.setAttribute(U,t),this.container.setAttribute(X,r),this.container.setAttribute(J,this.triggerSelector?this.triggerSelector:f);for(let o=0;o<n.length;o++){const s=n[o];if(!s.parentElement)continue;let c;o>0&&i.includes(s.parentElement)?c=!0:(i.push(s.parentElement),c=this.firstElExpand===!1),C(s,t,r,this.triggerSelector,c)}}expand(t){if(this.container){const n=v(this.container,t);if(n)return D(n)}return!1}collapse(t){if(this.container){const n=v(this.container,t);if(n)return m(n)}return!1}toggle(t){if(this.container){const n=v(this.container,t);if(n)return M(n)}return!1}}document.readyState==="complete"||document.readyState==="interactive"?V():document.addEventListener("DOMContentLoaded",V);const gt=(()=>(ut(),Y))();window.JscAccordion=$.default})(); //# sourceMappingURL=accordion.min.js.map