/*! Copyright (c) Safe As Milk. All rights reserved. */import ModalDialog from"modal-dialog";class QuickShop extends ModalDialog{#boundFetchQuickShopOnProximity;#boundMatchMediaChange;#boundOnCloseModal;#boundOnOpenModal;#boundOnVariantChange;#fetchingQuickShop=!1;#loadObserver;#loadOn;#mediaQuery;#product;#variantId;constructor(){super(),this.#variantId=null,this.#boundMatchMediaChange=this.#matchMediaChange.bind(this),this.#boundOnVariantChange=this.#onVariantChange.bind(this),this.#boundOnCloseModal=this.#onCloseModal.bind(this),this.#boundOnOpenModal=this.#onOpenModal.bind(this),this.#boundFetchQuickShopOnProximity=this.#fetchQuickShopOnProximity.bind(this)}connectedCallback(){super.connectedCallback(),this.image=this.querySelector("img"),this.imageContainerRatio=this.getAttribute("image-container-ratio").trim(),this.imageFit=this.hasAttribute("image-fit"),this.isPlaceholder=this.hasAttribute("placeholder"),this.#loadOn=this.getAttribute("load-on")||"click",this.#loadObserver=null,this.isPlaceholder?this.#setUpFetchListeners():(this.#setProductData(),this.variantSelector=this.querySelector("variant-selects, variant-radios, variant-mixed-inputs"),this.variantSelector&&this.variantSelector.addEventListener("on:variant:change",this.#boundOnVariantChange)),this.on("on:modal:opening",this.#boundOnOpenModal).on("on:modal:closed",this.#boundOnCloseModal);const isInsideHoverModal=!!this.closest(".no-touchevents")&&!!this.closest(".product-card--trigger-icon.product-card--hover");this.#mediaQuery=isInsideHoverModal?window.matchMedia("(min-width: 768px)"):null,this.#mediaQuery&&this.#mediaQuery.addEventListener("change",this.#boundMatchMediaChange)}disconnectedCallback(){super.disconnectedCallback(),!this.isPlaceholder&&this.variantSelector?this.variantSelector.removeEventListener("on:variant:change",this.#boundOnVariantChange):this.#removeFetchListeners(),this.off("on:modal:opening",this.#boundOnOpenModal).off("on:modal:closed",this.#boundOnCloseModal),this.#mediaQuery&&this.#mediaQuery.addEventListener("change",this.#boundMatchMediaChange)}set variantId(id){this.#variantId=id,this.#updateVariant()}get variantId(){return this.#variantId}async close(){return new Promise(async resolve=>{this.closest(".is-inside-modal")&&await super.close(),resolve("Closed")})}#onOpenModal(){setTimeout(()=>{this.classList.add("is-inside-modal")})}#onCloseModal(){this.classList.remove("is-inside-modal");const productForm=this.querySelector("product-form");productForm&&productForm.removeError()}#onVariantChange(event){const viewDetailsLink=this.querySelector(".js-view-details"),productLink=this.querySelector(".js-product-link");if(event.detail.variant){if(this.dataset.productUrl){this.#variantId=event.detail.variant.id;const newURL=this.dataset.productUrl.includes("?")?this.dataset.productUrl.concat(`&variant=${this.#variantId}`):this.dataset.productUrl.concat(`?variant=${this.#variantId}`);viewDetailsLink&&viewDetailsLink.setAttribute("href",newURL),productLink&&productLink.setAttribute("href",newURL)}let image=event.detail.variant.featured_image;image||(image=this.#product.media&&this.#product.media.length>0?this.#product.media[0].preview_image:null),image&&this.#updateImage(image.src,image.width,image.height,this.image.getAttribute("alt"))}}#setProductData(){const productData=this.querySelector("[id^=ProductJson]");productData&&(this.#product=JSON.parse(productData.textContent))}#updateVariant(){if(!this.#variantId||this.isPlaceholder)return;const productInteractiveOptions=this.querySelector("product-interactive-options");productInteractiveOptions&&setTimeout(()=>{const id=Number(this.#variantId);productInteractiveOptions.selectVariantById(id)})}#setUpFetchListeners(){this.isPlaceholder&&(this.#loadOn==="proximity"?(this.#loadObserver=new IntersectionObserver(this.#boundFetchQuickShopOnProximity,{rootMargin:"200px"}),this.#loadObserver.observe(this)):this.on("on:modal:opening",()=>{this.#fetchQuickShop()},{once:!0}))}#removeFetchListeners(){this.#loadObserver&&(this.#loadObserver.disconnect(),this.#loadObserver=null)}async#fetchQuickShopOnProximity(entries,observer){entries.forEach(async entry=>{entry.isIntersecting&&(observer.unobserve(this),await this.#fetchQuickShop())})}async#fetchQuickShop(){if(this.#fetchingQuickShop)return;const quickShopUrl=this.getAttribute("data-product-url");if(quickShopUrl)try{this.dispatchEvent(new CustomEvent("on:quick-shop:loading")),this.#fetchingQuickShop=!0;let html=await(await fetch(`${quickShopUrl}${quickShopUrl.includes("?")?"&":"?"}view=quick-shop`)).text();const idRegexp=/<quick-shop[\s]*id="([^"]*)"/m,[,originalQuickShopId]=html.match(idRegexp);originalQuickShopId&&(html=html.replaceAll(originalQuickShopId,this.id));const actualQuickShop=new DOMParser().parseFromString(html,"text/html").querySelector("quick-shop");this.#updateContent(actualQuickShop),this.dispatchEvent(new CustomEvent("on:quick-shop:loaded"))}catch(e){throw this.dispatchEvent(new CustomEvent("on:quick-shop:failed")),new Error(`Could not fetch quick shop: "${e}"`)}finally{this.#fetchingQuickShop=!1}}#updateContent(newContent){this.classList.add("is-loading-content");const productForm=newContent.querySelector("product-form");productForm&&!this.hasAttribute("notify-on-add")&&productForm.removeAttribute("notify-on-add"),productForm&&!this.hasAttribute("redirect-on-add")&&productForm.removeAttribute("redirect-on-add"),this.querySelector(".quick-shop__wrapper").innerHTML=newContent.querySelector(".quick-shop__wrapper").innerHTML,this.classList.remove("is-loading-content");const image=this.querySelector(".js-img-modal");image&&image.setAttribute("sizes",this.getAttribute("image-sizes")),this.removeAttribute("placeholder"),this.isPlaceholder=!1,this.#setProductData(),this.image=this.querySelector("img"),this.variantSelector=this.querySelector("variant-selects, variant-radios, variant-mixed-inputs"),this.variantSelector&&(this.#updateVariant(),this.variantSelector.addEventListener("on:variant:change",this.#boundOnVariantChange)),window.Shopify.PaymentButton&&window.Shopify.PaymentButton.init(),this.#removeFetchListeners()}#updateImage(url,width,height,alt="",srcsetWidths=[180,360,540,720,900,1080,1296,1512]){if(!this.image||!url||!width||!height)return;const imageContainerRatio=this.imageContainerRatio!=="natural"?this.imageContainerRatio.split(":").reduce((ratio,value)=>ratio!==0?value/ratio:value,0):null,aspectRatio=width/height,uncroppedImage=this.imageContainerRatio==="natural"||imageContainerRatio&&this.imageFit;let masterWidth=width,masterHeight=height;uncroppedImage||(masterHeight=Math.round(masterWidth*imageContainerRatio),masterHeight>height&&(masterHeight=height,masterWidth=Math.round(masterHeight/imageContainerRatio)));const srcset=srcsetWidths.reduce((srcSet,srcWidth)=>{const srcHeight=Math.round(uncroppedImage?srcWidth/aspectRatio:srcWidth*imageContainerRatio);return srcWidth>masterWidth||srcHeight>masterHeight?srcSet:`${srcSet}${url}${url.includes("?")?"&":"?"}width=${srcWidth}${uncroppedImage?"":`&height=${srcHeight}&crop=center`} ${srcWidth}w ${srcHeight}h, `},""),masterSrc=uncroppedImage?url:`${url}${url.includes("?")?"&":"?"}width=${masterWidth}&height=${masterHeight}&crop=center`;this.image.setAttribute("src",masterSrc),this.image.setAttribute("srcset",srcset),this.image.setAttribute("width",masterWidth),this.image.setAttribute("height",masterHeight),this.image.setAttribute("alt",alt)}#matchMediaChange({matches}){matches&&this.close()}}customElements.define("quick-shop",QuickShop);
//# sourceMappingURL=/cdn/shop/t/100/assets/quick-shop.js.map?v=77555811168617723851751575324