1class PredictiveSearch extends HTMLElement{constructor(){super();const debounce=(fn,wait)=>{let t;return(...args)=>{clearTimeout(t),t=setTimeout(()=>fn.apply(this,args),wait)}};this.#addSpinner(),this.type=this.getAttribute("type"),this.isDropdown=this.hasAttribute("dropdown"),this.input=this.querySelector('input[type="search"]'),this.results=this.querySelector("predictive-search-results"),this.additionalContent=this.parentElement.querySelector(".js-search-content"),this.searchTerm="",this.abortController=null,this.#updateLoading(),this.input.addEventListener("input",debounce(this.onChange.bind(this),250)),this.addEventListener("keyup",this.onKeyup.bind(this)),this.addEventListener("keydown",this.onKeydown.bind(this)),this.isDropdown&&(this.input.addEventListener("focus",this.onFocus.bind(this)),this.addEventListener("focusout",this.onFocusOut.bind(this))),this.results.addEventListener("click",e=>{const link=e.target.closest("a");if(!link)return;const searchUrl=this.getAttribute("search-url"),[linkPath]=link.getAttribute("href").split("?");if(searchUrl&&searchUrl===linkPath)return;const searchForm=link.closest("search-form");searchForm&&searchForm.addFormStateToRecentSearches()}),this.type==="sidebar"&&window.visualViewport.addEventListener("resize",debounce(this.#setDrawerContentMaxHeight.bind(this),50))}getQuery(){return this.input.value.trim()}onKeyup(event){switch(this.getQuery().length||this.close(!0),event.preventDefault(),event.code){case"ArrowUp":this.switchOption("up");break;case"ArrowDown":this.switchOption("down");break;case"Enter":this.selectOption();break}}onKeydown(event){(event.code==="ArrowUp"||event.code==="ArrowDown")&&event.preventDefault()}onChange(){this.abortController&&this.abortController.abort();const searchTerm=this.getQuery();if(this.searchTerm=searchTerm,!searchTerm.length){this.close(),this.#updateLoading();return}this.getSearchResults(searchTerm)}onFocus(){const currentSearchTerm=this.getQuery();currentSearchTerm.length&&(this.searchTerm!==currentSearchTerm?this.onChange():this.getAttribute("results")==="true"?this.open():this.getSearchResults(this.searchTerm))}onFocusOut(){this.abortController&&this.abortController.abort(),this.#updateLoading(),setTimeout(()=>{this.contains(document.activeElement)||this.close()})}getSearchResults(searchTerm){this.abortController=new AbortController,this.#updateLoading(!0),fetch(`/search/suggest?q=${searchTerm}§ion_id=predictive-search`,{signal:this.abortController.signal}).then(response=>{if(!response.ok){var error=new Error(response.status);throw this.close(),error}return response.text()}).then(text=>{const resultsMarkup=new DOMParser().parseFromString(text.replaceAll('id="predictive-search',`id="${this.type}-predictive-search`).replaceAll('aria-labelledby="predictive-search',`aria-labelledby="${this.type}-predictive-search`),"text/html").querySelector("#shopify-section-predictive-search").innerHTML;this.results.innerHTML=resultsMarkup,this.isDropdown&&this.results.querySelector(".predictive-search__empty-heading")&&this.results.querySelector(".predictive-search__empty-heading").remove(),this.open(),this.#updateLoading(),this.input.setAttribute("aria-activedescendant","")}).catch(error=>{if(!(error.name&&error.name==="AbortError"))throw this.#updateLoading(),this.close(),error}).finally(()=>{this.abortController=null})}open(){this.setAttribute("open",!0),this.input.setAttribute("aria-expanded","true"),this.spinner.setAttribute("hidden","true"),this.results.removeAttribute("hidden"),this.additionalContent&&this.additionalContent.setAttribute("hidden",!0)}close(){this.removeAttribute("open"),this.input.setAttribute("aria-expanded","false"),this.spinner.setAttribute("hidden","true"),this.results.setAttribute("hidden","true"),this.additionalContent&&this.additionalContent.removeAttribute("hidden")}switchOption(direction){if(!this.getAttribute("open"))return;const moveUp=direction==="up",selectedElement=this.querySelector('[aria-selected="true"]'),allVisibleElements=Array.from(this.querySelectorAll("predictive-search-results li, button.predictive-search__btn"));let activeElementIndex=0;if(moveUp&&!selectedElement)return;let selectedElementIndex=-1,i=0;for(;selectedElementIndex===-1&&i<=allVisibleElements.length;)allVisibleElements[i]===selectedElement&&(selectedElementIndex=i),i++;if(!moveUp&&selectedElement?activeElementIndex=selectedElementIndex===allVisibleElements.length-1?0:selectedElementIndex+1:moveUp&&(activeElementIndex=selectedElementIndex===0?allVisibleElements.length-1:selectedElementIndex-1),activeElementIndex===selectedElementIndex)return;const activeElement=allVisibleElements[activeElementIndex];console.log(activeElement),activeElement.setAttribute("aria-selected",!0),selectedElement&&selectedElement.setAttribute("aria-selected",!1),this.input.setAttribute("aria-activedescendant",activeElement.id);const resultsContainer=this.querySelector(".predictive-search__panels");resultsContainer.offsetHeight<resultsContainer.scrollHeight&&!activeElement.classList.contains("predictive-search__btn")&&(activeElement.getBoundingClientRect().top<resultsContainer.getBoundingClientRect().top&&resultsContainer.scrollTo({top:activeElement.offsetTop,behavior:"instant"}),activeElement.getBoundingClientRect().bottom>resultsContainer.getBoundingClientRect().bottom-72&&resultsContainer.scrollTo({top:activeElement.offsetTop-(resultsContainer.offsetHeight-activeElement.offsetHeight-72),behavior:"instant"}))}selectOption(){const selectedOption=this.querySelector('[aria-selected="true"] a, button[aria-selected="true"]');selectedOption&&selectedOption.click()}#addSpinner(){const spinner=document.createElement("div");spinner.classList.add("search-form__loader"),spinner.setAttribute("hidden",!0),spinner.innerHTML=` 2 <div class="theme-spinner theme-spinner--small"> 3 <div class="theme-spinner__border"></div> 4 <div class="theme-spinner__border"></div> 5 <div class="theme-spinner__border"></div> 6 <div class="theme-spinner__border"></div> 7 </div> 8 `,this.spinner=spinner,this.querySelector(".search__form-input-wrapper").append(spinner)}#updateLoading(isLoading=!1){isLoading?(this.classList.add("is-loading"),this.spinner&&this.spinner.removeAttribute("hidden")):(this.classList.remove("is-loading"),this.spinner&&this.spinner.setAttribute("hidden",!0))}#setDrawerContentMaxHeight(){const searchDraw=this.closest(".search-draw");
8if(searchDraw&&searchDraw.closest(".mfp-content")){const sidebarSearchForm=searchDraw.querySelector(".search__form-input-wrapper");window.visualViewport.height<window.innerHeight?searchDraw.style.setProperty("--max-content-height",`${window.visualViewport.height-(sidebarSearchForm?sidebarSearchForm.offsetHeight:0)}px`):searchDraw.style.removeProperty("--max-content-height")}}}customElements.define("predictive-search",PredictiveSearch); 9//# sourceMappingURL=/cdn/shop/t/15/assets/predictive-search.js.map?v=91711954996926360731684082334
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.