1if(!customElements.get("card-color-swatches")){class CardColorSwatches extends HTMLElement{constructor(){super(),this.setupSwatches()}setupSwatches(){this.cardWrap=this.closest(".product-card"),this.cardMedia=this.parentElement.parentElement.parentElement.querySelector(".splide__list"),this.spliderContainer=this.parentElement.parentElement.parentElement.querySelector(".splide").parentElement,this.cardImages=this.parentElement.parentElement.parentElement.querySelectorAll(".card__media img"),this.actionButton=this.querySelector(".color-swatch--action"),this.outSwatches=this.querySelectorAll(".color-swatch[data-swatch-out]"),this.swatches=this.querySelectorAll(".color-swatch"),this.sizeSelectors=this.parentElement.parentElement.parentElement.querySelector(".card-size-selector"),this.mobileButton=this.querySelector(".swath-mobile-button"),this.actionButton&&this.actionButton.addEventListener("click",this.onActionClick.bind(this)),this.swatches.length>0&&!this.hasAttribute("disable-switch")&&this.swatches.forEach(swatch=>{swatch.addEventListener("click",this.onClick.bind(this))}),this.mobileButton&&this.mobileButton.addEventListener("click",this.mobileButtonClick.bind(this)),this.calculateColor(),this.checkFilters()}checkFilters(){if(window.global_size_filters&&global_size_filters.length>0)for(const child of this.sizeSelectors.children){const relatedId=child.getAttribute("data-color-id"),sizeButtons=Array.from(child.querySelectorAll("button"));global_size_filters.every(filter=>sizeButtons.find(btn=>btn.textContent.trim()===filter&&btn.disabled===!0))&&(Array.from(this.swatches).find(swatch=>swatch.getAttribute("data-related-id")===relatedId).style.display="none")}}calculateColor(){this.swatches.forEach(swatch=>
1{if(this.cardImages[0]){let imgurl=new URL(this.cardImages[0].src);swatch.getAttribute("data-swatch-src")?.split(",").find(i=>imgurl.href.includes(i))&&swatch.classList.add("is-active")}})}onActionClick(){this.classList.contains("expanded")?(this.outSwatches.forEach(swatch=>{swatch.classList.add("close-animation")}),setTimeout(()=>{this.outSwatches.forEach(swatch=>{swatch.classList.remove("close-animation")}),this.classList.remove("expanded")},300)):(this.outSwatches.forEach(swatch=>{swatch.classList.add("open-animation")}),setTimeout(()=>{this.outSwatches.forEach(swatch=>{swatch.classList.remove("open-animation")}),this.classList.add("expanded")},300))}onClick(e){const{target}=e;if(e.preventDefault(),!target.getAttribute("data-related-id"))return;this.swatches.forEach(swatch=>{swatch.classList.remove("is-active"),swatch.getAttribute("title")==target.getAttribute("title")&&swatch.classList.add("is-active")}),this.spliderContainer.querySelector(".splide").remove();const newSplide=` 2 <section 3 class="splide card-media-slider" 4 aria-labelledby="carousel-heading" 5 > 6 <div class="splide__track"> 7 <ul class="splide__list"> 8 ${target.getAttribute("data-swatch-src").split(",").filter(src=>src!=="").map((src,i)=>` 9 <li class="splide__slide"> 10 <img src="${src}" alt="${target.getAttribute("title")}" class="motion-reduce image-card"> 11 </li> 12 `).join("")} 13 </ul> 14 </div> 15 </section> 16 `;this.spliderContainer.insertAdjacentHTML("afterbegin",newSplide),Array.from(this.sizeSelectors.children).forEach(sizeSelector=>{sizeSelector.style.display="none",target.getAttribute("data-related-id")==sizeSelector.getAttribute("data-color-id")&&(sizeSelector.style.display="block")}),this.cardWrap.querySelectorAll("[data-swatch-related-id]").forEach(el=>{el.getAttribute("data-swatch-related-id")===target.getAttribute("data-related-id")?el.classList.add("isSwatch-active"):el.classList.remove("isSwatch-active")})}mobileButtonClick(){let backdrop=document.createElement("div");backdrop.classList.add("card-size-selector__backdrop"),backdrop.innerHTML=` 17 <div class="card-size-selector__box"> 18 <div class="card-size-selector__content"> 19 <div class="card-size-selector__header"> 20 <div class="card-size-selector__title">Selecciona tu color</div> 21 <div class="card-size-selector__close" onclick="deleteSelector()"> 22 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 23 <line x1="18" y1="6" x2="6" y2="18"></line> 24 <line x1="6" y1="6" x2="18" y2="18"></line> 25 </svg> 26 </div> 27 </div> 28 </div> 29 </div> 30 `,backdrop.addEventListener("click",e=>{e.target===backdrop&&this.deleteSelector()});let copySelector=this.querySelector(".swatch-list").cloneNode(!0);copySelector.classList.add("swatch-mobile-open"),copySelector.querySelectorAll(".color-swatch").forEach(swatch=>{if(swatch.addEventListener("click",e=>{this.onClick(e),this.deleteSelector()}),swatch.classList.contains("is-active")){let text=swatch.querySelector("span").textContent,span=document.createElement("span");span.innerText=text,backdrop.querySelector(".card-size-selector__content").appendChild(span)}swatch.removeAttribute("data-swatch-out")}),backdrop.querySelector(".card-size-selector__box").appendChild(copySelector),document.body.appendChild(backdrop),document.body.style.overflow="hidden",window.backdrop=backdrop}deleteSelector(){window.backdrop&&(window.backdrop.classList.add("close"),setTimeout(()=>{window.backdrop.remove(),window.backdrop=null,document.body.style.overflow=""},250))}}customElements.define("card-color-swatches",CardColorSwatches)} 31//# sourceMappingURL=/cdn/shop/t/268/assets/card-color-swatches.js.map?v=1622253637929939641770043760
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.