https://cloudpaws.com/cdn/shop/t/41/assets/main-product-gallery.js?v=156714648036854682251786337142

1customElements.get("main-product-gallery")||customElements.define("main-product-gallery",class extends HTMLElement{constructor(){super(),this.elementId=this.id||this.getAttribute("id"),this.mainCarouselSelector=`#${this.elementId} #main-carousel`,this.thumbnailCarouselSelector=`#${this.elementId} #thumbnail-carousel`,this.imageHeight=this.querySelector("#main-carousel ul li img")?.height||500,this.thumbnailPosition=this.dataset.thumbnailPosition,this.desktopLayout=this.dataset.desktopLayout||"thumbnail_slider",this.mobileLayout=this.dataset.mobileLayout||"hide",this.variants=this.getVariants(),this.init(),this.syncedVariantImage=this.dataset.syncedVariantImage,this.variantShouldTrigger=!0}connectedCallback(){const t=this.handleVariantChange.bind(this);subscribe(PUB_SUB_EVENTS.variantChange,i=>t({data:{variant:i}}))}init(){this.convertVariantsToArray();const t=window.matchMedia("(min-width: 989px)").matches,i=window.matchMedia("(max-width: 988px)").matches,e=this.shouldUseMainSlider(t,i),s=this.shouldUseThumbnailSlider(t,i);if(e){const t=this.querySelector(this.mainCarouselSelector);this.mainSlider=new Splide(t,{type:"loop",rewind:!0,pagination:!1,gap:10,arrows:"true"===t?.dataset.showArrows,autoHeight:!0,perPage:1,heightRatio:1,classes:{arrows:"splide__arrows slider-buttons",arrow:"slider-button splide__arrow",prev:"splide__arrow--prev",next:"splide__arrow--next"}})}if(i){const t=this.querySelector(this.thumbnailCarouselSelector);t&&("hide"===this.mobileLayout?t.classList.add("hidden"):t.classList.remove("hidden"))}else{const t=this.querySelector(this.thumbnailCarouselSelector);t&&t.classList.remove("hidden")}if(s){const s={perPage:5,gap:10,pagination:!1,dragMinThreshold:10,isNavigation:e,arrows:"true"===this.querySelector(this.thumbnailCarouselSelector)?.dataset.showArrows,classes:{arrows:"splide__arrows slider-buttons",arrow:"slider-button splide__arrow",prev:"splide__arrow--prev",next:"splide__arrow--next"}},a={height:`${this.imageHeight}px`,direction:"ttb",autoHeight:!0,autoWidth:!0,heightRatio:1};if(t){const t=this.querySelector("#thumbnail-carousel .splide__track");t&&t.style.setProperty("--active-slide-height",`${this.imageHeight}px`),"bottom"===this.thumbnailPosition?this.thumbnailSlider=new Splide(this.querySelector(this.thumbnailCarouselSelector),{...s}):"left"===this.thumbnailPosition||"right"===this.thumbnailPosition?this.thumbnailSlider=new Splide(this.querySelector(this.thumbnailCarouselSelector),{...s,...a}):this.thumbnailSlider=new Splide(this.querySelector(this.thumbnailCarouselSelector),{...s})}else i&&(this.thumbnailSlider=new Splide(this.querySelector(this.thumbnailCarouselSelector),{...s}));this.bar=this.querySelector(".thumbnail-carousel__progress-bar"),this.imageCountElement=this.querySelector(".thumbnail-carousel__image-count"),this.thumbnailSlider&&this.thumbnailSlider.on("mounted move",()=>{const t=this.thumbnailSlider.Components.Controller.getEnd()+1,i=this.thumbnailSlider.length,e=Math.min((this.thumbnailSlider.index+1)/t,1);this.bar&&(this.bar.style.width=100*e+"%"),this.imageCountElement&&(this.imageCountElement.innerHTML=`\n    <span class="thumbnail-carousel__image-count__current">\n      ${String(this.thumbnailSlider.index+1).padStart(2,"0")}\n    </span>/\n    <span class="thumbnail-carousel__image-count__total">\n      ${String(i).padStart(2,"0")}\n    </span>\n  `)})}else this.progressBar=this.querySelector(".dbtfy-carousel__progress_counter"),this.progressBar&&this.progressBar.remove();e&&s&&this.mainSlider&&this.thumbnailSlider&&this.mainSlider.sync(this.thumbnailSlider),this.mainSlider&&(this.mainSlider.on("mounted",()=>{const t=this.mainSlider.index,i=this.mainSlider.Components.Elements.slides[t];if(i){const t=i.querySelector("img")?.offsetHeight||i.querySelector("video")?.offsetHeight;this.style.setProperty("--active-slide-height",`${t}px`)}}),this.mainSlider.mount()),this.thumbnailSlider&&this.thumbnailSlider.mount(),this.mainSlider&&this.mainSlider.on("move",t=>{const i=t,e=this.mainSlider.Components.Elements.slides;if(e){const t=e[i];if(t){const i=t.querySelector("img")?.offsetHeight||t.querySelector("video")?.offsetHeight;i&&this.style.setProperty("--active-slide-height",`${i}px`)}}this.thumbnailSlider||this.updateThumbnailActiveState(t)}),this.thumbnailSlider&&this.thumbnailSlider.on("moved",t=>{if(Debutify.settings.dbtfy_variant_sync_on_media){if(!this.variantShouldTrigger)return void(this.variantShouldTrigger=!0);this.variantShouldTrigger=!0;const i=this.thumbnailSlider.Components.Elements.slides[t].dataset.mediaId,e=this.variants?.[i]||null;if(e){this.syncedVariantImage="false";const t=this.closest("product-info").querySelectorAll("variant-selects fieldset");e.forEach((i,e)=>{const s=t[e];if(s){const t=s.querySelector(`input[value="${i}"]`);t&&(t.checked=!0,t.dispatchEvent(new Event("change",{bubbles:!0})))}}),this.syncedVariantImage="true"}}}),!this.thumbnailSlider&&(t&&"thumbnail"===this.desktopLayout||i&&"show"===this.mobileLayout)&&this.setupThumbnailClickHandlers()}setupThumbnailClickHandlers(){const t=this.querySelectorAll("#thumbnail-carousel .splide__slide");t.forEach((i,e)=>{i.addEventListener("click",()=>{if(t.forEach(t=>t.classList.remove("is-active")),i.classList.add("is-active"),this.mainSlider){const t=parseInt(i.dataset.position)-1;this.mainSlider.go(t)}})}),t.length>0&&t[0].classList.add("is-active")}updateThumbnailActiveState(t){this.querySelectorAll("#thumbnail-carousel .splide__slide").forEach((i,e)=>{parseInt(i.dataset.position)-1===t?i.classList.add("is-active"):i.classList.remove("is-active")})}

1shouldUseMainSlider(t,i){return t?["thumbnail","thumbnail_slider"].includes(this.desktopLayout):!i||["show","hide"].includes(this.mobileLayout)}shouldUseThumbnailSlider(t,i){return t?"thumbnail_slider"===this.desktopLayout:!!i&&"show"===this.mobileLayout}getVariants(){const t=this.closest("product-info"),i=t.querySelector("variant-selects [data-product-variants]")?.innerHTML;return i?JSON.parse(i):null}convertVariantsToArray(){this.variants&&(this.variants=Object.entries(this.variants).filter(([t,i])=>i.featured_media?.id).reduce((t,[i,e])=>(t[e.featured_media.id]=e.options,t),{}))}handleVariantChange({data:{variant:t}}){if(this.variant=t.data.variant,!this.variant.featured_media||"true"!==this.syncedVariantImage)return;const i=this.variant.featured_media.id;if(this.closest(".quick-add-modal")){const t=this.closest("product-info");t&&(this.sectionId=t.dataset.originalSection)}else this.sectionId=this.dataset.sectionId;if(t.data.sectionId!=this.sectionId)return;const e=window.matchMedia("(min-width: 989px)").matches,s=window.matchMedia("(max-width: 988px)").matches;if(e&&["columns","stacked"].includes(this.desktopLayout)||s&&"columns"===this.mobileLayout)return void this.reorderMediaToShowVariantFirst(i);let a=this.querySelector(this.thumbnailCarouselSelector)?.querySelector(`[data-media-id='${i}']`)?.dataset.position;a||(a=this.querySelector(this.mainCarouselSelector)?.querySelector(`[data-media-id='${i}']`)?.dataset.position),a&&(a=parseInt(a)-1,this.thumbnailSlider&&a!=this.thumbnailSlider.index?(this.variantShouldTrigger=!1,this.thumbnailSlider.go(a)):this.mainSlider&&!this.thumbnailSlider&&a!=this.mainSlider.index&&this.mainSlider.go(a))}reorderMediaToShowVariantFirst(t){const i=this.querySelector(this.mainCarouselSelector);if(!i)return;const e=i.querySelector(".splide__list");if(!e)return;const s=e.querySelector(`[data-media-id="${t}"]`);if(!s)return;const a=e.querySelector(".splide__slide:first-child");if(a&&a.dataset.mediaId===t)return;e.insertBefore(s,e.firstChild);e.querySelectorAll(".splide__slide").forEach((t,i)=>{t.setAttribute("data-position",i+1)});const r=this.querySelector(this.thumbnailCarouselSelector);if(r){const i=r.querySelector(".splide__list");if(i){const e=i.querySelector(`[data-media-id="${t}"]`);if(e){i.insertBefore(e,i.firstChild);i.querySelectorAll(".splide__slide").forEach((t,i)=>{t.setAttribute("data-position",i+1)})}}}}});