vistaview 0.2.0 → 0.3.2

package/dist/vistaview.js

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