vistaview 0.7.8 → 0.10.9

package/dist/extensions/google-maps.js

@@ -0,0 +1,94 @@
+var u = Object.defineProperty;
+var g = (e, t, s) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var m = (e, t, s) => g(e, typeof t != "symbol" ? t + "" : t, s);
+import { V as y } from "../vista-box-CQvGrjln.js";
+function f(e) {
+  if (!e) return null;
+  try {
+    const t = new URL(e), s = e.match(/@(-?\d+\.?\d*),(-?\d+\.?\d*),?(\d+\.?\d*)?z?/);
+    if (s)
+      return {
+        lat: parseFloat(s[1]),
+        lng: parseFloat(s[2]),
+        zoom: s[3] ? parseFloat(s[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(e, t) {
+  const s = e.zoom || t.zoom || 15, o = t.width || 800, n = t.height || 600, a = t.mapType || "roadmap", l = e.query || `${e.lat},${e.lng}`, r = e.query ? "" : `&markers=color:red|${e.lat},${e.lng}`;
+  return `https://maps.googleapis.com/maps/api/staticmap?center=${encodeURIComponent(l)}&zoom=${s}&size=${o}x${n}&maptype=${a}${r}&key=${t.apiKey}`;
+}
+class d extends y {
+  constructor(s, o, n) {
+    var p;
+    super(s);
+    m(this, "element");
+    m(this, "mapsConfig");
+    m(this, "location");
+    this.mapsConfig = o, this.location = n;
+    const a = document.createElement("div");
+    a.style.position = "relative";
+    const l = document.createElement("img");
+    a.appendChild(l), l.src = ((p = this.origin) == null ? void 0 : p.image.src) || w(n, o), 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: h } = this.getFullSizeDim();
+    if (this.fullH = h, this.fullW = r, this.minW = this.fullW * 0.5, this.maxW = this.fullW, this.element.style.width = `${r}px`, this.element.style.height = `${h}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 c;
+      this.location.query ? c = `https://www.google.com/maps?q=${encodeURIComponent(this.location.query)}&output=embed` : c = `https://www.google.com/maps?q=${this.location.lat},${this.location.lng}&output=embed`, i.src = c, 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 s = Math.min(window.innerWidth, this.mapsConfig.width || 800);
+    return {
+      width: s,
+      height: s * 9 / 16
+    };
+  }
+  // Override to avoid propagating content change event
+  setFinalTransform() {
+    return super.setFinalTransform({ propagateEvent: !1 });
+  }
+}
+function z(e) {
+  return e.apiKey || console.error("Google Maps API key is required"), {
+    name: "googleMaps",
+    onInitializeImage: (t) => {
+      const s = t.elm.config.src, o = f(s);
+      if (o)
+        return new d(t, e, o);
+    },
+    onImageView: async (t, s) => {
+      const o = t.images.to[Math.floor(t.images.to.length / 2)];
+      o instanceof d && s.deactivateUi(["download", "zoomIn", "zoomOut"], o);
+    }
+  };
+}
+export {
+  d as VistaGoogleMaps,
+  w as getGoogleMapsStaticImage,
+  z as googleMaps,
+  f as parseGoogleMapsLocation
+};

package/dist/extensions/google-maps.umd.js

@@ -0,0 +1 @@
+(function(c,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(c=typeof globalThis<"u"?globalThis:c||self,m(c.VistaView=c.VistaView||{}))})(this,(function(c){"use strict";var R=Object.defineProperty;var P=(c,m,u)=>m in c?R(c,m,{enumerable:!0,configurable:!0,writable:!0,value:u}):c[m]=u;var r=(c,m,u)=>P(c,typeof m!="symbol"?m+"":m,u);function m(l){const e=window.getComputedStyle(l).objectFit||"",{width:n,height:a}=l.getBoundingClientRect(),i=l.naturalWidth,s=l.naturalHeight;if(!e)return{width:n,height:a};if(!i||!s)return{width:n,height:a};const d=i/s,o=n/a;switch(e){case"fill":return{width:n,height:a};case"none":return{width:i,height:s};case"contain":return d>o?{width:n,height:n/d}:{width:a*d,height:a};case"cover":return d<o?{width:n,height:n/d}:{width:a*d,height:a};case"scale-down":{const f={width:i,height:s},h=d>o?{width:n,height:n/d}:{width:a*d,height:a};return h.width<=f.width&&h.height<=f.height?h:f}}return{width:n,height:a}}class u{static ease(t,e,n){const a=e-t,i=t+a*.2;return Math.abs(a)<n?e:i}static play(t,e,n){if(n()){requestAnimationFrame(()=>{this.play(t,e,n)});return}this.map.get(t)&&(t.element.classList.contains("vvw--load-cancelled")||requestAnimationFrame(()=>{var h,g,w,S,x,b,W,C,_,L;const a=this.map.get(t);if(!a||!t.element||t.element.classList.contains("vvw--load-cancelled"))return;const{current:i,target:s,log:d}=a;let o={};s.width!==void 0&&(o.width=this.ease(i._width,s.width,1)),s.height!==void 0&&(o.height=this.ease(i._height,s.height,1)),((h=s.transform)==null?void 0:h.x)!==void 0&&(o.transform=o.transform||{},o.transform.x=this.ease(i._transform.x,s.transform.x,1)),((g=s.transform)==null?void 0:g.y)!==void 0&&(o.transform=o.transform||{},o.transform.y=this.ease(i._transform.y,s.transform.y,1)),((w=s.transform)==null?void 0:w.scale)!==void 0&&(o.transform=o.transform||{},o.transform.scale=this.ease(i._transform.scale,s.transform.scale,.005)),((S=s.translate)==null?void 0:S.x)!==void 0&&(o.translate=o.translate||{},o.translate.x=this.ease(i._translate.x,s.translate.x,1)),((x=s.translate)==null?void 0:x.y)!==void 0&&(o.translate=o.translate||{},o.translate.y=this.ease(i._translate.y,s.translate.y,1)),o.width!==void 0&&(i.width=o.width),o.height!==void 0&&(i.height=o.height),o.translate&&(i.translate={...i.translate,...o.translate}),o.transform&&(i.transform={...i.transform,...o.transform}),(s.width===void 0||i._width===s.width)&&(s.height===void 0||i._height===s.height)&&(((b=s.transform)==null?void 0:b.x)===void 0||i._transform.x===s.transform.x)&&(((W=s.transform)==null?void 0:W.y)===void 0||i._transform.y===s.transform.y)&&(((C=s.transform)==null?void 0:C.scale)===void 0||i._transform.scale===s.transform.scale)&&(((_=s.translate)==null?void 0:_.x)===void 0||i._translate.x===s.translate.x)&&(((L=s.translate)==null?void 0:L.y)===void 0||i._translate.y===s.translate.y)?(this.map.delete(t),e()):(this.map.set(t,{current:i,target:s,log:d}),this.play(t,e,n))}))}static stop(t){const e=this.map.get(t);return this.map.delete(t),e}static start({vistaImage:t,target:e,onComplete:n,shouldWait:a}){this.stop(t),this.map.set(t,{current:t.state,target:e}),this.play(t,n,a)}}r(u,"map",new Map);class M{constructor(t){r(this,"state");r(this,"parsedSrcSet");r(this,"isReady",!1);r(this,"isThrowing",!1);r(this,"thumb",null);r(this,"pos");r(this,"index");r(this,"config");r(this,"origin");r(this,"initH",0);r(this,"initW",0);r(this,"fullH",0);r(this,"fullW",0);r(this,"maxW",0);r(this,"minW",0);r(this,"defaultWH",200);r(this,"isZoomedIn",!1);r(this,"isCancelled",!1);r(this,"isLoadedResolved",null);r(this,"isLoadedRejected",null);r(this,"isLoaded",new Promise((t,e)=>{this.isLoadedResolved=t,this.isLoadedRejected=e}));r(this,"replacement",null);r(this,"originalParent",null);r(this,"originalNextSibling",null);r(this,"originalStyle","");r(this,"thumbImage",null);r(this,"fittedSize",null);r(this,"maxZoomLevel");r(this,"vistaView");r(this,"transitionState",null);r(this,"transitionShouldWait",()=>!1);r(this,"initPointerCenter",{x:0,y:0});r(this,"onScale");var n;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 e=this.pos===0?(n=this.origin)==null?void 0:n.image:null;if(this.originalParent=(e==null?void 0:e.parentElement)||null,this.originalNextSibling=(e==null?void 0:e.nextSibling)||null,e&&this.originalParent){this.originalStyle=e.style.cssText,this.thumbImage=e;const a=e.cloneNode(!0);this.originalParent.insertBefore(a,e),this.replacement=a,this.thumb=document.createElement("div"),this.thumb.classList.add("vvw-img-lo");const{width:i,height:s}=this.thumbImage?m(this.thumbImage):{width:0,height:0};this.fittedSize={width:i,height:s},this.thumb.appendChild(e),e.style.width="100%",e.style.height="100%",e.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(e){this._width=e,t.onWidthChange(e)},get height(){return this._height},set height(e){this._height=e,t.onHeightChange(e)},get transform(){return this._transform},set transform(e){this._transform=e,t.onTransformChange(e)},get translate(){return this._translate},set translate(e){this._translate=e,t.onTranslateChange(e)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(e){this._lessThanMinWidth=e,t.onLessThanMinWidthChange(e)}}}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 e=`translate3d(${t.x}px, ${t.y}px, 0px) scale3d(${t.scale}, ${t.scale}, 1)`;this.element.style.transform=e}onWidthChange(t){this.element.style.width=`${t}px`}onHeightChange(t){this.element.style.height=`${t}px`}onImageReady(){}animateZoom(t,e){}scaleMove(t,e,n){}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 e=()=>{this.isCancelled||u.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()):e():(t.classList.add("vvw--loaded"),setTimeout(()=>{this.isCancelled||e()},333))}getFullSizeDim(){const{width:t,height:e}=this.thumb.getBoundingClientRect(),n=t/e;let a=window.innerWidth,i=window.innerHeight;return n>window.innerWidth/window.innerHeight?i=a/n:a=i*n,{width:a,height:i}}setSizes(t={}){var d,o,f;const{stableSize:e=!0,initDimension:n}=t;if(!this.origin)return;const a=this.thumb;let i={width:this.defaultWH,height:this.defaultWH,top:0,left:0};if(a){i=(((d=this.origin)==null?void 0:d.anchor)||this.replacement).getBoundingClientRect();const h=a.style;h.width=i.width+"px",h.height=i.height+"px",h.top="50%",h.left="50%",h.translate="-50% -50%",h.position="fixed",h.objectFit=this.origin.objectFit,h.borderRadius=this.origin.borderRadius;const g=Math.min(Math.max(i.left,-i.width),window.innerWidth+i.width)-window.innerWidth/2+i.width/2,w=Math.min(Math.max(i.top,-i.height),window.innerHeight+i.height)-window.innerHeight/2+i.height/2;h.setProperty("--vvw-init-radius",h.borderRadius),h.setProperty("--vvw-pulse-radius",`calc(1.3 * ${h.borderRadius})`),h.setProperty("--vvw-init-x",`${g}px`),h.setProperty("--vvw-init-y",`${w}px`),n&&(h.setProperty("--vvw-current-x",`${g}px`),h.setProperty("--vvw-current-y",`${w}px`))}if(!n){const{width:h,height:g}=this.thumbImage?m(this.thumbImage):{width:0,height:0};this.fittedSize={width:h,height:g}}const s=this.element;if(this.initW=Math.min(((o=this.fittedSize)==null?void 0:o.width)??0,i.width),this.initH=Math.min(((f=this.fittedSize)==null?void 0:f.height)??0,i.height),s.style.setProperty("--vvw-init-w",this.initW+"px"),s.style.setProperty("--vvw-init-h",this.initH+"px"),s.style.setProperty("--vvw-init-radius",this.origin.borderRadius),s.style.objectFit="cover",!n){if(this.isReady&&!this.isCancelled){const{width:h,height:g}=this.getFullSizeDim();this.fullH=g,this.fullW=h,this.minW=this.fullW*.5}!this.isZoomedIn&&e&&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 e=t*(window.devicePixelRatio||1);let n=this.parsedSrcSet[this.parsedSrcSet.length-1];for(const a of this.parsedSrcSet)if(a.width>=e){n=a;break}return n.src}prepareClose(){u.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,e;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(),(e=this.element)==null||e.remove(),this.thumb=null,this.origin=void 0,this.config={src:"",alt:""}}cloneStyleFrom(t,e){t!=null&&t.element&&(e&&(this.transitionState=e||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:e=!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},e){const n=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(n,this.vistaView),this.vistaView.state.extensions.forEach(a=>{a.onContentChange&&a.onContentChange(n,this.vistaView)})}return{close:!0,cancel:()=>{}}}}}function y(l){if(!l)return null;try{const t=new URL(l),e=l.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 n=t.searchParams.get("q");if(n){const i=n.match(/(-?\d+\.?\d*),\s*(-?\d+\.?\d*)/);return i?{lat:parseFloat(i[1]),lng:parseFloat(i[2]),query:n}:{lat:0,lng:0,query:n}}const a=t.searchParams.get("ll");if(a){const[i,s]=a.split(",").map(parseFloat);if(!isNaN(i)&&!isNaN(s))return{lat:i,lng:s}}}catch(t){console.error("Failed to parse Google Maps URL:",t)}return null}function v(l,t){const e=l.zoom||t.zoom||15,n=t.width||800,a=t.height||600,i=t.mapType||"roadmap",s=l.query||`${l.lat},${l.lng}`,d=l.query?"":`&markers=color:red|${l.lat},${l.lng}`;return`https://maps.googleapis.com/maps/api/staticmap?center=${encodeURIComponent(s)}&zoom=${e}&size=${n}x${a}&maptype=${i}${d}&key=${t.apiKey}`}class p extends M{constructor(e,n,a){var f;super(e);r(this,"element");r(this,"mapsConfig");r(this,"location");this.mapsConfig=n,this.location=a;const i=document.createElement("div");i.style.position="relative";const s=document.createElement("img");i.appendChild(s),s.src=((f=this.origin)==null?void 0:f.image.src)||v(a,n),s.style.width="100%",s.style.height="100%",s.style.objectFit="cover",s.classList.add("vvw--pulsing"),this.element=i,this.element.classList.add("vvw-img-hi");const{width:d,height:o}=this.getFullSizeDim();if(this.fullH=o,this.fullW=d,this.minW=this.fullW*.5,this.maxW=this.fullW,this.element.style.width=`${d}px`,this.element.style.height=`${o}px`,this.setSizes({stableSize:!1,initDimension:!0}),this.pos===0){const h=document.createElement("iframe");h.frameBorder="0",h.allow="geolocation",h.allowFullscreen=!0,h.width="100%",h.height="100%",h.style.position="absolute",h.style.top="0",h.style.left="0",h.style.opacity="0",h.style.transition="opacity 1s ease";let g;this.location.query?g=`https://www.google.com/maps?q=${encodeURIComponent(this.location.query)}&output=embed`:g=`https://www.google.com/maps?q=${this.location.lat},${this.location.lng}&output=embed`,h.src=g,i.appendChild(h),h.onload=()=>{h.style.opacity="1",s.classList.remove("vvw--pulsing")}}this.isLoadedResolved(!0)}getFullSizeDim(){const e=Math.min(window.innerWidth,this.mapsConfig.width||800);return{width:e,height:e*9/16}}setFinalTransform(){return super.setFinalTransform({propagateEvent:!1})}}function F(l){return l.apiKey||console.error("Google Maps API key is required"),{name:"googleMaps",onInitializeImage:t=>{const e=t.elm.config.src,n=y(e);if(n)return new p(t,l,n)},onImageView:async(t,e)=>{const n=t.images.to[Math.floor(t.images.to.length/2)];n instanceof p&&e.deactivateUi(["download","zoomIn","zoomOut"],n)}}}c.VistaGoogleMaps=p,c.getGoogleMapsStaticImage=v,c.googleMaps=F,c.parseGoogleMapsLocation=y,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package/dist/extensions/image-story.d.ts

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