https://www.incycle.com/cdn/shop/t/36/assets/variant-image-filter.js?v=43411437947733934551782325308

1(function(){"use strict";const CONFIG={colorOptionName:"Color",altSeparator:" - ",showBlankAlt:!0,hiddenClass:"vif-hidden"};(function(){if(document.getElementById("vif-styles"))return;const style=document.createElement("style");style.id="vif-styles",style.textContent=`.${CONFIG.hiddenClass} { display: none !important; }`,document.head.appendChild(style)})();function parseColorFromAlt(alt){if(!alt||!alt.trim())return"";const sep=CONFIG.altSeparator,lastIdx=alt.lastIndexOf(sep);return lastIdx!==-1?alt.slice(lastIdx+sep.length).trim():alt.trim()}function colorsMatch(altColor,selectedColor){return altColor.toLowerCase()===selectedColor.toLowerCase()}class VariantImageFilter{constructor(sectionId,optionNames){this.sectionId=sectionId,this.optionNames=optionNames,this.colorIndex=optionNames.findIndex(name=>name.toLowerCase()===CONFIG.colorOptionName.toLowerCase()),this.colorIndex!==-1&&(this.viewerSlides=Array.from(document.querySelectorAll(`#Slider-Gallery-${sectionId} li[data-media-id]`)),this.thumbnailItems=Array.from(document.querySelectorAll(`#Slider-Thumbnails-${sectionId} li[data-target]`)),this.mediaGallery=document.getElementById(`MediaGallery-${sectionId}`),window.addEventListener("variant:changed",this._onVariantChanged.bind(this)))}_onVariantChanged(event){const variant=event.detail&&event.detail.variant;if(!variant){this._showAll();return}const selectedColor=variant.options&&variant.options[this.colorIndex];if(!selectedColor){this._showAll();return}this._applyFilter(selectedColor)}_applyFilter(selectedColor){let firstVisibleMediaId=null,visibleSlideCount=0;

1if(this.viewerSlides.forEach(slide=>{const alt=slide.dataset.mediaAlt||"",shouldShow=this._shouldShow(alt,selectedColor);slide.classList.toggle(CONFIG.hiddenClass,!shouldShow),shouldShow&&(visibleSlideCount++,firstVisibleMediaId===null&&(firstVisibleMediaId=slide.dataset.mediaId))}),visibleSlideCount===0){console.info(`[variant-image-filter] No images matched color "${selectedColor}" \u2014 showing all images as fallback.`),this._showAll();return}if(this.thumbnailItems.forEach(thumb=>{const alt=thumb.dataset.mediaAlt||"",shouldShow=this._shouldShow(alt,selectedColor);thumb.classList.toggle(CONFIG.hiddenClass,!shouldShow)}),firstVisibleMediaId&&this.mediaGallery){const activeSlide=this.mediaGallery.querySelector("li[data-media-id].is-active");(activeSlide&&activeSlide.classList.contains(CONFIG.hiddenClass)||!activeSlide)&&this.mediaGallery.setActiveMedia?.(firstVisibleMediaId,!0)}}_shouldShow(alt,selectedColor){if(!alt||!alt.trim())return CONFIG.showBlankAlt;const altColor=parseColorFromAlt(alt);return colorsMatch(altColor,selectedColor)}_showAll(){[...this.viewerSlides,...this.thumbnailItems].forEach(el=>{el.classList.remove(CONFIG.hiddenClass)})}}function init(){document.querySelectorAll('media-gallery[id^="MediaGallery-"]').forEach(gallery=>{const sectionId=gallery.id.replace("MediaGallery-",""),metaEl=document.getElementById(`ProductMediaData-${sectionId}`);if(!metaEl)return;let meta;try{meta=JSON.parse(metaEl.textContent)}catch(e){console.warn("[variant-image-filter] Could not parse product metadata:",e);return}if(!meta.hasMultipleColorVariants)return;const filter=new VariantImageFilter(sectionId,meta.optionNames),selectedVariantEl=gallery.closest("product-info")?.querySelector("[data-selected-variant]");if(selectedVariantEl){let selectedVariant;try{selectedVariant=JSON.parse(selectedVariantEl.textContent)}catch{}selectedVariant&&filter._onVariantChanged({detail:{variant:selectedVariant,isInitial:!0}})}})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",init):init()})();
2//# sourceMappingURL=/cdn/shop/t/36/assets/variant-image-filter.js.map?v=43411437947733934551782325308