vistaview 1.0.3 → 2.0.0

package/main/dist/styles/strawberry.css

@@ -0,0 +1 @@
+.vvw-ui.vvw-prev,.vvw-ui.vvw-next{overflow:hidden}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button{padding:18px 3px;transition:padding-left .333s,padding-right .333s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next) button svg{transition:transform .333s .111s}:is(.vvw-ui.vvw-prev,.vvw-ui.vvw-next):hover button svg{transform:translate(-3px)}.vvw-ui.vvw-prev:hover button{padding-left:8px}.vvw-ui.vvw-next:hover button{padding-right:8px}.vvw-ui.vvw-next:hover button svg{transform:translate(3px)}:root{--vvw-bg-color:#1a0006;--vvw-text-color:#fff5f7;--vvw-ui-outline-color:#c41e3a;--vvw-ui-bg-color:#d63447;--vvw-ui-text-color:#fff5f7;--vvw-ui-hover-bg-color:#e84a5f;--vvw-ui-active-bg-color:#fa6077;--vvw-ui-border-radius:12px}

package/{dist → main/dist}/vistaview.d.ts

@@ -13,4 +13,3 @@ export { init } from './lib/defaults/init';
 export { open } from './lib/defaults/open';
 export { close } from './lib/defaults/close';
 export { transition } from './lib/defaults/transition';
-//# sourceMappingURL=vistaview.d.ts.map

package/main/dist/vistaview.js

@@ -0,0 +1,14 @@
+export { vistaView } from './lib/main';
+export { VistaImageEvent } from './lib/vista-image-event';
+export { VistaHiresTransition } from './lib/vista-hires-transition';
+export { VistaBox } from './lib/vista-box';
+export { VistaImage } from './lib/vista-image';
+export { VistaPointers } from './lib/vista-pointers';
+export { VistaState } from './lib/vista-state';
+export { VistaView } from './lib/vista-view';
+export { DefaultOptions } from './lib/defaults/options';
+export { imageSetup } from './lib/defaults/image-setup';
+export { init } from './lib/defaults/init';
+export { open } from './lib/defaults/open';
+export { close } from './lib/defaults/close';
+export { transition } from './lib/defaults/transition';

package/main/dist/vistaview.umd.js

@@ -0,0 +1,18 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VistaView=e.VistaView||{}))})(this,function(e){let t={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:[`indexDisplay`],topRight:[`zoomIn`,`zoomOut`,`close`],bottomLeft:[`description`]}};var n=`<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>`,r=`<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>`,i=`<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>`,a=`<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>`,o=`<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,s=null;function c(){return s||(window.trustedTypes||(window.trustedTypes={createPolicy:(e,t)=>t}),s=window.trustedTypes.createPolicy(`vistaView-policy`,{createHTML:e=>e,createScript:()=>{throw Error(`Not implemented`)},createScriptURL:()=>{throw Error(`Not implemented`)}}),s)}function l(e){let t=c().createHTML(e),n=document.createElement(`template`);n.innerHTML=t;let r=n.content;return n.remove(),r}function u(e,t){if(typeof e==`string`)switch(e){case`zoomIn`:return`<div class="vvw-ui"><button aria-label="Zoom In" class="vvw-zoom-in">${i}</button></div>`;case`zoomOut`:return`<div class="vvw-ui"><button aria-label="Zoom Out" disabled class="vvw-zoom-out">${a}</button></div>`;case`close`:return`<div class="vvw-ui"><button aria-label="Close" class="vvw-close">${o}</button></div>`;case`indexDisplay`:return`<div class="vvw-index vvw-ui" aria-hidden="true"></div>`;case`description`:return`<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>`;default:let n=t[e];return n&&n.control?`<div class="vvw-ext vvw-ui" aria-label="${n.description||n.name}" data-vvw-control="${n.name}"></div>`:(console.warn(`Unknown control: ${e}. Will return empty string.`),``)}return``}function d({controls:e,extensions:t}){let i={};t.forEach(e=>{i[e.name]=e});let a=e=>e?e.map(e=>u(e,i)).join(``):``,o=l(`<div class="vvw-root" id="vvw-root">
+    <div class="vvw-container">
+      <div class="vvw-bg"></div>
+      <div class="vvw-image-container"></div>
+      <div class="vvw-top-bar">
+        <div>${a(e?.topLeft)}</div>
+        <div>${a(e?.topCenter)}</div>
+        <div>${a(e?.topRight)}</div>
+      </div>
+      <div class="vvw-bottom-bar">
+        <div>${a(e?.bottomLeft)}</div>
+        <div>${a(e?.bottomCenter)}</div>
+        <div>${a(e?.bottomRight)}</div>
+      </div>
+      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${n}</button></div>
+      <div class="vvw-next vvw-ui"><button aria-label="Next">${r}</button></div>
+    </div>
+    </div>`);return[...e?.topLeft||[],...e?.topCenter||[],...e?.topRight||[],...e?.bottomLeft||[],...e?.bottomCenter||[],...e?.bottomRight||[]].forEach(e=>{let t=i[e];if(t&&t.control){let e=o.querySelector(`[data-vvw-control="${t.name}"]`),n=t.control();e&&n&&e.appendChild(n)}}),o}function f(e,t){}function p(e){m(e)}function m(e){let t={x:0,y:0},n={x:0,y:0},r=null;e.registerPointerListener(i=>{if(!i.hasInternalExecution&&!(i.pointers.length>1)){if(i.event===`down`&&(t={x:i.pointer.x,y:i.pointer.y},n={x:i.pointer.x,y:i.pointer.y},i.abortController?.abort()),i.event===`move`){n={x:i.pointer.x,y:i.pointer.y};let a=n.x-t.x,o=n.y-t.y;if(!r&&Math.abs(o)>Math.abs(a)||r===`y`){let t=o/window.innerHeight*100;e.imageContainer.style.transition=`none`,e.imageContainer.style.transform=`translateY(${t}vh)`,r=`y`}else if(!r&&Math.abs(a)>Math.abs(o)||r===`x`&&i.state.elmLength>1){let t=a/window.innerWidth*100;e.imageContainer.style.transition=`none`,e.imageContainer.style.transform=`translateX(${t}vw)`,r=`x`}}if(i.event===`up`||i.event===`cancel`){function a(t){e.imageContainer?.addEventListener(`transitionend`,function t(){e.imageContainer?.removeEventListener(`transitionend`,t),e.imageContainer.style.transition=``,e.imageContainer.style.transform=``}),e.imageContainer.style.transition=`transform 222ms ease`,e.imageContainer.style.transform=t}if(r===`y`){let r=n.y-t.y;Math.abs(r)>144?(e.imageContainer.style.transition=`transform 222ms ease`,e.imageContainer.style.transform=`translateY(0vh)`,e.close()):a(`translateY(0vh)`)}if(r===`x`&&i.state.elmLength>1){let r=n.x-t.x;e.imageContainer.style.transition=``,r>64?e.prev():r<-64?e.next():a(`translateX(0vw)`)}r=null,t={x:0,y:0},n={x:0,y:0}}}})}function h(e){let t=e.options.preloads;e.imageContainer.style.width=`${(t*2+1)*100}vw`,e.imageContainer.style.left=`-${t*100}vw`,e.imageContainer.style.display=`flex`}function g(e){}function _({htmlElements:{to:e},index:{from:t,to:n}},r,i){let{imageContainer:a,options:o}=i,{isReducedMotion:s}=i.state;if(!(!e||r.aborted||s)&&(Math.abs(n-t)===1||t===0&&n===i.state.elmLength-1||t===i.state.elmLength-1&&n===0))return{cleanup:()=>{a.style.transition=``,a.style.transform=``},transitionEnded:new Promise(e=>{a.addEventListener(`transitionend`,()=>{e()},{once:!0}),a.addEventListener(`transitioncancel`,()=>{r.aborted&&e()},{once:!0});let s=Math.round(o.animationDurationBase*100)/100,c=n===t+1||t===i.state.elmLength-1&&n===0?`translateX(-100vw)`:`translateX(100vw)`;a.style.transition=`transform ${s}ms ease`,a.style.transform=c})}}function v(e){let t=window.innerWidth,n=window.innerHeight,r=e.naturalWidth,i=e.naturalHeight;if(!r||!i)throw console.error(`Error`,e),Error(`Image natural dimensions are zero`);if(r<t&&i<n)return{width:r,height:i};let a=r/i,o=t/n,s,c;return a>o?(s=t,c=t/a):(c=n,s=n*a),{width:s,height:c}}var y=class{static map=new Map;static ease(e,t,n){let r=t-e,i=e+r*.2;return Math.abs(r)<n?t:i}static play(e,t,n){if(n()){requestAnimationFrame(()=>{this.play(e,t,n)});return}this.map.get(e)&&(e.element.classList.contains(`vvw--load-cancelled`)||requestAnimationFrame(()=>{let r=this.map.get(e);if(!r||!e.element||e.element.classList.contains(`vvw--load-cancelled`))return;let{current:i,target:a,log:o}=r,s={};a.width!==void 0&&(s.width=this.ease(i._width,a.width,1)),a.height!==void 0&&(s.height=this.ease(i._height,a.height,1)),a.transform?.x!==void 0&&(s.transform=s.transform||{},s.transform.x=this.ease(i._transform.x,a.transform.x,1)),a.transform?.y!==void 0&&(s.transform=s.transform||{},s.transform.y=this.ease(i._transform.y,a.transform.y,1)),a.transform?.scale!==void 0&&(s.transform=s.transform||{},s.transform.scale=this.ease(i._transform.scale,a.transform.scale,.005)),a.translate?.x!==void 0&&(s.translate=s.translate||{},s.translate.x=this.ease(i._translate.x,a.translate.x,1)),a.translate?.y!==void 0&&(s.translate=s.translate||{},s.translate.y=this.ease(i._translate.y,a.translate.y,1)),s.width!==void 0&&(i.width=s.width),s.height!==void 0&&(i.height=s.height),s.translate&&(i.translate={...i.translate,...s.translate}),s.transform&&(i.transform={...i.transform,...s.transform}),(a.width===void 0||i._width===a.width)&&(a.height===void 0||i._height===a.height)&&(a.transform?.x===void 0||i._transform.x===a.transform.x)&&(a.transform?.y===void 0||i._transform.y===a.transform.y)&&(a.transform?.scale===void 0||i._transform.scale===a.transform.scale)&&(a.translate?.x===void 0||i._translate.x===a.translate.x)&&(a.translate?.y===void 0||i._translate.y===a.translate.y)?(this.map.delete(e),t()):(this.map.set(e,{current:i,target:a,log:o}),this.play(e,t,n))}))}static stop(e){let t=this.map.get(e);return this.map.delete(e),t}static start({vistaImage:e,target:t,onComplete:n,shouldWait:r}){this.stop(e),this.map.set(e,{current:e.state,target:t}),this.play(e,n,r)}};function b(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}}var x=class{state;parsedSrcSet=void 0;isReady=!1;isThrowing=!1;thumb=null;pos;index;config;origin=void 0;initH=0;initW=0;fullH=0;fullW=0;maxW=0;minW=0;defaultWH=200;isZoomedIn=!1;isCancelled=!1;isLoadedResolved=null;isLoadedRejected=null;isLoaded=new Promise((e,t)=>{this.isLoadedResolved=e,this.isLoadedRejected=t});replacement=null;originalParent=null;originalNextSibling=null;originalStyle=``;thumbImage=null;originRect={width:this.defaultWH,height:this.defaultWH,top:0,left:0};fittedSize=null;maxZoomLevel;vistaView;transitionState=null;transitionShouldWait=()=>!1;initPointerCenter={x:0,y:0};onScale;constructor(e){this.state=this.createState(),this.pos=e.pos,this.index=e.index,this.config=e.elm.config,this.parsedSrcSet=e.elm.parsedSrcSet,this.origin=e.elm.origin,this.maxZoomLevel=e.maxZoomLevel,this.vistaView=e.vistaView,this.onScale=e.onScale,e.transitionState&&(this.transitionState=e.transitionState),e.transitionShouldWait&&(this.transitionShouldWait=e.transitionShouldWait),this.initPointerCenter={x:window.innerWidth/2,y:window.innerHeight/2};let t=this.pos===0?this.origin?.image:null;if(this.originalParent=t?.parentElement||null,this.originalNextSibling=t?.nextSibling||null,this.originRect=(this.origin?.anchor||t)?.getBoundingClientRect()||{width:this.defaultWH,height:this.defaultWH,top:0,left:0},t&&this.originalParent){this.originalStyle=t.style.cssText,this.thumbImage=t;let e=t.cloneNode(!0);this.originalParent.insertBefore(e,t),this.replacement=e,this.thumb=document.createElement(`div`),this.thumb.classList.add(`vvw-img-lo`);let{width:n,height:r}=this.thumbImage?b(this.thumbImage):{width:0,height:0};this.fittedSize={width:n,height:r},this.thumb.appendChild(t),t.style.width=`100%`,t.style.height=`100%`,t.style.objectFit=this.origin.objectFit}}createState(){let e=this;return{_t:this,_width:0,_height:0,_transform:{x:0,y:0,scale:1},_translate:{x:0,y:0},_lessThanMinWidth:!1,get width(){return this._width},set width(t){this._width=t,e.onWidthChange(t)},get height(){return this._height},set height(t){this._height=t,e.onHeightChange(t)},get transform(){return this._transform},set transform(t){this._transform=t,e.onTransformChange(t)},get translate(){return this._translate},set translate(t){this._translate=t,e.onTranslateChange(t)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(t){this._lessThanMinWidth=t,e.onLessThanMinWidthChange(t)}}}onLessThanMinWidthChange(e){e?this.element.style.opacity=`0.5`:this.element.style.opacity=``}onTranslateChange(e){this.element.style.translate=`calc(-50% + ${e.x}px) calc(-50% + ${e.y}px)`}onTransformChange(e){let t=`translate3d(${e.x}px, ${e.y}px, 0px) scale3d(${e.scale}, ${e.scale}, 1)`;this.element.style.transform=t}onWidthChange(e){this.element.style.width=`${e}px`}onHeightChange(e){this.element.style.height=`${e}px`}onImageReady(){}animateZoom(e,t){}scaleMove(e,t,n){}momentumThrow(e){return()=>{}}async init(){await this.isLoaded;let e=this.element;this.transitionState&&this.transitionState.current.width&&this.transitionState.current.height?(this.state.width=this.transitionState.current.width,this.state.height=this.transitionState.current.height):e.classList.contains(`vvw--loaded`)||(this.state.width=this.initW,this.state.height=this.initH);let t=()=>{this.isCancelled||y.start({vistaImage:this,target:{width:this.fullW,height:this.fullH},onComplete:()=>{this.isCancelled||(this.isReady=!0,e.classList.add(`vvw--ready`),this.onImageReady())},shouldWait:this.transitionShouldWait})};this.pos<-1||this.pos>1?(this.state.width=this.fullW,this.state.height=this.fullH,e.classList.add(`vvw--loaded`),e.classList.add(`vvw--ready`),this.isReady=!0):e.classList.contains(`vvw--loaded`)?e.classList.contains(`vvw--ready`)?(this.isReady=!0,this.onImageReady()):t():(e.classList.add(`vvw--loaded`),setTimeout(()=>{this.isCancelled||t()},333))}getFullSizeDim(){let{width:e,height:t}=this.thumb.getBoundingClientRect(),n=e/t,r=window.innerWidth,i=window.innerHeight;return n>window.innerWidth/window.innerHeight?i=r/n:r=i*n,{width:r,height:i}}setSizes(e={}){let{stableSize:t=!0,initDimension:n}=e;if(!this.origin)return;let r=this.thumb;n||(this.originRect=(this.origin?.anchor||this.replacement)?.getBoundingClientRect()||{width:this.defaultWH,height:this.defaultWH,top:0,left:0});let i=this.originRect;if(r){let e=r.style;e.width=i.width+`px`,e.height=i.height+`px`,e.top=`50%`,e.left=`50%`,e.translate=`-50% -50%`,e.position=`fixed`,e.objectFit=this.origin.objectFit,e.borderRadius=this.origin.borderRadius;let t=Math.min(Math.max(i.left,-i.width),window.innerWidth+i.width)-window.innerWidth/2+i.width/2,a=Math.min(Math.max(i.top,-i.height),window.innerHeight+i.height)-window.innerHeight/2+i.height/2;e.setProperty(`--vvw-init-radius`,e.borderRadius),e.setProperty(`--vvw-pulse-radius`,`calc(1.3 * ${e.borderRadius})`),e.setProperty(`--vvw-init-x`,`${t}px`),e.setProperty(`--vvw-init-y`,`${a}px`),n&&(e.setProperty(`--vvw-current-x`,`${t}px`),e.setProperty(`--vvw-current-y`,`${a}px`))}if(!n){let{width:e,height:t}=this.thumbImage?b(this.thumbImage):{width:0,height:0};this.fittedSize={width:e,height:t}}let a=this.element;if(this.initW=Math.min(this.fittedSize?.width??0,i.width),this.initH=Math.min(this.fittedSize?.height??0,i.height),a.style.setProperty(`--vvw-init-w`,this.initW+`px`),a.style.setProperty(`--vvw-init-h`,this.initH+`px`),a.style.setProperty(`--vvw-init-radius`,this.origin.borderRadius),a.style.objectFit=`cover`,!n){if(this.isReady&&!this.isCancelled){let{width:e,height:t}=this.getFullSizeDim();this.fullH=t,this.fullW=e,this.minW=this.fullW*.5}!this.isZoomedIn&&t&&this.normalize()}}normalize(){this.state.transform={x:0,y:0,scale:1},this.state.translate={x:0,y:0},this.state.width=this.fullW,this.state.height=this.fullH,this.isZoomedIn=!1}getFromParsedSrcSet(e){if(!this.parsedSrcSet||this.parsedSrcSet.length===0)return null;let t=e*(window.devicePixelRatio||1),n=this.parsedSrcSet[this.parsedSrcSet.length-1];for(let e of this.parsedSrcSet)if(e.width>=t){n=e;break}return n.src}prepareClose(){y.stop(this),this.setFinalTransform()}cancelPendingLoad(){this.isCancelled=!0,this.element?.classList.add(`vvw--load-cancelled`)}setInitialCenter(e){this.initPointerCenter=e}destroy(){this.originalParent&&this.thumbImage&&(this.thumbImage.style.cssText=this.originalStyle,this.originalNextSibling?this.originalParent.insertBefore(this.thumbImage,this.originalNextSibling):this.originalParent.appendChild(this.thumbImage)),this.originalParent=null,this.originalNextSibling=null,this.originalStyle=``,this.thumbImage=null,this.replacement&&=(this.replacement.remove(),null),this.thumb?.remove(),this.element?.remove(),this.thumb=null,this.origin=void 0,this.config={src:``,alt:``}}cloneStyleFrom(e,t){e?.element&&(t&&(this.transitionState=t||null),e.element.classList.contains(`vvw--loaded`)&&(this.element.classList.add(`vvw--loaded`),this.state.width=e.state.width,this.state.height=e.state.height),e.element.classList.contains(`vvw--ready`)&&this.element.classList.add(`vvw--ready`))}toObject(){return structuredClone({config:{src:this.config.src,alt:this.config.alt,srcSet:this.config.srcSet},origin:this.origin?{src:this.origin.src,srcSet:this.origin.srcSet,borderRadius:this.origin.borderRadius,objectFit:this.origin.objectFit}:null,parsedSrcSet:this.parsedSrcSet,element:`src`in this.element?this.element.src:this.element.toString(),thumb:void 0,index:this.index,pos:this.pos,state:{width:this.state._width,height:this.state._height,transform:this.state._transform,translate:this.state._translate}})}setFinalTransform(e={}){let{propagateEvent:t=!0}=e;if(this.isReady){if(this.state.translate.x+=this.state.transform.x,this.state.translate.y+=this.state.transform.y,this.state.width*=this.state.transform.scale,this.state.height*=this.state.transform.scale,Math.abs(this.state.width-this.fullW)<1&&(this.state.width=this.fullW,this.state.height=this.fullH),Math.abs(this.state.translate.x)<1&&(this.state.translate.x=0),Math.abs(this.state.translate.y)<1&&(this.state.translate.y=0),this.state.translate={...this.state.translate},this.state.transform={x:0,y:0,scale:1},t){let e=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(e,this.vistaView),this.vistaView.state.extensions.forEach(t=>{t.onContentChange&&t.onContentChange(e,this.vistaView)})}return{close:!0,cancel:()=>{}}}}},S=class extends x{element;rect=null;onWidthChange(e){super.onWidthChange(e);let t=this.getFromParsedSrcSet(e);if(t&&this.element.src!==t){let e=new Image;e.onload=()=>{e.decode().then(()=>{this.isCancelled||(this.element.src=t)})},e.src=t}}constructor(e){super(e);let t=document.createElement(`img`);t.alt=this.config.alt||``,t.classList.add(`vvw-img-hi`),this.element=t,t.onerror=e=>{this.isLoadedRejected(e)},t.src=this.config.src,t.decode().then(()=>{this.onLoad()}).catch(e=>{this.isLoadedRejected(e)}),this.setSizes({stableSize:!1,initDimension:!0})}onLoad(){if(this.isCancelled)return;let e=this.element;e.width=e.naturalWidth,e.height=e.naturalHeight,this.maxW=e.naturalWidth*this.maxZoomLevel;let{width:t,height:n}=v(e);this.fullH=n,this.fullW=t,this.minW=this.fullW*.5,this.isLoadedResolved(!0)}getFullSizeDim(){return v(this.element)}normalize(){super.normalize();let e=this.element;e.style.objectFit=`cover`,e.style.borderRadius=`0`}scaleMove(e,t,n=!1){if(!this.isReady||!this.element)return;this.rect||=this.element.getBoundingClientRect(),t||=this.initPointerCenter;let r=this.rect.left+this.rect.width/2,i=this.rect.top+this.rect.height/2,a=this.initPointerCenter.x-r,o=this.initPointerCenter.y-i,s=a*(1-e),c=o*(1-e),l=t.x-this.initPointerCenter.x,u=t.y-this.initPointerCenter.y;n?y.start({vistaImage:this,target:{transform:{x:s+l,y:c+u,scale:e}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1}):this.state.transform={x:s+l,y:c+u,scale:e};let d=this.element.getBoundingClientRect().width*e;this.isZoomedIn=d>this.fullW,this.state.lessThanMinWidth=d<=this.minW,this.onScale({vistaImage:this,scale:d/this.fullW,isMax:d>=this.maxW,isMin:d<=this.fullW})}animateZoom(e,t){this.state.width*e<this.minW||this.scaleMove(e,t,!0)}momentumThrow(e){if(!this.isReady)return()=>{};if(!this.isThrowing)return this.setFinalTransform(),()=>{};if(Math.abs(e.x)<.1&&Math.abs(e.y)<.1){let e=this.element.getBoundingClientRect();return y.start({vistaImage:this,target:{transform:{x:e.right<window.innerWidth/2?this.state.transform.x+(window.innerWidth/2-e.right):e.left>window.innerWidth/2?this.state.transform.x-(e.left-window.innerWidth/2):this.state.transform.x,y:e.bottom<window.innerHeight/2?this.state.transform.y+(window.innerHeight/2-e.bottom):e.top>window.innerHeight/2?this.state.transform.y-(e.top-window.innerHeight/2):this.state.transform.y}},onComplete:()=>{this.isThrowing=!1,this.setFinalTransform()},shouldWait:()=>!1}),()=>{}}return requestAnimationFrame(()=>{if(!this.isThrowing)return this.momentumThrow({x:0,y:0});let t=this.element,n=this.state.transform;n.x+=e.x,n.y+=e.y;let r=t.getBoundingClientRect();n.x+=e.x,n.y+=e.y,r.right<window.innerWidth/2&&(n.x+=(window.innerWidth/2-r.right)*.1,e.x*=.7),r.left>window.innerWidth/2&&(n.x-=(r.left-window.innerWidth/2)*.1,e.x*=.7),r.bottom<window.innerHeight/2&&(n.y+=(window.innerHeight/2-r.bottom)*.1,e.y*=.7),r.top>window.innerHeight/2&&(n.y-=(r.top-window.innerHeight/2)*.1,e.y*=.7),this.state.transform=n,this.momentumThrow({x:e.x*.9,y:e.y*.9})}),()=>{y.stop(this),this.isThrowing=!1,this.setFinalTransform()}}animateNormalizeTimeout=null;animateNormalize(){this.animateNormalizeTimeout&&clearTimeout(this.animateNormalizeTimeout),this.animateNormalizeTimeout=setTimeout(()=>{y.start({vistaImage:this,target:{width:this.fullW,height:this.fullH,translate:{x:0,y:0},transform:{x:0,y:0,scale:1}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1})},50)}setFinalTransform(){if(!this.isReady)return;this.rect=null,super.setFinalTransform({propagateEvent:!1});let e=this.state.width<=this.minW;if(this.state.width>this.maxW)this.animateZoom(this.maxW/this.state.width);else if(!e&&this.state.width<this.fullW)this.animateNormalize();else if(this.pos===0){let e=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(e,this.vistaView),this.vistaView.state.extensions.forEach(t=>{t.onContentChange&&t.onContentChange(e,this.vistaView)})}return{close:e,cancel:()=>y.stop(this)}}},C=class{fiolast={};fio(e,t,n=50){let r=Date.now()-(this.fiolast[t]??0),i=()=>{this.fiolast[t]=Date.now(),e()};if(!this.fiolast[t]){i();return}r>=n&&i()}},w=class{open=!1;settled=!1;closing=!1;zoomedIn=!1;children={htmls:[],images:[]};currentIndex=-1;elmLength=0;abortController=new AbortController;isReducedMotion=!1;extensions=new Set};function T(e){return e&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim())&&e}function E(e){let t=e instanceof HTMLAnchorElement?e:null,n=e instanceof HTMLImageElement?e:t?.querySelector(`img`),r=t?getComputedStyle(t):null,i=n?getComputedStyle(n):null,a=`0px`,o=i?i.objectFit:`contain`;return r&&T(r.borderRadius)?a=r.borderRadius:i&&T(i.borderRadius)&&(a=i.borderRadius),{borderRadius:a,objectFit:o}}function D(e){let t=e.split(`,`).map(e=>e.trim()),n=[];for(let e of t){let[t,r]=e.split(` `).map(e=>e.trim());if(t&&r&&r.endsWith(`w`)){let e=parseInt(r.slice(0,-1),10);isNaN(e)||n.push({src:t,width:e})}}return n}function O(e){let t=e instanceof HTMLImageElement?e:e.querySelector(`img`),n=e.dataset.vistaviewSrc||e.getAttribute(`href`)||e.getAttribute(`src`)||t?.getAttribute(`src`)||``,r=e.dataset.vistaviewSrcset||e.getAttribute(`srcset`)||t?.getAttribute(`srcset`)||``;if(!n&&!r)throw console.error(`VistaView Error: Element must have href, src, or srcSet`),Error(`VistaView: Element must have href, src, or srcSet`);let i=r?D(r):void 0,a=E(e);return{config:{src:n,alt:e.dataset.vistaviewAlt||e.getAttribute(`alt`)||t?.getAttribute(`alt`)||``,srcSet:r||void 0},parsedSrcSet:i?.length?i:void 0,origin:{anchor:e instanceof HTMLAnchorElement?e:void 0,image:t,src:n,srcSet:r,borderRadius:a.borderRadius,objectFit:a.objectFit}}}var k=class{pointers=[];elm;listeners=[];lastPointerDownId=null;constructor({elm:e,listeners:t}){this.elm=e??document,t&&(this.listeners=t),this.startListeners()}removeLastPointer=()=>{if(this.pointers.length&&this.lastPointerDownId!==null){let e=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);e!==-1&&this.pointers.splice(e,1)}};onPointerDown=e=>{if(!this.listeners.length||e.button!==0)return;e.preventDefault(),this.lastPointerDownId=e.pointerId,window.addEventListener(`contextmenu`,this.removeLastPointer,{once:!0}),window.addEventListener(`auxclick`,this.removeLastPointer,{once:!0});let t={x:e.clientX,y:e.clientY,movementX:0,movementY:0,id:e.pointerId};this.pointers.push(t),this.listeners.forEach(e=>e({event:`down`,pointer:t,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))};onPointerMove=e=>{if(!this.listeners.length)return;e.preventDefault();let t=this.pointers.find(t=>t.id===e.pointerId);t&&(t.movementX=e.movementX,t.movementY=e.movementY,t.x=e.clientX,t.y=e.clientY,this.listeners.forEach(e=>e({event:`move`,pointer:t,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))};onPointerUp=e=>{if(!this.listeners.length||e.button!==0||(window.removeEventListener(`contextmenu`,this.removeLastPointer),window.removeEventListener(`auxclick`,this.removeLastPointer),e.target instanceof Node&&!this.elm.contains(e.target)&&e.target!==document.querySelector(`html`)&&e.target!==document))return;e.preventDefault();let t=this.pointers.findIndex(t=>t.id===e.pointerId);if(t===-1)return;let n=this.pointers[t];n.x=e.clientX,n.y=e.clientY;let r=this.pointers.length;this.pointers.splice(t,1),this.listeners.forEach(e=>e({event:`up`,pointer:n,pointers:this.pointers,lastPointerLen:r}))};onPointerCancel=e=>{if(!this.listeners.length||e.target instanceof Node&&!this.elm.contains(e.target)&&e.target!==document.querySelector(`html`)&&e.target!==document)return;e.preventDefault();let t=this.pointers.findIndex(t=>t.id===e.pointerId);if(t===-1)return;let n=this.pointers[t];n.x=e.clientX,n.y=e.clientY;let r=this.pointers.length;this.pointers.splice(t,1),this.listeners.forEach(e=>e({event:`cancel`,pointer:n,pointers:this.pointers,lastPointerLen:r}))};startListeners(){this.elm.addEventListener(`pointerdown`,this.onPointerDown),this.elm.addEventListener(`pointermove`,this.onPointerMove),document.addEventListener(`pointerup`,this.onPointerUp),document.addEventListener(`pointercancel`,this.onPointerCancel)}removeListeners(){this.elm.removeEventListener(`pointerdown`,this.onPointerDown),this.elm.removeEventListener(`pointermove`,this.onPointerMove),document.removeEventListener(`pointerup`,this.onPointerUp),document.removeEventListener(`pointercancel`,this.onPointerCancel),this.pointers=[]}addEventListener(e){this.listeners.push(e)}removeEventListener(e){this.listeners=this.listeners.filter(t=>t!==e)}getPointerDistance(e,t){let n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}getCentroid(){if(this.pointers.length===0)return null;let e=this.pointers.reduce((e,t)=>(e.x+=t.x,e.y+=t.y,e),{x:0,y:0});return{x:e.x/this.pointers.length,y:e.y/this.pointers.length}}},A=class{pointers=null;lastDistance=0;pinchMode=!1;lastPinchEndTime=0;PINCH_COOLDOWN=111;cancelMove=()=>{};pointerListeners=[];vvw;imageContainer=null;constructor(e){this.vvw=e}registerPointerListener(e){this.pointerListeners.push(e)}isPinching=()=>this.pinchMode||performance.now()-this.lastPinchEndTime<this.PINCH_COOLDOWN;internalPointerListener=e=>{let t=this.vvw.state.children.images.find(e=>e.pos===0);if(e.event===`down`){if(this.cancelMove(),this.vvw.state.zoomedIn&&e.pointers.length===1&&!this.isPinching()){let e=this.pointers.getCentroid();t.setInitialCenter(e)}if(e.pointers.length>=2){this.pinchMode=!0;let n=this.pointers.getCentroid();this.lastDistance=this.pointers.getPointerDistance(e.pointers[0],e.pointers[1]),t.setInitialCenter(n)}}else if(e.event===`move`){if(this.vvw.state.zoomedIn&&e.pointers.length===1&&e.lastPointerLen===0&&!this.isPinching()){let e=this.pointers.getCentroid();t.scaleMove(1,e)}if(e.pointers.length>=2&&this.pinchMode){let n=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(e.pointers[0],e.pointers[1]);t.scaleMove(r/this.lastDistance,n)}}else if((e.event===`up`||e.event===`cancel`)&&(this.pinchMode||this.vvw.state.zoomedIn))if(this.pinchMode){this.lastPinchEndTime=performance.now(),this.pinchMode=!1;let e=t.setFinalTransform();e?.cancel&&(this.cancelMove=e.cancel),e?.close&&requestAnimationFrame(()=>{this.vvw.close()})}else this.vvw.state.zoomedIn&&e.pointers.length===0&&!this.isPinching()&&(t.isThrowing=!0,this.cancelMove=t.momentumThrow({x:e.pointer.movementX,y:e.pointer.movementY}));this.pointerListeners.forEach(t=>t({...e,state:this.vvw.state,hasInternalExecution:this.vvw.state.zoomedIn||this.isPinching(),abortController:this.vvw.state.abortController}))};onKeyDown=e=>{let t=this.vvw;switch(e.key){case`ArrowLeft`:e.preventDefault(),t.prev();break;case`ArrowRight`:e.preventDefault(),t.next();break;case`ArrowUp`:e.preventDefault(),t.zoomIn();break;case`ArrowDown`:e.preventDefault(),t.zoomOut();break;case`Escape`:e.preventDefault(),t.close();break}};onScroll=e=>{e.preventDefault();let t=this.vvw,n=this.vvw.state.children.images.find(e=>e.pos===0),r=e.deltaY;n.setInitialCenter({x:e.clientX,y:e.clientY}),r<0?t.zoomIn():r>0&&t.zoomOut()};onResizeHandler=()=>{this.vvw.state.children.images.forEach(e=>{e.setSizes()})};start(e){this.vvw.options.keyboardListeners&&window.addEventListener(`keydown`,this.onKeyDown),this.imageContainer=e,this.imageContainer.addEventListener(`wheel`,this.onScroll,{passive:!1}),window.addEventListener(`resize`,this.onResizeHandler),this.pointers=new k({elm:e,listeners:[this.internalPointerListener]})}stop(){this.vvw.options.keyboardListeners&&window.removeEventListener(`keydown`,this.onKeyDown),window.removeEventListener(`resize`,this.onResizeHandler),this.imageContainer.removeEventListener(`wheel`,this.onScroll),this.pointers.removeListeners(),this.pointerListeners=[]}};let j={somethingOpened:null};var M=class{options;state=new w;imageContainer=null;externalPointerListener=[];elements;eventHandlers=null;imageSetupFunction=f;initFunction=p;openFunction=h;closeFunction=g;transitionFunction=_;throttle=new C;root=null;onClickElements=e=>{e.preventDefault();let t=this.qsOrigin(this.elements),n=Array.prototype.indexOf.call(t,e.currentTarget);this.open(n)};defaultOnClickHandler=e=>e.preventDefault();constructor(e,n={}){this.elements=e,this.options={...t,...n,controls:{...t.controls,...n.controls}},this.options.imageSetupFunction&&(this.imageSetupFunction=this.options.imageSetupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.options.extensions?.forEach(e=>{this.state.extensions.add(e)}),this.state.isReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.reset(),this.initFunction(this)}reset(){if(typeof this.elements==`string`){let e=this.qsOrigin(this.elements);this.state.elmLength=e.length,e.forEach(e=>{let t=e;t.removeEventListener(`click`,this.defaultOnClickHandler),t.removeEventListener(`pointerup`,this.onClickElements),t.addEventListener(`click`,this.defaultOnClickHandler),t.addEventListener(`pointerup`,this.onClickElements)})}else this.state.elmLength=this.elements.length}qs(e){return this.root?this.root.querySelector(e):null}qsOrigin(e){return document.querySelectorAll(e)}registerPointerListener(e){this.externalPointerListener.push(e)}getChildElements(e,t){let n=[],r=[],i=typeof this.elements==`string`?this.qsOrigin(this.elements):this.elements;for(let a=-e;a<=e;a++){let e=(t+a+i.length)%i.length,o=i[e],s={elm:o instanceof HTMLElement?O(o):{config:o,origin:void 0,parsedSrcSet:void 0},pos:a,index:e,vistaView:this,maxZoomLevel:this.options.maxZoomLevel,transitionShouldWait:()=>this.isRapidSwap,onScale:({vistaImage:e,isMin:t,isMax:n})=>{e.index===this.state.currentIndex&&(this.state.zoomedIn=!t,t?this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`):this.qs(`.vvw-zoom-out`)?.removeAttribute(`disabled`),n?this.qs(`.vvw-zoom-in`)?.setAttribute(`disabled`,`true`):this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`))}},c=null;this.state.extensions.forEach(e=>{!c&&e.onInitializeImage&&(c=e.onInitializeImage(s))});let l=c??new S(s),u=document.createElement(`div`);u.className=`vvw-item`,u.dataset.vvwPos=`${a}`,u.dataset.vvwIdx=`${e}`,l.thumb&&u.appendChild(l.thumb),u.appendChild(l.element),n.push(l),r.push(u)}return{htmls:r,images:n}}lastSwapTime=0;isRapidSwap=!1;isRapidSwapRelease=null;transitionCleanup=null;async swap(e,t){this.reactivateUi();let n=this.options.preloads||0,r=this.state.currentIndex,{htmls:i,images:a}=this.getChildElements(n,r),o=this.imageContainer,s=this.state.children,c={htmlElements:{from:s.htmls,to:i},images:{from:s.images,to:a},index:{from:e,to:this.state.currentIndex},via:t||{next:!1,prev:!1}};this.imageSetupFunction(c,this),this.state.zoomedIn=!1,this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`),this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`);let l=performance.now()-this.lastSwapTime<this.options.rapidLimit;this.isRapidSwap=l;let{images:u}=this.state.children;if(this.state.children={htmls:i,images:a},this.displayCurrentInfo(),l)u.forEach(e=>{e.cancelPendingLoad(),e.destroy()});else{let e=this.state.abortController.signal,t=this.transitionFunction(c,e,this);t&&(this.transitionCleanup=t.cleanup,await t.transitionEnded),this.lastSwapTime=performance.now(),u.forEach(e=>{e.cancelPendingLoad()});let n=u.find(e=>e.index===r),i=n?y.stop(n):void 0,o=a.find(e=>e.index===r);o&&n&&o.cloneStyleFrom(n,i),u.forEach(e=>{e.destroy()})}o.innerHTML=``,this.transitionCleanup&&this.transitionCleanup(),i.forEach(e=>{o.appendChild(e)}),a.forEach(e=>{e.init()}),l?(this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333)):this.isRapidSwap=!1,this.options.onImageView&&this.options.onImageView(c,this),this.state.extensions.forEach(e=>{e.onImageView&&e.onImageView(c,this)})}displayCurrentInfo(){let e=this.state.currentIndex;typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach((t,n)=>{t.style.opacity=``,n===e&&(t.style.opacity=`0`)});let t=this.qs(`.vvw-index`),n=`${e+1}`,r=`${this.state.elmLength}`;t&&(t.textContent=`${n} / ${r}`);let i=this.qs(`.vvw-desc`);if(i){let t=this.state.children.images.find(t=>t.index===e)?.config.alt||``;t?(i.textContent=t,i.setAttribute(`aria-label`,`Image ${n} of ${r}: ${t}`),i.style.opacity=``):(i.textContent=``,i.setAttribute(`aria-label`,`Image ${n} of ${r}`),i.style.opacity=`0`)}}tempDeactivatedUi=[];tempDeactivationRequestBy=null;deactivateUi(e,t){e.forEach(e=>{e===`zoomIn`?this.qs(`.vvw-zoom-in`)?.setAttribute(`disabled`,`true`):e===`zoomOut`&&this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`),this.tempDeactivatedUi.push(e)}),this.tempDeactivationRequestBy=t||null,this.state.extensions.forEach(t=>{t.onDeactivateUi&&t.onDeactivateUi(e,this.tempDeactivationRequestBy,this)})}reactivateUi(){this.tempDeactivatedUi.forEach(e=>{e===`zoomIn`?this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`):e===`zoomOut`&&this.qs(`.vvw-zoom-out`)?.removeAttribute(`disabled`)}),this.state.extensions.forEach(e=>{e.onReactivateUi&&e.onReactivateUi(this.tempDeactivatedUi,this.tempDeactivationRequestBy,this)}),this.tempDeactivatedUi=[],this.tempDeactivationRequestBy=null}open(e=0){if(j.somethingOpened){console.warn(`Another VistaView instance is already opened. Close it first before opening a new one.`);return}j.somethingOpened=this,this.reset(),(e<0||e>=this.state.elmLength)&&(e=(e%this.state.elmLength+this.state.elmLength)%this.state.elmLength),this.state.currentIndex=e,document.body.style.overflow=`hidden`;let t=d({controls:this.options.controls,extensions:this.state.extensions});if(document.body.append(t),this.root=document.body.querySelector(`#vvw-root`),!this.root)throw Error(`Failed to setup VistaView root element.`);this.imageContainer=this.qs(`.vvw-image-container`),this.options.animationDurationBase&&this.root.style.setProperty(`--vvw-anim-dur`,`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty(`--vvw-init-z`,`${this.options.initialZIndex??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add(`vvw-arrow-sm`);let n=this.options.preloads||0,r=e,{images:i,htmls:a}=this.getChildElements(n,r),o={htmlElements:{from:null,to:a},images:{from:null,to:i},index:{from:null,to:this.state.currentIndex},via:{next:!1,prev:!1}};this.imageSetupFunction(o,this),this.state.children={htmls:a,images:i},a.forEach(e=>{this.imageContainer.appendChild(e)}),i.forEach(e=>{e.init()}),this.qs(`.vvw-close`)?.addEventListener(`click`,()=>this.close()),this.qs(`.vvw-zoom-in`)?.addEventListener(`click`,()=>this.zoomIn()),this.qs(`.vvw-zoom-out`)?.addEventListener(`click`,()=>this.zoomOut()),this.qs(`.vvw-prev>button`)?.addEventListener(`click`,()=>this.prev()),this.qs(`.vvw-next>button`)?.addEventListener(`click`,()=>this.next()),this.state.elmLength<2&&(this.qs(`.vvw-prev`)?.classList.add(`vvw--hidden`),this.qs(`.vvw-next`)?.classList.add(`vvw--hidden`)),this.openFunction(this),this.eventHandlers=new A(this),this.externalPointerListener.forEach(e=>{this.eventHandlers.registerPointerListener(e)}),this.eventHandlers.start(this.imageContainer),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.root?.addEventListener(`transitionend`,()=>{this.root?.classList.add(`vvw--settled`)},{once:!0}),this.root.classList.add(`vvw--active`),this.displayCurrentInfo(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(o,this),this.state.extensions.forEach(e=>{e.onOpen&&e.onOpen(this),e.onImageView&&e.onImageView(o,this)})})})}async close(e=!0){j.somethingOpened===this&&this.root&&(this.eventHandlers.stop(),this.eventHandlers=null,this.state.children.images.forEach(e=>{e.prepareClose()}),e?await new Promise(e=>{let t=0;this.root.addEventListener(`transitionend`,n=>{n.target===this.root&&(t++,t===2&&typeof this.elements==`string`&&(this.state.children.images.forEach(e=>{e.destroy()}),this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=``})),t===3&&e(null))}),this.root.classList.add(`vvw--closing`)}):typeof this.elements==`string`&&(this.state.children.images.forEach(e=>{e.destroy()}),this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=``})),this.root.remove(),this.root=null,this.imageContainer=null,this.state.children={htmls:[],images:[]},this.state.currentIndex=-1,this.state.children.images.forEach(e=>{e.destroy()}),document.body.style.overflow=``,j.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this),this.state.extensions.forEach(e=>{e.onClose&&e.onClose(this)}))}destroy(){this.close(!1),this.externalPointerListener=[],typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach(e=>{e.removeAttribute(`data-vista-idx`),e.removeEventListener(`click`,this.defaultOnClickHandler),e.removeEventListener(`pointerup`,this.onClickElements)})}next(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}let e=(this.state.currentIndex+1)%this.state.elmLength;this.view(e,{next:!0,prev:!1})}prev(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}let e=(this.state.currentIndex-1+this.state.elmLength)%this.state.elmLength;this.view(e,{next:!1,prev:!0})}view(e,t){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}if(this.state.elmLength<2)return;(e<0||e>=this.state.elmLength)&&(e=(e%this.state.elmLength+this.state.elmLength)%this.state.elmLength);let n=this.state.currentIndex;this.state.currentIndex=e,this.state.abortController?.abort(),this.state.abortController=new AbortController,this.swap(n,t)}isZoomedIn=!1;zoomIn(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}this.tempDeactivatedUi.includes(`zoomIn`)||this.throttle.fio(()=>{this.state.children.images.find(e=>e.pos===0)?.animateZoom(1.68)},`zoom`,222)}zoomOut(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}this.tempDeactivatedUi.includes(`zoomOut`)||this.throttle.fio(()=>{this.state.children.images.find(e=>e.pos===0)?.animateZoom(.68)},`zoom`,222)}getCurrentIndex(){return this.state.currentIndex}};function N(e){let t=null;if(typeof e==`string`){if(t=document.querySelectorAll(e),t.length===0)return Error(`No elements found in node list.`);for(let e=0;e<t.length;e++){let n=t[e],r=n.tagName.toLowerCase();if(r!==`img`&&r!==`a`)return Error(`Invalid element at index ${e}: expected <img>, <a>, got <${r}>`);if(r===`a`&&n.querySelector(`img`)===null)return Error(`Invalid <a> element at index ${e}: must contain <img>`)}}else{let t=e;for(let e=0;e<t.length;e++)if(!t[e].src)return Error(`Invalid image data at index ${e}: must have 'src'`)}return e}function P({elements:e,...t}){if(!e)return console.error(e),console.error(`no elements provided`),console.warn(`VistaView: silently returning.`),null;let n=N(e);if(n instanceof Error)return console.error(n),console.warn(`VistaView: silently returning.`),null;let r=new M(n,t);return{open:(e=0)=>r.open(e),reset:()=>r.reset(),close:()=>r.close(),next:()=>r.next(),prev:()=>r.prev(),zoomIn:()=>r.zoomIn(),zoomOut:()=>r.zoomOut(),destroy:()=>r.destroy(),getCurrentIndex:()=>r.getCurrentIndex(),view:e=>{r.view(e)}}}e.DefaultOptions=t,e.VistaBox=x,e.VistaHiresTransition=y,e.VistaImage=S,e.VistaImageEvent=A,e.VistaPointers=k,e.VistaState=w,e.VistaView=M,e.close=g,e.imageSetup=f,e.init=p,e.open=h,e.transition=_,e.vistaView=P});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vistaview",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
   "keywords": [
     "image",
@@ -18,90 +18,145 @@
     "touch",
     "responsive"
   ],
-  "type": "module",
-  "main": "./dist/vistaview.js",
-  "module": "./dist/vistaview.js",
-  "types": "./dist/vistaview.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "author": "jujiyangasli@gmail.com",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juji/vistaview.git"
+  },
   "exports": {
     ".": {
-      "types": "./dist/vistaview.d.ts",
-      "import": "./dist/vistaview.js"
+      "types": "./main/dist/vistaview.d.ts",
+      "import": "./main/dist/vistaview.js",
+      "require": "./main/dist/vistaview.umd.js"
     },
+    "./style.css": "./main/dist/style.css",
+    "./styles/*": "./main/dist/styles/*",
+    "./styles/extensions/image-story.css": "./extensions/image-story/dist/style.css",
     "./react": {
-      "types": "./dist/react.d.ts",
-      "import": "./dist/react.js"
+      "types": "./frameworks/react/dist/main.d.ts",
+      "import": "./frameworks/react/dist/main.es.js"
     },
     "./vue": {
-      "types": "./dist/vue.d.ts",
-      "import": "./dist/vue.js"
+      "types": "./frameworks/vue/dist/main.d.ts",
+      "import": "./frameworks/vue/dist/main.es.js"
+    },
+    "./solid": {
+      "solid": {
+        "development": "./frameworks/solid/dist/dev.jsx",
+        "import": "./frameworks/solid/dist/index.jsx"
+      },
+      "development": {
+        "import": {
+          "types": "./frameworks/solid/dist/index.d.ts",
+          "default": "./frameworks/solid/dist/dev.js"
+        }
+      },
+      "import": {
+        "types": "./frameworks/solid/dist/index.d.ts",
+        "default": "./frameworks/solid/dist/index.js"
+      }
     },
     "./svelte": {
-      "types": "./dist/svelte.d.ts",
-      "import": "./dist/svelte.js"
+      "types": "./frameworks/svelte/dist/index.d.ts",
+      "svelte": "./frameworks/svelte/dist/index.js"
     },
-    "./solid": {
-      "types": "./dist/solid.d.ts",
-      "import": "./dist/solid.js"
+    "./extensions/dailymotion-video": {
+      "types": "./extensions/dailymotion-video/dist/main.d.ts",
+      "import": "./extensions/dailymotion-video/dist/main.js",
+      "require": "./extensions/dailymotion-video/dist/main.umd.cjs"
     },
-    "./style.css": "./dist/style.css",
-    "./styles/*": "./dist/styles/*",
-    "./extensions/*": "./dist/extensions/*"
-  },
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "solid-js": ">=1.0.0",
-    "svelte": ">=4.0.0",
-    "vue": ">=3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
+    "./extensions/download": {
+      "types": "./extensions/download/dist/main.d.ts",
+      "import": "./extensions/download/dist/main.js",
+      "require": "./extensions/download/dist/main.umd.cjs"
+    },
+    "./extensions/google-maps": {
+      "types": "./extensions/google-maps/dist/main.d.ts",
+      "import": "./extensions/google-maps/dist/main.js",
+      "require": "./extensions/google-maps/dist/main.umd.cjs"
+    },
+    "./extensions/image-story/style.css": "./extensions/image-story/dist/style.css",
+    "./extensions/image-story": {
+      "types": "./extensions/image-story/dist/main.d.ts",
+      "import": "./extensions/image-story/dist/main.js",
+      "require": "./extensions/image-story/dist/main.umd.cjs"
+    },
+    "./extensions/logger": {
+      "types": "./extensions/logger/dist/main.d.ts",
+      "import": "./extensions/logger/dist/main.js",
+      "require": "./extensions/logger/dist/main.umd.cjs"
+    },
+    "./extensions/mapbox": {
+      "types": "./extensions/mapbox/dist/main.d.ts",
+      "import": "./extensions/mapbox/dist/main.js",
+      "require": "./extensions/mapbox/dist/main.umd.cjs"
+    },
+    "./extensions/openstreetmap": {
+      "types": "./extensions/openstreetmap/dist/main.d.ts",
+      "import": "./extensions/openstreetmap/dist/main.js",
+      "require": "./extensions/openstreetmap/dist/main.umd.cjs"
     },
-    "vue": {
-      "optional": true
+    "./extensions/select-box": {
+      "types": "./extensions/select-box/dist/main.d.ts",
+      "import": "./extensions/select-box/dist/main.js",
+      "require": "./extensions/select-box/dist/main.umd.cjs"
     },
-    "svelte": {
-      "optional": true
+    "./extensions/streamable-video": {
+      "types": "./extensions/streamable-video/dist/main.d.ts",
+      "import": "./extensions/streamable-video/dist/main.js",
+      "require": "./extensions/streamable-video/dist/main.umd.cjs"
     },
-    "solid-js": {
-      "optional": true
+    "./extensions/twitch-video": {
+      "types": "./extensions/twitch-video/dist/main.d.ts",
+      "import": "./extensions/twitch-video/dist/main.js",
+      "require": "./extensions/twitch-video/dist/main.umd.cjs"
+    },
+    "./extensions/vidyard-video": {
+      "types": "./extensions/vidyard-video/dist/main.d.ts",
+      "import": "./extensions/vidyard-video/dist/main.js",
+      "require": "./extensions/vidyard-video/dist/main.umd.cjs"
+    },
+    "./extensions/vimeo-video": {
+      "types": "./extensions/vimeo-video/dist/main.d.ts",
+      "import": "./extensions/vimeo-video/dist/main.js",
+      "require": "./extensions/vimeo-video/dist/main.umd.cjs"
+    },
+    "./extensions/wistia-video": {
+      "types": "./extensions/wistia-video/dist/main.d.ts",
+      "import": "./extensions/wistia-video/dist/main.js",
+      "require": "./extensions/wistia-video/dist/main.umd.cjs"
+    },
+    "./extensions/youtube-video": {
+      "types": "./extensions/youtube-video/dist/main.d.ts",
+      "import": "./extensions/youtube-video/dist/main.js",
+      "require": "./extensions/youtube-video/dist/main.umd.cjs"
     }
   },
   "files": [
-    "dist"
+    "main/dist",
+    "frameworks/*/dist",
+    "extensions/*/dist"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && BUILD_ENV=prod vite build && npm run build:umd",
-    "build:umd": "./build-umd.sh",
-    "preview": "vite preview",
-    "prepare": "husky",
-    "test": "echo \"no test specified\"",
-    "tunnel": "cloudflared tunnel --url http://localhost:5173"
-  },
-  "lint-staged": {
-    "*.{js,ts,css,json,md}": "prettier --write"
+  "dependencies": {
+    "husky": "^9.1.7"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/react": "^19.2.7",
-    "@types/trusted-types": "^2.0.7",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
-    "prettier": "^3.7.4",
-    "sharp": "^0.34.5",
-    "solid-js": "^1.9.10",
-    "svelte": "^5.45.6",
-    "typescript": "~5.9.3",
-    "vite": "^6.4.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-solid": "^2.11.10",
-    "vue": "^3.5.25"
-  },
-  "repository": {
-    "url": "https://github.com/juji/vistaview"
+    "@playwright/test": "^1.52.0"
   },
-  "dependencies": {
-    "isomorphic-dompurify": "^2.35.0"
+  "scripts": {
+    "test": "pnpm --recursive --parallel test",
+    "test:core": "pnpm --filter main test",
+    "test:e2e": "playwright test",
+    "build": "pnpm build:main && pnpm build:libs",
+    "build:main": "pnpm --filter main build",
+    "build:libs": "pnpm --parallel --filter './extensions/*' --filter './frameworks/*' build",
+    "build:local": "pnpm build:main && pnpm build:libs && pnpm build:rest",
+    "predev": "pnpm build:main && pnpm build:libs",
+    "dev": "pnpm --parallel dev"
   }
-}
+}

package/dist/extensions/dailymotion-video.d.ts

@@ -1,2 +0,0 @@
-export * from '../lib/extensions/dailymotion-video'
-export {}

package/dist/extensions/dailymotion-video.js

@@ -1,80 +0,0 @@
-var u = Object.defineProperty;
-var f = (t, e, i) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
-var a = (t, e, i) => f(t, typeof e != "symbol" ? e + "" : e, i);
-import { V as y } from "../vista-box-zG6ZgBcI.js";
-function r(t) {
-  if (!t) return null;
-  const e = [
-    /dailymotion\.com\/video\/([a-zA-Z0-9]+)/,
-    /dai\.ly\/([a-zA-Z0-9]+)/,
-    /dailymotion\.com\/embed\/video\/([a-zA-Z0-9]+)/
-  ];
-  for (const i of e) {
-    const n = t.match(i);
-    if (n && n[1])
-      return n[1];
-  }
-  return null;
-}
-function p(t) {
-  const e = r(t);
-  if (!e)
-    throw new Error("Invalid Dailymotion video URL");
-  return `https://www.dailymotion.com/thumbnail/video/${e}`;
-}
-class h extends y {
-  constructor(i) {
-    var c;
-    super(i);
-    a(this, "element");
-    a(this, "url");
-    const n = i.elm.config.src;
-    this.url = n;
-    const l = document.createElement("div");
-    l.style.position = "relative";
-    const s = document.createElement("img");
-    l.appendChild(s), s.src = ((c = this.origin) == null ? void 0 : c.image.src) || p(n), s.style.width = "100%", s.style.height = "100%", s.style.objectFit = "cover", s.classList.add("vvw--pulsing"), this.element = l, this.element.classList.add("vvw-img-hi");
-    const { width: m, height: d } = this.getFullSizeDim();
-    if (this.fullH = d, this.fullW = m, this.minW = this.fullW * 0.5, this.maxW = this.fullW, this.element.style.width = `${m}px`, this.element.style.height = `${d}px`, this.setSizes({ stableSize: !1, initDimension: !0 }), this.pos === 0) {
-      const o = document.createElement("iframe");
-      o.frameBorder = "0", o.allow = "autoplay; fullscreen; picture-in-picture", o.allowFullscreen = !0, o.width = "100%", o.height = "100%", o.style.position = "absolute", o.style.top = "0", o.style.left = "0", o.style.opacity = "0", o.style.transition = "opacity 333ms ease", o.src = `https://www.dailymotion.com/embed/video/${r(n)}?autoplay=1`, l.appendChild(o), o.onload = () => {
-        o.style.opacity = "1", s.classList.remove("vvw--pulsing");
-      };
-    }
-    this.isLoadedResolved(!0);
-  }
-  // the default full size is the scaled thumbnail size
-  // so we change it to 16:9 full window width size (or max 800px)
-  getFullSizeDim() {
-    const i = Math.min(window.innerWidth, 800);
-    return {
-      width: i,
-      height: i * 9 / 16
-    };
-  }
-  // override to avoid propagating content change event
-  // (because no change will happen on iframe)
-  setFinalTransform() {
-    return super.setFinalTransform({ propagateEvent: !1 });
-  }
-}
-function w() {
-  return {
-    name: "dailymotionVideo",
-    onInitializeImage: (t) => {
-      const e = t.elm.config.src;
-      if (r(e))
-        return new h(t);
-    },
-    onImageView: async (t, e) => {
-      const i = t.images.to[Math.floor(t.images.to.length / 2)];
-      i instanceof h && e.deactivateUi(["download", "zoomIn", "zoomOut"], i);
-    }
-  };
-}
-export {
-  h as VistaDailymotionVideo,
-  w as dailymotionVideo,
-  p as getDailymotionThumbnail,
-  r as parseDailymotionVideoId
-};

package/dist/extensions/dailymotion-video.umd.js

@@ -1 +0,0 @@
-(function(m,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m.VistaView=m.VistaView||{}))})(this,(function(m){"use strict";var F=Object.defineProperty;var P=(m,f,w)=>f in m?F(m,f,{enumerable:!0,configurable:!0,writable:!0,value:w}):m[f]=w;var h=(m,f,w)=>P(m,typeof f!="symbol"?f+"":f,w);function f(c){const i=window.getComputedStyle(c).objectFit||"",{width:s,height:a}=c.getBoundingClientRect(),e=c.naturalWidth,n=c.naturalHeight;if(!i)return{width:s,height:a};if(!e||!n)return{width:s,height:a};const d=e/n,r=s/a;switch(i){case"fill":return{width:s,height:a};case"none":return{width:e,height:n};case"contain":return d>r?{width:s,height:s/d}:{width:a*d,height:a};case"cover":return d<r?{width:s,height:s/d}:{width:a*d,height:a};case"scale-down":{const l={width:e,height:n},u=d>r?{width:s,height:s/d}:{width:a*d,height:a};return u.width<=l.width&&u.height<=l.height?u:l}}return{width:s,height:a}}class w{static ease(t,i,s){const a=i-t,e=t+a*.2;return Math.abs(a)<s?i:e}static play(t,i,s){if(s()){requestAnimationFrame(()=>{this.play(t,i,s)});return}this.map.get(t)&&(t.element.classList.contains("vvw--load-cancelled")||requestAnimationFrame(()=>{var u,o,g,y,x,b,W,_,C,R;const a=this.map.get(t);if(!a||!t.element||t.element.classList.contains("vvw--load-cancelled"))return;const{current:e,target:n,log:d}=a;let r={};n.width!==void 0&&(r.width=this.ease(e._width,n.width,1)),n.height!==void 0&&(r.height=this.ease(e._height,n.height,1)),((u=n.transform)==null?void 0:u.x)!==void 0&&(r.transform=r.transform||{},r.transform.x=this.ease(e._transform.x,n.transform.x,1)),((o=n.transform)==null?void 0:o.y)!==void 0&&(r.transform=r.transform||{},r.transform.y=this.ease(e._transform.y,n.transform.y,1)),((g=n.transform)==null?void 0:g.scale)!==void 0&&(r.transform=r.transform||{},r.transform.scale=this.ease(e._transform.scale,n.transform.scale,.005)),((y=n.translate)==null?void 0:y.x)!==void 0&&(r.translate=r.translate||{},r.translate.x=this.ease(e._translate.x,n.translate.x,1)),((x=n.translate)==null?void 0:x.y)!==void 0&&(r.translate=r.translate||{},r.translate.y=this.ease(e._translate.y,n.translate.y,1)),r.width!==void 0&&(e.width=r.width),r.height!==void 0&&(e.height=r.height),r.translate&&(e.translate={...e.translate,...r.translate}),r.transform&&(e.transform={...e.transform,...r.transform}),(n.width===void 0||e._width===n.width)&&(n.height===void 0||e._height===n.height)&&(((b=n.transform)==null?void 0:b.x)===void 0||e._transform.x===n.transform.x)&&(((W=n.transform)==null?void 0:W.y)===void 0||e._transform.y===n.transform.y)&&(((_=n.transform)==null?void 0:_.scale)===void 0||e._transform.scale===n.transform.scale)&&(((C=n.translate)==null?void 0:C.x)===void 0||e._translate.x===n.translate.x)&&(((R=n.translate)==null?void 0:R.y)===void 0||e._translate.y===n.translate.y)?(this.map.delete(t),i()):(this.map.set(t,{current:e,target:n,log:d}),this.play(t,i,s))}))}static stop(t){const i=this.map.get(t);return this.map.delete(t),i}static start({vistaImage:t,target:i,onComplete:s,shouldWait:a}){this.stop(t),this.map.set(t,{current:t.state,target:i}),this.play(t,s,a)}}h(w,"map",new Map);class L{constructor(t){h(this,"state");h(this,"parsedSrcSet");h(this,"isReady",!1);h(this,"isThrowing",!1);h(this,"thumb",null);h(this,"pos");h(this,"index");h(this,"config");h(this,"origin");h(this,"initH",0);h(this,"initW",0);h(this,"fullH",0);h(this,"fullW",0);h(this,"maxW",0);h(this,"minW",0);h(this,"defaultWH",200);h(this,"isZoomedIn",!1);h(this,"isCancelled",!1);h(this,"isLoadedResolved",null);h(this,"isLoadedRejected",null);h(this,"isLoaded",new Promise((t,i)=>{this.isLoadedResolved=t,this.isLoadedRejected=i}));h(this,"replacement",null);h(this,"originalParent",null);h(this,"originalNextSibling",null);h(this,"originalStyle","");h(this,"thumbImage",null);h(this,"originRect",{width:this.defaultWH,height:this.defaultWH,top:0,left:0});h(this,"fittedSize",null);h(this,"maxZoomLevel");h(this,"vistaView");h(this,"transitionState",null);h(this,"transitionShouldWait",()=>!1);h(this,"initPointerCenter",{x:0,y:0});h(this,"onScale");var s,a,e;this.state=this.createState(),this.pos=t.pos,this.index=t.index,this.config=t.elm.config,this.parsedSrcSet=t.elm.parsedSrcSet,this.origin=t.elm.origin,this.maxZoomLevel=t.maxZoomLevel,this.vistaView=t.vistaView,this.onScale=t.onScale,t.transitionState&&(this.transitionState=t.transitionState),t.transitionShouldWait&&(this.transitionShouldWait=t.transitionShouldWait),this.initPointerCenter={x:window.innerWidth/2,y:window.innerHeight/2};const i=this.pos===0?(s=this.origin)==null?void 0:s.image:null;if(this.originalParent=(i==null?void 0:i.parentElement)||null,this.originalNextSibling=(i==null?void 0:i.nextSibling)||null,this.originRect=((e=((a=this.origin)==null?void 0:a.anchor)||i)==null?void 0:e.getBoundingClientRect())||{width:this.defaultWH,height:this.defaultWH,top:0,left:0},i&&this.originalParent){this.originalStyle=i.style.cssText,this.thumbImage=i;const n=i.cloneNode(!0);this.originalParent.insertBefore(n,i),this.replacement=n,this.thumb=document.createElement("div"),this.thumb.classList.add("vvw-img-lo");const{width:d,height:r}=this.thumbImage?f(this.thumbImage):{width:0,height:0};this.fittedSize={width:d,height:r},this.thumb.appendChild(i),i.style.width="100%",i.style.height="100%",i.style.objectFit=this.origin.objectFit}}createState(){const t=this;return{_t:this,_width:0,_height:0,_transform:{x:0,y:0,scale:1},_translate:{x:0,y:0},_lessThanMinWidth:!1,get width(){return this._width},set width(i){this._width=i,t.onWidthChange(i)},get height(){return this._height},set height(i){this._height=i,t.onHeightChange(i)},get transform(){return this._transform},set transform(i){this._transform=i,t.onTransformChange(i)},get translate(){return this._translate},set translate(i){this._translate=i,t.onTranslateChange(i)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(i){this._lessThanMinWidth=i,t.onLessThanMinWidthChange(i)}}}onLessThanMinWidthChange(t){t?this.element.style.opacity="0.5":this.element.style.opacity=""}onTranslateChange(t){this.element.style.translate=`calc(-50% + ${t.x}px) calc(-50% + ${t.y}px)`}onTransformChange(t){const i=`translate3d(${t.x}px, ${t.y}px, 0px) scale3d(${t.scale}, ${t.scale}, 1)`;this.element.style.transform=i}onWidthChange(t){this.element.style.width=`${t}px`}onHeightChange(t){this.element.style.height=`${t}px`}onImageReady(){}animateZoom(t,i){}scaleMove(t,i,s){}momentumThrow(t){return()=>{}}async init(){await this.isLoaded;const t=this.element;this.transitionState&&this.transitionState.current.width&&this.transitionState.current.height?(this.state.width=this.transitionState.current.width,this.state.height=this.transitionState.current.height):t.classList.contains("vvw--loaded")||(this.state.width=this.initW,this.state.height=this.initH);const i=()=>{this.isCancelled||w.start({vistaImage:this,target:{width:this.fullW,height:this.fullH},onComplete:()=>{this.isCancelled||(this.isReady=!0,t.classList.add("vvw--ready"),this.onImageReady())},shouldWait:this.transitionShouldWait})};this.pos<-1||this.pos>1?(this.state.width=this.fullW,this.state.height=this.fullH,t.classList.add("vvw--loaded"),t.classList.add("vvw--ready"),this.isReady=!0):t.classList.contains("vvw--loaded")?t.classList.contains("vvw--ready")?(this.isReady=!0,this.onImageReady()):i():(t.classList.add("vvw--loaded"),setTimeout(()=>{this.isCancelled||i()},333))}getFullSizeDim(){const{width:t,height:i}=this.thumb.getBoundingClientRect(),s=t/i;let a=window.innerWidth,e=window.innerHeight;return s>window.innerWidth/window.innerHeight?e=a/s:a=e*s,{width:a,height:e}}setSizes(t={}){var d,r,l,u;const{stableSize:i=!0,initDimension:s}=t;if(!this.origin)return;const a=this.thumb;s||(this.originRect=((r=((d=this.origin)==null?void 0:d.anchor)||this.replacement)==null?void 0:r.getBoundingClientRect())||{width:this.defaultWH,height:this.defaultWH,top:0,left:0});let e=this.originRect;if(a){const o=a.style;o.width=e.width+"px",o.height=e.height+"px",o.top="50%",o.left="50%",o.translate="-50% -50%",o.position="fixed",o.objectFit=this.origin.objectFit,o.borderRadius=this.origin.borderRadius;const g=Math.min(Math.max(e.left,-e.width),window.innerWidth+e.width)-window.innerWidth/2+e.width/2,y=Math.min(Math.max(e.top,-e.height),window.innerHeight+e.height)-window.innerHeight/2+e.height/2;o.setProperty("--vvw-init-radius",o.borderRadius),o.setProperty("--vvw-pulse-radius",`calc(1.3 * ${o.borderRadius})`),o.setProperty("--vvw-init-x",`${g}px`),o.setProperty("--vvw-init-y",`${y}px`),s&&(o.setProperty("--vvw-current-x",`${g}px`),o.setProperty("--vvw-current-y",`${y}px`))}if(!s){const{width:o,height:g}=this.thumbImage?f(this.thumbImage):{width:0,height:0};this.fittedSize={width:o,height:g}}const n=this.element;if(this.initW=Math.min(((l=this.fittedSize)==null?void 0:l.width)??0,e.width),this.initH=Math.min(((u=this.fittedSize)==null?void 0:u.height)??0,e.height),n.style.setProperty("--vvw-init-w",this.initW+"px"),n.style.setProperty("--vvw-init-h",this.initH+"px"),n.style.setProperty("--vvw-init-radius",this.origin.borderRadius),n.style.objectFit="cover",!s){if(this.isReady&&!this.isCancelled){const{width:o,height:g}=this.getFullSizeDim();this.fullH=g,this.fullW=o,this.minW=this.fullW*.5}!this.isZoomedIn&&i&&this.normalize()}}normalize(){this.state.transform={x:0,y:0,scale:1},this.state.translate={x:0,y:0},this.state.width=this.fullW,this.state.height=this.fullH,this.isZoomedIn=!1}getFromParsedSrcSet(t){if(!this.parsedSrcSet||this.parsedSrcSet.length===0)return null;const i=t*(window.devicePixelRatio||1);let s=this.parsedSrcSet[this.parsedSrcSet.length-1];for(const a of this.parsedSrcSet)if(a.width>=i){s=a;break}return s.src}prepareClose(){w.stop(this),this.setFinalTransform()}cancelPendingLoad(){var t;this.isCancelled=!0,(t=this.element)==null||t.classList.add("vvw--load-cancelled")}setInitialCenter(t){this.initPointerCenter=t}destroy(){var t,i;this.originalParent&&this.thumbImage&&(this.thumbImage.style.cssText=this.originalStyle,this.originalNextSibling?this.originalParent.insertBefore(this.thumbImage,this.originalNextSibling):this.originalParent.appendChild(this.thumbImage)),this.originalParent=null,this.originalNextSibling=null,this.originalStyle="",this.thumbImage=null,this.replacement&&(this.replacement.remove(),this.replacement=null),(t=this.thumb)==null||t.remove(),(i=this.element)==null||i.remove(),this.thumb=null,this.origin=void 0,this.config={src:"",alt:""}}cloneStyleFrom(t,i){t!=null&&t.element&&(i&&(this.transitionState=i||null),t.element.classList.contains("vvw--loaded")&&(this.element.classList.add("vvw--loaded"),this.state.width=t.state.width,this.state.height=t.state.height),t.element.classList.contains("vvw--ready")&&this.element.classList.add("vvw--ready"))}toObject(){return structuredClone({config:{src:this.config.src,alt:this.config.alt,srcSet:this.config.srcSet},origin:this.origin?{src:this.origin.src,srcSet:this.origin.srcSet,borderRadius:this.origin.borderRadius,objectFit:this.origin.objectFit}:null,parsedSrcSet:this.parsedSrcSet,element:"src"in this.element?this.element.src:this.element.toString(),thumb:void 0,index:this.index,pos:this.pos,state:{width:this.state._width,height:this.state._height,transform:this.state._transform,translate:this.state._translate}})}setFinalTransform(t={}){const{propagateEvent:i=!0}=t;if(this.isReady){if(this.state.translate.x+=this.state.transform.x,this.state.translate.y+=this.state.transform.y,this.state.width*=this.state.transform.scale,this.state.height*=this.state.transform.scale,Math.abs(this.state.width-this.fullW)<1&&(this.state.width=this.fullW,this.state.height=this.fullH),Math.abs(this.state.translate.x)<1&&(this.state.translate.x=0),Math.abs(this.state.translate.y)<1&&(this.state.translate.y=0),this.state.translate={...this.state.translate},this.state.transform={x:0,y:0,scale:1},i){const s=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(s,this.vistaView),this.vistaView.state.extensions.forEach(a=>{a.onContentChange&&a.onContentChange(s,this.vistaView)})}return{close:!0,cancel:()=>{}}}}}function p(c){if(!c)return null;const t=[/dailymotion\.com\/video\/([a-zA-Z0-9]+)/,/dai\.ly\/([a-zA-Z0-9]+)/,/dailymotion\.com\/embed\/video\/([a-zA-Z0-9]+)/];for(const i of t){const s=c.match(i);if(s&&s[1])return s[1]}return null}function S(c){const t=p(c);if(!t)throw new Error("Invalid Dailymotion video URL");return`https://www.dailymotion.com/thumbnail/video/${t}`}class v extends L{constructor(i){var r;super(i);h(this,"element");h(this,"url");const s=i.elm.config.src;this.url=s;const a=document.createElement("div");a.style.position="relative";const e=document.createElement("img");a.appendChild(e),e.src=((r=this.origin)==null?void 0:r.image.src)||S(s),e.style.width="100%",e.style.height="100%",e.style.objectFit="cover",e.classList.add("vvw--pulsing"),this.element=a,this.element.classList.add("vvw-img-hi");const{width:n,height:d}=this.getFullSizeDim();if(this.fullH=d,this.fullW=n,this.minW=this.fullW*.5,this.maxW=this.fullW,this.element.style.width=`${n}px`,this.element.style.height=`${d}px`,this.setSizes({stableSize:!1,initDimension:!0}),this.pos===0){const l=document.createElement("iframe");l.frameBorder="0",l.allow="autoplay; fullscreen; picture-in-picture",l.allowFullscreen=!0,l.width="100%",l.height="100%",l.style.position="absolute",l.style.top="0",l.style.left="0",l.style.opacity="0",l.style.transition="opacity 333ms ease",l.src=`https://www.dailymotion.com/embed/video/${p(s)}?autoplay=1`,a.appendChild(l),l.onload=()=>{l.style.opacity="1",e.classList.remove("vvw--pulsing")}}this.isLoadedResolved(!0)}getFullSizeDim(){const i=Math.min(window.innerWidth,800);return{width:i,height:i*9/16}}setFinalTransform(){return super.setFinalTransform({propagateEvent:!1})}}function H(){return{name:"dailymotionVideo",onInitializeImage:c=>{const t=c.elm.config.src;if(p(t))return new v(c)},onImageView:async(c,t)=>{const i=c.images.to[Math.floor(c.images.to.length/2)];i instanceof v&&t.deactivateUi(["download","zoomIn","zoomOut"],i)}}}m.VistaDailymotionVideo=v,m.dailymotionVideo=H,m.getDailymotionThumbnail=S,m.parseDailymotionVideoId=p,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/extensions/download.d.ts

@@ -1,2 +0,0 @@
-export * from '../lib/extensions/download'
-export {}

package/dist/extensions/download.js

@@ -1,35 +0,0 @@
-const d = '<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 u() {
-  let o = null, r = null, e = null;
-  return {
-    name: "download",
-    control: () => (e = document.createElement("button"), e.setAttribute("aria-label", "Download"), e.innerHTML = d, e.addEventListener("click", async () => {
-      if (!o || e != null && e.classList.contains("vvw--pulsing")) return;
-      e == null || e.classList.add("vvw--pulsing");
-      let l = await fetch(o), i = await l.blob();
-      const n = l.url, t = r, s = n.split("?")[0].split("#")[0].split(".").pop(), c = t ? `${t}.${s}` : n.split("?")[0].split("#")[0].split("/").pop() || "download." + s, a = document.createElement("a");
-      a.href = URL.createObjectURL(i), a.download = c, document.body.appendChild(a), a.click(), document.body.removeChild(a), i = null, l = null, e == null || e.classList.remove("vvw--pulsing");
-    }), e),
-    onImageView: (l, i) => {
-      const n = l.images.to ? l.images.to[Math.floor(l.images.to.length / 2)] : null;
-      if (!n) {
-        o = null, r = null;
-        return;
-      }
-      const { parsedSrcSet: t, config: s } = n;
-      o = t && t.length > 0 ? t[t.length - 1].src : s.src || null, r = s.alt || null;
-    },
-    onDeactivateUi: (l, i, n) => {
-      l.includes("download") && e && e.setAttribute("disabled", "true");
-    },
-    onReactivateUi: (l, i, n) => {
-      l.includes("download") && e && e.removeAttribute("disabled");
-    },
-    onClose: (l) => {
-      e == null || e.remove(), e = null, o = null, r = null;
-    }
-  };
-}
-export {
-  u as download
-};

package/dist/extensions/download.umd.js

@@ -1 +0,0 @@
-(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.VistaView=l.VistaView||{}))})(this,(function(l){"use strict";const o='<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 u(){let s=null,c=null,e=null;return{name:"download",control:()=>(e=document.createElement("button"),e.setAttribute("aria-label","Download"),e.innerHTML=o,e.addEventListener("click",async()=>{if(!s||e!=null&&e.classList.contains("vvw--pulsing"))return;e==null||e.classList.add("vvw--pulsing");let n=await fetch(s),d=await n.blob();const t=n.url,i=c,a=t.split("?")[0].split("#")[0].split(".").pop(),p=i?`${i}.${a}`:t.split("?")[0].split("#")[0].split("/").pop()||"download."+a,r=document.createElement("a");r.href=URL.createObjectURL(d),r.download=p,document.body.appendChild(r),r.click(),document.body.removeChild(r),d=null,n=null,e==null||e.classList.remove("vvw--pulsing")}),e),onImageView:(n,d)=>{const t=n.images.to?n.images.to[Math.floor(n.images.to.length/2)]:null;if(!t){s=null,c=null;return}const{parsedSrcSet:i,config:a}=t;s=i&&i.length>0?i[i.length-1].src:a.src||null,c=a.alt||null},onDeactivateUi:(n,d,t)=>{n.includes("download")&&e&&e.setAttribute("disabled","true")},onReactivateUi:(n,d,t)=>{n.includes("download")&&e&&e.removeAttribute("disabled")},onClose:n=>{e==null||e.remove(),e=null,s=null,c=null}}}l.download=u,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/extensions/google-maps.d.ts

@@ -1,2 +0,0 @@
-export * from '../lib/extensions/google-maps'
-export {}

package/dist/extensions/google-maps.js

@@ -1,96 +0,0 @@
-var u = Object.defineProperty;
-var g = (s, t, e) => t in s ? u(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var m = (s, t, e) => g(s, typeof t != "symbol" ? t + "" : t, e);
-import { V as y } from "../vista-box-zG6ZgBcI.js";
-function f(s) {
-  if (!s) return null;
-  try {
-    const t = new URL(s), e = s.match(/@(-?\d+\.?\d*),(-?\d+\.?\d*),?(\d+\.?\d*)?z?/);
-    if (e)
-      return {
-        lat: parseFloat(e[1]),
-        lng: parseFloat(e[2]),
-        zoom: e[3] ? parseFloat(e[3]) : void 0
-      };
-    const o = t.searchParams.get("q");
-    if (o) {
-      const a = o.match(/(-?\d+\.?\d*),\s*(-?\d+\.?\d*)/);
-      return a ? {
-        lat: parseFloat(a[1]),
-        lng: parseFloat(a[2]),
-        query: o
-      } : { lat: 0, lng: 0, query: o };
-    }
-    const n = t.searchParams.get("ll");
-    if (n) {
-      const [a, l] = n.split(",").map(parseFloat);
-      if (!isNaN(a) && !isNaN(l))
-        return { lat: a, lng: l };
-    }
-  } catch (t) {
-    console.error("Failed to parse Google Maps URL:", t);
-  }
-  return null;
-}
-function w(s, t) {
-  if (!t.apiKey)
-    throw new Error("Google Maps API key is required");
-  const e = s.zoom || t.zoom || 15, o = t.width || 800, n = t.height || 600, a = t.mapType || "roadmap", l = s.query || `${s.lat},${s.lng}`, r = s.query ? "" : `&markers=color:red|${s.lat},${s.lng}`;
-  return `https://maps.googleapis.com/maps/api/staticmap?center=${encodeURIComponent(l)}&zoom=${e}&size=${o}x${n}&maptype=${a}${r}&key=${t.apiKey}`;
-}
-class d extends y {
-  constructor(e, o, n) {
-    var c;
-    super(e);
-    m(this, "element");
-    m(this, "mapsConfig");
-    m(this, "location");
-    this.mapsConfig = n || {}, this.location = o;
-    const a = document.createElement("div");
-    a.style.position = "relative";
-    const l = document.createElement("img");
-    a.appendChild(l), l.src = ((c = this.origin) == null ? void 0 : c.image.src) || (n && n.apiKey ? w(o, n) : ""), l.style.width = "100%", l.style.height = "100%", l.style.objectFit = "cover", l.classList.add("vvw--pulsing"), this.element = a, this.element.classList.add("vvw-img-hi");
-    const { width: r, height: p } = this.getFullSizeDim();
-    if (this.fullH = p, this.fullW = r, this.minW = this.fullW * 0.5, this.maxW = this.fullW, this.element.style.width = `${r}px`, this.element.style.height = `${p}px`, this.setSizes({ stableSize: !1, initDimension: !0 }), this.pos === 0) {
-      const i = document.createElement("iframe");
-      i.frameBorder = "0", i.allow = "geolocation", i.allowFullscreen = !0, i.width = "100%", i.height = "100%", i.style.position = "absolute", i.style.top = "0", i.style.left = "0", i.style.opacity = "0", i.style.transition = "opacity 1s ease";
-      let h;
-      this.location.query ? h = `https://www.google.com/maps?q=${encodeURIComponent(this.location.query)}&output=embed` : h = `https://www.google.com/maps?q=${this.location.lat},${this.location.lng}&output=embed`, i.src = h, a.appendChild(i), i.onload = () => {
-        i.style.opacity = "1", l.classList.remove("vvw--pulsing");
-      };
-    }
-    this.isLoadedResolved(!0);
-  }
-  // Use 16:9 aspect ratio with max 800px width
-  getFullSizeDim() {
-    const e = Math.min(window.innerWidth, this.mapsConfig.width || 800);
-    return {
-      width: e,
-      height: e * 9 / 16
-    };
-  }
-  // Override to avoid propagating content change event
-  setFinalTransform() {
-    return super.setFinalTransform({ propagateEvent: !1 });
-  }
-}
-function z(s) {
-  return {
-    name: "googleMaps",
-    onInitializeImage: (t) => {
-      const e = t.elm.config.src, o = f(e);
-      if (o)
-        return new d(t, o, s);
-    },
-    onImageView: async (t, e) => {
-      const o = t.images.to[Math.floor(t.images.to.length / 2)];
-      o instanceof d && e.deactivateUi(["download", "zoomIn", "zoomOut"], o);
-    }
-  };
-}
-export {
-  d as VistaGoogleMaps,
-  w as getGoogleMapsStaticImage,
-  z as googleMaps,
-  f as parseGoogleMapsLocation
-};