vistaview 0.7.7 → 0.10.9

package/dist/vista-box-CQvGrjln.js

@@ -0,0 +1,318 @@
+var W = Object.defineProperty;
+var _ = (d, t, i) => t in d ? W(d, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : d[t] = i;
+var a = (d, t, i) => _(d, typeof t != "symbol" ? t + "" : t, i);
+class m {
+  static ease(t, i, n) {
+    const h = i - t, e = t + h * 0.2;
+    return Math.abs(h) < n ? i : e;
+  }
+  static play(t, i, n) {
+    if (n()) {
+      requestAnimationFrame(() => {
+        this.play(t, i, n);
+      });
+      return;
+    }
+    this.map.get(t) && (t.element.classList.contains("vvw--load-cancelled") || requestAnimationFrame(() => {
+      var o, c, g, u, w, y, p, x, v, S;
+      const h = this.map.get(t);
+      if (!h || !t.element || t.element.classList.contains("vvw--load-cancelled")) return;
+      const { current: e, target: s, log: l } = h;
+      let r = {};
+      s.width !== void 0 && (r.width = this.ease(e._width, s.width, 1)), s.height !== void 0 && (r.height = this.ease(e._height, s.height, 1)), ((o = s.transform) == null ? void 0 : o.x) !== void 0 && (r.transform = r.transform || {}, r.transform.x = this.ease(e._transform.x, s.transform.x, 1)), ((c = s.transform) == null ? void 0 : c.y) !== void 0 && (r.transform = r.transform || {}, r.transform.y = this.ease(e._transform.y, s.transform.y, 1)), ((g = s.transform) == null ? void 0 : g.scale) !== void 0 && (r.transform = r.transform || {}, r.transform.scale = this.ease(e._transform.scale, s.transform.scale, 5e-3)), ((u = s.translate) == null ? void 0 : u.x) !== void 0 && (r.translate = r.translate || {}, r.translate.x = this.ease(e._translate.x, s.translate.x, 1)), ((w = s.translate) == null ? void 0 : w.y) !== void 0 && (r.translate = r.translate || {}, r.translate.y = this.ease(e._translate.y, s.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 }), (s.width === void 0 || e._width === s.width) && (s.height === void 0 || e._height === s.height) && (((y = s.transform) == null ? void 0 : y.x) === void 0 || e._transform.x === s.transform.x) && (((p = s.transform) == null ? void 0 : p.y) === void 0 || e._transform.y === s.transform.y) && (((x = s.transform) == null ? void 0 : x.scale) === void 0 || e._transform.scale === s.transform.scale) && (((v = s.translate) == null ? void 0 : v.x) === void 0 || e._translate.x === s.translate.x) && (((S = s.translate) == null ? void 0 : S.y) === void 0 || e._translate.y === s.translate.y) ? (this.map.delete(t), i()) : (this.map.set(t, { current: e, target: s, log: l }), this.play(t, i, n));
+    }));
+  }
+  static stop(t) {
+    const i = this.map.get(t);
+    return this.map.delete(t), i;
+  }
+  static start({
+    vistaImage: t,
+    target: i,
+    onComplete: n,
+    shouldWait: h
+  }) {
+    this.stop(t), this.map.set(t, {
+      current: t.state,
+      target: i
+    }), this.play(t, n, h);
+  }
+}
+a(m, "map", /* @__PURE__ */ new Map());
+function b(d) {
+  const i = window.getComputedStyle(d).objectFit || "", { width: n, height: h } = d.getBoundingClientRect(), e = d.naturalWidth, s = d.naturalHeight;
+  if (!i)
+    return { width: n, height: h };
+  if (!e || !s)
+    return { width: n, height: h };
+  const l = e / s, r = n / h;
+  switch (i) {
+    case "fill":
+      return { width: n, height: h };
+    case "none":
+      return { width: e, height: s };
+    case "contain":
+      return l > r ? { width: n, height: n / l } : { width: h * l, height: h };
+    case "cover":
+      return l < r ? { width: n, height: n / l } : { width: h * l, height: h };
+    case "scale-down": {
+      const f = { width: e, height: s }, o = l > r ? { width: n, height: n / l } : { width: h * l, height: h };
+      return o.width <= f.width && o.height <= f.height ? o : f;
+    }
+  }
+  return { width: n, height: h };
+}
+class L {
+  constructor(t) {
+    a(this, "state");
+    a(this, "parsedSrcSet");
+    a(this, "isReady", !1);
+    a(this, "isThrowing", !1);
+    a(this, "thumb", null);
+    a(this, "pos");
+    a(this, "index");
+    a(this, "config");
+    a(this, "origin");
+    a(this, "initH", 0);
+    a(this, "initW", 0);
+    a(this, "fullH", 0);
+    a(this, "fullW", 0);
+    a(this, "maxW", 0);
+    a(this, "minW", 0);
+    a(this, "defaultWH", 200);
+    a(this, "isZoomedIn", !1);
+    a(this, "isCancelled", !1);
+    a(this, "isLoadedResolved", null);
+    a(this, "isLoadedRejected", null);
+    a(this, "isLoaded", new Promise((t, i) => {
+      this.isLoadedResolved = t, this.isLoadedRejected = i;
+    }));
+    a(this, "replacement", null);
+    a(this, "originalParent", null);
+    a(this, "originalNextSibling", null);
+    a(this, "originalStyle", "");
+    a(this, "thumbImage", null);
+    a(this, "fittedSize", null);
+    a(this, "maxZoomLevel");
+    a(this, "vistaView");
+    a(this, "transitionState", null);
+    a(this, "transitionShouldWait", () => !1);
+    a(this, "initPointerCenter", { x: 0, y: 0 });
+    a(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 i = this.pos === 0 ? (n = this.origin) == null ? void 0 : n.image : null;
+    if (this.originalParent = (i == null ? void 0 : i.parentElement) || null, this.originalNextSibling = (i == null ? void 0 : i.nextSibling) || null, i && this.originalParent) {
+      this.originalStyle = i.style.cssText, this.thumbImage = i;
+      const h = i.cloneNode(!0);
+      this.originalParent.insertBefore(h, i), this.replacement = h, this.thumb = document.createElement("div"), this.thumb.classList.add("vvw-img-lo");
+      const { width: e, height: s } = this.thumbImage ? b(this.thumbImage) : { width: 0, height: 0 };
+      this.fittedSize = { width: e, height: s }, 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, 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 i = () => {
+      this.isCancelled || m.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(), n = t / i;
+    let h = window.innerWidth, e = window.innerHeight;
+    return n > window.innerWidth / window.innerHeight ? e = h / n : h = e * n, { width: h, height: e };
+  }
+  setSizes(t = {}) {
+    var l, r, f;
+    const { stableSize: i = !0, initDimension: n } = t;
+    if (!this.origin) return;
+    const h = this.thumb;
+    let e = { width: this.defaultWH, height: this.defaultWH, top: 0, left: 0 };
+    if (h) {
+      e = (((l = this.origin) == null ? void 0 : l.anchor) || this.replacement).getBoundingClientRect();
+      const o = h.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 c = Math.min(Math.max(e.left, -e.width), window.innerWidth + e.width) - window.innerWidth / 2 + e.width / 2, g = 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", `${c}px`), o.setProperty("--vvw-init-y", `${g}px`), n && (o.setProperty("--vvw-current-x", `${c}px`), o.setProperty("--vvw-current-y", `${g}px`));
+    }
+    if (!n) {
+      const { width: o, height: c } = this.thumbImage ? b(this.thumbImage) : { width: 0, height: 0 };
+      this.fittedSize = { width: o, height: c };
+    }
+    const s = this.element;
+    if (this.initW = Math.min(((r = this.fittedSize) == null ? void 0 : r.width) ?? 0, e.width), this.initH = Math.min(((f = this.fittedSize) == null ? void 0 : f.height) ?? 0, e.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: o, height: c } = this.getFullSizeDim();
+        this.fullH = c, this.fullW = o, this.minW = this.fullW * 0.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 n = this.parsedSrcSet[this.parsedSrcSet.length - 1];
+    for (const h of this.parsedSrcSet)
+      if (h.width >= i) {
+        n = h;
+        break;
+      }
+    return n.src;
+  }
+  prepareClose() {
+    m.stop(this), this.setFinalTransform();
+  }
+  cancelPendingLoad() {
+    var t;
+    this.isCancelled = !0, (t = this.element) == null || t.classList.add("vvw--load-cancelled");
+  }
+  // Used by: VistaImageEvent
+  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
+      }
+    });
+  }
+  // Used by: VistaImageEvent
+  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 n = this.toObject();
+        this.vistaView.options.onContentChange && this.vistaView.options.onContentChange(n, this.vistaView), this.vistaView.state.extensions.forEach((h) => {
+          h.onContentChange && h.onContentChange(n, this.vistaView);
+        });
+      }
+      return {
+        close: !0,
+        cancel: () => {
+        }
+      };
+    }
+  }
+}
+export {
+  L as V,
+  m as a
+};

package/dist/vistaview.d.ts

@@ -1,9 +1,16 @@
 export type * from './lib/types';
 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 { setup } from './lib/defaults/setup';
+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';
-export { vistaViewDownload } from './lib/components';
 //# sourceMappingURL=vistaview.d.ts.map

package/dist/vistaview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vistaview.d.ts","sourceRoot":"","sources":["../src/vistaview.ts"],"names":[],"mappings":"AAAA,mBAAmB,aAAa,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"vistaview.d.ts","sourceRoot":"","sources":["../src/vistaview.ts"],"names":[],"mappings":"AAAA,mBAAmB,aAAa,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC"}