https://drinktrevi.com/cdn/shop/t/151/assets/trevi-product-gallery.js?v=81971883053984817121791072195

1(()=>{function init(){document.querySelectorAll(".js-product-gallery-desktop").forEach(root=>{if(root.dataset.treviGallery)return;const grid=root.querySelector(".ProductGallery-grid, .ProductGallery-gridFullwidth"),slides=Array.from(grid?.querySelectorAll(".ProductGallery-mainSlide")||[]);if(slides.length<2)return;root.dataset.treviGallery="true",root.classList.add("trevi-gallery");const thumbs=document.createElement("div");thumbs.className="trevi-gallery-thumbs",thumbs.setAttribute("aria-label","Product image thumbnails");let active=0;const buttons=slides.map((slide,i)=>{const button=document.createElement("button");button.type="button",button.setAttribute("aria-label",`View product image ${i+1}`);const image=slide.querySelector("img");if(image){const thumb=image.cloneNode();thumb.removeAttribute("data-srcset"),thumb.removeAttribute("srcset"),thumb.className="",thumb.src=(image.getAttribute("data-srcset")||image.src).split(",")[0].trim().split(" ")[0],thumb.alt="",button.append(thumb)}else button.textContent="Video";return button.addEventListener("click",()=>show(i)),thumbs.append(button),button});function show(index){active=index,slides.forEach((slide,i)=>{slide.hidden=i!==active,i!==active&&slide.querySelectorAll("video").forEach(v=>v.pause())}),buttons.forEach((button,i)=>button.setAttribute("aria-pressed",String(i===active))),prev.disabled=active===0,next.disabled=active===slides.length-1}function arrow(label,direction){const button=document.createElement("button");return button.type="button",button.className=`trevi-gallery-arrow trevi-gallery-${direction}`,button.setAttribute("aria-label",label),button.innerHTML=`<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="${direction==="prev"?"M14 5l-7 7 7 7":"M10 5l7 7-7 7"}" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,button}const prev=arrow("Previous product image","prev"),next=arrow("Next product image","next");prev.addEventListener("click",()=>show(active-1)),next.addEventListener("click",()=>show(active+1)),grid.append(prev,next),grid.after(thumbs),show(0)})}init(),document.addEventListener("shopify:section:load",init)})(),(()=>{if(window.treviMobileGalleryInitialized)return;window.treviMobileGalleryInitialized=!0;const drop='<svg viewBox="0 0 16 22" aria-hidden="true"><path d="M8 1C6 5 1 10 1 14a7 7 0 0 0 14 0C15 10 10 5 8 1Z" fill="currentColor"/></svg>';let viewer;function getViewer(){return viewer||(viewer=document.createElement("dialog"),viewer.className="trevi-image-viewer",viewer.setAttribute("aria-label","Product images"),viewer.innerHTML='<button type="button" class="trevi-image-viewer-close" aria-label="Close product images">\xD7</button><div class="trevi-image-viewer-stage"><img alt=""></div><div class="trevi-image-viewer-controls"><button type="button" data-direction="-1" aria-label="Previous enlarged image"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m14 6-6 6 6 6"/></svg></button><span aria-live="polite"></span><button type="button" data-direction="1" aria-label="Next enlarged image"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m10 6 6 6-6 6"/></svg></button></div>',document.body.append(viewer),viewer)}function init(){document.querySelectorAll(".js-product-gallery-mobile").forEach(root=>{if(root.dataset.treviMobileGallery)return;const container=root.querySelector(".swiper-container-mobile"),slides=Array.from(container?.querySelectorAll(".swiper-wrapper > .swiper-slide")||[]);if(!slides.length)return;root.dataset.treviMobileGallery="true";const indicators=document.createElement("div");indicators.className="trevi-gallery-drops",indicators.setAttribute("aria-label","Product images");

1const buttons=slides.map((slide,i)=>{const button=document.createElement("button");return button.type="button",button.innerHTML=drop,button.setAttribute("aria-label",`View image ${i+1} of ${slides.length}`),button.addEventListener("click",()=>container.swiper?.slideTo(i)),indicators.append(button),button});container.after(indicators);function sync(){const index=container.swiper?.activeIndex||0;buttons.forEach((button,i)=>{button.setAttribute("aria-current",i===index?"true":"false")})}const observer=new MutationObserver(sync);observer.observe(container.querySelector(".swiper-wrapper"),{subtree:!0,attributes:!0,attributeFilter:["class"]}),sync();const images=slides.map((slide,index)=>({index,element:slide.querySelector("[data-trevi-full-image]")})).filter(item=>item.element);images.forEach(({element,index})=>{element.setAttribute("role","button"),element.tabIndex=0,element.setAttribute("aria-label",`Enlarge product image ${index+1}`)});function open(element){const dialog=getViewer();let active=images.findIndex(item=>item.element===element);if(active<0)return;const previousFocus=document.activeElement,previousOverflow=document.documentElement.style.overflow,image=dialog.querySelector("img"),counter=dialog.querySelector("span");function show(index){active=(index+images.length)%images.length;const item=images[active];image.src=item.element.dataset.treviFullImage,image.alt=item.element.dataset.treviImageAlt||"Product image",counter.textContent=`${active+1} / ${images.length}`,container.swiper?.slideTo(item.index),sync()}const close=()=>dialog.close();dialog.querySelector(".trevi-image-viewer-close").onclick=close,dialog.querySelectorAll("[data-direction]").forEach(button=>{button.hidden=images.length<2,button.onclick=()=>show(active+Number(button.dataset.direction))}),dialog.onkeydown=event=>{event.key==="ArrowRight"&&(event.preventDefault(),show(active+1)),event.key==="ArrowLeft"&&(event.preventDefault(),show(active-1))};let start;dialog.ontouchstart=event=>{start=event.touches.length===1?{x:event.touches[0].clientX,y:event.touches[0].clientY}:null},dialog.ontouchend=event=>{if(!start)return;const end=event.changedTouches[0],dx=end.clientX-start.x,dy=end.clientY-start.y;start=null,Math.abs(dx)>50&&Math.abs(dx)>Math.abs(dy)&&show(active+(dx<0?1:-1))},dialog.onclose=()=>{document.documentElement.style.overflow=previousOverflow,previousFocus?.focus({preventScroll:!0})},show(active),document.documentElement.style.overflow="hidden",dialog.showModal()}root.addEventListener("click",event=>{const element=event.target.closest("[data-trevi-full-image]");!element||!matchMedia("(max-width:1023px)").matches||(event.preventDefault(),event.stopImmediatePropagation(),container.swiper?.allowClick!==!1&&open(element))},!0),root.addEventListener("keydown",event=>{(event.key==="Enter"||event.key===" ")&&event.target.matches("[data-trevi-full-image]")&&(event.preventDefault(),open(event.target))}),root.treviGalleryCleanup=()=>observer.disconnect()})}init(),document.addEventListener("shopify:section:load",init),document.addEventListener("shopify:section:unload",event=>{event.target.querySelectorAll(".js-product-gallery-mobile").forEach(root=>root.treviGalleryCleanup?.()),viewer?.open&&viewer.close()})})();
2//# sourceMappingURL=/cdn/shop/t/151/assets/trevi-product-gallery.js.map?v=81971883053984817121791072195