https://www.studioespresso.co/frontend-studio/filter.component-Ca6M7YPL.js

1import{D as m}from"./site-TMvbJ_tI.js";import{E as b}from"./element.prototypes-CxdXTpvc.js";class g{constructor(){}static activateSerialize(){HTMLFormElement.prototype.serialize=function(){let e=[];for(let i=0;i<this.elements.length;i++){let s=this.elements[i];if(!(!s.name||s.disabled||s.type==="file"||s.type==="reset"||s.type==="submit"||s.type==="button"))if(s.type==="select-multiple")for(var t=0;t<s.options.length;t++)s.options[t].selected&&e.push(encodeURIComponent(s.name)+"="+encodeURIComponent(s.options[t].value));else(s.type!=="checkbox"&&s.type!=="radio"||s.checked)&&e.push(encodeURIComponent(s.name)+"="+encodeURIComponent(s.value))}return e.join("&")}}}class f{constructor(){}static scrollToY(e,t){const i=e.getBoundingClientRect(),s=window.pageYOffset||document.documentElement.scrollTop,l=(window.pageYOffset||document.documentElement.scrollTop)-(document.documentElement.clientTop||0),a=i.top+s-l;let n;window.requestAnimationFrame(function h(c){n||(n=c);var o=c-n,r=Math.min(o/t,1);window.scrollTo(0,l+a*r),o<t&&window.requestAnimationFrame(h)})}}g.activateSerialize();b.activateNearest();class w{constructor(e={}){const t=document.querySelectorAll("form[data-filter]");if(t.length===0){console.warn('No forms found with data-filter attribute. Please add data-filter="filterResults" to your form element.');return}t.forEach(i=>{new u(i)}),m.onDynamicContent(document.documentElement,"form[data-filter]",i=>{i.forEach(s=>{s instanceof HTMLFormElement&&new u(s)})})}}class u{constructor(e){if(this.mobileBreakpoint=819,this.scrollSpeed=500,this.scrollOnNewResults=!0,this.disableScrollOnMobile=!0,this.jsChange=new CustomEvent("jschange",{bubbles:!1,cancelable:!0}),this._fetchAbortController=null,this.formElement=e,this.formElement.addEventListener("submit",t=>{t.preventDefault(),this.getFormAction()}),this.resultsElement=document.getElementById(this.formElement.getAttribute("data-filter")),!this.resultsElement){console.warn("You must provide the id of the result block in order for the filter plugin to work.");return}if(this.mobileBreakpoint=parseInt(this.formElement.getAttribute("data-filter-mobile-breakpoint")||this.mobileBreakpoint.toString(),10),this.scrollSpeed=parseInt(this.formElement.getAttribute("data-filter-scroll-speed")||this.scrollSpeed.toString(),10),this.scrollOnNewResults=this.formElement.getAttribute("data-filter-scroll-on-new-results")!=="false"&&this.formElement.getAttribute("data-filter-scroll-on-new-results")!=="0",this.disableScrollOnMobile=this.formElement.getAttribute("data-filter-disable-scroll-on-mobile")==="true"||this.formElement.getAttribute("data-filter-disable-scroll-on-mobile")==="1",this.formElement.hasAttribute("data-filter-extra")&&(this.extraInfoElements=[],this.formElement.getAttribute("data-filter-extra").split(",").forEach(i=>{const s=document.getElementById(i.trim());s?this.extraInfoElements.push(s):console.warn(`Extra info element with id ${i.trim()} not found.`)})),this.ariaLiveElement=document.getElementById(this.formElement.getAttribute("data-filter-aria-live")),!this.ariaLiveElement){console.log("You must have an element defined in the data-filter-aria-live attribute defined in order for the filter plugin to work.");return}if(this.submitButtonElement=this.formElement.querySelector("button[type=submit]"),this.submitButtonElement&&this.initSubmitButton(),this.filterChangeElements=Array.from(this.formElement.querySelectorAll("input:not(.no-hook), select:not(.no-hook)")),this.initFilterChangeElements(this.filterChangeElements),m.onDynamicContent(this.formElement,"input:not(.no-hook), select:not(.no-hook)",t=>{this.initFilterChangeElements(Array.from(t))}),this.loaderAnimationElement=document.getElementById(this.formElement.getAttribute("data-filter-loader")),this.loaderAnimationElement&&this.initLoader(),this.filterMobileToggleButtonElement=document.getElementById(this.formElement.getAttribute("data-filter-mobile-toggle")),this.filterMobileToggleButtonElement&&(this.filterMobileCollapseElement=document.getElementById(this.formElement.getAttribute("data-filter-mobile-collapse")),this.filterMobileCollapseElement&&this.initFilterToggle()),this.formElement.hasAttribute("data-filter-clear")){const t=this.formElement.getAttribute("data-filter-clear").split(",");t.length>0&&(this.clearFilterButtonElements=[],t.forEach(i=>

1{const s=document.getElementById(i.trim());s?(this.clearFilterButtonElements.push(s),this.initClearButton(s)):console.warn(`Clear filter button with id '${i.trim()}' not found.`)}))}if(this.formElement.hasAttribute("data-filter-clear")){this.getClearButtons().forEach(i=>{this.initClearButton(i)}),this.checkClearButtonStatus();const t=this.formElement.getAttribute("data-filter-clear").split(",").map(i=>"#"+i.trim()).join(", ");m.onDynamicContent(document.documentElement,t,i=>{i.forEach(s=>{s instanceof HTMLElement&&this.initClearButton(s)})})}if(m.onDynamicContent(document.documentElement,"[data-filter-clear-elements]",t=>{t.forEach(i=>{i instanceof HTMLElement&&i.addEventListener("click",s=>{s.preventDefault();const l=JSON.parse(i.getAttribute("data-filter-clear-elements"));this.clearElements(l)})})}),this.formElement.hasAttribute("data-filter-pagination")){const t=document.querySelectorAll("#"+this.formElement.getAttribute("data-filter-pagination")+" a");this.initPagingLinks(t),m.onDynamicContent(document.documentElement,"#"+this.formElement.getAttribute("data-filter-pagination")+" a",i=>{this.initPagingLinks(i)})}this.scrollToElement=document.getElementById(this.formElement.getAttribute("data-filter-scroll-position")),this.scrollToElement||(this.scrollToElement=this.resultsElement),window.addEventListener("popstate",t=>{this.showLoading(),this.getFilterData(window.location.href,!1,!1)}),this.styleClear()}initSubmitButton(){this.submitButtonElement.addEventListener("click",e=>{e.preventDefault(),this.getFormAction()})}initFilterChangeElements(e){e.forEach(t=>{t.addEventListener("change",()=>{this.getFormAction()}),t.addEventListener("jschange",i=>{this.getFormAction()})})}initLoader(){this.loaderAnimationElement.classList.contains("hidden")||this.loaderAnimationElement.classList.add("hidden")}initFilterToggle(){this.filterMobileToggleButtonElement.setAttribute("role","button"),this.filterMobileToggleButtonElement.classList.add("open"),this.filterMobileToggleButtonElement.setAttribute("aria-expanded","true"),this.filterMobileToggleButtonElement.setAttribute("aria-controls",this.formElement.getAttribute("data-filter")+"-filterMobileCollapseArea"),this.filterMobileCollapseElement.setAttribute("id",this.formElement.getAttribute("data-filter")+"-filterMobileCollapseArea"),this.filterMobileCollapseElement.setAttribute("role","region"),window.addEventListener("resize",this.checkMobileCollapse.bind(this)),this.checkMobileCollapse(),this.filterMobileToggleButtonElement.addEventListener("click",e=>{e.preventDefault(),this.openFilterMobileToggle(this.filterMobileCollapseElement.classList.contains("hidden"))})}checkMobileCollapse(){(window.innerWidth!==this.screenWidth||!this.screenWidth)&&(this.screenWidth=window.innerWidth,this.openFilterMobileToggle(this.screenWidth>this.mobileBreakpoint))}openFilterMobileToggle(e){e?(this.filterMobileCollapseElement.classList.remove("hidden"),this.filterMobileToggleButtonElement.classList.add("open"),this.filterMobileToggleButtonElement.setAttribute("aria-expanded","true"),window.dispatchEvent(new CustomEvent("resize",{bubbles:!1,cancelable:!0}))):(this.filterMobileCollapseElement.classList.add("hidden"),this.filterMobileToggleButtonElement.classList.remove("open"),this.filterMobileToggleButtonElement.setAttribute("aria-expanded","false"))}getClearButtons(){const e=[];if(this.formElement.hasAttribute("data-filter-clear")){const t=this.formElement.getAttribute("data-filter-clear").split(",");t.length>0&&t.forEach(i=>{const s=document.getElementById(i.trim());s&&e.push(s)})}return e}initClearButton(e){e.addEventListener("click",t=>{t.preventDefault(),this.clearForm(),this.showLoading(),this.getFilterData(window.location.origin+window.location.pathname,!0)}),this.checkClearButtonStatus()}checkClearButtonStatus(){const e=new FormData(this.formElement);let t=!0;e.forEach((i,s)=>{i!==""&&i!==void 0&&(t=!1)}),this.getClearButtons().forEach(i=>{this.toggleClearButtonVisibility(i,t)})}toggleClearButtonVisibility(e,t){e&&(t?e.hasAttribute("data-always-show")||e.classList.add("hidden"):e.classList.remove("hidden"))}initPagingLinks(e){e.forEach(t=>{t instanceof HTMLAnchorElement&&t.addEventListener("click",i=>{i.preventDefault(),this.showLoading(),this.getFilterData(t.href,!1,!0)})})}getFilterData(e,t=!1,i=!0){this.getFilterTimeout&&clearTimeout(this.getFilterTimeout),this.getFilterTimeout=setTimeout(()=>{if(this.xhr&&typeof this.xhr.abort=="function"&&this.xhr.abort(),this._fetchAbortController&&this._fetchAbortController.abort(),this._fetchAbortController=new AbortController,this.scrollToStart(),t){const s=window.location.pathname.match(/([^\?\s]+\/)([p][0-9]{1,3}.?)(.*)/);s&&s[1]&&(e=s[1]+"?"+this.formElement.serialize())}this.formElement.dispatchEvent(new CustomEvent("filterFetchData",{bubbles:!1,cancelable:!0})),fetch(e,{signal:this._fetchAbortController.signal}).then(async s=>{if(!s.ok)throw new Error("Something went wrong when fetching data.");const l=await s.text(),a=document.implementation.createHTMLDocument("");a.body.innerHTML=l;const n=a.getElementById(this.formElement.getAttribute("data-filter"));if(n){this.resultsElement.innerHTML=n.innerHTML;const h=a.getElementById(this.formElement.getAttribute("data-filter-aria-live"));h&&(this.ariaLiveElement.innerHTML=h.innerHTML),i&&history.pushState("","New URL: "+e,e),this.formElement.hasAttribute("data-filter-clear")&&this.formElement.getAttribute("data-filter-clear").split(",").forEach(o=>{const r=n.querySelector("#"+o.trim());r&&this.initClearButton(r)}),this.scrollToStart(),this.hideLoading(),this.styleClear(),this.formElement.dispatchEvent(new CustomEvent("filterDataLoaded",{bubbles:!1,cancelable:!0}))}else console.error("Could not find data on returned page.");this.formElement.hasAttribute("data-filter-extra")&&this.formElement.getAttribute("data-filter-extra").split(",").forEach(c=>{const o=a.getElementById(c.trim()),r=this.extraInfoElements.find(E=>E.id===c.trim());o&&r&&(r.innerHTML=o.innerHTML)}),this.checkClearButtonStatus()}).catch(s=>{s.name!=="AbortError"&&console.error(s.message||"There was a connection error.")})},100)}scrollToStart(){this.scrollOnNewResults&&(this.scrollToElement?window.innerWidth<this.mobileBreakpoint?this.disableScrollOnMobile||f.scrollToY(this.scrollToElement,this.scrollSpeed):f.scrollToY(this.scrollToElement,this.scrollSpeed):this.loaderAnimationElement&&(window.innerWidth<this.mobileBreakpoint?this.disableScrollOnMobile||f.scrollToY(this.loaderAnimationElement,this.scrollSpeed):f.scrollToY(this.loaderAnimationElement,this.scrollSpeed)))}getFormAction(){this.showLoading();let e=this.formElement.getAttribute("action")+"?"+this.formElement.serialize();this.formElement.getAttribute("action")===""&&(e=window.location.origin+window.location.pathname+"?"+this.formElement.serialize()),this.getFilterData(e,!0)}showLoading(){this.loaderAnimationElement&&(this.loaderAnimationElement.classList.remove("hidden"),this.resultsElement.classList.add("hidden"))}hideLoading(){this.loaderAnimationElement&&(this.loaderAnimationElement.classList.add("hidden"),this.resultsElement.classList.remove("hidden"),this.ariaLiveElement.focus())}clearElements(e){e.forEach(t=>{if(t.value){const i=this.formElement.querySelector(`input[name='${t.name}'][value='${t.value}']`);if(i)i.checked=!1,this.clearElement(i);else{const s=this.formElement.querySelector(`select[name='${t.name}']`);s&&(s.type=="select-multiple"?Array.from(s.selectedOptions).forEac

1h(l=>{l.value==t.value&&(l.selected=!1)}):s.value="",this.clearElement(s))}}else{const i=this.formElement.querySelector(`input[name='${t.name}']`)??this.formElement.querySelector(`select[name='${t.name}']`);i.value="",this.clearElement(i)}}),this.getFormAction(),document.dispatchEvent(new CustomEvent("filterElementsCleared",{bubbles:!1,cancelable:!0})),this.checkClearButtonStatus()}clearElement(e){e.dispatchEvent(this.jsChange);const t=e.nearest("button[aria-haspopup]");t&&t.dispatchEvent(this.jsChange)}styleClear(){this.getClearButtons().forEach(e=>{if(e&&e.hasAttribute("data-active-class")||e.hasAttribute("data-inactive-class")){const t=e.hasAttribute("data-active-class")?e.getAttribute("data-active-class").split(" "):"",i=e.hasAttribute("data-inactive-class")?e.getAttribute("data-inactive-class").split(" "):"";this.hasActiveFilter()?(t.length>0&&e.classList.add(...t),i.length>0&&e.classList.remove(...i)):(t.length>0&&e.classList.remove(...t),i.length>0&&e.classList.add(...i))}})}hasActiveFilter(){let e=!1;return Array.from(this.formElement.elements).forEach(i=>{if(i.tagName==="INPUT"||i.tagName==="SELECT")switch((i.getAttribute("type")||"").toLowerCase()){case"text":case"password":case"textarea":case"hidden":i.getAttribute("value")!==""&&(e=!0);break;case"radio":case"checkbox":i.checked&&(e=!0);break;case"select-one":case"select-multi":i.getAttribute("selectedIndex")!=="-1"&&(e=!0);break}}),e}clearForm(){this.formElement.reset(),Array.from(this.formElement.elements).forEach(t=>{if(t.tagName==="INPUT")switch(t.getAttribute("type").toLowerCase()){case"text":case"password":case"textarea":case"hidden":t.setAttribute("value","");break;case"radio":case"checkbox":t.checked&&(t.checked=!1);break;case"select-one":case"select-multi":t.setAttribute("selectedIndex","-1"),t.setAttribute("value",""),t.dispatchEvent(this.jsChange);break}t.tagName==="SELECT"&&(t.setAttribute("selectedIndex","-1"),t.value="",t.dispatchEvent(this.jsChange)),t.tagName==="BUTTON"&&t.hasAttribute("aria-haspopup")&&t.dispatchEvent(this.jsChange),this.clearElement(t)}),document.dispatchEvent(new CustomEvent("filterFormCleared",{bubbles:!1,cancelable:!0})),this.styleClear(),this.checkClearButtonStatus()}}export{w as default};