https://global.invincible.com.tw/cdn/shop/t/53/assets/filterable.js?v=28619129395763690481786422211

1document.addEventListener("alpine:init",()=>{Alpine.data("Filterable",()=>({filtersOpen:!1,sortOpen:!1,filtersCache:[],price_range:null,loading:!1,focusedBeforeUpdate:null,searchParams:null,countHTML:null,filtersFormHTML:null,resultsHTML:null,drawerToggleHTML:null,afterUpdateCallback:null,isMdBreakpoint:window.isMdBreakpoint(),mdBreakpointMQL:window.mdBreakpointMQL(),clickOutside(event,property,sidebarOnDesktop){sidebarOnDesktop&&this.isMdBreakpoint||event.preventDefault(),!(event.target&&(event.target===this.$refs.filterDropDownToggle||event.target===this.$refs.sortDropDownToggle))&&(this[property]=!1)},focusOut(event,property){if(event.relatedTarget){if(event.relatedTarget===this.$refs.filterDropDownToggle||event.relatedTarget===this.$refs.sortDropDownToggle)return;event.relatedTarget.closest("[data-filterable-dropdown]")||(this[property]=!1)}},onEscape(){this.filtersOpen&&(this.filtersOpen=!1,this.$refs.filterDropDownToggle.focus()),this.sortOpen&&(this.sortOpen=!1,this.$refs.sortToggle.focus())},init(){this.isMdBreakpoint=this.mdBreakpointMQL.matches,this.mdBreakpointMQL.addEventListener("change",e=>{this.isMdBreakpoint=e.matches}),this.$root.addEventListener("baseline:filterable:open-filters",()=>{this.filtersOpen=!0}),window.addEventListener("popstate",this.onHistoryChange.bind(this)),this.$watch("sortOpen",value=>{value===!0&&this.filtersOpen===!0&&(this.filtersOpen=!1)}),this.$watch("filtersOpen",value=>{value===!0&&this.sortOpen===!0&&(this.sortOpen=!1)}),this.$watch("searchParams",this.onSearchParamsUpdate.bind(this))},async onSearchParamsUpdate(value,oldValue){if(value===oldValue)return;const updatedHTML=await fetchHTML(currentURLAddingParams([...value,["section_id",getSectionId(this.$root)]],!0));this.$root.querySelector('[data-fragment-id="count"]')&&(this.countHTML=querySelectorInHTMLString('[data-fragment-id="count"]',updatedHTML).innerHTML),this.$root.querySelector('[data-fragment-id="drawer-toggle"]')&&(this.drawerToggleHTML=querySelectorInHTMLString('[data-fragment-id="drawer-toggle"]',updatedHTML).innerHTML);const filterFormFragmentIds=["filters-form-sidebar","filters-form-filters-drop-down","filters-form-sort-drop-down","filters-form-drawer"];for(const fragmentId of filterFormFragmentIds){let fragmentEl,updatedFormFragmentEl;if(fragmentId==="filters-form-drawer"){if(fragmentEl=document.getElementById("filters-form-drawer"),!fragmentEl||(updatedFormFragmentEl=querySelectorInHTMLString(`[data-template-fragment-id="${fragmentId}"]`,updatedHTML).content.firstElementChild.querySelector(`[data-fragment-id="${fragmentId}"]`),!updatedFormFragmentEl))continue}else if(fragmentEl=this.$root.querySelector(`[data-fragment-id="${fragmentId}"]`),!fragmentEl||(updatedFormFragmentEl=querySelectorInHTMLString(`[data-fragment-id="${fragmentId}"]`,updatedHTML)||null,!updatedFormFragmentEl))continue;fragmentEl.querySelectorAll("[data-filterable-filter-fragment]").forEach(filterableFragmentEl=>{const updatedFragment=updatedFormFragmentEl.querySelector(`[data-filterable-filter-fragment="${filterableFragmentEl.getAttribute("data-filterable-filter-fragment")}"`).innerHTML;updatedFragment&&(filterableFragmentEl.innerHTML=updatedFragment)})}this.resultsHTML=querySelectorInHTMLString('[data-fragment-id="results"]',updatedHTML).innerHTML,this.afterUpdate()},afterUpdate(){if(this.focusedBeforeUpdate&&document.getElementById(this.focusedBeforeUpdate)){const target=document.getElementById(this.focusedBeforeUpdate);this.$focus.focus(target),target.tagName==="INPUT"&&target.type==="text"&&target.select(),this.focusedBeforeUpdate=null}this.historyChanged?this.historyChanged=!1:this.updateURLHash(this.searchParams),this.loading=!1,this.afterUpdateCallback&&this.$nextTick(()=>{this.afterUpdateCallback(),this.afterUpdateCallback=null})},filterFormSubmit(event){const form=event.target.closest("form");if(this.loading||!form)return;if(this.loading=!0,document.activeElement&&this.$root.contains(document.activeElement)){const targetId=document.activeElement.getAttribute("id");targetId&&(this.focusedBeforeUpdate=targetId)}const formData=new FormData(event.target.closest("form"));this.searchParams=new URLSearchParams(formData),event.target.name&&event.target.name=="sort_by"&&(this.afterUpdateCallback=()=>{this.sortOpen=!1})},clearAllFilters(){this.searchParams=new URL(this.$event.currentTarget.href).searchParams},updateURLHash(searchParams){const searchParamsString=searchParams.toString();history.pushState({searchParamsString},"",`${window.location.pathname}${searchParamsString&&"?".concat(searchParamsString)}`)},onHistoryChange(event){this.historyChanged=!0,this.searchParams=event.state.searchParams||""}}))});
2//# sourceMappingURL=/cdn/shop/t/53/assets/filterable.js.map?v=28619129395763690481786422211