1class FacetFiltersForm extends HTMLElement{constructor(){super(),this.onActiveFilterClick=this.onActiveFilterClick.bind(this),this.debouncedOnSubmit=debounce(event=>{this.onSubmitHandler(event)},500),this.querySelector("form").addEventListener("input",this.debouncedOnSubmit.bind(this));const facetWrapper=this.querySelector("#FacetsWrapperDesktop");facetWrapper&&facetWrapper.addEventListener("keyup",onKeyUpEscape)}static setListeners(){const onHistoryChange=event=>{const searchParams=event.state?event.state.searchParams:FacetFiltersForm.searchParamsInitial;searchParams!==FacetFiltersForm.searchParamsPrev&&FacetFiltersForm.renderPage(searchParams,null,!1)};window.addEventListener("popstate",onHistoryChange)}static setModelFacetRemoveUrl(event,url){const params=url.searchParams;params.delete("filter.v.option.model"),params.delete("filter.v.option.brand"),event.target.href=url.href}static getPhoneModels(model,activeModel="",brandName=""){return`<li class="mobile-facets__item list-menu__item"><label 2for="${model}" 3class="mobile-facets__label"><input 4class="model-filter" 5type="radio" 6name="filter.v.option.model" 7value="${model}" 8data-brand="${brandName}" 9id="${model}" 10${model==activeModel?"checked":""}><span aria-hidden="true">${model}</span></label></li>`}static getActiveParams(){const searchParams=new URLSearchParams(window.location.href),modelValue=searchParams.get("filter.v.option.model")?searchParams.get("filter.v.option.model"):"",selectedBrandValue=searchParams.get("filter.v.option.brand")?searchParams.get("filter.v.option.brand"):"",collectionValues=searchParams.getAll("filter.p.m.custom.collection").length>0?searchParams.getAll("filter.p.m.custom.collection"):[],clearanceValue=searchParams.get("filter.p.m.custom.sale")?"Clearance":"",phoneCaseType=searchParams.get("filter.p.m.global.prod_subtype")?searchParams.get("filter.p.m.global.prod_subtype"):"";return{model:modelValue,brand:selectedBrandValue,collection:collectionValues,clearance:clearanceValue,caseType:phoneCaseType}}static closeBrandSubmenu(){document.querySelector(".mobile-facets__main").classList.remove("submenu-open");const facetForm=document.querySelector(".mobile-facets__disclosure");facetForm.classList.remove("menu-opening"),facetForm.removeAttribute("open"),document.querySelector("body.gradient").classList.remove("overflow-hidden-mobile")}static addBrandClickEvent(){document.querySelectorAll("#brandName").forEach(brandElement=>{brandElement.addEventListener("click",()=>{FacetFiltersForm.createPhoneModelsList(brandElement.innerText)})})}static hideBrandOption(){const phoneBrandListRef=document.querySelector(".brand-model-list");phoneBrandListRef&&Array.from(phoneBrandListRef.querySelectorAll("li.brand-item")).filter(item=>item.className.includes("hide-brand-facet")).length==phoneBrandListRef.children.length&&(phoneBrandListRef.innerHTML="")}static createPhoneCoverFilters(){FacetFiltersForm.addBrandClickEvent(),FacetFiltersForm.hideBrandOption();const activeParams=FacetFiltersForm.getActiveParams();if(activeParams.brand)return document.querySelectorAll(".brand-item").forEach(item=>item.classList.remove("hide-brand-facet")),FacetFiltersForm.createPhoneModelsList(activeParams.brand,activeParams.model,activeParams.collection,activeParams.clearance),activeParams;FacetFiltersForm.showBrands()}static async createPhoneModelsList(brand="",model="",collectionList=[],clearance=""){const modelsListRef=document.getElementById("phoneModelsList"),brandsListRef=document.getElementById("phoneCoverBrandsList"),spinnerRef=modelsListRef.querySelector(".loading-spinner"),backBtn=modelsListRef.querySelector("#modelBackBtn");backBtn.style.display="none";const activeParams=FacetFiltersForm.getActiveParams();let brandName=brand||activeParams.brand;const titleRef=modelsListRef.querySelector("#phoneBrandTitle");titleRef.innerText=brandName,brandsListRef.style.display="none",modelsListRef.style.display="flex",spinnerRef.style.display="block";let modelName=model||activeParams.model,clearanceValue=clearance||activeParams.clearance,collection=collectionList.length>0?collectionList.join("|"):activeParams.collection.join("|");const collectionData={"Solids & Gradients":"Solids and Gradients","Stripes & Patterns":"Stripes and Patterns","Travel & Space":"Travel and Space","Worst Designer":"Worst Designer Ever"};collection in collectionData&&(collection=collectionData[collection]);let collectionType=document.getElementById("filterForm").getAttribute("data-collection-type").toLowerCase().replaceAll(" ","-");if(brandName){let caseType=activeParams.caseType;
10const caseTypeMap={"Clear Case":"Crystal Clear Transparent Case","Glass Case":"Premium Glass Case","Hard Case":"Slim Hard Case","Impact Case":"Impact Drop Protection Case"};caseType in caseTypeMap&&(caseType=caseTypeMap[caseType]),getModelsList(brandName,collection,collectionType,clearanceValue,caseType).then(modelsList=>{let modelsRef=modelsList.map(model2=>FacetFiltersForm.getPhoneModels(model2.value,modelName,brandName)).join("");const phoneModelsListRef=modelsListRef.querySelector(".phones-models-list");phoneModelsListRef.innerHTML=modelsRef,spinnerRef.style.display="none",backBtn.style.display="flex",backBtn.addEventListener("click",()=>{FacetFiltersForm.showBrands()}),document.querySelector(".apply-filter").addEventListener("click",()=>{FacetFiltersForm.closeBrandSubmenu()})})}}static showBrands(){const modelsListRef=document.getElementById("phoneModelsList"),brandsListRef=document.getElementById("phoneCoverBrandsList");brandsListRef.style.display="flex",modelsListRef.style.display="none",modelsListRef.querySelector(".phones-models-list").innerHTML=""}static toggleActiveFacets(disable=!0){document.querySelectorAll(".js-facet-remove").forEach(element=>{element.classList.toggle("disabled",disable)})}static renderPage(searchParams,event,updateURLHash=!0){FacetFiltersForm.searchParamsPrev=searchParams;const sections=FacetFiltersForm.getSections(),countContainer=document.getElementById("ProductCount"),countContainerDesktop=document.getElementById("ProductCountDesktop");document.getElementById("ProductGridContainer").querySelector(".collection").classList.add("loading"),countContainer&&countContainer.classList.add("loading"),countContainerDesktop&&countContainerDesktop.classList.add("loading"),sections.forEach(section=>{const url=`${window.location.pathname}?section_id=${section.section}&${searchParams}`,filterDataUrl=element=>element.url===url;FacetFiltersForm.filterData.some(filterDataUrl)?FacetFiltersForm.renderSectionFromCache(filterDataUrl,event):FacetFiltersForm.renderSectionFromFetch(url,event)}),updateURLHash&&FacetFiltersForm.updateURLHash(searchParams)}static renderSectionFromFetch(url,event){fetch(url).then(response=>response.text()).then(responseText=>{const html=responseText;FacetFiltersForm.filterData=[...FacetFiltersForm.filterData,{html,url}],FacetFiltersForm.renderFilters(html,event),FacetFiltersForm.renderProductGridContainer(html)})}static renderSectionFromCache(filterDataUrl,event){const html=FacetFiltersForm.filterData.find(filterDataUrl).html;FacetFiltersForm.renderFilters(html,event),FacetFiltersForm.renderProductGridContainer(html)}static renderProductGridContainer(html){document.getElementById("ProductGridContainer").innerHTML=new DOMParser().parseFromString(html,"text/html").getElementById("ProductGridContainer").innerHTML,syncWishlistButton(),window.scrollTo(0,0)}static renderFilters(html,event){const parsedHTML=new DOMParser().parseFromString(html,"text/html"),facetDetailsElements=parsedHTML.querySelectorAll("#FacetFiltersForm .js-filter, #FacetFiltersFormMobile .js-filter, #categoryForm .js-filter, #onSaleForm .js-filter,#FacetFiltersPillsForm .js-filter"),matchesIndex=element=>{const jsFilter=event?event.target.closest(".js-filter"):void 0;return jsFilter?element.dataset.index===jsFilter.dataset.index:!1};let facetsToRender;event?.target.className.includes("model-filter")?facetsToRender=Array.from(facetDetailsElements).filter(element=>!element.querySelector("#phoneCoverBrandsList")&&!matchesIndex(element)):facetsToRender=Array.from(facetDetailsElements).filter(element=>!matchesIndex(element));const countsToRender=Array.from(facetDetailsElements).find(matchesIndex);if(facetsToRender.forEach(element=>{document.querySelector(`.js-filter[data-index="${element.dataset.index}"]`).innerHTML=element.innerHTML}),!event?.target.className.includes("model-filter")){const facetFilterParams=FacetFiltersForm.getActiveParams();facetFilterParams.model&&facetFilterParams.brand&&document.querySelectorAll(".brand-item").forEach(item=>item.classList.remove("hide-brand-facet")),FacetFiltersForm.addBrandClickEvent(),FacetFiltersForm.hideBrandOption()}FacetFiltersForm.renderActiveFacets(parsedHTML),FacetFiltersForm.renderAdditionalElements(parsedHTML),countsToRender&&FacetFiltersForm.renderCounts(countsToRender,event.target.closest(".
10js-filter"))}static renderActiveFacets(html){[".active-facets-mobile",".active-facets-desktop"].forEach(selector=>{const activeFacetsElement=html.querySelector(selector);activeFacetsElement&&(document.querySelector(selector).innerHTML=activeFacetsElement.innerHTML)}),FacetFiltersForm.toggleActiveFacets(!1)}static renderAdditionalElements(html){[".mobile-facets__open",".mobile-facets__count",".sorting"].forEach(selector=>{html.querySelector(selector)&&(document.querySelector(selector).innerHTML=html.querySelector(selector).innerHTML)}),document.getElementById("FacetFiltersFormMobile").closest("menu-drawer").bindEvents()}static renderCounts(source,target){const targetElement=target.querySelector(".facets__selected"),sourceElement=source.querySelector(".facets__selected"),targetElementAccessibility=target.querySelector(".facets__summary"),sourceElementAccessibility=source.querySelector(".facets__summary");sourceElement&&targetElement&&(target.querySelector(".facets__selected").outerHTML=source.querySelector(".facets__selected").outerHTML),targetElementAccessibility&&sourceElementAccessibility&&(target.querySelector(".facets__summary").outerHTML=source.querySelector(".facets__summary").outerHTML)}static updateURLHash(searchParams){history.pushState({searchParams},"",`${window.location.pathname}${searchParams&&"?".concat(searchParams)}`)}static getSections(){return[{section:document.getElementById("product-grid").dataset.id}]}createSearchParams(form){const formData=new FormData(form);return new URLSearchParams(formData).toString()}onSubmitForm(searchParams,event){FacetFiltersForm.renderPage(searchParams,event)}onSubmitHandler(event){event.preventDefault();const sortFilterForms=document.querySelectorAll("facet-filters-form form");let forms=[],isMobile;event.target.className.includes("model-filter")?isMobile=!0:isMobile=event.target.closest("form").id==="FacetFiltersFormMobile"||event.target.closest("form").id==="onSaleForm"||event.target.closest("form").id==="categoryForm",sortFilterForms.forEach(form=>{if(!isMobile)form.id==="FacetFiltersForm"&&(document.querySelectorAll(".no-js-list").forEach(el=>el.remove()),forms.push(this.createSearchParams(form)));else if(form.id==="FacetFiltersFormMobile"||form.id==="onSaleForm"||form.id==="categoryForm")if(form.id==="FacetFiltersFormMobile"){let initialFilterParams=this.createSearchParams(form),filterParams="";if(event.target.className.includes("model-filter"))filterParams=initialFilterParams&&initialFilterParams+`&filter.v.option.model=${event.target.value.replaceAll(" ","+")}&filter.v.option.brand=${event.target.getAttribute("data-brand")}`;else{let selectedParams=FacetFiltersForm.getActiveParams();initialFilterParams&&(selectedParams?.model?filterParams=initialFilterParams+`&filter.v.option.model=${selectedParams.model.replaceAll(" ","+")}&filter.v.option.brand=${selectedParams.brand}`:filterParams=initialFilterParams)}forms.push(filterParams)}else forms.push(this.createSearchParams(form))}),forms=forms.filter(item=>item.trim()!==""),forms=forms.map(item=>[...new Set(item.split("&"))].join("&")),this.onSubmitForm(forms.join("&"),event)}onActiveFilterClick(event){event.preventDefault(),FacetFiltersForm.toggleActiveFacets();const url=event.currentTarget.href.indexOf("?")==-1?"":event.currentTarget.href.slice(event.currentTarget.href.indexOf("?")+1);FacetFiltersForm.renderPage(url)}}FacetFiltersForm.filterData=[],FacetFiltersForm.searchParamsInitial=window.location.search.slice(1),FacetFiltersForm.searchParamsPrev=window.location.search.slice(1),customElements.define("facet-filters-form",FacetFiltersForm),FacetFiltersForm.setListeners();const phoneCoverbrandsRef=document.getElementById("phoneCoverBrandsList");phoneCoverbrandsRef&&FacetFiltersForm.createPhoneCoverFilters();const categoryFiltersRef=document.querySelector(".category-list .category-input:checked + .category-label");categoryFiltersRef&&categoryFiltersRef.scrollIntoView({behavior:"auto",inline:"center",block:"center"});class PriceRange extends HTMLElement{constructor(){super(),this.querySelectorAll("input").forEach(element=>element.addEventListener("change",this.onRangeChange.bind(this))),this.setMinAndMaxValues()}onRangeChange(event){this.adjustToValidValues(event.currentTarget),this.setMinAndMaxValues()}setMinAndMaxValues(){const inputs=this.querySelectorAll("input"),minInput=inputs[0],maxInput=inputs[1];maxInput.value&&minInput.setAttribute("max",maxInput.value),minInput.value&&maxInput.setAttribute("min",minInput.value),minInput.value===""&&maxInput.setAttribute("min",0),maxInput.value===""&&minInput.setAttribute("max",maxInput.getAttribute("max"))}adjustToValidValues(input){const value=Number(input.value),min=Number(input.getAttribute("min")),max=Number(input.getAttribute("max"));value<min&&(input.value=min),value>max&&(input.value=max)}}customElements.define("price-range",PriceRange);class FacetRemove extends HTMLElement{constructor(){super();const facetLink=this.querySelector("a");facetLink.setAttribute("role","button"),facetLink.addEventListener("click",this.closeFilter.bind(this)),facetLink.addEventListener("keyup",event=>{event.preventDefault(),event.code.toUpperCase()==="SPACE"&&this.closeFilter(event)})}closeFilter(event){if(event.preventDefault(),phoneCoverbrandsRef&&event.target.classList.contains("remove-all-filters"))FacetFiltersForm.showBrands();else if(event.target.classList.contains("remove-phone-model")){const url=new URL(window.location.href);
10url.searchParams.has("filter.v.option.model")&&url.searchParams.has("filter.v.option.brand")&&(FacetFiltersForm.setModelFacetRemoveUrl(event,url),FacetFiltersForm.showBrands())}(this.closest("facet-filters-form")||document.querySelector("facet-filters-form")).onActiveFilterClick(event)}}customElements.define("facet-remove",FacetRemove); 11//# sourceMappingURL=/cdn/shop/t/75/assets/facets.js.map?v=7183507511354123711775406829
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.