vistaview 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -36,7 +36,7 @@ class m extends p {
36
36
  const o = t.elm.config.src;
37
37
  this.url = o;
38
38
  const a = document.createElement("div");
39
- a.style.position = "relative", a.style.overflow = "hidden", a.style.borderRadius = "12px";
39
+ a.style.position = "relative", a.style.overflow = "hidden", a.style.borderRadius = "14px";
40
40
  const n = document.createElement("img");
41
41
  a.appendChild(n), n.style.width = "100%", n.style.height = "100%", n.style.objectFit = "cover", n.src = ((d = this.origin) == null ? void 0 : d.image.src) || "", n.classList.add("vvw--pulsing"), this.element = a, this.element.classList.add("vvw-img-hi");
42
42
  const { width: c, height: h } = this.getFullSizeDim();
@@ -1 +1 @@
1
- (function(f,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(f=typeof globalThis<"u"?globalThis:f||self,m(f.VistaView=f.VistaView||{}))})(this,(function(f){"use strict";var F=Object.defineProperty;var P=(f,m,w)=>m in f?F(f,m,{enumerable:!0,configurable:!0,writable:!0,value:w}):f[m]=w;var h=(f,m,w)=>P(f,typeof m!="symbol"?m+"":m,w);function m(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 o={width:e,height:n},u=d>r?{width:s,height:s/d}:{width:a*d,height:a};return u.width<=o.width&&u.height<=o.height?u:o}}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,l,g,p,x,S,b,W,_,C;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)),((l=n.transform)==null?void 0:l.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)),((p=n.translate)==null?void 0:p.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)&&(((S=n.transform)==null?void 0:S.x)===void 0||e._transform.x===n.transform.x)&&(((b=n.transform)==null?void 0:b.y)===void 0||e._transform.y===n.transform.y)&&(((W=n.transform)==null?void 0:W.scale)===void 0||e._transform.scale===n.transform.scale)&&(((_=n.translate)==null?void 0:_.x)===void 0||e._translate.x===n.translate.x)&&(((C=n.translate)==null?void 0:C.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 R{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?m(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,o,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 l=a.style;l.width=e.width+"px",l.height=e.height+"px",l.top="50%",l.left="50%",l.translate="-50% -50%",l.position="fixed",l.objectFit=this.origin.objectFit,l.borderRadius=this.origin.borderRadius;const g=Math.min(Math.max(e.left,-e.width),window.innerWidth+e.width)-window.innerWidth/2+e.width/2,p=Math.min(Math.max(e.top,-e.height),window.innerHeight+e.height)-window.innerHeight/2+e.height/2;l.setProperty("--vvw-init-radius",l.borderRadius),l.setProperty("--vvw-pulse-radius",`calc(1.3 * ${l.borderRadius})`),l.setProperty("--vvw-init-x",`${g}px`),l.setProperty("--vvw-init-y",`${p}px`),s&&(l.setProperty("--vvw-current-x",`${g}px`),l.setProperty("--vvw-current-y",`${p}px`))}if(!s){const{width:l,height:g}=this.thumbImage?m(this.thumbImage):{width:0,height:0};this.fittedSize={width:l,height:g}}const n=this.element;if(this.initW=Math.min(((o=this.fittedSize)==null?void 0:o.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:l,height:g}=this.getFullSizeDim();this.fullH=g,this.fullW=l,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 y(c){if(!c)return null;const t=[/wistia\.com\/medias\/([a-zA-Z0-9]+)/,/wistia\.net\/embed\/iframe\/([a-zA-Z0-9]+)/];for(const i of t){const s=c.match(i);if(s&&s[1])return s[1]}return null}async function L(c){const t=y(c);if(!t)throw new Error("Invalid Wistia video URL");try{return(await(await fetch(`https://fast.wistia.com/oembed?url=https://home.wistia.com/medias/${t}`)).json()).thumbnail_url}catch(i){throw console.error("Failed to fetch Wistia thumbnail:",i),new Error("Failed to fetch Wistia thumbnail")}}class v extends R{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",a.style.overflow="hidden",a.style.borderRadius="12px";const e=document.createElement("img");a.appendChild(e),e.style.width="100%",e.style.height="100%",e.style.objectFit="cover",e.src=((r=this.origin)==null?void 0:r.image.src)||"",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 o=document.createElement("iframe");o.frameBorder="0",o.allow="autoplay; fullscreen",o.allowFullscreen=!0,o.width="100%",o.height="100%",o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.backgroundColor="transparent",o.style.opacity="0",o.style.transition="opacity 1s ease",o.src=`https://fast.wistia.net/embed/iframe/${y(s)}?autoPlay=1`,a.appendChild(o),o.onload=()=>{o.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:"wistiaVideo",onInitializeImage:c=>{const t=c.elm.config.src;if(y(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)}}}f.VistaWistiaVideo=v,f.getWistiaThumbnail=L,f.parseWistiaVideoId=y,f.wistiaVideo=H,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
1
+ (function(f,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(f=typeof globalThis<"u"?globalThis:f||self,m(f.VistaView=f.VistaView||{}))})(this,(function(f){"use strict";var F=Object.defineProperty;var P=(f,m,w)=>m in f?F(f,m,{enumerable:!0,configurable:!0,writable:!0,value:w}):f[m]=w;var h=(f,m,w)=>P(f,typeof m!="symbol"?m+"":m,w);function m(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 o={width:e,height:n},u=d>r?{width:s,height:s/d}:{width:a*d,height:a};return u.width<=o.width&&u.height<=o.height?u:o}}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,l,g,p,x,S,b,W,_,C;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)),((l=n.transform)==null?void 0:l.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)),((p=n.translate)==null?void 0:p.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)&&(((S=n.transform)==null?void 0:S.x)===void 0||e._transform.x===n.transform.x)&&(((b=n.transform)==null?void 0:b.y)===void 0||e._transform.y===n.transform.y)&&(((W=n.transform)==null?void 0:W.scale)===void 0||e._transform.scale===n.transform.scale)&&(((_=n.translate)==null?void 0:_.x)===void 0||e._translate.x===n.translate.x)&&(((C=n.translate)==null?void 0:C.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 R{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?m(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,o,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 l=a.style;l.width=e.width+"px",l.height=e.height+"px",l.top="50%",l.left="50%",l.translate="-50% -50%",l.position="fixed",l.objectFit=this.origin.objectFit,l.borderRadius=this.origin.borderRadius;const g=Math.min(Math.max(e.left,-e.width),window.innerWidth+e.width)-window.innerWidth/2+e.width/2,p=Math.min(Math.max(e.top,-e.height),window.innerHeight+e.height)-window.innerHeight/2+e.height/2;l.setProperty("--vvw-init-radius",l.borderRadius),l.setProperty("--vvw-pulse-radius",`calc(1.3 * ${l.borderRadius})`),l.setProperty("--vvw-init-x",`${g}px`),l.setProperty("--vvw-init-y",`${p}px`),s&&(l.setProperty("--vvw-current-x",`${g}px`),l.setProperty("--vvw-current-y",`${p}px`))}if(!s){const{width:l,height:g}=this.thumbImage?m(this.thumbImage):{width:0,height:0};this.fittedSize={width:l,height:g}}const n=this.element;if(this.initW=Math.min(((o=this.fittedSize)==null?void 0:o.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:l,height:g}=this.getFullSizeDim();this.fullH=g,this.fullW=l,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 y(c){if(!c)return null;const t=[/wistia\.com\/medias\/([a-zA-Z0-9]+)/,/wistia\.net\/embed\/iframe\/([a-zA-Z0-9]+)/];for(const i of t){const s=c.match(i);if(s&&s[1])return s[1]}return null}async function L(c){const t=y(c);if(!t)throw new Error("Invalid Wistia video URL");try{return(await(await fetch(`https://fast.wistia.com/oembed?url=https://home.wistia.com/medias/${t}`)).json()).thumbnail_url}catch(i){throw console.error("Failed to fetch Wistia thumbnail:",i),new Error("Failed to fetch Wistia thumbnail")}}class v extends R{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",a.style.overflow="hidden",a.style.borderRadius="14px";const e=document.createElement("img");a.appendChild(e),e.style.width="100%",e.style.height="100%",e.style.objectFit="cover",e.src=((r=this.origin)==null?void 0:r.image.src)||"",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 o=document.createElement("iframe");o.frameBorder="0",o.allow="autoplay; fullscreen",o.allowFullscreen=!0,o.width="100%",o.height="100%",o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.backgroundColor="transparent",o.style.opacity="0",o.style.transition="opacity 1s ease",o.src=`https://fast.wistia.net/embed/iframe/${y(s)}?autoPlay=1`,a.appendChild(o),o.onload=()=>{o.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:"wistiaVideo",onInitializeImage:c=>{const t=c.elm.config.src;if(y(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)}}}f.VistaWistiaVideo=v,f.getWistiaThumbnail=L,f.parseWistiaVideoId=y,f.wistiaVideo=H,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vistaview",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
5
5
  "keywords": [
6
6
  "image",