vistaview 0.2.0 → 0.3.2

package/dist/vistaview.umd.js

@@ -0,0 +1,16 @@
+(function(w,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(w=typeof globalThis<"u"?globalThis:w||self,y(w.VistaView={}))})(this,(function(w){"use strict";var st=Object.defineProperty;var ot=(w,y,C)=>y in w?st(w,y,{enumerable:!0,configurable:!0,writable:!0,value:C}):w[y]=C;var p=(w,y,C)=>ot(w,typeof y!="symbol"?y+"":y,C);function y(s){const t=getComputedStyle(s),e=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:e.top,left:e.left,width:e.width,height:e.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}let C=null;function Y(){return C||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),C=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),C)}function H(s){const e=Y().createHTML(s),n=document.createElement("template");n.innerHTML=e;const i=n.content;return n.remove(),i}function T(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function W(s){const e=window.getComputedStyle(s).objectFit||"",{width:n,height:i}=s.getBoundingClientRect(),o=s.naturalWidth,l=s.naturalHeight;if(!e)return{width:n,height:i};if(!o||!l)return{width:n,height:i};const a=o/l,r=n/i;switch(e){case"fill":return{width:n,height:i};case"none":return{width:o,height:l};case"contain":return a>r?{width:n,height:n/a}:{width:i*a,height:i};case"cover":return a<r?{width:n,height:n/a}:{width:i*a,height:i};case"scale-down":{const h={width:o,height:l},c=a>r?{width:n,height:n/a}:{width:i*a,height:i};return c.width<=h.width&&c.height<=h.height?c:h}}return{width:n,height:i}}function S(s){const t=window.innerWidth,e=window.innerHeight,n=s.naturalWidth,i=s.naturalHeight;if(!n||!i)throw console.error("Error",s),new Error("Image natural dimensions are zero");if(n<t&&i<e)return{width:n,height:i};const o=n/i,l=t/e;let a,r;return o>l?(a=t,r=t/o):(r=e,a=e*o),{width:a,height:r}}function q(s,t){const e=window.innerHeight,n=window.innerWidth,i=s,o=t,l=Math.max(0,(i-n)/2)+n/2,a=Math.max(0,(o-e)/2)+e/2,r=-l,h=-a;return{maxDiffX:l,minDiffY:h,maxDiffY:a,minDiffX:r}}const U='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',j='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',N='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',K='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',G='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',J='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';function k(){return{name:"download",icon:J,onClick:async s=>{var o;const t=await fetch(s.src),e=await t.blob(),n=t.url,i=document.createElement("a");i.href=URL.createObjectURL(e),i.download=((o=n.split("/").pop())==null?void 0:o.split("?")[0].split("#")[0])||"download",document.body.appendChild(i),i.click(),document.body.removeChild(i)}}}function Q(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button class="vistaview-zoom-in-btn">${N}</button>`;case"zoomOut":return`<button disabled class="vistaview-zoom-out-btn">${K}</button>`;case"close":return`<button class="vistaview-close-btn">${G}</button>`;case"indexDisplay":return'<div class="vistaview-index-display"></div>';case"description":return'<div class="vistaview-description"></div>';default:return""}return`<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`}function O(s,t){var c,d;const e=s.imageElm?getComputedStyle(s.imageElm):null,n=(e==null?void 0:e.objectFit)||"",i=((c=s.imageElm)==null?void 0:c.naturalWidth)||"",o=((d=s.imageElm)==null?void 0:d.naturalHeight)||"",l=(e==null?void 0:e.width)||"",a=(e==null?void 0:e.height)||"",r=document.createElement("div");r.className="vistaview-item",r.dataset.vistaviewPos=`${t!==void 0?t:""}`,r.dataset.vistaviewIndex=s.index.toString();const h=H(`<img class="vistaview-image-lowres"
+    style="${n?`object-fit:${n};`:""}${l?`width:${l};`:""}${a?`height:${a};`:""}"
+    src="${s.thumb||s.src}" 
+    alt="${s.alt||""}"
+    ${i?`width="${i}"`:""}
+    ${o?`height="${o}"`:""}
+  />
+  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt||""}" />`);return r.appendChild(h),r}function tt({controls:s,isReducedMotion:t}){const e=i=>i?i.map(Q).join(""):"";return H(`<div class="vistaview-root${t?" vistaview--reduced-motion":""}" id="vistaview-root">
+    <div class="vistaview-container">
+    <div class="vistaview-image-container"></div>
+    <div class="vistaview-top-bar vistaview-ui"><div>${e(s==null?void 0:s.topLeft)}</div><div>${e(s==null?void 0:s.topCenter)}</div><div>${e(s==null?void 0:s.topRight)}</div></div>
+    <div class="vistaview-bottom-bar vistaview-ui"><div>${e(s==null?void 0:s.bottomLeft)}</div><div>${e(s==null?void 0:s.bottomCenter)}</div><div>${e(s==null?void 0:s.bottomRight)}</div></div>
+    <div class="vistaview-prev-btn vistaview-ui"><button>${U}</button></div>
+    <div class="vistaview-next-btn vistaview-ui"><button>${j}</button></div>
+    </div>
+    </div>`)}let $=null,M=null,Z=null;function V(s){A(s);const t=s.imageContainerElm,e=s.elements.length;if(!t)return;let n=0,i=0,o=0,l=0,a=!1;$=r=>{r.preventDefault(),r.stopPropagation(),s.isZoomed===!1&&(a=!0,n=r.pageX,i=r.pageY,o=r.pageX,l=Date.now())},M=r=>{if(r.preventDefault(),r.stopPropagation(),s.isZoomed!==!1||!a)return;const h=r.pageX-n,c=r.pageY-i;o=r.pageX,t.style.setProperty("--vistaview-pointer-diff-x",`${h}px`),t.style.setProperty("--vistaview-pointer-diff-y",`${c}px`)},Z=r=>{if(r.preventDefault(),r.stopPropagation(),s.isZoomed!==!1||!a)return;a=!1;const h=Array.from(t.querySelectorAll(".vistaview-item")),c=o-n,d=Date.now()-l,v=c/d,u=s.options.touchSpeedThreshold||.7,E=h.find(f=>f.dataset.vistaviewPos==="0"),m=Number(E.dataset.vistaviewIndex),b=s.isReducedMotion;function g(){h[0].removeEventListener("transitionend",g),t.style.removeProperty("--vistaview-pointer-diff-x"),t.style.removeProperty("--vistaview-pointer-diff-y"),h.forEach(f=>{f.style.transition="",f.style.translate=""})}function x(f){h.forEach(L=>{L.style.transition=`translate ${s.options.animationDurationBase*.5}ms ease-out`,L.style.translate=f})}v<-u||v>u?(h[0].addEventListener("transitionend",()=>{s.isReducedMotion=!0,g(),s.view(v<-u?(m+1)%e:(m-1+e)%e,{next:v<-u,prev:v>u}),s.isReducedMotion=b}),x(v<-u?"-100%":"100%")):(h[0].addEventListener("transitionend",g),x("0%"))},t.addEventListener("pointermove",M),t.addEventListener("pointerup",Z),t.addEventListener("pointerdown",$)}function A(s){const t=s.imageContainerElm;t&&(M&&t.removeEventListener("pointermove",M),Z&&t.removeEventListener("pointerup",Z),$&&t.removeEventListener("pointerdown",$))}const X=s=>{V(s)},_=({htmlElements:{to:s},index:{to:t},elements:e})=>{e instanceof NodeList&&t!==null&&(e.forEach(n=>n.style.opacity="1"),e[t].style.opacity="0"),s&&s.forEach(n=>{const i=Number(n.dataset.vistaviewPos);i!==0?(n.style.zIndex="1",n.style.left=100*i+"%"):n.style.zIndex="2"})},B=async({htmlElements:{from:s,to:t},images:{to:e},via:{next:n,prev:i},container:o,options:l,isReducedMotion:a})=>{if(!e)throw new Error("VistaView: images is null in defaultTransition()");if(a)return o.innerHTML="",t.forEach(h=>{o.appendChild(h)}),e[e.length===1?0:Math.floor(e.length/2)];const r=s.filter(h=>h.dataset.vistaviewPos==="0"||(n?h.dataset.vistaviewPos==="1":h.dataset.vistaviewPos==="-1"));return await new Promise(h=>{function c(){o.innerHTML="",t.forEach(d=>{o.appendChild(d)}),h(0)}r[r.length-1].addEventListener("transitionend",c),r.forEach(d=>{d.style.transition=`translate ${l.animationDurationBase*.5}ms ease-out`,d.style.translate=n?"-100%":i?"100%":"0%"})}),e[e.length===1?0:Math.floor(e.length/2)]},F=s=>{s.elements instanceof NodeList&&s.elements.forEach(t=>t.style.opacity="1"),A(s)},R={detectReducedMotion:!0,animationDurationBase:333,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:.7,preloads:1,keyboardListeners:!0,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",k(),"close"],bottomCenter:["description"]}},I={somethingOpened:null};class et{constructor(t,e){p(this,"options");p(this,"elements");p(this,"isReducedMotion");p(this,"currentIndex",{_value:null,_vistaView:null,_via:{next:!1,prev:!1},set value(t){var n;const e=this._value;this._value=t,(n=this._vistaView)==null||n.swap(e,this._value)},get value(){return this._value},get via(){return this._via},set via(t){this._via=t}});p(this,"rootElm",null);p(this,"imageContainerElm",null);p(this,"customControls",{});p(this,"currentImages",null);p(this,"currentItems",null);p(this,"navActive",!0);p(this,"isZoomed",!1);p(this,"onClickElements",[]);p(this,"onResizeHandler",null);p(this,"onKeyDown",null);p(this,"userSetup",_);p(this,"userTransition",B);p(this,"userClose",F);p(this,"userInit",X);p(this,"onZoomedPointerDown",null);p(this,"onZoomedPointerMove",null);p(this,"onZoomedPointerUp",null);this.elements=t,this.currentIndex._vistaView=this,this.options={...R,...e||{},controls:{...R.controls,...(e==null?void 0:e.controls)||{}}},this.options.initFunction&&(this.userInit=this.options.initFunction),this.options.transitionFunction&&(this.userTransition=this.options.transitionFunction),this.options.closeFunction&&(this.userClose=this.options.closeFunction),this.options.initFunction&&(this.userInit=this.options.initFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((n,i)=>{this.onClickElements.push(o=>{o.preventDefault(),this.open(i)}),n.addEventListener("click",this.onClickElements[i])})}async swap(t,e){var h,c;if(!I.somethingOpened||t===e||t===null||this.elements.length===1)return;if(!this.imageContainerElm)throw new Error("VistaView: imageContainerElm is null in swap()");this.setIndexDisplay(),this.clearZoom();const{images:n,positions:i}=this.getCurrentIndexes(e),o=this.getImages(n),l=o.map((d,v)=>O(d,i[v]));l.forEach((d,v)=>{var m,b;const u=d.querySelector(".vistaview-image-highres"),E=o[v].imageElm;if(u.complete&&u.naturalWidth>0){const{width:g,height:x}=W(E);g&&x&&(u.style.setProperty("--vistaview-fitted-width",`${g}px`),u.style.setProperty("--vistaview-fitted-height",`${x}px`)),u.classList.add("vistaview-image-loaded"),(m=d.querySelector(".vistaview-image-lowres"))==null||m.classList.add("vistaview-image--hidden");const{width:f,height:L}=S(u);u.style.width=`${f}px`,u.style.height=`${L}px`,u.width=u.naturalWidth,u.height=u.naturalHeight,(b=u.parentElement)!=null&&b.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()}}),this.navActive=!1;const a={htmlElements:{from:this.currentItems,to:l},images:{from:this.currentImages,to:o},index:{from:t,to:e},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(a);const r=await this.userTransition(a);this.navActive=!0,this.setInitialDimPos(r),this.currentImages=o,this.currentItems=l,this.loadImages(),this.setCurrentDescription(),(c=(h=this.options).onImageView)==null||c.call(h,a)}setZoomed(t){var e,n,i,o,l,a;if(this.isZoomed!==t){if(this.isZoomed){let r=this.isZoomed;if(r.classList.remove("vistaview-image--zooming"),this.onZoomedPointerDown&&((e=r.parentElement)==null||e.removeEventListener("pointerdown",this.onZoomedPointerDown),this.onZoomedPointerDown=null),this.onZoomedPointerMove&&((n=r.parentElement)==null||n.removeEventListener("pointermove",this.onZoomedPointerMove),this.onZoomedPointerMove=null),this.onZoomedPointerUp&&((i=r.parentElement)==null||i.removeEventListener("pointerup",this.onZoomedPointerUp),this.onZoomedPointerUp=null),r==null||r.style.removeProperty("--pointer-diff-x"),r==null||r.style.removeProperty("--pointer-diff-y"),setTimeout(()=>{r==null||r.classList.remove("vistaview-image--zooming")},500),this.isZoomed=!1,!t)return}if(t){this.isZoomed=t,t.classList.add("vistaview-image--zooming"),t==null||t.style.setProperty("--pointer-diff-x","0px"),t==null||t.style.setProperty("--pointer-diff-y","0px");let r=!1,h=0,c=0,d=0,v=0,u=0,E=0;this.onZoomedPointerDown=m=>{m.preventDefault(),m.stopPropagation(),r=!0,h=m.pageX,c=m.pageY,t.setPointerCapture(m.pointerId)},this.onZoomedPointerMove=m=>{if(!r)return;m.preventDefault(),u=m.pageX-h,E=m.pageY-c;const b=parseInt((t==null?void 0:t.dataset.vistaviewCurrentWidth)||"0"),g=parseInt((t==null?void 0:t.dataset.vistaviewCurrentHeight)||"0"),{maxDiffX:x,minDiffY:f,maxDiffY:L,minDiffX:D}=q(b,g),P=Math.min(x,Math.max(D,d+u)),z=Math.min(L,Math.max(f,v+E));u=P-d,E=z-v,t==null||t.style.setProperty("--pointer-diff-x",`${P}px`),t==null||t.style.setProperty("--pointer-diff-y",`${z}px`)},this.onZoomedPointerUp=m=>{r=!1,t.releasePointerCapture(m.pointerId),d+=u,v+=E,u=0,E=0},(o=t==null?void 0:t.parentElement)==null||o.addEventListener("pointerdown",this.onZoomedPointerDown),(l=t==null?void 0:t.parentElement)==null||l.addEventListener("pointermove",this.onZoomedPointerMove),(a=t==null?void 0:t.parentElement)==null||a.addEventListener("pointerup",this.onZoomedPointerUp);return}}}zoomIn(){var o,l,a,r,h;const t=(o=this.rootElm)==null?void 0:o.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),e=t.width,n=t.height;t.dataset.vistaviewInitialWidth||(t.dataset.vistaviewInitialWidth=e.toString()),t.dataset.vistaviewInitialHeight||(t.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(t);const i=(t.naturalWidth||0)*this.options.maxZoomLevel;if(e&&i&&e<i){const c=Math.min(e+this.options.zoomStep,i);t.style.width=`${c}px`;const d=c/e*n;t.style.height=`${d}px`,(a=(l=this.rootElm)==null?void 0:l.querySelector("button.vistaview-zoom-out-btn"))==null||a.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=c.toString(),t.dataset.vistaviewCurrentHeight=d.toString(),c===i&&((h=(r=this.rootElm)==null?void 0:r.querySelector("button.vistaview-zoom-in-btn"))==null||h.setAttribute("disabled","true"))}}zoomOut(){var l,a,r,h,c;const t=(l=this.rootElm)==null?void 0:l.querySelector('[data-vistaview-pos="0"] .vistaview-image-highres'),e=t.width,n=t.height,i=t.dataset.vistaviewInitialWidth?parseInt(t.dataset.vistaviewInitialWidth):0,o=d=>{d.target===t&&(t.classList.remove("vistaview-image--zooming-out"),t.removeEventListener("transitionend",o))};if(t.addEventListener("transitionend",o),t.classList.add("vistaview-image--zooming-out"),e&&i&&e>i){const d=Math.max(e-this.options.zoomStep,i);t.style.width=`${d}px`;const v=d/e*n;t.style.height=`${v}px`,(r=(a=this.rootElm)==null?void 0:a.querySelector("button.vistaview-zoom-in-btn"))==null||r.removeAttribute("disabled"),t.dataset.vistaviewCurrentWidth=d.toString(),t.dataset.vistaviewCurrentHeight=v.toString();const{maxDiffX:u,minDiffY:E,maxDiffY:m,minDiffX:b}=q(d,v);let g=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-x").replace("px",""))||"0"),x=parseInt((t==null?void 0:t.style.getPropertyValue("--pointer-diff-y").replace("px",""))||"0");g=Math.min(u,Math.max(b,g)),x=Math.min(m,Math.max(E,x)),t==null||t.style.setProperty("--pointer-diff-x",`${g}px`),t==null||t.style.setProperty("--pointer-diff-y",`${x}px`),d===i&&((c=(h=this.rootElm)==null?void 0:h.querySelector("button.vistaview-zoom-out-btn"))==null||c.setAttribute("disabled","true"),t.removeAttribute("data-vistaview-current-width"),t.removeAttribute("data-vistaview-current-height"),t.removeAttribute("data-vistaview-initial-width"),t.removeAttribute("data-vistaview-initial-height"),this.setZoomed(!1))}}clearZoom(){}getImages(t){return t.map((e,n)=>{const i=this.elements[e];if(i instanceof HTMLElement){const o=i.querySelector("img"),l=i.getAttribute("href")||"",a=i.getAttribute("src")||"",r=i.dataset.vistaviewSrc||l||a||(o==null?void 0:o.src)||"",h=i.dataset.vistaviewAlt||i.getAttribute("alt")||(o==null?void 0:o.alt)||"",c=i.dataset.vistaviewThumb||(o==null?void 0:o.src)||l||a||"";return{index:t[n],src:r,alt:h,thumb:c,imageElm:i instanceof HTMLImageElement?i:o,anchorElm:i instanceof HTMLAnchorElement?i:void 0}}else return{index:t[n],...i}})}setInitialDimPos(t){if(!this.rootElm)return;const e=t.imageElm?y(t.imageElm):void 0,n=t.anchorElm?y(t.anchorElm):void 0,i=(n==null?void 0:n.width)||(e==null?void 0:e.width)||0,o=(n==null?void 0:n.height)||(e==null?void 0:e.height)||0,l=((n==null?void 0:n.left)||(e==null?void 0:e.left)||0)+i/2,a=((n==null?void 0:n.top)||(e==null?void 0:e.top)||0)+o/2;this.rootElm.style.setProperty("--vistaview-container-initial-width",i+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-height",o+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-top",a+"px"),this.rootElm.style.setProperty("--vistaview-container-initial-left",l+"px"),this.rootElm.style.setProperty("--vistaview-image-border-radius",T(n==null?void 0:n.borderRadius)||T(e==null?void 0:e.borderRadius)||"0px")}updateZoomButtonsVisibility(){var i;const t=(i=this.rootElm)==null?void 0:i.querySelector('[data-vistaview-pos="0"] img.vistaview-image-highres');if(!t)return;const e=this;function n(){var c,d;const o=(c=e.rootElm)==null?void 0:c.querySelector("button.vistaview-zoom-in-btn"),l=(d=e.rootElm)==null?void 0:d.querySelector("button.vistaview-zoom-out-btn"),a=parseInt(t.style.width)||t.width,r=t.naturalWidth*e.options.maxZoomLevel,h=a<r&&r>0;o&&(o.style.display=h?"":"none"),l&&(l.style.display=h?"":"none")}t.complete&&t.naturalWidth>0?n():t.addEventListener("load",n)}loadImages(){if(!this.rootElm)return;this.rootElm.querySelectorAll(".vistaview-image-highres:not(.vistaview-image-loaded)").forEach((e,n)=>{const i=e,l=this.currentImages[n].imageElm,a={w:0,h:0};if(l){const{width:h,height:c}=W(l);a.w=Math.min(l.width,h),a.h=Math.min(l.height,c)}const r=(h=!1)=>()=>{var c;if(a.w&&a.h&&(i.style.width=`${a.w}px`,i.style.height=`${a.h}px`,i.style.setProperty("--vistaview-fitted-width",`${a.w}px`),i.style.setProperty("--vistaview-fitted-height",`${a.h}px`)),i.classList.add("vistaview-image-loaded"),i.width=i.naturalWidth,i.height=i.naturalHeight,h){const{width:d,height:v}=S(i);i.style.width=`${d}px`,i.style.height=`${v}px`}else setTimeout(()=>{const{width:d,height:v}=S(i);i.style.width=`${d}px`,i.style.height=`${v}px`},333);setTimeout(()=>{var d,v;(v=(d=i.parentElement)==null?void 0:d.querySelector(".vistaview-image-lowres"))==null||v.classList.add("vistaview-image--hidden")},500),(c=e.parentElement)!=null&&c.matches('[data-vistaview-pos="0"]')&&this.updateZoomButtonsVisibility()};i.complete&&i.naturalWidth>0?r(!0)():i.onload=r(!1)})}setIndexDisplay(){this.elements.length!==1&&(this.rootElm.querySelector(".vistaview-index-display").textContent=`${this.currentIndex.value+1} / ${this.elements.length}`)}setCurrentDescription(){this.rootElm.querySelector(".vistaview-description").textContent=(this.currentImages[1]||this.currentImages[0]).alt||""}getCurrentIndexes(t){const e=this.options.preloads,n=this.elements.length,i=n<1||!e?[t]:[...new Set([...Array.from({length:e},(l,a)=>((t-e+a)%n+n)%n),t,...Array.from({length:e},(l,a)=>(t+1+a)%n)])],o=n<1||!e?[0]:i.map((l,a)=>a-Math.floor(i.length/2));return{images:i,positions:o}}setKeyboardListeners(){this.onKeyDown=t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}},window.addEventListener("keydown",this.onKeyDown)}setResizeListeners(){this.onResizeHandler=()=>{var n;const t=this.currentImages[this.currentImages.length===1?0:Math.floor(this.currentImages.length/2)];this.setInitialDimPos(t);const e=(n=this.rootElm)==null?void 0:n.querySelectorAll(".vistaview-image-highres.vistaview-image-loaded");e==null||e.forEach(i=>{const o=i,{width:l,height:a}=S(o);o.classList.contains("vistaview-image--zooming")?(o.dataset.vistaviewInitialWidth=l.toString(),o.dataset.vistaviewInitialHeight=a.toString()):(o.style.width=`${l}px`,o.style.height=`${a}px`)})},window.addEventListener("resize",this.onResizeHandler)}open(t=0){var l,a,r,h,c,d,v,u,E,m,b,g,x;if(I.somethingOpened){console.error("VistaView: another instance is already opened. Returning.");return}if(I.somethingOpened=this,this.currentIndex._value=t,document.body.prepend(tt({controls:this.options.controls,isReducedMotion:this.isReducedMotion})),this.rootElm=document.querySelector("#vistaview-root"),this.imageContainerElm=((l=this.rootElm)==null?void 0:l.querySelector(".vistaview-image-container"))||null,!this.rootElm||!this.imageContainerElm)throw I.somethingOpened=null,new Error("Failed to create VistaView element");const{images:e,positions:n}=this.getCurrentIndexes(t);this.currentImages=this.getImages(e);const i=this.currentImages.map((f,L)=>O(f,n[L]));this.currentItems=i;const o={htmlElements:{from:null,to:this.currentItems},images:{from:null,to:this.currentImages},index:{from:null,to:t},via:this.currentIndex.via,container:this.imageContainerElm,elements:this.elements,isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userSetup(o),this.imageContainerElm.innerHTML="",this.currentItems.forEach(f=>{this.imageContainerElm.appendChild(f)}),(a=this.rootElm.querySelector(".vistaview-close-btn"))==null||a.addEventListener("click",()=>this.close()),(r=this.rootElm.querySelector(".vistaview-zoom-in-btn"))==null||r.addEventListener("click",()=>this.zoomIn()),(h=this.rootElm.querySelector(".vistaview-zoom-out-btn"))==null||h.addEventListener("click",()=>this.zoomOut()),(c=this.rootElm.querySelector(".vistaview-prev-btn>button"))==null||c.addEventListener("click",()=>this.prev()),(d=this.rootElm.querySelector(".vistaview-next-btn>button"))==null||d.addEventListener("click",()=>this.next()),[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(f=>{typeof f!="string"&&(this.customControls[f.name]=f)}),this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach(f=>{f.addEventListener("click",L=>{const D=this.customControls[L.currentTarget.dataset.vistaviewCustomControl],P=this.currentImages.find(z=>z.index===this.currentIndex.value);D&&P&&(D.onClick.constructor.name==="AsyncFunction"?(f.classList.add("vistaview-button--loading"),D.onClick(P).finally(()=>{f.classList.remove("vistaview-button--loading")})):D.onClick(P))})}),this.options.animationDurationBase&&this.rootElm.style.setProperty("--vistaview-animation-duration",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElm.style.setProperty("--vistaview-initial-z-index",`${this.options.initialZIndex}`),this.setInitialDimPos(this.currentImages[this.currentImages.length===1?0:Math.floor(this.currentImages.length/2)]),this.setResizeListeners(),this.options.keyboardListeners&&this.setKeyboardListeners(),this.elements.length===1&&((v=this.rootElm.querySelector(".vistaview-prev-btn"))==null||v.classList.add("vistaview-ui--none"),(u=this.rootElm.querySelector(".vistaview-next-btn"))==null||u.classList.add("vistaview-ui--none"),(E=this.rootElm.querySelector(".vistaview-index-display"))==null||E.classList.add("vistaview-ui--none")),this.rootElm&&this.rootElm.classList.add("vistaview--initialized"),this.loadImages(),this.setCurrentDescription(),this.setIndexDisplay(),this.userInit(this),(b=(m=this.options).onOpen)==null||b.call(m,o),(x=(g=this.options).onImageView)==null||x.call(g,o)}async close(t=!0){var n,i,o;if(I.somethingOpened!==this)return;t&&((n=this.rootElm)==null||n.classList.add("vistaview--closing"),await new Promise(l=>{var r;let a;(r=this.rootElm)==null||r.addEventListener("transitionend",h=>{h.currentTarget===this.rootElm&&(a&&clearTimeout(a),a=setTimeout(()=>{l()},333))})}));const e={htmlElements:{from:this.currentItems,to:null},images:{from:this.currentImages,to:null},index:{from:this.currentIndex.value,to:null},container:this.imageContainerElm,elements:this.elements,via:{prev:!1,next:!1},isReducedMotion:this.isReducedMotion,navActive:this.navActive,isZoomed:this.isZoomed,options:this.options};this.userClose(this),(o=(i=this.options).onClose)==null||o.call(i,e),document.body.removeChild(this.rootElm),this.currentIndex._value=null,this.currentIndex._via={next:!1,prev:!1},this.rootElm=null,this.imageContainerElm=null,this.currentImages=null,this.currentItems=null,this.navActive=!0,this.onResizeHandler&&(window.removeEventListener("resize",this.onResizeHandler),this.onResizeHandler=null),this.onKeyDown&&(window.removeEventListener("keydown",this.onKeyDown),this.onKeyDown=null),(this.onZoomedPointerDown||this.onZoomedPointerMove||this.onZoomedPointerUp)&&(this.setZoomed(!1),this.onZoomedPointerDown=null,this.onZoomedPointerMove=null,this.onZoomedPointerUp=null),I.somethingOpened=null}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach((t,e)=>{t.removeEventListener("click",this.onClickElements[e])})}view(t,e){I.somethingOpened===this&&this.navActive&&(t<0&&(t=this.elements.length-1),t>=this.elements.length&&(t=0),this.currentIndex.via=e||{next:!1,prev:!1},this.currentIndex.value=t)}next(){I.somethingOpened===this&&this.view(this.currentIndex.value+1,{next:!0,prev:!1})}prev(){I.somethingOpened===this&&this.view(this.currentIndex.value-1,{next:!1,prev:!0})}getCurrentIndex(){return I.somethingOpened===this?this.currentIndex.value:-1}}function it(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let e=0;e<t.length;e++){const n=t[e];if(!(n.dataset.vistaviewSrc||n.getAttribute("href")||n.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let n=0;n<e.length;n++)if(!e[n].src)return`Element at index ${n} is missing 'src' attribute.`}return t||s}function nt({elements:s,...t}){if(!s)throw new Error("No elements");let e=it(s);if(typeof e=="string")return console.error(e),console.warn("VistaView: silently returning."),null;const n=new et(e,t);return{open:(i=0)=>n.open(i),close:()=>n.close(),next:()=>n.next(),prev:()=>n.prev(),destroy:()=>n.destroy(),getCurrentIndex:()=>n.getCurrentIndex(),view:i=>{n.view(i)}}}w.DefaultOptions=R,w.defaultClose=F,w.defaultInit=X,w.defaultSetup=_,w.defaultTransition=B,w.removeTouchActions=A,w.setTouchActions=V,w.vistaView=nt,w.vistaViewDownload=k,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})}));

package/dist/vue.cjs

@@ -1 +1 @@
-const e=require(`./vistaview-B7UMydz4.cjs`);let t=require(`vue`);function n(n={}){let r=(0,t.ref)(null),i=null;return(0,t.onMounted)(()=>{r.value&&(i=e.t({parent:r.value,...n}))}),(0,t.onUnmounted)(()=>{i?.destroy(),i=null}),{container:r,open:e=>i?.open(e),close:()=>i?.close(),next:()=>i?.next(),prev:()=>i?.prev(),getCurrentIndex:()=>i?.getCurrentIndex()??-1,view:e=>i?.view(e)}}exports.useVistaView=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),n=require("./vistaview.cjs");function d(t){let e=null;return r.onMounted(()=>{e=n.vistaView(t)}),r.onUnmounted(()=>{e==null||e.destroy(),e=null}),{open:u=>e==null?void 0:e.open(u),close:()=>e==null?void 0:e.close(),next:()=>e==null?void 0:e.next(),prev:()=>e==null?void 0:e.prev(),getCurrentIndex:()=>(e==null?void 0:e.getCurrentIndex())??-1,view:u=>e==null?void 0:e.view(u)}}const V=r.defineComponent({name:"VistaView",props:{selector:{type:String,required:!0},class:String},setup(t,{slots:e,attrs:u}){const l=r.ref(null);let o=null;return r.onMounted(()=>{if(l.value){if(!t.selector)throw new Error("VistaView: selector is required");o=n.vistaView({...u,elements:l.value.querySelectorAll(t.selector)})}}),r.onUnmounted(()=>{o==null||o.destroy(),o=null}),()=>{var i;return r.h("div",{ref:l,class:t.class},(i=e.default)==null?void 0:i.call(e))}}});exports.VistaView=V;exports.useVistaView=d;

package/dist/vue.d.ts

@@ -1,9 +1,7 @@
-import { Ref } from 'vue';
-import { VistaViewOptions, VistaViewInterface, VistaViewImage } from './vistaview';
-export type { VistaViewOptions, VistaViewInterface, VistaViewImage };
-type UseVistaViewOptions = Omit<VistaViewOptions, 'parent'>;
-export declare function useVistaView(options?: UseVistaViewOptions): {
-    container: Ref<HTMLElement | null, HTMLElement | null>;
+import { PropType } from 'vue';
+import { VistaViewParams, VistaViewInterface, VistaViewImage } from './vistaview';
+export type { VistaViewParams, VistaViewInterface, VistaViewImage };
+export declare function useVistaView(options: VistaViewParams): {
     open: (i?: number) => void | undefined;
     close: () => void | undefined;
     next: () => void | undefined;
@@ -11,4 +9,19 @@ export declare function useVistaView(options?: UseVistaViewOptions): {
     getCurrentIndex: () => number;
     view: (i: number) => void | undefined;
 };
+export declare const VistaView: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    selector: {
+        type: PropType<string>;
+        required: true;
+    };
+    class: StringConstructor;
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    selector: {
+        type: PropType<string>;
+        required: true;
+    };
+    class: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExF,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAC;AAErE,KAAK,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAE5D,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB;;eAiB/C,MAAM;;;;;cAKP,MAAM;EAEnB"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AAErF,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEvF,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,CAAC;AAEpE,wBAAgB,YAAY,CAAC,OAAO,EAAE,eAAe;eAatC,MAAM;;;;;cAKP,MAAM;EAEnB;AAED,eAAO,MAAM,SAAS;;cAIA,QAAQ,CAAC,MAAM,CAAC;;;;;;;;cAAhB,QAAQ,CAAC,MAAM,CAAC;;;;iGAyBpC,CAAC"}

package/dist/vue.js

@@ -1,22 +1,49 @@
-import { t as vistaView } from "./vistaview-D-ZOkDpV.js";
-import { onMounted, onUnmounted, ref } from "vue";
-function useVistaView(i = {}) {
-	let a = ref(null), o = null;
-	return onMounted(() => {
-		a.value && (o = vistaView({
-			parent: a.value,
-			...i
-		}));
-	}), onUnmounted(() => {
-		o?.destroy(), o = null;
-	}), {
-		container: a,
-		open: (e) => o?.open(e),
-		close: () => o?.close(),
-		next: () => o?.next(),
-		prev: () => o?.prev(),
-		getCurrentIndex: () => o?.getCurrentIndex() ?? -1,
-		view: (e) => o?.view(e)
-	};
+import { defineComponent as w, ref as V, onMounted as d, onUnmounted as i, h as m } from "vue";
+import { vistaView as f } from "./vistaview.js";
+function n(r) {
+  let e = null;
+  return d(() => {
+    e = f(r);
+  }), i(() => {
+    e == null || e.destroy(), e = null;
+  }), {
+    open: (l) => e == null ? void 0 : e.open(l),
+    close: () => e == null ? void 0 : e.close(),
+    next: () => e == null ? void 0 : e.next(),
+    prev: () => e == null ? void 0 : e.prev(),
+    getCurrentIndex: () => (e == null ? void 0 : e.getCurrentIndex()) ?? -1,
+    view: (l) => e == null ? void 0 : e.view(l)
+  };
 }
-export { useVistaView };
+const x = w({
+  name: "VistaView",
+  props: {
+    selector: {
+      type: String,
+      required: !0
+    },
+    class: String
+  },
+  setup(r, { slots: e, attrs: l }) {
+    const t = V(null);
+    let o = null;
+    return d(() => {
+      if (t.value) {
+        if (!r.selector) throw new Error("VistaView: selector is required");
+        o = f({
+          ...l,
+          elements: t.value.querySelectorAll(r.selector)
+        });
+      }
+    }), i(() => {
+      o == null || o.destroy(), o = null;
+    }), () => {
+      var u;
+      return m("div", { ref: t, class: r.class }, (u = e.default) == null ? void 0 : u.call(e));
+    };
+  }
+});
+export {
+  x as VistaView,
+  n as useVistaView
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vistaview",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
   "keywords": [
     "image",
@@ -75,7 +75,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && BUILD_UMD=true vite build",
     "preview": "vite preview",
     "prepare": "husky",
     "test": "echo \"no test specified\""
@@ -93,14 +93,8 @@
     "solid-js": "^1.9.10",
     "svelte": "^5.45.6",
     "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@7.2.5",
+    "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.25"
-  },
-  "overrides": {
-    "vite": "npm:rolldown-vite@7.2.5"
-  },
-  "dependencies": {
-    "isomorphic-dompurify": "^2.33.0"
   }
 }

package/dist/types.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/vistaview-B7UMydz4.cjs

@@ -1,14 +0,0 @@
-var e=`<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>`,t=`<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>`,n=`<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>`,r=`<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>`,i=`<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>`,a=`<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;function o(){return{name:`download`,icon:i,onClick:e=>{let t=document.createElement(`a`);t.href=e.src,t.download=e.src.split(`/`).pop()||`download`,document.body.appendChild(t),t.click(),document.body.removeChild(t)}}}function s(e){if(typeof e==`string`)switch(e){case`zoomIn`:return`<button class="vistaview-zoom-in-button">${n}</button>`;case`zoomOut`:return`<button disabled class="vistaview-zoom-out-button">${r}</button>`;case`close`:return`<button class="vistaview-close-button">${a}</button>`;case`indexDisplay`:return`<div class="vistaview-index-display"></div>`;case`description`:return`<div class="vistaview-image-description"></div>`;default:return``}return`<button data-vistaview-custom-control="${e.name}">${e.icon}</button>`}function c(n,r){let i=e=>e?e.map(s).join(``):``;return`<div class="vistaview-root" id="vistaview-root">
-<div class="vistaview-container">
-<div class="vistaview-image-container">
-${n.map(e=>{let t=e.image?getComputedStyle(e.image).objectFit:``,n=e.image?.width,r=e.image?.height;return`<div class="vistaview-item">
-<img class="vistaview-image-lowres"${t?` style="object-fit:${t}"`:``} src="${e.smallSrc||e.src}" alt="${e.alt||``}" width="${n}" height="${r}">
-<img class="vistaview-image-highres" loading="lazy" style="width:${n}px;height:${r}px" src="${e.src}" alt="${e.alt||``}" width="${e.width}" height="${e.height}">
-</div>`}).join(``)}
-</div>
-<div class="vistaview-top-bar vistaview-ui"><div>${i(r?.topLeft)}</div><div>${i(r?.topCenter)}</div><div>${i(r?.topRight)}</div></div>
-<div class="vistaview-bottom-bar vistaview-ui"><div>${i(r?.bottomLeft)}</div><div>${i(r?.bottomCenter)}</div><div>${i(r?.bottomRight)}</div></div>
-<div class="vistaview-prev-btn vistaview-ui"><button>${e}</button></div>
-<div class="vistaview-next-btn vistaview-ui"><button>${t}</button></div>
-</div>
-</div>`}function l(e){let t=getComputedStyle(e);return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow}}var u=null;function d(){return u||(window.trustedTypes||(window.trustedTypes={createPolicy:(e,t)=>t}),u=window.trustedTypes.createPolicy(`vistaView-policy`,{createHTML:e=>e,createScript:()=>{throw Error(`Not implemented`)},createScriptURL:()=>{throw Error(`Not implemented`)}}),u)}function f(e){let t=d().createHTML(e),n=document.createElement(`template`);n.innerHTML=t;let r=n.content;return n.remove(),r}function p(e){return e&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim())&&e}function m(e){let t=window.getComputedStyle(e).objectFit||``,{width:n,height:r}=e.getBoundingClientRect(),i=e.naturalWidth,a=e.naturalHeight;if(!t||!i||!a)return{width:n,height:r};let o=i/a,s=n/r;switch(t){case`fill`:return{width:n,height:r};case`none`:return{width:i,height:a};case`contain`:return o>s?{width:n,height:n/o}:{width:r*o,height:r};case`cover`:return o<s?{width:n,height:n/o}:{width:r*o,height:r};case`scale-down`:{let e={width:i,height:a},t=o>s?{width:n,height:n/o}:{width:r*o,height:r};return t.width<=e.width&&t.height<=e.height?t:e}}return{width:n,height:r}}function h(e,t=!1){let n=window.innerWidth,r=window.innerHeight,i=e.naturalWidth,a=e.naturalHeight;if(!i||!a)return;if(i<n&&a<r){e.style.width=i+`px`,e.style.height=a+`px`;return}let o=i/a,s=n/r,c,l;o>s?(c=n,l=n/o):(l=r,c=r*o),t?(e.dataset.vistaviewInitialWidth=c.toString(),e.dataset.vistaviewInitialHeight=l.toString()):(e.style.width=c+`px`,e.style.height=l+`px`)}function g(e,t){let n=window.innerHeight,r=window.innerWidth,i=e,a=t,o=Math.max(0,(i-r)/2)+r/2,s=Math.max(0,(a-n)/2)+n/2,c=-o;return{maxDiffX:o,minDiffY:-s,maxDiffY:s,minDiffX:c}}var _={somethingOpened:!1};const v={detectReducedMotion:!0,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:1,controls:{topLeft:[`indexDisplay`],topRight:[`zoomIn`,`zoomOut`,o(),`close`],bottomCenter:[`description`]}};var y=class{options;elements;currentIndex=0;currentDescription=``;rootElement=null;containerElement=null;indexDisplayElement=null;descriptionElement=null;isActive=!1;isZoomed=!1;isReducedMotion;setInitialProperties=null;setFullScreenContain=null;onZoomedPointerDown=null;onZoomedPointerMove=null;onZoomedPointerUp=null;onPointerDown=null;onPointerMove=null;onPointerUp=null;onKeyDown=null;constructor(e,t){this.elements=e,this.options={...v,...t||{},controls:{...v.controls,...t?.controls||{}}},this.isReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.elements.forEach((e,t)=>{let n=e.anchor||e.image;n&&(e.onClick=e=>{e.preventDefault(),this.open(t)},n.addEventListener(`click`,e.onClick))})}setZoomed(e){if(this.isZoomed===e)return;let t=this.isZoomed===!1?null:this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.isZoomed];if(this.isZoomed=e,this.isZoomed===!1&&t){this.onZoomedPointerDown&&=(t.parentElement?.removeEventListener(`pointerdown`,this.onZoomedPointerDown),null),this.onZoomedPointerMove&&=(t.parentElement?.removeEventListener(`pointermove`,this.onZoomedPointerMove),null),this.onZoomedPointerUp&&=(t.parentElement?.removeEventListener(`pointerup`,this.onZoomedPointerUp),null),t?.style.removeProperty(`--pointer-diff-x`),t?.style.removeProperty(`--pointer-diff-y`),setTimeout(()=>{t?.classList.remove(`vistaview-image--zooming`)},500);return}if(this.isZoomed!==!1){t=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.isZoomed],t.classList.add(`vistaview-image--zooming`),t?.style.setProperty(`--pointer-diff-x`,`0px`),t?.style.setProperty(`--pointer-diff-y`,`0px`);let e=!1,n=0,r=0,i=0,a=0,o=0,s=0;this.onZoomedPointerDown&&=(t.parentElement?.removeEventListener(`pointerdown`,this.onZoomedPointerDown),null),this.onZoomedPointerMove&&=(t.parentElement?.removeEventListener(`pointermove`,this.onZoomedPointerMove),null),this.onZoomedPointerUp&&=(t.parentElement?.removeEventListener(`pointerup`,this.onZoomedPointerUp),null),this.onZoomedPointerDown=i=>{i.preventDefault(),i.stopPropagation(),e=!0,n=i.pageX,r=i.pageY,t.setPointerCapture(i.pointerId)},this.onZoomedPointerMove=c=>{if(!e)return;c.preventDefault(),o=c.pageX-n,s=c.pageY-r;let{maxDiffX:l,minDiffY:u,maxDiffY:d,minDiffX:f}=g(parseInt(t?.dataset.vistaviewCurrentWidth||`0`),parseInt(t?.dataset.vistaviewCurrentHeight||`0`)),p=Math.min(l,Math.max(f,i+o)),m=Math.min(d,Math.max(u,a+s));o=p-i,s=m-a,t?.style.setProperty(`--pointer-diff-x`,`${p}px`),t?.style.setProperty(`--pointer-diff-y`,`${m}px`)},this.onZoomedPointerUp=n=>{e=!1,t.releasePointerCapture(n.pointerId),i+=o,a+=s,o=0,s=0},t?.parentElement?.addEventListener(`pointerdown`,this.onZoomedPointerDown),t?.parentElement?.addEventListener(`pointermove`,this.onZoomedPointerMove),t?.parentElement?.addEventListener(`pointerup`,this.onZoomedPointerUp)}}setIndexDisplay(){this.indexDisplayElement&&(this.indexDisplayElement.textContent=`${this.currentIndex+1} / ${this.elements.length}`)}setCurrentDescription(){this.descriptionElement&&(this.currentDescription=this.elements[this.currentIndex].alt||``,this.descriptionElement&&(this.descriptionElement.textContent=this.currentDescription))}getAnimationDurationBase(){let e=window.getComputedStyle(this.rootElement);return parseInt(e.getPropertyValue(`--vistaview-animation-duration`))}zoomIn(){let e=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.currentIndex],t=e.width,n=e.height;e.dataset.vistaviewInitialWidth||(e.dataset.vistaviewInitialWidth=t.toString()),e.dataset.vistaviewInitialHeight||(e.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(this.currentIndex);let r=(e.naturalWidth||0)*this.options.maxZoomLevel;if(t&&r&&t<r){let i=Math.min(t+this.options.zoomStep,r);e.style.width=`${i}px`;let a=i/t*n;e.style.height=`${a}px`,this.containerElement?.querySelector(`button.vistaview-zoom-out-button`)?.removeAttribute(`disabled`),e.dataset.vistaviewCurrentWidth=i.toString(),e.dataset.vistaviewCurrentHeight=a.toString(),i===r&&this.containerElement?.querySelector(`button.vistaview-zoom-in-button`)?.setAttribute(`disabled`,`true`)}}zoomOut(){let e=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.currentIndex],t=e.width,n=e.height,r=e.dataset.vistaviewInitialWidth?parseInt(e.dataset.vistaviewInitialWidth):0;if(e.classList.add(`vistaview-image--zooming-out`),setTimeout(()=>{e.classList.remove(`vistaview-image--zooming-out`)},333),t&&r&&t>r){let i=Math.max(t-this.options.zoomStep,r);e.style.width=`${i}px`;let a=i/t*n;e.style.height=`${a}px`,this.containerElement?.querySelector(`button.vistaview-zoom-in-button`)?.removeAttribute(`disabled`),e.dataset.vistaviewCurrentWidth=i.toString(),e.dataset.vistaviewCurrentHeight=a.toString();let{maxDiffX:o,minDiffY:s,maxDiffY:c,minDiffX:l}=g(i,a),u=parseInt(e?.style.getPropertyValue(`--pointer-diff-x`).replace(`px`,``)||`0`),d=parseInt(e?.style.getPropertyValue(`--pointer-diff-y`).replace(`px`,``)||`0`);u=Math.min(o,Math.max(l,u)),d=Math.min(c,Math.max(s,d)),e?.style.setProperty(`--pointer-diff-x`,`${u}px`),e?.style.setProperty(`--pointer-diff-y`,`${d}px`),i===r&&(this.containerElement?.querySelector(`button.vistaview-zoom-out-button`)?.setAttribute(`disabled`,`true`),e.removeAttribute(`data-vistaview-current-width`),e.removeAttribute(`data-vistaview-current-height`),e.removeAttribute(`data-vistaview-initial-width`),e.removeAttribute(`data-vistaview-initial-height`),this.setZoomed(!1))}}clearZoom(){let e=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.currentIndex];e.dataset.vistaviewInitialWidth&&(e.style.width=`${e.dataset.vistaviewInitialWidth}px`),e.dataset.vistaviewInitialHeight&&(e.style.height=`${e.dataset.vistaviewInitialHeight}px`),this.containerElement?.querySelector(`button.vistaview-zoom-in-button`)?.removeAttribute(`disabled`),this.containerElement?.querySelector(`button.vistaview-zoom-out-button`)?.setAttribute(`disabled`,`true`),e.removeAttribute(`data-vistaview-current-width`),e.removeAttribute(`data-vistaview-current-height`),e.removeAttribute(`data-vistaview-initial-width`),e.removeAttribute(`data-vistaview-initial-height`),this.setZoomed(!1)}resetImageOpacity(e=!1){this.elements.forEach((t,n)=>{t.image&&(t.image?.dataset.vistaviewInitialOpacity||(t.image.dataset.vistaviewInitialOpacity=t.image.style.opacity||`1`),n===this.currentIndex&&!e?t.image.style.opacity=`0`:t.image.style.opacity=t.image.dataset.vistaviewInitialOpacity)})}setTouchActions(){this.removeTouchActions();let e=this.containerElement?.querySelector(`.vistaview-image-container`);if(!e)return;let t=0,n=0,r=0,i=0,a=!1,o=this.currentIndex,s;this.onPointerDown=c=>{if(c.preventDefault(),c.stopPropagation(),this.isZoomed!==!1)return;o=this.currentIndex,a=!0,t=c.pageX,n=c.pageY,r=c.pageX,i=Date.now(),e.classList.add(`vistaview-image-container--pointer-down`);let l=this.containerElement?.querySelector(`.vistaview-image-container`),u=Array.from(l.querySelectorAll(`.vistaview-item`));s=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(o=u.indexOf(e.target))})},{threshold:.5,root:this.containerElement}),u.forEach(e=>{s.observe(e)})},this.onPointerMove=i=>{if(i.preventDefault(),i.stopPropagation(),this.isZoomed!==!1||!a)return;let o=i.pageX-t,s=i.pageY-n;r=i.pageX,e.style.setProperty(`--vistaview-pointer-diff-x`,`${o}px`),e.style.setProperty(`--vistaview-pointer-diff-y`,`${s}px`)},this.onPointerUp=n=>{if(n.preventDefault(),n.stopPropagation(),this.isZoomed!==!1||!a)return;a=!1,s.disconnect();let c=(r-t)/(Date.now()-i),l=this.options.touchSpeedThreshold||1;c<-l&&o===this.currentIndex?o=Math.min(this.currentIndex+1,this.elements.length-1):c>l&&o===this.currentIndex&&(o=Math.max(this.currentIndex-1,0)),e.style.setProperty(`--vistaview-pointer-diff-x`,`0px`),e.style.setProperty(`--vistaview-pointer-diff-y`,`0px`),e.classList.remove(`vistaview-image-container--pointer-down`),o!==this.currentIndex&&this.view(o)},e.addEventListener(`pointermove`,this.onPointerMove),e.addEventListener(`pointerup`,this.onPointerUp),e.addEventListener(`pointerdown`,this.onPointerDown)}removeTouchActions(){let e=this.containerElement?.querySelector(`.vistaview-image-container`);e&&(this.onPointerMove&&e.removeEventListener(`pointermove`,this.onPointerMove),this.onPointerUp&&e.removeEventListener(`pointerup`,this.onPointerUp),this.onPointerDown&&e.removeEventListener(`pointerdown`,this.onPointerDown))}open(e){if(_.somethingOpened)return;if(_.somethingOpened=!0,this.isActive=!0,e||=0,e<0||e>=this.elements.length)throw Error(`VistaView: Index out of bounds:`+e);this.currentIndex=e;let t=c(this.elements,this.options.controls);if(document.body.prepend(f(t)),this.rootElement=document.querySelector(`#vistaview-root`),!this.rootElement)throw Error(`VistaView: Failed to create root element.`);if(this.options.detectReducedMotion&&this.isReducedMotion&&this.rootElement.classList.add(`vistaview--reduced-motion`),this.containerElement=this.rootElement.querySelector(`.vistaview-container`),!this.containerElement)throw Error(`VistaView: Failed to create container element.`);this.indexDisplayElement=this.containerElement.querySelector(`.vistaview-index-display`),this.descriptionElement=this.containerElement.querySelector(`.vistaview-image-description`),this.options.animationDurationBase&&this.rootElement.style.setProperty(`--vistaview-animation-duration`,`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElement.style.setProperty(`--vistaview-initial-z-index`,`${this.options.initialZIndex}`);let n=this.elements[e].image?l(this.elements[e].image):void 0,r=this.elements[e].anchor?l(this.elements[e].anchor):void 0,i=this.elements[e].anchor?this.elements[e].anchor:this.elements[e].image;if(i){let e=i.getBoundingClientRect();this.rootElement.style.setProperty(`--vistaview-container-initial-width`,`${e?.width}px`),this.rootElement.style.setProperty(`--vistaview-container-initial-height`,`${e?.height}px`),this.rootElement.style.setProperty(`--vistaview-container-initial-top`,`${e.top+e.height/2}px`),this.rootElement.style.setProperty(`--vistaview-container-initial-left`,`${e.left+e.width/2}px`)}this.rootElement.style.setProperty(`--vistaview-number-elements`,`${this.elements.length}`),this.rootElement.style.setProperty(`--vistaview-image-border-radius`,p(n?.borderRadius)||p(r?.borderRadius)||`0px`),this.setInitialProperties=()=>{if(!this.isActive)return;let e=this.elements[this.currentIndex].anchor?this.elements[this.currentIndex].anchor:this.elements[this.currentIndex].image;if(!e)return;let t=e.getBoundingClientRect();this.rootElement?.style.setProperty(`--vistaview-container-initial-width`,`${t?.width}px`),this.rootElement?.style.setProperty(`--vistaview-container-initial-height`,`${t?.height}px`),this.rootElement?.style.setProperty(`--vistaview-container-initial-top`,`${t.top+t.height/2}px`),this.rootElement?.style.setProperty(`--vistaview-container-initial-left`,`${t.left+t.width/2}px`)},window.addEventListener(`resize`,this.setInitialProperties);let a=[...this.options.controls.topLeft||[],...this.options.controls.topCenter||[],...this.options.controls.topRight||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomRight||[]].filter(e=>typeof e!=`string`);this.containerElement.querySelectorAll(`button`).forEach(e=>{let t=e.getAttribute(`data-vistaview-custom-control`);if(t){let n=a.find(e=>e.name===t);n&&e.addEventListener(`click`,()=>{n.onClick(this.elements[this.currentIndex])})}else e.classList.contains(`vistaview-zoom-in-button`)?e.addEventListener(`click`,()=>{this.zoomIn()}):e.classList.contains(`vistaview-zoom-out-button`)?e.addEventListener(`click`,()=>{this.zoomOut()}):e.classList.contains(`vistaview-close-button`)?e.addEventListener(`click`,()=>{this.close()}):e.parentElement?.classList.contains(`vistaview-prev-btn`)?e.addEventListener(`click`,()=>{this.prev()}):e.parentElement?.classList.contains(`vistaview-next-btn`)&&e.addEventListener(`click`,()=>{this.next()})}),this.setIndexDisplay(),this.setCurrentDescription(),this.rootElement?.style.setProperty(`--vistaview-current-index`,`${this.currentIndex}`),this.containerElement.querySelectorAll(`.vistaview-image-highres`).forEach((e,t)=>{let n=e,r=this.elements[t].image;if(r){let{width:e,height:t}=m(r),i=Math.min(r.width,e),a=Math.min(r.height,t);n.style.width=`${i}px`,n.style.height=`${a}px`,n.style.setProperty(`--vistaview-fitted-width`,`${i}px`),n.style.setProperty(`--vistaview-fitted-height`,`${a}px`)}function i(){n.classList.add(`vistaview-image-loaded`),setTimeout(()=>{h(n)},100),setTimeout(()=>{n.parentElement?.querySelector(`.vistaview-image-lowres`)?.classList.add(`vistaview-image--hidden`)},500)}n.complete?i():n.onload=i}),this.setFullScreenContain=()=>{this.isActive&&(this.containerElement?.querySelectorAll(`.vistaview-image-highres`))?.forEach(e=>{let t=e;h(t,t.classList.contains(`vistaview-image--zooming`))})},window.addEventListener(`resize`,this.setFullScreenContain),this.setTouchActions(),this.onKeyDown=e=>{if(this.isActive)switch(e.key){case`ArrowLeft`:e.preventDefault(),this.prev();break;case`ArrowRight`:e.preventDefault(),this.next();break;case`ArrowUp`:e.preventDefault(),this.zoomIn();break;case`ArrowDown`:e.preventDefault(),this.zoomOut();break;case`Escape`:e.preventDefault(),this.close();break}},window.addEventListener(`keydown`,this.onKeyDown),setTimeout(()=>{this.rootElement&&this.rootElement.classList.add(`vistaview--initialized`),this.resetImageOpacity()},33)}async close(e=!0){if(this.isActive){if(this.isActive=!1,e){let e=this.getAnimationDurationBase();this.rootElement?.classList.add(`vistaview--closing`),this.options.detectReducedMotion&&this.isReducedMotion||await new Promise(t=>{setTimeout(()=>{t(!0)},e*1.5)})}this.removeTouchActions(),this.rootElement?.remove(),this.rootElement=null,this.containerElement=null,this.resetImageOpacity(!0),this.setInitialProperties&&window.removeEventListener(`resize`,this.setInitialProperties),this.setFullScreenContain&&window.removeEventListener(`resize`,this.setFullScreenContain),this.onKeyDown&&window.removeEventListener(`keydown`,this.onKeyDown),_.somethingOpened=!1}}destroy(){this.isActive&&(this.close(!1),this.elements.forEach(e=>{let t=e.anchor||e.image;t&&e.onClick&&t.removeEventListener(`click`,e.onClick)}))}view(e){if(this.isActive){if(e<0||e>=this.elements.length)throw Error(`VistaView: Index out of bounds:`+e);this.clearZoom(),this.currentIndex=e,this.resetImageOpacity(),this.setIndexDisplay(),this.setCurrentDescription(),this.setInitialProperties&&this.setInitialProperties(),this.rootElement?.style.setProperty(`--vistaview-current-index`,`${this.currentIndex}`)}}next(){this.isActive&&this.view((this.currentIndex+1)%this.elements.length)}prev(){this.isActive&&this.view((this.currentIndex-1+this.elements.length)%this.elements.length)}getCurrentIndex(){return this.isActive?this.currentIndex:-1}},b=e=>{let t=e instanceof HTMLImageElement?e:e.querySelector(`img`);return{src:e.dataset.vistaviewSrc||e.getAttribute(`href`)||e.getAttribute(`src`)||``,width:+(e.dataset.vistaviewWidth||t?.naturalWidth||0),height:+(e.dataset.vistaviewHeight||t?.naturalHeight||0),smallSrc:t?.src||e.dataset.vistaviewSmallsrc||e.getAttribute(`src`)||``,alt:t?.alt||e.dataset.vistaviewAlt||e.getAttribute(`alt`)||``,anchor:e instanceof HTMLAnchorElement?e:void 0,image:t||void 0}};function x({parent:e,elements:t,...n}){if(!e&&!t)throw Error(`No parent or elements`);let r;if(e){let t=e.querySelector(`img[data-vistaview-src]`)?`img[data-vistaview-src]`:`a[href]`;r=Array.from(e.querySelectorAll(t)).map(b)}else if(typeof t==`string`)r=Array.from(document.querySelectorAll(t)).map(b);else if(t instanceof NodeList)r=Array.from(t).map(b);else if(Array.isArray(t))r=t;else throw Error(`Invalid elements`);if(!r.length)throw Error(`No elements found`);let i=new y(r,n);return{open:(e=0)=>i.open(e),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:e=>{i.view(e)}}}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return x}});