https://mokobara.com/cdn/shop/t/399/assets/product-variant-modal.js?v=154057023003038371651783417133

1class ProductVariantModal extends HTMLElement{constructor(){super(),this.overlay=this.querySelector(".product-variant-modal-overlay"),this.modalContainer=this.querySelector(".product-variant-modal-container"),this.modalContent=this.querySelector(".product-variant-modal-content"),this.closeButtons=this.querySelectorAll("[data-close-modal]"),this.optionButtons=[...this.querySelectorAll("[data-option-swatch]")],this.colorButtons=this.optionButtons.filter(button=>button.dataset.optionSwatch==="color"),this.sizeButtons=this.optionButtons.filter(button=>button.dataset.optionSwatch==="size"),this.variantInput=this.querySelector("[data-variant-input]"),this.priceDisplay=this.querySelector("[data-variant-price-display]"),this.compareAtPriceDisplay=this.querySelector("[data-variant-compare-at-price-display]"),this.colorLabel=this.querySelector("[data-selected-color-label]"),this.sizeLabel=this.querySelector("[data-selected-size-label]"),this.productForm=this.querySelector("product-form"),this.addToCartButton=this.querySelector("[data-add-to-cart-button]"),this.productImageContainer=this.querySelector("[data-product-image-container]"),this.productPicture=this.productImageContainer?.querySelector("picture"),this.productImage=this.productImageContainer?.querySelector("img");try{this.variants=JSON.parse(this.dataset.variantData??"[]")}catch(error){console.error("[ProductVariantModal] Invalid variant data",error),this.variants=[]}this.colorIndex=this.dataset.colorIndex?Number(this.dataset.colorIndex):null,this.sizeIndex=this.dataset.sizeIndex?Number(this.dataset.sizeIndex):null;const initialVariant=this.variants.find(variant=>variant.id===Number(this.variantInput?.value))??this.variants[0];this.selectedOptions={color:this.colorIndex!==null?initialVariant?.options[this.colorIndex]:null,size:this.sizeIndex!==null?initialVariant?.options[this.sizeIndex]:null},this.handleOverlayClick=this.handleOverlayClick.bind(this),this.handleModalContentClick=this.handleModalContentClick.bind(this),this.handleClose=this.handleClose.bind(this),this.handleOptionClick=this.handleOptionClick.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}connectedCallback(){if(this.parentElement!==document.body){const staleModal=document.getElementById(this.id);staleModal&&staleModal!==this&&staleModal.parentElement===document.body&&staleModal.remove(),document.body.appendChild(this);return}this.closeButtons.forEach(button=>button.addEventListener("click",this.handleClose)),this.addEventListener("click",this.handleOverlayClick),this.modalContent?.addEventListener("click",this.handleModalContentClick),this.optionButtons.forEach(button=>button.addEventListener("click",this.handleOptionClick)),document.addEventListener("keydown",this.handleKeyDown),this.updateOptionAvailability()}disconnectedCallback(){this.closeButtons.forEach(button=>button.removeEventListener("click",this.handleClose)),this.removeEventListener("click",this.handleOverlayClick),this.modalContent?.removeEventListener("click",this.handleModalContentClick),this.optionButtons.forEach(button=>button.removeEventListener("click",this.handleOptionClick)),document.removeEventListener("keydown",this.handleKeyDown)}open(){this.classList.remove("opacity-0","invisible","pointer-events-none"),this.classList.add("opacity-100","visible"),this.setAttribute("aria-hidden","false"),document.body.classList.add("overflow-hidden");const currentVariant=this.variants.find(variant=>variant.id===Number(this.variantInput?.value));currentVariant&&this.setAddButtonState(currentVariant.available),this.querySelector('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')?.focus()}close(){this.classList.add("opacity-0","invisible","pointer-events-none"),this.classList.remove("opacity-100","visible"),this.setAttribute("aria-hidden","true"),document.body.classList.remove("overflow-hidden")}handleOverlayClick(event){const clickedElement=event.target;if(clickedElement===this.overlay||clickedElement===this.modalContainer){this.close();return}this.modalContent&&!this.modalContent.contains(clickedElement)&&this.close()}handleModalContentClick(event){event.stopPropagation()}handleClose(){this.close()}handleKeyDown(event){event.key==="Escape"&&!this.classList.contains("pointer-events-none")&&this.close()}handleOptionClick(event){const button=event.currentTarget,optionType=button.dataset.optionSwatch;this.selectedOptions[optionType]=button.dataset.optionValue,this.updateSelectedButtons(),this.updateOptionAvailability();const variant=this.resolveVariant();this.applyVariant(variant,optionType==="color"?button:null)}matchesSelection(variant){const colorMatches=this.colorIndex===null||variant.options[this.colorIndex]===this.selectedOptions.color,sizeMatches=this.sizeIndex===null||variant.options[this.sizeIndex]===this.selectedOptions.size;return colorMatches&&sizeMatches}resolveVariant(){return this.variants.find(variant=>this.matchesSelection(variant)&&variant.available)??this.variants.find(variant=>this.matchesSelection(variant))??null}updateSelectedButtons(){this.colorButtons.forEach(button=>{const isSelected=button.dataset.optionValue===this.selectedOptions.color;button.classList.toggle("border-black",isSelected),button.classList.toggle("border-transparent",!isSelected),button.classList.toggle("hover:border-gray-400",!isSelected),button.setAttribute("aria-pressed",String(isSelected))}),this.sizeButtons.forEach(button=>{const isSelected=button.dataset.optionValue===this.selectedOptions.size;button.classList.toggle("border-black",isSelected),button.classList.toggle("border-gray-300",!isSelected),button.classList.toggle("hover:border-gray-400",!isSelected),button.setAttribute("aria-pressed",String(isSelected))})}updateOptionAvailability(){this.sizeButtons.forEach(button=>{const hasAvailableVariant=this.variants.some(variant=>variant.available&&variant.options[this.sizeIndex]===button.dataset.optionValue&&(this.colorIndex===null||variant.options[this.colorIndex]===this.selectedOptions.color));button.classList.toggle("opacity-50",!hasAvailableVariant),button.classList.toggle("line-through",!hasAvailableVariant)}),this.colorButtons.forEach(button=>{const hasAvailableVariant=this.variants.some(variant=>variant.available&&variant.options[this.colorIndex]===button.dataset.optionValue);button.classList.toggle("opacity-50",!hasAvailableVariant)})}applyVariant(variant,colorButton){if(!variant){this.setAddButtonState(!1);return}if(this.variantInput&&(this.variantInput.value=variant.id),this.priceDisplay&&(this.priceDisplay.textContent=variant.price_formatted),this.compareAtPriceDisplay){const hasCompareAtPrice=variant.compare_at_price>variant.price;this.compareAtPriceDisplay.textContent=hasCompareAtPrice?variant.compare_at_price_formatted:"",this.compareAtPriceDisplay.classList.toggle("hidden",!hasCompareAtPrice)}this.colorLabel&&this.selectedOptions.color!==null&&(this.colorLabel.textContent=this.selectedOptions.color),this.sizeLabel&&this.selectedOptions.size!==null&&(this.sizeLabel.textContent=this.selectedOptions.size),this.productForm&&(this.productForm.dataset.variantId=variant.id,this.productForm.dataset.variantTitle=variant.title,this.productForm.dataset.variantPrice=variant.price,this.productForm.dataset.variantPriceFormatted=variant.price_formatted),variant.featured_image?this.setMainImage(variant.featured_image,variant.title):colorButton&&this.syncImageFrom(colorButton,variant.title),this.setAddButtonState(variant.available)}setAddButtonState(isAvailable){this.addToCartButton&&(this.addToCartButton.disabled=!isAvailable,this.addToCartButton.classList.toggle("opacity-50",!isAvailable),this.addToCartButton.classList.toggle("cursor-not-allowed",!isAvailable),this.addToCartButton.classList.toggle("pointer-events-none",!isAvailable),this.addToCartButton.classList.toggle("hover:bg-gray-800",isAvailable),this.addToCartButton.setAttribute("aria-disabled",String(!isAvailable)),this.addToCartButton.textContent=isAvailable?"ADD":"Sold out")}setMainImage(imageSrc,variantTitle){this.productImage&&(this.productImage.src=imageSrc,this.productImage.srcset=imageSrc,this.productImage.alt=variantTitle||this.productImage.alt,this.productPicture&&this.productPicture.querySelectorAll("source").forEach(source=>{source.srcset=imageSrc}),this.productImage.dispatchEvent(new Event("load")),this.productForm&&(this.productForm.dataset.productImage=imageSrc))}syncImageFrom(swatchButton,variantTitle){const swatchPicture=swatchButton.querySelector("picture"),swatchImage=swatchButton.querySelector("img");if(!(!swatchImage||!this.productImage)){if(this.productImage.src=swatchImage.src,this.productImage.srcset=swatchImage.srcset||"",this.productImage.alt=variantTitle||this.productImage.alt,swatchPicture&&this.productPicture){const swatchSources=[...swatchPicture.querySelectorAll("source")],productSources=[...this.productPicture.querySelectorAll("source")];

1swatchSources.forEach((swatchSource,index)=>{const productSource=productSources[index];if(productSource)productSource.srcset=swatchSource.srcset||"",swatchSource.hasAttribute("media")&&productSource.setAttribute("media",swatchSource.getAttribute("media")||""),swatchSource.hasAttribute("type")&&productSource.setAttribute("type",swatchSource.getAttribute("type")||"");else if(swatchSource.srcset){const newSource=swatchSource.cloneNode(!1);this.productPicture.insertBefore(newSource,this.productImage)}})}this.productImage.dispatchEvent(new Event("load")),this.productForm&&(this.productForm.dataset.productImage=swatchImage.src)}}}window.customElements.get("product-variant-modal")||window.customElements.define("product-variant-modal",ProductVariantModal),window.openProductVariantModal=productId=>{const modal=document.getElementById(`product-variant-modal-${productId}`);modal&&modal.open()};
2//# sourceMappingURL=/cdn/shop/t/399/assets/product-variant-modal.js.map?v=154057023003038371651783417133