https://store.guitargate.com/cdn/shop/t/4/assets/variant-picker.js?v=124079696159966615681767395514

1import{Component}from"@theme/component";import{VariantSelectedEvent,VariantUpdateEvent}from"@theme/events";import{morph,MORPH_OPTIONS}from"@theme/morph";import{yieldToMainThread,getViewParameterValue,ResizeNotifier}from"@theme/utilities";export default class VariantPicker extends Component{#pendingRequestUrl;#abortController;#checkedIndices=[];#radios=[];#resizeObserver=new ResizeNotifier(()=>this.updateVariantPickerCss());connectedCallback(){super.connectedCallback(),(this.refs.fieldsets||[]).forEach(fieldset=>{const radios=Array.from(fieldset?.querySelectorAll("input")??[]);this.#radios.push(radios);const initialCheckedIndex=radios.findIndex(radio=>radio.dataset.currentChecked==="true");initialCheckedIndex!==-1&&this.#checkedIndices.push([initialCheckedIndex])}),this.addEventListener("change",this.variantChanged.bind(this)),this.#resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#resizeObserver.disconnect()}variantChanged(event){if(!(event.target instanceof HTMLElement))return;const selectedOption=event.target instanceof HTMLSelectElement?event.target.options[event.target.selectedIndex]:event.target;if(!selectedOption)return;this.updateSelectedOption(event.target),this.dispatchEvent(new VariantSelectedEvent({id:selectedOption.dataset.optionValueId??""}));const isOnProductPage=this.dataset.templateProductMatch==="true"&&!event.target.closest("product-card")&&!event.target.closest("quick-add-dialog"),currentUrl=this.dataset.productUrl?.split("?")[0],newUrl=selectedOption.dataset.connectedProductUrl,loadsNewProduct=isOnProductPage&&!!newUrl&&newUrl!==currentUrl,isOnFeaturedProductSection=!!this.closest("featured-product-information"),morphElementSelector=loadsNewProduct?"main":isOnFeaturedProductSection?"featured-product-information":void 0;this.fetchUpdatedSection(this.buildRequestUrl(selectedOption),morphElementSelector);const url=new URL(window.location.href),variantId=selectedOption.dataset.variantId||null;isOnProductPage&&(variantId?url.searchParams.set("variant",variantId):url.searchParams.delete("variant")),loadsNewProduct&&(url.pathname=newUrl),url.href!==window.location.href&&yieldToMainThread().then(()=>{history.replaceState({},"",url.toString())})}#getFieldsetMeasurements(fieldsetIndex){const fieldset=(this.refs.fieldsets||[])[fieldsetIndex],checkedIndices=this.#checkedIndices[fieldsetIndex],radios=this.#radios[fieldsetIndex];if(!radios||!checkedIndices||!fieldset)return null;const[currentIndex,previousIndex]=checkedIndices;return{fieldset,currentIndex,previousIndex,currentWidth:currentIndex!==void 0?radios[currentIndex]?.parentElement?.offsetWidth:void 0,previousWidth:previousIndex!==void 0?radios[previousIndex]?.parentElement?.offsetWidth:void 0}}#applyFieldsetMeasurements({fieldset,currentWidth,previousWidth,currentIndex,previousIndex}){currentWidth?fieldset.style.setProperty("--pill-width-current",`${currentWidth}px`):currentIndex!==void 0&&fieldset.style.removeProperty("--pill-width-current"),previousWidth?fieldset.style.setProperty("--pill-width-previous",`${previousWidth}px`):previousIndex!==void 0&&fieldset.style.removeProperty("--pill-width-previous")}updateFieldsetCss(fieldsetIndex){if(Number.isNaN(fieldsetIndex))return;const measurements=this.#getFieldsetMeasurements(fieldsetIndex);measurements&&this.#applyFieldsetMeasurements(measurements)}updateSelectedOption(target){if(typeof target=="string"){const targetElement=this.querySelector(`[data-option-value-id="${target}"]`);if(!targetElement)throw new Error("Target element not found");target=targetElement}if(target instanceof HTMLInputElement){const fieldsetIndex=Number.parseInt(target.dataset.fieldsetIndex||""),inputIndex=Number.parseInt(target.dataset.inputIndex||"");if(!Number.isNaN(fieldsetIndex)&&!Number.isNaN(inputIndex)){const fieldset=(this.refs.fieldsets||[])[fieldsetIndex],checkedIndices=this.#checkedIndices[fieldsetIndex],radios=this.#radios[fieldsetIndex];if(radios&&checkedIndices&&fieldset){const[currentIndex,previousIndex]=checkedIndices;currentIndex!==void 0&&radios[currentIndex]&&(radios[currentIndex].dataset.previousChecked="false"),previousIndex!==void 0&&radios[previousIndex]&&(radios[previousIndex].dataset.previousChecked="false"),checkedIndices.unshift(inputIndex),checkedIndices.length=Math.min(checkedIndices.length,2);

1const newCurrentIndex=checkedIndices[0],newPreviousIndex=checkedIndices[1];newCurrentIndex!==void 0&&radios[newCurrentIndex]&&(radios[newCurrentIndex].dataset.currentChecked="true"),newPreviousIndex!==void 0&&radios[newPreviousIndex]&&(radios[newPreviousIndex].dataset.previousChecked="true",radios[newPreviousIndex].dataset.currentChecked="false"),this.updateFieldsetCss(fieldsetIndex)}}target.checked=!0}if(target instanceof HTMLSelectElement){const newValue=target.value,newSelectedOption=Array.from(target.options).find(option=>option.value===newValue);if(!newSelectedOption)throw new Error("Option not found");for(const option of target.options)option.removeAttribute("selected");newSelectedOption.setAttribute("selected","selected")}}buildRequestUrl(selectedOption,source=null,sourceSelectedOptionsValues=[]){let productUrl=selectedOption.dataset.connectedProductUrl||this.#pendingRequestUrl||this.dataset.productUrl;this.#pendingRequestUrl=productUrl;const params=[],viewParamValue=getViewParameterValue();viewParamValue&&params.push(`view=${viewParamValue}`),this.selectedOptionsValues.length&&!source?params.push(`option_values=${this.selectedOptionsValues.join(",")}`):source==="product-card"&&(this.selectedOptionsValues.length?params.push(`option_values=${sourceSelectedOptionsValues.join(",")}`):params.push(`option_values=${selectedOption.dataset.optionValueId}`));const SECTION_ID_MAP={"quick-add-component":"section-rendering-product-card","swatches-variant-picker-component":"section-rendering-product-card","featured-product-information":this.closest("featured-product-information")?.id},closestSectionId=Object.keys(SECTION_ID_MAP).find(sectionId=>this.closest(sectionId));return closestSectionId?(productUrl?.includes("?")&&(productUrl=productUrl.split("?")[0]),`${productUrl}?section_id=${SECTION_ID_MAP[closestSectionId]}&${params.join("&")}`):`${productUrl}?${params.join("&")}`}fetchUpdatedSection(requestUrl,morphElementSelector){this.#abortController?.abort(),this.#abortController=new AbortController,fetch(requestUrl,{signal:this.#abortController.signal}).then(response=>response.text()).then(responseText=>{this.#pendingRequestUrl=void 0;const html=new DOMParser().parseFromString(responseText,"text/html");html.querySelector("overflow-list[defer]")?.removeAttribute("defer");const textContent=html.querySelector('variant-picker script[type="application/json"]')?.textContent;if(textContent)if(morphElementSelector==="main")this.updateMain(html);else if(morphElementSelector)this.updateElement(html,morphElementSelector);else{const newProduct=this.updateVariantPicker(html);this.selectedOptionId&&this.dispatchEvent(new VariantUpdateEvent(JSON.parse(textContent),this.selectedOptionId,{html,productId:this.dataset.productId??"",newProduct}))}}).catch(error=>{error.name==="AbortError"?console.warn("Fetch aborted by user"):console.error(error)})}updateVariantPicker(newHtml){let newProduct;const newVariantPickerSource=newHtml.querySelector(this.tagName.toLowerCase());if(!newVariantPickerSource)throw new Error("No new variant picker source found");if(newVariantPickerSource instanceof HTMLElement){const newProductId=newVariantPickerSource.dataset.productId,newProductUrl=newVariantPickerSource.dataset.productUrl;newProductId&&newProductUrl&&this.dataset.productId!==newProductId&&(newProduct={id:newProductId,url:newProductUrl}),this.dataset.productId=newProductId,this.dataset.productUrl=newProductUrl}return morph(this,newVariantPickerSource,{...MORPH_OPTIONS,getNodeKey:node=>node instanceof HTMLElement?node.dataset.key:void 0}),this.updateVariantPickerCss(),newProduct}updateVariantPickerCss(){const measurements=(this.refs.fieldsets||[]).map((_,index)=>this.#getFieldsetMeasurements(index)).filter(m=>m!==null);for(const measurement of measurements)this.#applyFieldsetMeasurements(measurement)}updateElement(newHtml,elementSelector){const element=this.closest(elementSelector),newElement=newHtml.querySelector(elementSelector);if(!element||!newElement)throw new Error(`No new element source found for ${elementSelector}`);morph(element,newElement)}updateMain(newHtml){const main=document.querySelector("main"),newMain=newHtml.querySelector("main");

1if(!main||!newMain)throw new Error("No new main source found");morph(main,newMain)}get selectedOption(){const selectedOption=this.querySelector("select option[selected], fieldset input:checked");if(selectedOption instanceof HTMLInputElement||selectedOption instanceof HTMLOptionElement)return selectedOption}get selectedOptionId(){const{selectedOption}=this;if(!selectedOption)return;const{optionValueId}=selectedOption.dataset;if(!optionValueId)throw new Error("No option value ID found");return optionValueId}get selectedOptionsValues(){return Array.from(this.querySelectorAll("select option[selected], fieldset input:checked")).map(option=>{const{optionValueId}=option.dataset;if(!optionValueId)throw new Error("No option value ID found");return optionValueId})}}customElements.get("variant-picker")||customElements.define("variant-picker",VariantPicker);
2//# sourceMappingURL=/cdn/shop/t/4/assets/variant-picker.js.map?v=124079696159966615681767395514