diff --git a/dist/easy-tab-accordion.min.js b/dist/easy-tab-accordion.min.js index abe9565..793e48b 100644 --- a/dist/easy-tab-accordion.min.js +++ b/dist/easy-tab-accordion.min.js @@ -1,7 +1,7 @@ /**! - * Easy Tabs & Accordion v2.1.5 + * Easy Tabs & Accordion v2.1.6 * @author phucbm * @homepage https://github.com/viivue/easy-tab-accordion * @license MIT 2023 */ -!function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i();else if("function"==typeof define&&define.amd)define([],i);else{var e=i();for(var o in e)("object"==typeof exports?exports:t)[o]=e[o]}}(this,(()=>(()=>{"use strict";var t={d:(i,e)=>{for(var o in e)t.o(e,o)&&!t.o(i,o)&&Object.defineProperty(i,o,{enumerable:!0,get:e[o]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},i={};function e({context:t,target:i}){"auto"!==t.type&&("fade"===t.options.animation&&(i=t.wrapper),i||(i=t.wrapper),i.scrollIntoView({behavior:"smooth"}))}function o(t){const i=getComputedStyle(t);return parseInt(i.getPropertyValue("margin-top")+i.getPropertyValue("margin-bottom"),10)}function n(t){return t.scrollHeight+o(t)+"px"}function s(t,i){Object.assign(t.style,i)}function r(t,i){s(t,{transitionProperty:"height, margin, padding, opacity",transitionDuration:i+"ms",overflow:"hidden"})}function a(t){s(t,{overflow:"",transitionProperty:"",transitionDuration:"",boxSizing:"",paddingTop:"",paddingBottom:"",marginTop:"",marginBottom:""})}function l(t=""){return t+(+new Date).toString(16)+(1e8*Math.random()|0).toString(16)}function c(t,i){return!!t.dataset.filter((t=>t.id===i)).length}function h(t,i){return i>=0&&ii?t.options.receiver:t.options.trigger,o=i=>i?t.options.receiverAttr:t.options.triggerAttr;if(i){return{previous:t.wrapper.querySelectorAll(`${e(!0)}:not([${o(!0)}="${i}"])`),current:t.wrapper.querySelectorAll(`[${o(!0)}="${i}"]`),previousTrigger:t.wrapper.querySelectorAll(`${e(!1)}:not([${o(!1)}="${i}"])`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}="${i}"]`)}}return{current:t.wrapper.querySelectorAll(`[${o(!0)}]`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}]`)}}function d(t,i){return t.dataset.findIndex((t=>t.id===i))}function u(t,i){return t.dataset[i].id}function f(t,i){const{current:e,currentTrigger:o}=p(t,i);e.forEach((i=>i.classList.remove(t._class.active))),o.forEach((i=>i.classList.remove(t._class.active)))}function g(t,i,...e){t.options.dev&&console?.[i](...e)}function m(t,i){i||(i=t.options||t.config||{});const e=["duration","activeSection"],o=t.wrapper;let n=o.getAttribute(t._attr.container),s={};if(!n||!function(t){try{return JSON.parse(t)&&!!t}catch(t){return!1}}(n))s={...i},s.id=n||"";else{s=JSON.parse(n);for(const[t,i]of Object.entries(s))"false"===i?s[t]=!1:"true"===i?s[t]=!0:e.includes(t)&&"string"==typeof i&&i.length>0?s[t]=parseFloat(i):s[t]=i}const r=s.id||o.id||i.id;return t.id=r,s.id=r,s={...i,...s},s}function v(t,i=500,e){r(t,i),s(t,{opacity:"0",visibility:"hidden"}),setTimeout((()=>{a(t),"function"==typeof e&&e()}),i)}function w(t,i=500,e){r(t,i),r(t.parentElement,i),s(t,{opacity:"1",visibility:"visible"}),s(t.parentElement,{height:`${t.scrollHeight+o(t)}px`}),setTimeout((()=>{a(t),a(t.parentElement),"function"==typeof e&&e()}),i)}function y(t=document.location){const i=new URL(t),e=i.hash.indexOf("?"),o=e>-1?i.hash.slice(0,e):i.hash;return{data:i,hash:o,id:o.slice(1)}}function b(t,i){E(t)&&A(t)!==t.enabled&&(t.enabled=A(t),t.enabled?t.init():t.destroy())}function A(t){return window.innerWidth<=t.options.liveBreakpoint[0]&&window.innerWidth>=t.options.liveBreakpoint[1]&&E(t)}function E(t){let i=function(t,i=!0){return t.sort((function(t,e){return i?t-e:e-t}))}(t.options.liveBreakpoint,!1);return i=i.slice(0,2),2===i.length}function S(t){t.options.onBeforeInit(t),t.hasInitialized=!0,t.wrapper.classList.add(t._class.enabled),t.wrapper.querySelectorAll(t.options.trigger).forEach((i=>{i.addEventListener("click",(i=>function(t,i){t.options.isPreventDefault&&i.preventDefault();i.stopPropagation();const e=i.target.getAttribute(t.options.triggerAttr)||i.target.closest(t.options.trigger).getAttribute(t.options.triggerAttr);t.toggle(e,"manual")}(t,i))),i.classList.add(t._class.hasAssignedTriggerEvent)})),t.dataset=[],t.wrapper.querySelectorAll(t.options.receiver).forEach((i=>{const e=i.getAttribute(t.options.receiverAttr);if(t.dataset.push({id:e,el:i,active:!1}),"fade"===t.options.animation){s(i.parentElement,{overflow:"hidden",position:"relative"!==getComputedStyle(i).position?"relative":""});const t={position:(()=>"absolute"!==getComputedStyle(i).position?"absolute":"")(),inset:"0 0 auto"};setTimeout((()=>{s(i,t)}),1)}})),function(t){document.querySelectorAll('a[href^="#"]').forEach((i=>{const e=i.getAttribute("href"),o="#"===e[0]?e.slice(1):y(e).id;o&&t.dataset.forEach((e=>{if(e.id===o){if(i.classList.contains(t._class.hasAssignedTriggerEvent))return;i.addEventListener("click",(i=>{t.options.isPreventDefault&&i.preventDefault(),t.toggle(o,"manual")}))}}))}))}(t),t.options.onAfterInit(t)}t.r(i),t.d(i,{EasyTabAccordion:()=>T});class T{constructor(t){this._class={enabled:"easy-tab-accordion-enabled",active:"active",hasAssignedTriggerEvent:"assigned-trigger-event"},this._attr={container:"data-eta",trigger:"data-eta-trigger",receiver:"data-eta-receiver",hash:"data-eta-hash",hashScroll:"data-eta-hash-scroll",animation:"data-eta-animation"},this.defaultOptions={el:document.querySelector(`[${this._attr.container}]`),id:l("eta-"),trigger:`[${this._attr.trigger}]`,triggerAttr:this._attr.trigger,receiver:`[${this._attr.receiver}]`,receiverAttr:this._attr.receiver,activeClass:this._class.active,animation:"slide",duration:450,scrollIntoView:!1,hash:!1,hashScroll:!1,liveBreakpoint:[],avoidDoubleClick:!0,dev:!1,activeSection:0,allowCollapseAll:!1,allowExpandAll:!1,isPreventDefault:!0,onBeforeInit:t=>{},onAfterInit:t=>{},onBeforeOpen:(t,i)=>{},onBeforeClose:(t,i)=>{},onAfterOpen:(t,i)=>{},onAfterClose:(t,i)=>{},onDestroy:t=>{},onUpdate:t=>{}},this.originalOptions=t,this.init(),this.isAnimating=!1}init(){if(this.options={...this.defaultOptions,...this.originalOptions},!this.options.el)return void g(this,"warn","ETA Error, target not found!");if(this.wrapper=this.options.el,this.id="",this.current_id="",this.previous_id="",this.type="",this.hasInitialized=!1,this.enabled=!E(this)||A(this),this.count=this.wrapper.querySelectorAll(this.options.trigger).length,this.wrapper.classList.contains(this._class.enabled))return void g(this,"ETA has initialized");this.isFirst=!0,this.options.hash=!0===this.wrapper.hasAttribute(this._attr.hash)||this.options.hash,this.options.hashScroll=!0===this.wrapper.hasAttribute(this._attr.hashScroll)||this.options.hashScroll;const t=this.wrapper.getAttribute(this._attr.animation);this.options.animation=null!==t?t:this.options.animation,this.options=m(this),this.wrapper.setAttribute(this._attr.container,this.id),this.count<1?g(this,"warn","Quit init due to child panels not found",this):(this.enabled&&!this.hasInitialized&&S(this),!this.enabled&&this.hasInitialized&&this.destroy(),this.enabled&&(function(t){const i=y(),e=i.hash,o=i.id;return t.options.hash&&e.length&&t.dataset.filter((t=>t.id===o)).length}(this)?this.toggle(y().id,"hash"):function(t){let i=[];const e=t.options.activeSection;switch(t.options.animation){case"slide":switch(typeof e){case"number":i.push(e);break;case"object":t.options.allowExpandAll&&"slide"===t.options.animation?i=e.filter((function(t,i,e){return e.indexOf(t)===i})):i.push(e[0])}break;case"fade":switch(typeof e){case"number":i.push(h(t,e)?e:0);break;case"object":const o=e[0];i.push(h(t,o)?o:0)}}i.forEach((i=>{h(t,i)&&t.toggle(u(t,i),"auto")})),t.dataset.filter((t=>!t.active)).forEach((i=>t.closePanel(i.id)))}(this)),window.addEventListener("resize",function(t,i=150){let e;return(...o)=>{clearTimeout(e),e=setTimeout((()=>{t.apply(this,o)}),i)}}((t=>{return(i=this).update(),void b(i);var i}),300)),window.addEventListener("load",(t=>{return(i=this).update(),void b(i);var i})))}destroy(){switch(this.hasInitialized=!1,this.wrapper.classList.remove(this._class.enabled),this.wrapper.querySelectorAll(this.options.trigger).forEach((t=>{t.outerHTML=`${t.outerHTML}`})),this.dataset=[],this.options.animation){case"slide":(t=this).wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{display:"",height:""}),a(t)})),f(t);break;case"fade":!function(t){t.wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{opacity:"",visibility:"",position:"",inset:""}),s(t.parentElement,{height:"",position:""}),a(t),a(t.parentElement)})),f(t)}(this)}var t;this.options.onDestroy(this)}update(){switch(this.options.animation){case"slide":break;case"fade":(t=this).dataset.forEach((i=>{const e=i.el,o=t.options.duration;i.active&&w(e,o),i.active||v(e,o)}))}var t;this.options.onUpdate(this)}openPanel(t=this.current_id){if(!c(this,t))return;(()=>{this.dataset[d(this,t)].active=!0,function(t,i){if(!t.options.hash||"manual"!==t.type)return;const e=document.location.origin+document.location.pathname;document.location=e+"#"+i}(this,t),this.options.onBeforeOpen(this)})();const i=i=>{var o;"hash"===(o=this).type&&o.options.hashScroll&&window.addEventListener("load",(()=>setTimeout((()=>e({context:o})),100))),this.options.scrollIntoView&&e({context:this,target:i}),this.isAnimating=!1,g(this,"log","Stop animation."),this.options.onAfterOpen(this,i),g(this,"log","after open",t)},{current:o}=p(this,t);switch(this.options.animation){case"slide":o.forEach((t=>function(t,i=500,e){0!==parseInt(n(t))&&"none"!==t.style.display.trim()||(s(t,{boxSizing:"border-box",height:"0px",display:"block"}),r(t,i)),setTimeout((()=>{s(t,{height:n(t),marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""})}),10),setTimeout((()=>{a(t),s(t,{height:""}),"function"==typeof e&&e()}),i+10)}(t,this.options.duration,(()=>i(t)))));break;case"fade":o.forEach((t=>w(t,this.options.duration,(()=>i(t)))))}!function(t,i){const{current:e,currentTrigger:o}=p(t,i||t.current_id);e&&e.forEach((i=>i.classList.add(t._class.active))),o&&o.forEach((i=>i.classList.add(t._class.active)))}(this,t);("fade"===this.options.animation||"slide"===this.options.animation&&!this.options.allowExpandAll)&&this.dataset.filter((i=>i.id!==t)).forEach((t=>{(t.active||this.isFirst)&&this.closePanel(t.id)})),this.isFirst&&(o[0].style.display="block",this.isFirst=!1)}closePanel(t=this.current_id){if(!c(this,t))return;this.options.onBeforeClose(this),this.dataset[d(this,t)].active=!1;const i=i=>{this.options.onAfterClose(this,i),this.isAnimating=!1,g(this,"log","Stop animation."),g(this,"log","after close",t)},{current:e}=p(this,t);switch(this.options.animation){case"slide":e.forEach((t=>function(t,i=500,e){const o=n(t);"0px"!==o?(s(t,{boxSizing:"border-box",height:o}),r(t,i),setTimeout((()=>{s(t,{height:"0px",marginTop:"0px",marginBottom:"0px",paddingTop:"0px",paddingBottom:"0px"})}),10),setTimeout((()=>{s(t,{display:"none",height:""}),a(t),"function"==typeof e&&e()}),i+10)):"function"==typeof e&&e()}(t,this.options.duration,(()=>i(t)))));break;case"fade":e.forEach((t=>v(t,this.options.duration,(()=>i(t)))))}f(this,t)}toggle(t,i="undefined",e=!1){if(!c(this,t))return void g(this,"warn","invalid id");const o=function(t,i){if(!c(t,i))return!1;if(t.options.avoidDoubleClick&&t.isAnimating)return g(t,"warn",`Block [${i}] to avoid double click on animating item.`),0;const e=t.dataset[d(t,i)].active,o="slide"===t.options.animation&&t.options.allowCollapseAll;return e&&o?-1:e&&!o?0:!e&&o?1:e||o?e?1:-1:1}(this,t);0!==o&&(this.isAnimating=!0,g(this,"log","Start animation."),this.type=i,this.previous_id=this.current_id?this.current_id:u(this,0),1===o?(this.current_id=t,this.openPanel(this.current_id)):this.closePanel(t))}toggleByIndex(t){this.toggle(u(this,t))}}return window.ETAController=new class{constructor(){this.instances=[]}add(t){this.instances.push(t)}get(t){return this.instances.filter((i=>i.id===t))[0]}},window.ETA={init:t=>{void 0===t&&document.querySelectorAll("[data-eta]").forEach((i=>{window.ETAController.add(new T({el:i,...t}))})),window.ETAController.add(new T(t))},get:t=>window.ETAController.get(t)},window.ETA.init(),i})())); \ No newline at end of file +!function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i();else if("function"==typeof define&&define.amd)define([],i);else{var e=i();for(var o in e)("object"==typeof exports?exports:t)[o]=e[o]}}(this,(()=>(()=>{"use strict";var t={d:(i,e)=>{for(var o in e)t.o(e,o)&&!t.o(i,o)&&Object.defineProperty(i,o,{enumerable:!0,get:e[o]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},i={};function e({context:t,target:i}){"auto"!==t.type&&("fade"===t.options.animation&&(i=t.wrapper),i||(i=t.wrapper),i.scrollIntoView({behavior:"smooth"}))}function o(t){const i=getComputedStyle(t);return parseInt(i.getPropertyValue("margin-top")+i.getPropertyValue("margin-bottom"),10)}function n(t){return t.scrollHeight+o(t)+"px"}function s(t,i){Object.assign(t.style,i)}function r(t,i){s(t,{transitionProperty:"height, margin, padding, opacity",transitionDuration:i+"ms",overflow:"hidden"})}function a(t){s(t,{boxSizing:"",paddingTop:"",paddingBottom:"",marginTop:"",marginBottom:""})}function l(t=""){return t+(+new Date).toString(16)+(1e8*Math.random()|0).toString(16)}function c(t,i){return!!t.dataset.filter((t=>t.id===i)).length}function h(t,i){return i>=0&&ii?t.options.receiver:t.options.trigger,o=i=>i?t.options.receiverAttr:t.options.triggerAttr;if(i){return{previous:t.wrapper.querySelectorAll(`${e(!0)}:not([${o(!0)}="${i}"])`),current:t.wrapper.querySelectorAll(`[${o(!0)}="${i}"]`),previousTrigger:t.wrapper.querySelectorAll(`${e(!1)}:not([${o(!1)}="${i}"])`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}="${i}"]`)}}return{current:t.wrapper.querySelectorAll(`[${o(!0)}]`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}]`)}}function d(t,i){return t.dataset.findIndex((t=>t.id===i))}function u(t,i){return t.dataset[i].id}function f(t,i){const{current:e,currentTrigger:o}=p(t,i);e.forEach((i=>i.classList.remove(t._class.active))),o.forEach((i=>i.classList.remove(t._class.active)))}function g(t,i,...e){t.options.dev&&console?.[i](...e)}function m(t,i){i||(i=t.options||t.config||{});const e=["duration","activeSection"],o=t.wrapper;let n=o.getAttribute(t._attr.container),s={};if(!n||!function(t){try{return JSON.parse(t)&&!!t}catch(t){return!1}}(n))s={...i},s.id=n||"";else{s=JSON.parse(n);for(const[t,i]of Object.entries(s))"false"===i?s[t]=!1:"true"===i?s[t]=!0:e.includes(t)&&"string"==typeof i&&i.length>0?s[t]=parseFloat(i):s[t]=i}const r=s.id||o.id||i.id;return t.id=r,s.id=r,s={...i,...s},s}function v(t,i=500,e){s(t,{opacity:"0",visibility:"hidden"}),setTimeout((()=>{a(t),"function"==typeof e&&e()}),i)}function w(t,i=500,e){r(t.parentElement,i),s(t,{opacity:"1",visibility:"visible"}),s(t.parentElement,{height:`${t.scrollHeight+o(t)}px`}),setTimeout((()=>{a(t),a(t.parentElement),"function"==typeof e&&e()}),i)}function y(t=document.location){const i=new URL(t),e=i.hash.indexOf("?"),o=e>-1?i.hash.slice(0,e):i.hash;return{data:i,hash:o,id:o.slice(1)}}function b(t,i){E(t)&&A(t)!==t.enabled&&(t.enabled=A(t),t.enabled?t.init():t.destroy())}function A(t){return window.innerWidth<=t.options.liveBreakpoint[0]&&window.innerWidth>=t.options.liveBreakpoint[1]&&E(t)}function E(t){let i=function(t,i=!0){return t.sort((function(t,e){return i?t-e:e-t}))}(t.options.liveBreakpoint,!1);return i=i.slice(0,2),2===i.length}function S(t){t.options.onBeforeInit(t),t.hasInitialized=!0,t.wrapper.classList.add(t._class.enabled),t.wrapper.querySelectorAll(t.options.trigger).forEach((i=>{i.addEventListener("click",(i=>function(t,i){t.options.isPreventDefault&&i.preventDefault();i.stopPropagation();const e=i.target.getAttribute(t.options.triggerAttr)||i.target.closest(t.options.trigger).getAttribute(t.options.triggerAttr);t.toggle(e,"manual")}(t,i))),i.classList.add(t._class.hasAssignedTriggerEvent)})),t.dataset=[],t.wrapper.querySelectorAll(t.options.receiver).forEach((i=>{const e=i.getAttribute(t.options.receiverAttr);if(t.dataset.push({id:e,el:i,active:!1}),"fade"===t.options.animation){s(i.parentElement,{overflow:"hidden",position:"relative"!==getComputedStyle(i).position?"relative":""});const t={position:(()=>"absolute"!==getComputedStyle(i).position?"absolute":"")(),inset:"0 0 auto"};setTimeout((()=>{s(i,t)}),1)}r(i,t.options.duration)})),function(t){document.querySelectorAll('a[href^="#"]').forEach((i=>{const e=i.getAttribute("href"),o="#"===e[0]?e.slice(1):y(e).id;o&&t.dataset.forEach((e=>{if(e.id===o){if(i.classList.contains(t._class.hasAssignedTriggerEvent))return;i.addEventListener("click",(i=>{t.options.isPreventDefault&&i.preventDefault(),t.toggle(o,"manual")}))}}))}))}(t),t.options.onAfterInit(t)}t.r(i),t.d(i,{EasyTabAccordion:()=>T});class T{constructor(t){this._class={enabled:"easy-tab-accordion-enabled",active:"active",hasAssignedTriggerEvent:"assigned-trigger-event"},this._attr={container:"data-eta",trigger:"data-eta-trigger",receiver:"data-eta-receiver",hash:"data-eta-hash",hashScroll:"data-eta-hash-scroll",animation:"data-eta-animation"},this.defaultOptions={el:document.querySelector(`[${this._attr.container}]`),id:l("eta-"),trigger:`[${this._attr.trigger}]`,triggerAttr:this._attr.trigger,receiver:`[${this._attr.receiver}]`,receiverAttr:this._attr.receiver,activeClass:this._class.active,animation:"slide",duration:450,scrollIntoView:!1,hash:!1,hashScroll:!1,liveBreakpoint:[],avoidDoubleClick:!0,dev:!1,activeSection:0,allowCollapseAll:!1,allowExpandAll:!1,isPreventDefault:!0,onBeforeInit:t=>{},onAfterInit:t=>{},onBeforeOpen:(t,i)=>{},onBeforeClose:(t,i)=>{},onAfterOpen:(t,i)=>{},onAfterClose:(t,i)=>{},onDestroy:t=>{},onUpdate:t=>{}},this.originalOptions=t,this.init(),this.isAnimating=!1}init(){if(this.options={...this.defaultOptions,...this.originalOptions},!this.options.el)return void g(this,"warn","ETA Error, target not found!");if(this.wrapper=this.options.el,this.id="",this.current_id="",this.previous_id="",this.type="",this.hasInitialized=!1,this.enabled=!E(this)||A(this),this.count=this.wrapper.querySelectorAll(this.options.trigger).length,this.wrapper.classList.contains(this._class.enabled))return void g(this,"ETA has initialized");this.isFirst=!0,this.options.hash=!0===this.wrapper.hasAttribute(this._attr.hash)||this.options.hash,this.options.hashScroll=!0===this.wrapper.hasAttribute(this._attr.hashScroll)||this.options.hashScroll;const t=this.wrapper.getAttribute(this._attr.animation);this.options.animation=null!==t?t:this.options.animation,this.options=m(this),this.wrapper.setAttribute(this._attr.container,this.id),this.count<1?g(this,"warn","Quit init due to child panels not found",this):(this.enabled&&!this.hasInitialized&&S(this),!this.enabled&&this.hasInitialized&&this.destroy(),this.enabled&&(function(t){const i=y(),e=i.hash,o=i.id;return t.options.hash&&e.length&&t.dataset.filter((t=>t.id===o)).length}(this)?this.toggle(y().id,"hash"):function(t){let i=[];const e=t.options.activeSection;switch(t.options.animation){case"slide":switch(typeof e){case"number":i.push(e);break;case"object":t.options.allowExpandAll&&"slide"===t.options.animation?i=e.filter((function(t,i,e){return e.indexOf(t)===i})):i.push(e[0])}break;case"fade":switch(typeof e){case"number":i.push(h(t,e)?e:0);break;case"object":const o=e[0];i.push(h(t,o)?o:0)}}i.forEach((i=>{h(t,i)&&t.toggle(u(t,i),"auto")})),t.dataset.filter((t=>!t.active)).forEach((i=>t.closePanel(i.id)))}(this)),window.addEventListener("resize",function(t,i=150){let e;return(...o)=>{clearTimeout(e),e=setTimeout((()=>{t.apply(this,o)}),i)}}((t=>{return(i=this).update(),void b(i);var i}),300)),window.addEventListener("load",(t=>{return(i=this).update(),void b(i);var i})))}destroy(){switch(this.hasInitialized=!1,this.wrapper.classList.remove(this._class.enabled),this.wrapper.querySelectorAll(this.options.trigger).forEach((t=>{t.outerHTML=`${t.outerHTML}`})),this.dataset=[],this.options.animation){case"slide":(t=this).wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{display:"",height:""}),a(t)})),f(t);break;case"fade":!function(t){t.wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{opacity:"",visibility:"",position:"",inset:""}),s(t.parentElement,{height:"",position:""}),a(t),a(t.parentElement)})),f(t)}(this)}var t;this.options.onDestroy(this)}update(){switch(this.options.animation){case"slide":break;case"fade":(t=this).dataset.forEach((i=>{const e=i.el,o=t.options.duration;i.active&&w(e,o),i.active||v(e,o)}))}var t;this.options.onUpdate(this)}openPanel(t=this.current_id){if(!c(this,t))return;(()=>{this.dataset[d(this,t)].active=!0,function(t,i){if(!t.options.hash||"manual"!==t.type)return;const e=document.location.origin+document.location.pathname;document.location=e+"#"+i}(this,t),this.options.onBeforeOpen(this)})();const i=i=>{var o;"hash"===(o=this).type&&o.options.hashScroll&&window.addEventListener("load",(()=>setTimeout((()=>e({context:o})),100))),this.options.scrollIntoView&&e({context:this,target:i}),this.isAnimating=!1,g(this,"log","Stop animation."),this.options.onAfterOpen(this,i),g(this,"log","after open",t)},{current:o}=p(this,t);switch(this.options.animation){case"slide":o.forEach((t=>function(t,i=500,e){0!==parseInt(n(t))&&"none"!==t.style.display.trim()||s(t,{boxSizing:"border-box",height:"0px",display:"block"}),setTimeout((()=>{s(t,{height:n(t),marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""})}),10),setTimeout((()=>{a(t),s(t,{height:""}),"function"==typeof e&&e()}),i+10)}(t,this.options.duration,(()=>i(t)))));break;case"fade":o.forEach((t=>w(t,this.options.duration,(()=>i(t)))))}!function(t,i){const{current:e,currentTrigger:o}=p(t,i||t.current_id);e&&e.forEach((i=>i.classList.add(t._class.active))),o&&o.forEach((i=>i.classList.add(t._class.active)))}(this,t);("fade"===this.options.animation||"slide"===this.options.animation&&!this.options.allowExpandAll)&&this.dataset.filter((i=>i.id!==t)).forEach((t=>{(t.active||this.isFirst)&&this.closePanel(t.id)})),this.isFirst&&(o[0].style.display="block",this.isFirst=!1)}closePanel(t=this.current_id){if(!c(this,t))return;this.options.onBeforeClose(this),this.dataset[d(this,t)].active=!1;const i=i=>{this.options.onAfterClose(this,i),this.isAnimating=!1,g(this,"log","Stop animation."),g(this,"log","after close",t)},{current:e}=p(this,t);switch(this.options.animation){case"slide":e.forEach((t=>function(t,i=500,e){const o=n(t);"0px"!==o?(s(t,{boxSizing:"border-box",height:o}),setTimeout((()=>{s(t,{height:"0px",marginTop:"0px",marginBottom:"0px",paddingTop:"0px",paddingBottom:"0px"})}),10),setTimeout((()=>{s(t,{display:"none",height:""}),a(t),"function"==typeof e&&e()}),i+10)):"function"==typeof e&&e()}(t,this.options.duration,(()=>i(t)))));break;case"fade":e.forEach((t=>v(t,this.options.duration,(()=>i(t)))))}f(this,t)}toggle(t,i="undefined",e=!1){if(!c(this,t))return void g(this,"warn","invalid id");const o=function(t,i){if(!c(t,i))return!1;if(t.options.avoidDoubleClick&&t.isAnimating)return g(t,"warn",`Block [${i}] to avoid double click on animating item.`),0;const e=t.dataset[d(t,i)].active,o="slide"===t.options.animation&&t.options.allowCollapseAll;return e&&o?-1:e&&!o?0:!e&&o?1:e||o?e?1:-1:1}(this,t);0!==o&&(this.isAnimating=!0,g(this,"log","Start animation."),this.type=i,this.previous_id=this.current_id?this.current_id:u(this,0),1===o?(this.current_id=t,this.openPanel(this.current_id)):this.closePanel(t))}toggleByIndex(t){this.toggle(u(this,t))}}return window.ETAController=new class{constructor(){this.instances=[]}add(t){this.instances.push(t)}get(t){return this.instances.filter((i=>i.id===t))[0]}},window.ETA={init:t=>{void 0===t&&document.querySelectorAll("[data-eta]").forEach((i=>{window.ETAController.add(new T({el:i,...t}))})),window.ETAController.add(new T(t))},get:t=>window.ETAController.get(t)},window.ETA.init(),i})())); \ No newline at end of file diff --git a/dist/easy-tab-accordion.module.js b/dist/easy-tab-accordion.module.js index 032dfcf..3cea93f 100644 --- a/dist/easy-tab-accordion.module.js +++ b/dist/easy-tab-accordion.module.js @@ -1,6 +1,6 @@ /**! - * Easy Tabs & Accordion v2.1.5 + * Easy Tabs & Accordion v2.1.6 * @author phucbm * @homepage https://github.com/viivue/easy-tab-accordion * @license MIT 2023 - */var t={d:(i,e)=>{for(var o in e)t.o(e,o)&&!t.o(i,o)&&Object.defineProperty(i,o,{enumerable:!0,get:e[o]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i)},i={};function e({context:t,target:i}){"auto"!==t.type&&("fade"===t.options.animation&&(i=t.wrapper),i||(i=t.wrapper),i.scrollIntoView({behavior:"smooth"}))}function o(t){const i=getComputedStyle(t);return parseInt(i.getPropertyValue("margin-top")+i.getPropertyValue("margin-bottom"),10)}function n(t){return t.scrollHeight+o(t)+"px"}function s(t,i){Object.assign(t.style,i)}function r(t,i){s(t,{transitionProperty:"height, margin, padding, opacity",transitionDuration:i+"ms",overflow:"hidden"})}function a(t){s(t,{overflow:"",transitionProperty:"",transitionDuration:"",boxSizing:"",paddingTop:"",paddingBottom:"",marginTop:"",marginBottom:""})}function l(t=""){return t+(+new Date).toString(16)+(1e8*Math.random()|0).toString(16)}function c(t,i){return!!t.dataset.filter((t=>t.id===i)).length}function h(t,i){return i>=0&&ii?t.options.receiver:t.options.trigger,o=i=>i?t.options.receiverAttr:t.options.triggerAttr;if(i){return{previous:t.wrapper.querySelectorAll(`${e(!0)}:not([${o(!0)}="${i}"])`),current:t.wrapper.querySelectorAll(`[${o(!0)}="${i}"]`),previousTrigger:t.wrapper.querySelectorAll(`${e(!1)}:not([${o(!1)}="${i}"])`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}="${i}"]`)}}return{current:t.wrapper.querySelectorAll(`[${o(!0)}]`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}]`)}}function d(t,i){return t.dataset.findIndex((t=>t.id===i))}function u(t,i){return t.dataset[i].id}function g(t,i){const{current:e,currentTrigger:o}=p(t,i);e.forEach((i=>i.classList.remove(t._class.active))),o.forEach((i=>i.classList.remove(t._class.active)))}function f(t,i,...e){t.options.dev&&console?.[i](...e)}function v(t,i){i||(i=t.options||t.config||{});const e=["duration","activeSection"],o=t.wrapper;let n=o.getAttribute(t._attr.container),s={};if(!n||!function(t){try{return JSON.parse(t)&&!!t}catch(t){return!1}}(n))s={...i},s.id=n||"";else{s=JSON.parse(n);for(const[t,i]of Object.entries(s))"false"===i?s[t]=!1:"true"===i?s[t]=!0:e.includes(t)&&"string"==typeof i&&i.length>0?s[t]=parseFloat(i):s[t]=i}const r=s.id||o.id||i.id;return t.id=r,s.id=r,s={...i,...s},s}function m(t,i=500,e){r(t,i),s(t,{opacity:"0",visibility:"hidden"}),setTimeout((()=>{a(t),"function"==typeof e&&e()}),i)}function w(t,i=500,e){r(t,i),r(t.parentElement,i),s(t,{opacity:"1",visibility:"visible"}),s(t.parentElement,{height:`${t.scrollHeight+o(t)}px`}),setTimeout((()=>{a(t),a(t.parentElement),"function"==typeof e&&e()}),i)}function y(t=document.location){const i=new URL(t),e=i.hash.indexOf("?"),o=e>-1?i.hash.slice(0,e):i.hash;return{data:i,hash:o,id:o.slice(1)}}function b(t,i){E(t)&&A(t)!==t.enabled&&(t.enabled=A(t),t.enabled?t.init():t.destroy())}function A(t){return window.innerWidth<=t.options.liveBreakpoint[0]&&window.innerWidth>=t.options.liveBreakpoint[1]&&E(t)}function E(t){let i=function(t,i=!0){return t.sort((function(t,e){return i?t-e:e-t}))}(t.options.liveBreakpoint,!1);return i=i.slice(0,2),2===i.length}function S(t){t.options.onBeforeInit(t),t.hasInitialized=!0,t.wrapper.classList.add(t._class.enabled),t.wrapper.querySelectorAll(t.options.trigger).forEach((i=>{i.addEventListener("click",(i=>function(t,i){t.options.isPreventDefault&&i.preventDefault();i.stopPropagation();const e=i.target.getAttribute(t.options.triggerAttr)||i.target.closest(t.options.trigger).getAttribute(t.options.triggerAttr);t.toggle(e,"manual")}(t,i))),i.classList.add(t._class.hasAssignedTriggerEvent)})),t.dataset=[],t.wrapper.querySelectorAll(t.options.receiver).forEach((i=>{const e=i.getAttribute(t.options.receiverAttr);if(t.dataset.push({id:e,el:i,active:!1}),"fade"===t.options.animation){s(i.parentElement,{overflow:"hidden",position:"relative"!==getComputedStyle(i).position?"relative":""});const t={position:(()=>"absolute"!==getComputedStyle(i).position?"absolute":"")(),inset:"0 0 auto"};setTimeout((()=>{s(i,t)}),1)}})),function(t){document.querySelectorAll('a[href^="#"]').forEach((i=>{const e=i.getAttribute("href"),o="#"===e[0]?e.slice(1):y(e).id;o&&t.dataset.forEach((e=>{if(e.id===o){if(i.classList.contains(t._class.hasAssignedTriggerEvent))return;i.addEventListener("click",(i=>{t.options.isPreventDefault&&i.preventDefault(),t.toggle(o,"manual")}))}}))}))}(t),t.options.onAfterInit(t)}t.d(i,{v:()=>T});class T{constructor(t){this._class={enabled:"easy-tab-accordion-enabled",active:"active",hasAssignedTriggerEvent:"assigned-trigger-event"},this._attr={container:"data-eta",trigger:"data-eta-trigger",receiver:"data-eta-receiver",hash:"data-eta-hash",hashScroll:"data-eta-hash-scroll",animation:"data-eta-animation"},this.defaultOptions={el:document.querySelector(`[${this._attr.container}]`),id:l("eta-"),trigger:`[${this._attr.trigger}]`,triggerAttr:this._attr.trigger,receiver:`[${this._attr.receiver}]`,receiverAttr:this._attr.receiver,activeClass:this._class.active,animation:"slide",duration:450,scrollIntoView:!1,hash:!1,hashScroll:!1,liveBreakpoint:[],avoidDoubleClick:!0,dev:!1,activeSection:0,allowCollapseAll:!1,allowExpandAll:!1,isPreventDefault:!0,onBeforeInit:t=>{},onAfterInit:t=>{},onBeforeOpen:(t,i)=>{},onBeforeClose:(t,i)=>{},onAfterOpen:(t,i)=>{},onAfterClose:(t,i)=>{},onDestroy:t=>{},onUpdate:t=>{}},this.originalOptions=t,this.init(),this.isAnimating=!1}init(){if(this.options={...this.defaultOptions,...this.originalOptions},!this.options.el)return void f(this,"warn","ETA Error, target not found!");if(this.wrapper=this.options.el,this.id="",this.current_id="",this.previous_id="",this.type="",this.hasInitialized=!1,this.enabled=!E(this)||A(this),this.count=this.wrapper.querySelectorAll(this.options.trigger).length,this.wrapper.classList.contains(this._class.enabled))return void f(this,"ETA has initialized");this.isFirst=!0,this.options.hash=!0===this.wrapper.hasAttribute(this._attr.hash)||this.options.hash,this.options.hashScroll=!0===this.wrapper.hasAttribute(this._attr.hashScroll)||this.options.hashScroll;const t=this.wrapper.getAttribute(this._attr.animation);this.options.animation=null!==t?t:this.options.animation,this.options=v(this),this.wrapper.setAttribute(this._attr.container,this.id),this.count<1?f(this,"warn","Quit init due to child panels not found",this):(this.enabled&&!this.hasInitialized&&S(this),!this.enabled&&this.hasInitialized&&this.destroy(),this.enabled&&(function(t){const i=y(),e=i.hash,o=i.id;return t.options.hash&&e.length&&t.dataset.filter((t=>t.id===o)).length}(this)?this.toggle(y().id,"hash"):function(t){let i=[];const e=t.options.activeSection;switch(t.options.animation){case"slide":switch(typeof e){case"number":i.push(e);break;case"object":t.options.allowExpandAll&&"slide"===t.options.animation?i=e.filter((function(t,i,e){return e.indexOf(t)===i})):i.push(e[0])}break;case"fade":switch(typeof e){case"number":i.push(h(t,e)?e:0);break;case"object":const o=e[0];i.push(h(t,o)?o:0)}}i.forEach((i=>{h(t,i)&&t.toggle(u(t,i),"auto")})),t.dataset.filter((t=>!t.active)).forEach((i=>t.closePanel(i.id)))}(this)),window.addEventListener("resize",function(t,i=150){let e;return(...o)=>{clearTimeout(e),e=setTimeout((()=>{t.apply(this,o)}),i)}}((t=>{return(i=this).update(),void b(i);var i}),300)),window.addEventListener("load",(t=>{return(i=this).update(),void b(i);var i})))}destroy(){switch(this.hasInitialized=!1,this.wrapper.classList.remove(this._class.enabled),this.wrapper.querySelectorAll(this.options.trigger).forEach((t=>{t.outerHTML=`${t.outerHTML}`})),this.dataset=[],this.options.animation){case"slide":(t=this).wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{display:"",height:""}),a(t)})),g(t);break;case"fade":!function(t){t.wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{opacity:"",visibility:"",position:"",inset:""}),s(t.parentElement,{height:"",position:""}),a(t),a(t.parentElement)})),g(t)}(this)}var t;this.options.onDestroy(this)}update(){switch(this.options.animation){case"slide":break;case"fade":(t=this).dataset.forEach((i=>{const e=i.el,o=t.options.duration;i.active&&w(e,o),i.active||m(e,o)}))}var t;this.options.onUpdate(this)}openPanel(t=this.current_id){if(!c(this,t))return;(()=>{this.dataset[d(this,t)].active=!0,function(t,i){if(!t.options.hash||"manual"!==t.type)return;const e=document.location.origin+document.location.pathname;document.location=e+"#"+i}(this,t),this.options.onBeforeOpen(this)})();const i=i=>{var o;"hash"===(o=this).type&&o.options.hashScroll&&window.addEventListener("load",(()=>setTimeout((()=>e({context:o})),100))),this.options.scrollIntoView&&e({context:this,target:i}),this.isAnimating=!1,f(this,"log","Stop animation."),this.options.onAfterOpen(this,i),f(this,"log","after open",t)},{current:o}=p(this,t);switch(this.options.animation){case"slide":o.forEach((t=>function(t,i=500,e){0!==parseInt(n(t))&&"none"!==t.style.display.trim()||(s(t,{boxSizing:"border-box",height:"0px",display:"block"}),r(t,i)),setTimeout((()=>{s(t,{height:n(t),marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""})}),10),setTimeout((()=>{a(t),s(t,{height:""}),"function"==typeof e&&e()}),i+10)}(t,this.options.duration,(()=>i(t)))));break;case"fade":o.forEach((t=>w(t,this.options.duration,(()=>i(t)))))}!function(t,i){const{current:e,currentTrigger:o}=p(t,i||t.current_id);e&&e.forEach((i=>i.classList.add(t._class.active))),o&&o.forEach((i=>i.classList.add(t._class.active)))}(this,t);("fade"===this.options.animation||"slide"===this.options.animation&&!this.options.allowExpandAll)&&this.dataset.filter((i=>i.id!==t)).forEach((t=>{(t.active||this.isFirst)&&this.closePanel(t.id)})),this.isFirst&&(o[0].style.display="block",this.isFirst=!1)}closePanel(t=this.current_id){if(!c(this,t))return;this.options.onBeforeClose(this),this.dataset[d(this,t)].active=!1;const i=i=>{this.options.onAfterClose(this,i),this.isAnimating=!1,f(this,"log","Stop animation."),f(this,"log","after close",t)},{current:e}=p(this,t);switch(this.options.animation){case"slide":e.forEach((t=>function(t,i=500,e){const o=n(t);"0px"!==o?(s(t,{boxSizing:"border-box",height:o}),r(t,i),setTimeout((()=>{s(t,{height:"0px",marginTop:"0px",marginBottom:"0px",paddingTop:"0px",paddingBottom:"0px"})}),10),setTimeout((()=>{s(t,{display:"none",height:""}),a(t),"function"==typeof e&&e()}),i+10)):"function"==typeof e&&e()}(t,this.options.duration,(()=>i(t)))));break;case"fade":e.forEach((t=>m(t,this.options.duration,(()=>i(t)))))}g(this,t)}toggle(t,i="undefined",e=!1){if(!c(this,t))return void f(this,"warn","invalid id");const o=function(t,i){if(!c(t,i))return!1;if(t.options.avoidDoubleClick&&t.isAnimating)return f(t,"warn",`Block [${i}] to avoid double click on animating item.`),0;const e=t.dataset[d(t,i)].active,o="slide"===t.options.animation&&t.options.allowCollapseAll;return e&&o?-1:e&&!o?0:!e&&o?1:e||o?e?1:-1:1}(this,t);0!==o&&(this.isAnimating=!0,f(this,"log","Start animation."),this.type=i,this.previous_id=this.current_id?this.current_id:u(this,0),1===o?(this.current_id=t,this.openPanel(this.current_id)):this.closePanel(t))}toggleByIndex(t){this.toggle(u(this,t))}}window.ETAController=new class{constructor(){this.instances=[]}add(t){this.instances.push(t)}get(t){return this.instances.filter((i=>i.id===t))[0]}},window.ETA={init:t=>{void 0===t&&document.querySelectorAll("[data-eta]").forEach((i=>{window.ETAController.add(new T({el:i,...t}))})),window.ETAController.add(new T(t))},get:t=>window.ETAController.get(t)},window.ETA.init();var _=i.v;export{_ as EasyTabAccordion}; \ No newline at end of file + */var t={d:(i,e)=>{for(var o in e)t.o(e,o)&&!t.o(i,o)&&Object.defineProperty(i,o,{enumerable:!0,get:e[o]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i)},i={};function e({context:t,target:i}){"auto"!==t.type&&("fade"===t.options.animation&&(i=t.wrapper),i||(i=t.wrapper),i.scrollIntoView({behavior:"smooth"}))}function o(t){const i=getComputedStyle(t);return parseInt(i.getPropertyValue("margin-top")+i.getPropertyValue("margin-bottom"),10)}function n(t){return t.scrollHeight+o(t)+"px"}function s(t,i){Object.assign(t.style,i)}function r(t,i){s(t,{transitionProperty:"height, margin, padding, opacity",transitionDuration:i+"ms",overflow:"hidden"})}function a(t){s(t,{boxSizing:"",paddingTop:"",paddingBottom:"",marginTop:"",marginBottom:""})}function c(t=""){return t+(+new Date).toString(16)+(1e8*Math.random()|0).toString(16)}function l(t,i){return!!t.dataset.filter((t=>t.id===i)).length}function h(t,i){return i>=0&&ii?t.options.receiver:t.options.trigger,o=i=>i?t.options.receiverAttr:t.options.triggerAttr;if(i){return{previous:t.wrapper.querySelectorAll(`${e(!0)}:not([${o(!0)}="${i}"])`),current:t.wrapper.querySelectorAll(`[${o(!0)}="${i}"]`),previousTrigger:t.wrapper.querySelectorAll(`${e(!1)}:not([${o(!1)}="${i}"])`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}="${i}"]`)}}return{current:t.wrapper.querySelectorAll(`[${o(!0)}]`),currentTrigger:t.wrapper.querySelectorAll(`[${o(!1)}]`)}}function d(t,i){return t.dataset.findIndex((t=>t.id===i))}function u(t,i){return t.dataset[i].id}function g(t,i){const{current:e,currentTrigger:o}=p(t,i);e.forEach((i=>i.classList.remove(t._class.active))),o.forEach((i=>i.classList.remove(t._class.active)))}function f(t,i,...e){t.options.dev&&console?.[i](...e)}function v(t,i){i||(i=t.options||t.config||{});const e=["duration","activeSection"],o=t.wrapper;let n=o.getAttribute(t._attr.container),s={};if(!n||!function(t){try{return JSON.parse(t)&&!!t}catch(t){return!1}}(n))s={...i},s.id=n||"";else{s=JSON.parse(n);for(const[t,i]of Object.entries(s))"false"===i?s[t]=!1:"true"===i?s[t]=!0:e.includes(t)&&"string"==typeof i&&i.length>0?s[t]=parseFloat(i):s[t]=i}const r=s.id||o.id||i.id;return t.id=r,s.id=r,s={...i,...s},s}function m(t,i=500,e){s(t,{opacity:"0",visibility:"hidden"}),setTimeout((()=>{a(t),"function"==typeof e&&e()}),i)}function w(t,i=500,e){r(t.parentElement,i),s(t,{opacity:"1",visibility:"visible"}),s(t.parentElement,{height:`${t.scrollHeight+o(t)}px`}),setTimeout((()=>{a(t),a(t.parentElement),"function"==typeof e&&e()}),i)}function y(t=document.location){const i=new URL(t),e=i.hash.indexOf("?"),o=e>-1?i.hash.slice(0,e):i.hash;return{data:i,hash:o,id:o.slice(1)}}function b(t,i){E(t)&&A(t)!==t.enabled&&(t.enabled=A(t),t.enabled?t.init():t.destroy())}function A(t){return window.innerWidth<=t.options.liveBreakpoint[0]&&window.innerWidth>=t.options.liveBreakpoint[1]&&E(t)}function E(t){let i=function(t,i=!0){return t.sort((function(t,e){return i?t-e:e-t}))}(t.options.liveBreakpoint,!1);return i=i.slice(0,2),2===i.length}function S(t){t.options.onBeforeInit(t),t.hasInitialized=!0,t.wrapper.classList.add(t._class.enabled),t.wrapper.querySelectorAll(t.options.trigger).forEach((i=>{i.addEventListener("click",(i=>function(t,i){t.options.isPreventDefault&&i.preventDefault();i.stopPropagation();const e=i.target.getAttribute(t.options.triggerAttr)||i.target.closest(t.options.trigger).getAttribute(t.options.triggerAttr);t.toggle(e,"manual")}(t,i))),i.classList.add(t._class.hasAssignedTriggerEvent)})),t.dataset=[],t.wrapper.querySelectorAll(t.options.receiver).forEach((i=>{const e=i.getAttribute(t.options.receiverAttr);if(t.dataset.push({id:e,el:i,active:!1}),"fade"===t.options.animation){s(i.parentElement,{overflow:"hidden",position:"relative"!==getComputedStyle(i).position?"relative":""});const t={position:(()=>"absolute"!==getComputedStyle(i).position?"absolute":"")(),inset:"0 0 auto"};setTimeout((()=>{s(i,t)}),1)}r(i,t.options.duration)})),function(t){document.querySelectorAll('a[href^="#"]').forEach((i=>{const e=i.getAttribute("href"),o="#"===e[0]?e.slice(1):y(e).id;o&&t.dataset.forEach((e=>{if(e.id===o){if(i.classList.contains(t._class.hasAssignedTriggerEvent))return;i.addEventListener("click",(i=>{t.options.isPreventDefault&&i.preventDefault(),t.toggle(o,"manual")}))}}))}))}(t),t.options.onAfterInit(t)}t.d(i,{v:()=>T});class T{constructor(t){this._class={enabled:"easy-tab-accordion-enabled",active:"active",hasAssignedTriggerEvent:"assigned-trigger-event"},this._attr={container:"data-eta",trigger:"data-eta-trigger",receiver:"data-eta-receiver",hash:"data-eta-hash",hashScroll:"data-eta-hash-scroll",animation:"data-eta-animation"},this.defaultOptions={el:document.querySelector(`[${this._attr.container}]`),id:c("eta-"),trigger:`[${this._attr.trigger}]`,triggerAttr:this._attr.trigger,receiver:`[${this._attr.receiver}]`,receiverAttr:this._attr.receiver,activeClass:this._class.active,animation:"slide",duration:450,scrollIntoView:!1,hash:!1,hashScroll:!1,liveBreakpoint:[],avoidDoubleClick:!0,dev:!1,activeSection:0,allowCollapseAll:!1,allowExpandAll:!1,isPreventDefault:!0,onBeforeInit:t=>{},onAfterInit:t=>{},onBeforeOpen:(t,i)=>{},onBeforeClose:(t,i)=>{},onAfterOpen:(t,i)=>{},onAfterClose:(t,i)=>{},onDestroy:t=>{},onUpdate:t=>{}},this.originalOptions=t,this.init(),this.isAnimating=!1}init(){if(this.options={...this.defaultOptions,...this.originalOptions},!this.options.el)return void f(this,"warn","ETA Error, target not found!");if(this.wrapper=this.options.el,this.id="",this.current_id="",this.previous_id="",this.type="",this.hasInitialized=!1,this.enabled=!E(this)||A(this),this.count=this.wrapper.querySelectorAll(this.options.trigger).length,this.wrapper.classList.contains(this._class.enabled))return void f(this,"ETA has initialized");this.isFirst=!0,this.options.hash=!0===this.wrapper.hasAttribute(this._attr.hash)||this.options.hash,this.options.hashScroll=!0===this.wrapper.hasAttribute(this._attr.hashScroll)||this.options.hashScroll;const t=this.wrapper.getAttribute(this._attr.animation);this.options.animation=null!==t?t:this.options.animation,this.options=v(this),this.wrapper.setAttribute(this._attr.container,this.id),this.count<1?f(this,"warn","Quit init due to child panels not found",this):(this.enabled&&!this.hasInitialized&&S(this),!this.enabled&&this.hasInitialized&&this.destroy(),this.enabled&&(function(t){const i=y(),e=i.hash,o=i.id;return t.options.hash&&e.length&&t.dataset.filter((t=>t.id===o)).length}(this)?this.toggle(y().id,"hash"):function(t){let i=[];const e=t.options.activeSection;switch(t.options.animation){case"slide":switch(typeof e){case"number":i.push(e);break;case"object":t.options.allowExpandAll&&"slide"===t.options.animation?i=e.filter((function(t,i,e){return e.indexOf(t)===i})):i.push(e[0])}break;case"fade":switch(typeof e){case"number":i.push(h(t,e)?e:0);break;case"object":const o=e[0];i.push(h(t,o)?o:0)}}i.forEach((i=>{h(t,i)&&t.toggle(u(t,i),"auto")})),t.dataset.filter((t=>!t.active)).forEach((i=>t.closePanel(i.id)))}(this)),window.addEventListener("resize",function(t,i=150){let e;return(...o)=>{clearTimeout(e),e=setTimeout((()=>{t.apply(this,o)}),i)}}((t=>{return(i=this).update(),void b(i);var i}),300)),window.addEventListener("load",(t=>{return(i=this).update(),void b(i);var i})))}destroy(){switch(this.hasInitialized=!1,this.wrapper.classList.remove(this._class.enabled),this.wrapper.querySelectorAll(this.options.trigger).forEach((t=>{t.outerHTML=`${t.outerHTML}`})),this.dataset=[],this.options.animation){case"slide":(t=this).wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{display:"",height:""}),a(t)})),g(t);break;case"fade":!function(t){t.wrapper.querySelectorAll(t.options.receiver).forEach((t=>{s(t,{opacity:"",visibility:"",position:"",inset:""}),s(t.parentElement,{height:"",position:""}),a(t),a(t.parentElement)})),g(t)}(this)}var t;this.options.onDestroy(this)}update(){switch(this.options.animation){case"slide":break;case"fade":(t=this).dataset.forEach((i=>{const e=i.el,o=t.options.duration;i.active&&w(e,o),i.active||m(e,o)}))}var t;this.options.onUpdate(this)}openPanel(t=this.current_id){if(!l(this,t))return;(()=>{this.dataset[d(this,t)].active=!0,function(t,i){if(!t.options.hash||"manual"!==t.type)return;const e=document.location.origin+document.location.pathname;document.location=e+"#"+i}(this,t),this.options.onBeforeOpen(this)})();const i=i=>{var o;"hash"===(o=this).type&&o.options.hashScroll&&window.addEventListener("load",(()=>setTimeout((()=>e({context:o})),100))),this.options.scrollIntoView&&e({context:this,target:i}),this.isAnimating=!1,f(this,"log","Stop animation."),this.options.onAfterOpen(this,i),f(this,"log","after open",t)},{current:o}=p(this,t);switch(this.options.animation){case"slide":o.forEach((t=>function(t,i=500,e){0!==parseInt(n(t))&&"none"!==t.style.display.trim()||s(t,{boxSizing:"border-box",height:"0px",display:"block"}),setTimeout((()=>{s(t,{height:n(t),marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""})}),10),setTimeout((()=>{a(t),s(t,{height:""}),"function"==typeof e&&e()}),i+10)}(t,this.options.duration,(()=>i(t)))));break;case"fade":o.forEach((t=>w(t,this.options.duration,(()=>i(t)))))}!function(t,i){const{current:e,currentTrigger:o}=p(t,i||t.current_id);e&&e.forEach((i=>i.classList.add(t._class.active))),o&&o.forEach((i=>i.classList.add(t._class.active)))}(this,t);("fade"===this.options.animation||"slide"===this.options.animation&&!this.options.allowExpandAll)&&this.dataset.filter((i=>i.id!==t)).forEach((t=>{(t.active||this.isFirst)&&this.closePanel(t.id)})),this.isFirst&&(o[0].style.display="block",this.isFirst=!1)}closePanel(t=this.current_id){if(!l(this,t))return;this.options.onBeforeClose(this),this.dataset[d(this,t)].active=!1;const i=i=>{this.options.onAfterClose(this,i),this.isAnimating=!1,f(this,"log","Stop animation."),f(this,"log","after close",t)},{current:e}=p(this,t);switch(this.options.animation){case"slide":e.forEach((t=>function(t,i=500,e){const o=n(t);"0px"!==o?(s(t,{boxSizing:"border-box",height:o}),setTimeout((()=>{s(t,{height:"0px",marginTop:"0px",marginBottom:"0px",paddingTop:"0px",paddingBottom:"0px"})}),10),setTimeout((()=>{s(t,{display:"none",height:""}),a(t),"function"==typeof e&&e()}),i+10)):"function"==typeof e&&e()}(t,this.options.duration,(()=>i(t)))));break;case"fade":e.forEach((t=>m(t,this.options.duration,(()=>i(t)))))}g(this,t)}toggle(t,i="undefined",e=!1){if(!l(this,t))return void f(this,"warn","invalid id");const o=function(t,i){if(!l(t,i))return!1;if(t.options.avoidDoubleClick&&t.isAnimating)return f(t,"warn",`Block [${i}] to avoid double click on animating item.`),0;const e=t.dataset[d(t,i)].active,o="slide"===t.options.animation&&t.options.allowCollapseAll;return e&&o?-1:e&&!o?0:!e&&o?1:e||o?e?1:-1:1}(this,t);0!==o&&(this.isAnimating=!0,f(this,"log","Start animation."),this.type=i,this.previous_id=this.current_id?this.current_id:u(this,0),1===o?(this.current_id=t,this.openPanel(this.current_id)):this.closePanel(t))}toggleByIndex(t){this.toggle(u(this,t))}}window.ETAController=new class{constructor(){this.instances=[]}add(t){this.instances.push(t)}get(t){return this.instances.filter((i=>i.id===t))[0]}},window.ETA={init:t=>{void 0===t&&document.querySelectorAll("[data-eta]").forEach((i=>{window.ETAController.add(new T({el:i,...t}))})),window.ETAController.add(new T(t))},get:t=>window.ETAController.get(t)},window.ETA.init();var _=i.v;export{_ as EasyTabAccordion}; \ No newline at end of file diff --git a/package.json b/package.json index 3072545..eecf963 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@viivue/easy-tab-accordion", "filename": "easy-tab-accordion", "prettyName": "Easy Tabs & Accordion", - "version": "2.1.5", + "version": "2.1.6", "description": "Javascript library to create tabs or accordion.", "homepage": "https://github.com/viivue/easy-tab-accordion", "repository": { diff --git a/src/animation.js b/src/animation.js index 8965177..958d6de 100644 --- a/src/animation.js +++ b/src/animation.js @@ -79,9 +79,6 @@ export function setTransition(target, duration){ */ export function removeTransition(target){ setCSS(target, { - overflow: '', - transitionProperty: '', - transitionDuration: '', boxSizing: '', paddingTop: '', paddingBottom: '', diff --git a/src/fade.js b/src/fade.js index 70b7ef8..395b899 100644 --- a/src/fade.js +++ b/src/fade.js @@ -10,9 +10,6 @@ import {getElementMarginHeight, removeTransition, setCSS, setTransition} from ". * @since 1.0.0 */ export function fadeOut(target, duration = 500, fn){ - // before - setTransition(target, duration); - // animate setCSS(target, { opacity: '0', @@ -38,7 +35,6 @@ export function fadeOut(target, duration = 500, fn){ */ export function fadeIn(target, duration = 500, fn){ // before - setTransition(target, duration); setTransition(target.parentElement, duration); // animate diff --git a/src/methods.js b/src/methods.js index dd3f394..f936edb 100644 --- a/src/methods.js +++ b/src/methods.js @@ -1,5 +1,5 @@ import {responsive} from "./responsive"; -import {setCSS} from "./animation"; +import {setCSS, setTransition} from "./animation"; import {getHash} from "./hash"; export function initSetup(context){ @@ -44,6 +44,8 @@ export function initSetup(context){ setCSS(el, styleObj); }, 1); } + + setTransition(el, context.options.duration); }); assignTriggerElements(context); diff --git a/src/slide.js b/src/slide.js index 931cd3a..3952acb 100644 --- a/src/slide.js +++ b/src/slide.js @@ -1,4 +1,4 @@ -import {setCSS, setTransition, removeTransition, getElementHeight} from "./animation"; +import {setCSS, removeTransition, getElementHeight} from "./animation"; import {removeActiveClass} from "./helpers"; @@ -23,7 +23,6 @@ export function slideUp(target, duration = 500, fn){ boxSizing: 'border-box', height }); - setTransition(target, duration); // animate (set 10ms delay for CSS transition take effect) setTimeout(() => { @@ -67,7 +66,6 @@ export function slideDown(target, duration = 500, fn){ height: '0px', display: 'block' }); - setTransition(target, duration); } // animate (set 10ms delay for CSS transition take effect)