| 1 |
(()=>{"use strict";const e="gutenify--product-lightbox-open";let t=null,n=null;const r=e=>{const{images:r}=n;n.index=(e+r.length)%r.length;const o=r[n.index];t.image.src=o.src,t.image.alt=o.alt||"",o.width&&(t.image.width=o.width),o.height&&(t.image.height=o.height),t.counter.textContent=`${n.index+1} / ${r.length}`;const i=r.length>1;t.previous.hidden=!i,t.next.hidden=!i},o=e=>{"Escape"===e.key?i():"ArrowLeft"===e.key?r(n.index-1):"ArrowRight"===e.key&&r(n.index+1)},i=()=>{if(!n||!t)return;t.root.classList.remove("is-open"),document.body.classList.remove(e),document.removeEventListener("keydown",o);const r=n.trigger;window.setTimeout((()=>{t.root.hidden=!0}),180),n=null,r?.focus()},a=()=>{n?.closeOnOverlayClick&&i()},l=e=>{n?.closeOnOverlayClick&&e.target!==t.image&&(e.target.closest(".gutenify--product-lightbox__close, .gutenify--product-lightbox__previous, .gutenify--product-lightbox__next")||i())};document.querySelectorAll("[data-ff-product-gallery]").forEach((s=>{const c=window.matchMedia("(max-width: 480px)"),d=Array.from(s.querySelectorAll("[data-ff-gallery-item]")),u=d.map((e=>({src:e.dataset.ffImageSrc,alt:e.dataset.ffImageAlt,width:Number.parseInt(e.dataset.ffImageWidth,10),height:Number.parseInt(e.dataset.ffImageHeight,10)})));let g=null;const m=()=>{c.matches&&null===g?g=(e=>{const t=e.querySelector(".gutenify--single-product-gallery__track"),n=e.querySelector(".gutenify--single-product-gallery__viewport"),r=Array.from(e.querySelectorAll(".gutenify--single-product-gallery__item"));if(!t||!n||r.length<2)return()=>{};const o=Array.from(e.querySelectorAll("[data-ff-gallery-dot]")),i=e.querySelector("[data-ff-gallery-current]");let a=0,l=null,s=!1;const c=e=>{a=Math.max(0,Math.min(r.length-1,e)),t.style.transform=`translate3d(-${100*a}%, 0, 0)`,i&&(i.textContent=String(a+1)),o.forEach(((e,t)=>{const n=t===a;e.classList.toggle("is-active",n),e.setAttribute("aria-pressed",String(n))}))},d=e=>{"mouse"!==e.pointerType&&(l=e.clientX,s=!1)},u=e=>{if(null===l||"mouse"===e.pointerType)return;const t=e.clientX-l;l=null,Math.abs(t)<45||(s=!0,c(t>0?a-1:a+1))},g=e=>{s&&(e.preventDefault(),e.stopPropagation(),s=!1)},m=o.map(((e,t)=>{const n=()=>c(t);return e.addEventListener("click",n),[e,n]}));return n.addEventListener("pointerdown",d),n.addEventListener("pointerup",u),n.addEventListener("click",g,!0),c(0),()=>{n.removeEventListener("pointerdown",d),n.removeEventListener("pointerup",u),n.removeEventListener("click",g,!0),m.forEach((([e,t])=>e.removeEventListener("click",t))),t.style.removeProperty("transform")}})(s):c.matches||null===g||(g(),g=null)};if("true"===s.dataset.ffLightbox){const c="true"===s.dataset.ffLightboxOverlayClose;d.forEach(((s,d)=>{s.addEventListener("click",(()=>((s,c,d,u=!0)=>{s?.length&&(t||(t=(()=>{const e=document.createElement("div");e.className="gutenify--product-lightbox",e.hidden=!0;const t=document.createElement("div");t.className="gutenify--product-lightbox__backdrop";const n=document.createElement("div");n.className="gutenify--product-lightbox__dialog",n.setAttribute("role","dialog"),n.setAttribute("aria-modal","true");const r=document.createElement("button");r.type="button",r.className="gutenify--product-lightbox__close",r.setAttribute("aria-label","Close"),r.innerHTML='<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';const o=document.createElement("button");o.type="button",o.className="gutenify--product-lightbox__previous",o.setAttribute("aria-label","Previous image"),o.innerHTML='<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';const i=document.createElement("button");i.type="button",i.className="gutenify--product-lightbox__next",i.setAttribute("aria-label","Next image"),i.innerHTML='<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';const a=document.createElement("div");a.className="gutenify--product-lightbox__image-wrap";const l=document.createElement("img");l.className="gutenify--product-lightbox__image";const s=document.createElement("div");return s.className="gutenify--product-lightbox__counter",s.setAttribute("aria-live","polite"),a.appendChild(l),n.append(r,o,a,i,s),e.append(t,n),document.body.appendChild(e),{root:e,backdrop:t,dialog:n,close:r,previous:o,next:i,image:l,counter:s}})(),t.backdrop.addEventListener("click",a),t.dialog.addEventListener("click",l),t.close.addEventListener("click",i),t.previous.addEventListener("click",(()=>r(n.index-1))),t.next.addEventListener("click",(()=>r(n.index+1)))),n={images:s,index:0,trigger:d,closeOnOverlayClick:u},r(c||0),t.root.hidden=!1,document.body.classList.add(e),document.addEventListener("keydown",o),window.requestAnimationFrame((()=>{t.root.classList.add("is-open"),t.close.focus()})))})(u,d,s,c)))}))}m(),c.addEventListener("change",m)}))})(); |
