diff --git a/js/accordion-blocks.js b/js/accordion-blocks.js index 75d788a..af11575 100644 --- a/js/accordion-blocks.js +++ b/js/accordion-blocks.js @@ -117,7 +117,7 @@ class AccordionItem extends HTMLElement { * @returns Boolean */ isInHash() { - return parseInt(window.location.hash.replace('#', ''), 10) === this.uuid; + return parseInt(location.hash.replace('#', ''), 10) === this.uuid; } /** @@ -204,7 +204,7 @@ class AccordionItem extends HTMLElement { setTimeout(() => { requestIdleCallback(() => { const currentPos = this.getBoundingClientRect().top; - window.scrollTo({ + scrollTo({ top: (currentPos + document.documentElement.scrollTop) - this.config.scrollOffset, behavior: 'smooth' }); @@ -253,14 +253,14 @@ class AccordionItem extends HTMLElement { * Dispatch a resize event after opening or closing the item */ triggerResize() { - window.dispatchEvent(new Event('resize')); + dispatchEvent(new Event('resize')); } } /** * Register custom elements & hashchange listener */ -if (window.customElements) { +if (typeof customElements !== 'undefined') { customElements.define('accordion-item', AccordionItem); addEventListener('hashchange', () => { diff --git a/js/accordion-blocks.min.js b/js/accordion-blocks.min.js index 033398b..0879791 100644 --- a/js/accordion-blocks.min.js +++ b/js/accordion-blocks.min.js @@ -1 +1 @@ -function _s(t,e,s,i){void 0===e&&(e=400),void 0===i&&(i=!1),t.style.overflow="hidden",i&&(t.style.display="block");var o,n=window.getComputedStyle(t),r=parseFloat(n.getPropertyValue("height")),l=parseFloat(n.getPropertyValue("padding-top")),c=parseFloat(n.getPropertyValue("padding-bottom")),a=parseFloat(n.getPropertyValue("margin-top")),h=parseFloat(n.getPropertyValue("margin-bottom")),d=r/e,p=l/e,g=c/e,u=a/e,m=h/e;window.requestAnimationFrame((function n(y){void 0===o&&(o=y),y-=o,i?(t.style.height=d*y+"px",t.style.paddingTop=p*y+"px",t.style.paddingBottom=g*y+"px",t.style.marginTop=u*y+"px",t.style.marginBottom=m*y+"px"):(t.style.height=r-d*y+"px",t.style.paddingTop=l-p*y+"px",t.style.paddingBottom=c-g*y+"px",t.style.marginTop=a-u*y+"px",t.style.marginBottom=h-m*y+"px"),e<=y?(t.style.height="",t.style.paddingTop="",t.style.paddingBottom="",t.style.marginTop="",t.style.marginBottom="",t.style.overflow="",i||(t.style.display="none"),"function"==typeof s&&s()):window.requestAnimationFrame(n)}))}HTMLElement.prototype.slideToggle=function(t,e){0===this.clientHeight?_s(this,t,e,!0):_s(this,t,e)},HTMLElement.prototype.slideUp=function(t,e){_s(this,t,e)},HTMLElement.prototype.slideDown=function(t,e){_s(this,t,e,!0)};class AccordionItem extends HTMLElement{static get defaultConfig(){return{initiallyOpen:!1,autoClose:!0,clickToClose:!0,scroll:!1,scrollOffset:!1}}static get class(){return"js-accordion-item"}static get duration(){return 250}constructor(){super(),this.toggle=this.toggle.bind(this),this.onkeydown=this.onkeydown.bind(this),this.isOpen=!1,this.uuid=parseInt(this.dataset.uuid,10),this.classList.remove("no-js"),this.ancestors=this.getAncestors(),this.siblings=this.getSiblings(),this.controller=this.querySelector(":scope > #at-"+this.uuid),this.content=this.querySelector(":scope > #ac-"+this.uuid),this.controller.addEventListener("click",this.toggle),this.controller.addEventListener("keydown",this.onkeydown),this.controller.setAttribute("tabindex",0),this.controller.setAttribute("aria-controls","#ac-"+this.uuid),this.getConfig(),this.setAttributes(this.isOpen)}getAncestors(){let t=this,e=[];for(;null!=t.parentNode&&t.parentNode!=document.documentElement;)t.parentNode.classList.contains(AccordionItem.class)&&e.push(t.parentNode),t=t.parentNode;return e}getSiblings(){const t=[];return["previous","next"].forEach((e=>{let s=this;for(;s;)s[e+"ElementSibling"]&&"ACCORDION-ITEM"===s[e+"ElementSibling"].nodeName?(s=s[e+"ElementSibling"],t.push(s)):s=null})),t}getConfig(){const t={};for(const e in this.dataset)t[e]=this.maybeParse(this.dataset[e]);this.config=Object.assign({},AccordionItem.defaultConfig,t),(this.config.initiallyOpen||this.isInHash())&&(this.isOpen=!0,this.checkAncestors())}isInHash(){return parseInt(window.location.hash.replace("#",""),10)===this.uuid}maybeParse(t){return(()=>{try{return JSON.parse(t)}catch(e){return t}})()}onkeydown(t){"Escape"===t.key&&this.close(),"Space"!==t.code&&"Enter"!==t.key||"BUTTON"!==this.controller.nodeName&&(t.preventDefault(),t.stopPropagation(),this.toggle())}open(t={}){const{skipSiblingsCheck:e}=t;this.isOpen=!0,this.content.removeAttribute("hidden"),this.content.slideDown(AccordionItem.duration,(()=>{this.setAttributes(!0),this.triggerResize()})),this.scrollToElement(),this.checkAncestors(),e||this.checkSiblings()}close(t=!1){(this.config.clickToClose||t)&&this.isOpen&&(this.isOpen=!1,this.content.slideUp(AccordionItem.duration,(()=>{this.setAttributes(!1),this.triggerResize()})))}toggle(){this[this.isOpen?"close":"open"]()}scrollToElement(){this.config.scroll&&setTimeout((()=>{requestIdleCallback((()=>{const t=this.getBoundingClientRect().top;window.scrollTo({top:t+document.documentElement.scrollTop-this.config.scrollOffset,behavior:"smooth"})}))}),AccordionItem.duration+150)}setAttributes(t=!0){t&&this.classList.add("is-read"),this.classList.toggle("is-open"),this.controller.setAttribute("aria-expanded",this.isOpen),t?this.content.removeAttribute("hidden"):this.content.setAttribute("hidden","until-found"),this.content.style=null}checkAncestors(){this.ancestors.forEach((t=>{t.isOpen||t.open({skipSiblingsCheck:!0})}))}checkSiblings(){this.siblings.forEach((t=>{t.config.autoClose&&t.close(!0)}))}triggerResize(){window.dispatchEvent(new Event("resize"))}}window.customElements&&(customElements.define("accordion-item",AccordionItem),addEventListener("hashchange",(()=>{const t=location.hash.replace("#",""),e=document.querySelector(`[data-uuid="${t}"]`);e&&e instanceof AccordionItem&&e.open()}))); +function _s(t,e,s,i){void 0===e&&(e=400),void 0===i&&(i=!1),t.style.overflow="hidden",i&&(t.style.display="block");var o,n=window.getComputedStyle(t),r=parseFloat(n.getPropertyValue("height")),l=parseFloat(n.getPropertyValue("padding-top")),c=parseFloat(n.getPropertyValue("padding-bottom")),a=parseFloat(n.getPropertyValue("margin-top")),h=parseFloat(n.getPropertyValue("margin-bottom")),d=r/e,p=l/e,g=c/e,u=a/e,m=h/e;window.requestAnimationFrame((function n(y){void 0===o&&(o=y),y-=o,i?(t.style.height=d*y+"px",t.style.paddingTop=p*y+"px",t.style.paddingBottom=g*y+"px",t.style.marginTop=u*y+"px",t.style.marginBottom=m*y+"px"):(t.style.height=r-d*y+"px",t.style.paddingTop=l-p*y+"px",t.style.paddingBottom=c-g*y+"px",t.style.marginTop=a-u*y+"px",t.style.marginBottom=h-m*y+"px"),e<=y?(t.style.height="",t.style.paddingTop="",t.style.paddingBottom="",t.style.marginTop="",t.style.marginBottom="",t.style.overflow="",i||(t.style.display="none"),"function"==typeof s&&s()):window.requestAnimationFrame(n)}))}HTMLElement.prototype.slideToggle=function(t,e){0===this.clientHeight?_s(this,t,e,!0):_s(this,t,e)},HTMLElement.prototype.slideUp=function(t,e){_s(this,t,e)},HTMLElement.prototype.slideDown=function(t,e){_s(this,t,e,!0)};class AccordionItem extends HTMLElement{static get defaultConfig(){return{initiallyOpen:!1,autoClose:!0,clickToClose:!0,scroll:!1,scrollOffset:!1}}static get class(){return"js-accordion-item"}static get duration(){return 250}constructor(){super(),this.toggle=this.toggle.bind(this),this.onkeydown=this.onkeydown.bind(this),this.isOpen=!1,this.uuid=parseInt(this.dataset.uuid,10),this.classList.remove("no-js"),this.ancestors=this.getAncestors(),this.siblings=this.getSiblings(),this.controller=this.querySelector(":scope > #at-"+this.uuid),this.content=this.querySelector(":scope > #ac-"+this.uuid),this.controller.addEventListener("click",this.toggle),this.controller.addEventListener("keydown",this.onkeydown),this.controller.setAttribute("tabindex",0),this.controller.setAttribute("aria-controls","#ac-"+this.uuid),this.getConfig(),this.setAttributes(this.isOpen)}getAncestors(){let t=this,e=[];for(;null!=t.parentNode&&t.parentNode!=document.documentElement;)t.parentNode.classList.contains(AccordionItem.class)&&e.push(t.parentNode),t=t.parentNode;return e}getSiblings(){const t=[];return["previous","next"].forEach((e=>{let s=this;for(;s;)s[e+"ElementSibling"]&&"ACCORDION-ITEM"===s[e+"ElementSibling"].nodeName?(s=s[e+"ElementSibling"],t.push(s)):s=null})),t}getConfig(){const t={};for(const e in this.dataset)t[e]=this.maybeParse(this.dataset[e]);this.config=Object.assign({},AccordionItem.defaultConfig,t),(this.config.initiallyOpen||this.isInHash())&&(this.isOpen=!0,this.checkAncestors())}isInHash(){return parseInt(location.hash.replace("#",""),10)===this.uuid}maybeParse(t){return(()=>{try{return JSON.parse(t)}catch(e){return t}})()}onkeydown(t){"Escape"===t.key&&this.close(),"Space"!==t.code&&"Enter"!==t.key||"BUTTON"!==this.controller.nodeName&&(t.preventDefault(),t.stopPropagation(),this.toggle())}open(t={}){const{skipSiblingsCheck:e}=t;this.isOpen=!0,this.content.removeAttribute("hidden"),this.content.slideDown(AccordionItem.duration,(()=>{this.setAttributes(!0),this.triggerResize()})),this.scrollToElement(),this.checkAncestors(),e||this.checkSiblings()}close(t=!1){(this.config.clickToClose||t)&&this.isOpen&&(this.isOpen=!1,this.content.slideUp(AccordionItem.duration,(()=>{this.setAttributes(!1),this.triggerResize()})))}toggle(){this[this.isOpen?"close":"open"]()}scrollToElement(){this.config.scroll&&setTimeout((()=>{requestIdleCallback((()=>{const t=this.getBoundingClientRect().top;scrollTo({top:t+document.documentElement.scrollTop-this.config.scrollOffset,behavior:"smooth"})}))}),AccordionItem.duration+150)}setAttributes(t=!0){t&&this.classList.add("is-read"),this.classList.toggle("is-open"),this.controller.setAttribute("aria-expanded",this.isOpen),t?this.content.removeAttribute("hidden"):this.content.setAttribute("hidden","until-found"),this.content.style=null}checkAncestors(){this.ancestors.forEach((t=>{t.isOpen||t.open({skipSiblingsCheck:!0})}))}checkSiblings(){this.siblings.forEach((t=>{t.config.autoClose&&t.close(!0)}))}triggerResize(){dispatchEvent(new Event("resize"))}}"undefined"!=typeof customElements&&(customElements.define("accordion-item",AccordionItem),addEventListener("hashchange",(()=>{const t=location.hash.replace("#",""),e=document.querySelector(`[data-uuid="${t}"]`);e&&e instanceof AccordionItem&&e.open()})));