vistaview 0.5.3 → 0.6.0

package/dist/vistaview.js

@@ -1,26 +1,109 @@
-var V = Object.defineProperty;
-var N = (s, t, i) => t in s ? V(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
-var p = (s, t, i) => N(s, typeof t != "symbol" ? t + "" : t, i);
-function R(s) {
-  const t = getComputedStyle(s), i = s.getBoundingClientRect();
+var T = Object.defineProperty;
+var z = (s, t, e) => t in s ? T(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var l = (s, t, e) => z(s, typeof t != "symbol" ? t + "" : t, e);
+function $(s) {
+  return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
+}
+function F(s) {
+  const e = window.getComputedStyle(s).objectFit || "", { width: i, height: n } = s.getBoundingClientRect(), o = s.naturalWidth, r = s.naturalHeight;
+  if (!e)
+    return { width: i, height: n };
+  if (!o || !r)
+    return { width: i, height: n };
+  const a = o / r, h = i / n;
+  switch (e) {
+    case "fill":
+      return { width: i, height: n };
+    case "none":
+      return { width: o, height: r };
+    case "contain":
+      return a > h ? { width: i, height: i / a } : { width: n * a, height: n };
+    case "cover":
+      return a < h ? { width: i, height: i / a } : { width: n * a, height: n };
+    case "scale-down": {
+      const c = { width: o, height: r }, m = a > h ? { width: i, height: i / a } : { width: n * a, height: n };
+      return m.width <= c.width && m.height <= c.height ? m : c;
+    }
+  }
+  return { width: i, height: n };
+}
+function S(s) {
+  const t = getComputedStyle(s), e = s.getBoundingClientRect();
   return {
     objectFit: t.objectFit,
     borderRadius: t.borderRadius,
     objectPosition: t.objectPosition,
     overflow: t.overflow,
-    top: i.top,
-    left: i.left,
-    width: i.width,
-    height: i.height,
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height,
     naturalWidth: s.naturalWidth,
     naturalHeight: s.naturalHeight
   };
 }
-let $ = null;
-function U() {
-  return $ || (window.trustedTypes || (window.trustedTypes = {
+function A(s) {
+  const t = s.imageElm ? S(s.imageElm) : null, e = s.anchorElm ? S(s.anchorElm) : null, i = $(t == null ? void 0 : t.borderRadius), n = e && $(e == null ? void 0 : e.borderRadius), o = (n ? e == null ? void 0 : e.borderRadius : i ? t == null ? void 0 : t.borderRadius : "") || "";
+  return {
+    fit: (t == null ? void 0 : t.objectFit) || (e == null ? void 0 : e.objectFit) || "",
+    pos: (t == null ? void 0 : t.objectPosition) || "",
+    br: o,
+    overflow: n ? e.overflow : i ? t.overflow : "",
+    nw: (t == null ? void 0 : t.naturalWidth) || 0,
+    nh: (t == null ? void 0 : t.naturalHeight) || 0,
+    w: (e == null ? void 0 : e.width) || (t == null ? void 0 : t.width) || 0,
+    h: (e == null ? void 0 : e.height) || (t == null ? void 0 : t.height) || 0,
+    top: (e == null ? void 0 : e.top) || (t == null ? void 0 : t.top) || 0,
+    left: (e == null ? void 0 : e.left) || (t == null ? void 0 : t.left) || 0
+  };
+}
+function M(s, t, e, i = !1) {
+  const {
+    fit: n,
+    w: o,
+    h: r,
+    // this ones makes things hard. not used.
+    // pos,
+    // overflow,
+    nw: a,
+    nh: h,
+    br: c,
+    top: m,
+    left: w
+  } = A(s), L = Math.min(Math.max(w, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, p = Math.min(Math.max(m, -r), window.innerHeight + r) - window.innerHeight / 2 + r / 2, d = e.style;
+  d.width = `${o}px`, d.height = `${r}px`, d.objectFit = n, e.width = a, e.height = h, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${L}px`), d.setProperty("--vvw-init-y", `${p}px`), i && (d.setProperty("--vvw-current-x", `${L}px`), d.setProperty("--vvw-current-y", `${p}px`));
+  const v = F(s.imageElm), g = Math.min(o, v.width), f = Math.min(r, v.height), u = t.style;
+  u.setProperty("--vvw-init-radius", `${c}`), u.setProperty("--vvw-init-w", `${g}px`), u.setProperty("--vvw-init-h", `${f}px`), i && (u.setProperty("--vvw-current-radius", `${c}`), u.setProperty("--vvw-current-w", `${g}px`), u.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = g.toString(), t.dataset.vvwHeight = f.toString());
+}
+function D(s) {
+  const t = window.innerWidth, e = window.innerHeight, i = s.naturalWidth, n = s.naturalHeight;
+  if (!i || !n)
+    throw new Error("Image natural dimensions are zero");
+  if (i < t && n < e)
+    return {
+      width: i,
+      height: n
+    };
+  const o = i / n, r = t / e;
+  let a, h;
+  return o > r ? (a = t, h = t / o) : (h = e, a = e * o), {
+    width: a,
+    height: h
+  };
+}
+function P(s, t, e) {
+  return Math.min(Math.max(s, t), e);
+}
+function C(s, t = 2) {
+  const e = Math.pow(10, t);
+  return Math.round(s * e) / e;
+}
+const q = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', k = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', R = '<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>', O = '<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>', Z = '<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>';
+let I = null;
+function X() {
+  return I || (window.trustedTypes || (window.trustedTypes = {
     createPolicy: (s, t) => t
-  }), $ = window.trustedTypes.createPolicy("vistaView-policy", {
+  }), I = window.trustedTypes.createPolicy("vistaView-policy", {
     createHTML: (s) => s,
     // HTML is generated by us, not user input
     createScript: () => {
@@ -29,228 +112,73 @@ function U() {
     createScriptURL: () => {
       throw new Error("Not implemented");
     }
-  }), $);
-}
-function O(s) {
-  const i = U().createHTML(s), n = document.createElement("template");
-  n.innerHTML = i;
-  const e = n.content;
-  return n.remove(), e;
-}
-function H(s) {
-  return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
-}
-function K(s) {
-  const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), r = s.naturalWidth, l = s.naturalHeight;
-  if (!i)
-    return { width: n, height: e };
-  if (!r || !l)
-    return { width: n, height: e };
-  const o = r / l, c = n / e;
-  switch (i) {
-    case "fill":
-      return { width: n, height: e };
-    case "none":
-      return { width: r, height: l };
-    case "contain":
-      return o > c ? { width: n, height: n / o } : { width: e * o, height: e };
-    case "cover":
-      return o < c ? { width: n, height: n / o } : { width: e * o, height: e };
-    case "scale-down": {
-      const a = { width: r, height: l }, d = o > c ? { width: n, height: n / o } : { width: e * o, height: e };
-      return d.width <= a.width && d.height <= a.height ? d : a;
-    }
-  }
-  return { width: n, height: e };
-}
-function q(s) {
-  const t = window.innerWidth, i = window.innerHeight, n = s.naturalWidth, e = s.naturalHeight;
-  if (!n || !e)
-    throw console.error("Error", s), new Error("Image natural dimensions are zero");
-  if (n < t && e < i)
-    return {
-      width: n,
-      height: e
-    };
-  const r = n / e, l = t / i;
-  let o, c;
-  return r > l ? (o = t, c = t / r) : (c = i, o = i * r), {
-    width: o,
-    height: c
-  };
+  }), I);
 }
-function j(s, t) {
-  const i = window.innerHeight, n = window.innerWidth, e = s, r = t, l = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (r - i) / 2) + i / 2, c = -l, a = -o;
-  return {
-    maxDiffX: l,
-    minDiffY: a,
-    maxDiffY: o,
-    minDiffX: c
-  };
+function W(s) {
+  const e = X().createHTML(s), i = document.createElement("template");
+  i.innerHTML = e;
+  const n = i.content;
+  return i.remove(), n;
 }
-const G = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', J = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', Q = '<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>', tt = '<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>', et = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', it = '<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 nt() {
+function B() {
   return {
     name: "download",
-    icon: it,
+    icon: Z,
     onClick: async (s) => {
-      var r;
-      const t = await fetch(s.src), i = await t.blob(), n = t.url, e = document.createElement("a");
-      e.href = URL.createObjectURL(i), e.download = ((r = n.split("/").pop()) == null ? void 0 : r.split("?")[0].split("#")[0]) || "download", document.body.appendChild(e), e.click(), document.body.removeChild(e);
+      var o;
+      const t = await fetch(s.src), e = await t.blob(), i = t.url, n = document.createElement("a");
+      n.href = URL.createObjectURL(e), n.download = ((o = i.split("/").pop()) == null ? void 0 : o.split("?")[0].split("#")[0]) || "download", document.body.appendChild(n), n.click(), document.body.removeChild(n);
     }
   };
 }
-function st(s) {
+function N(s) {
   if (typeof s == "string")
     switch (s) {
       case "zoomIn":
-        return `<button class="vistaview-zoom-in-btn">${Q}</button>`;
+        return `<button class="vvw-zoom-in vvw-ui">${R}</button>`;
       case "zoomOut":
-        return `<button disabled class="vistaview-zoom-out-btn">${tt}</button>`;
+        return `<button disabled class="vvw-zoom-out vvw-ui">${O}</button>`;
       case "close":
-        return `<button class="vistaview-close-btn">${et}</button>`;
+        return `<button class="vvw-close vvw-ui">${Y}</button>`;
       case "indexDisplay":
-        return '<div class="vistaview-index-display"></div>';
+        return '<div class="vvw-index vvw-ui"></div>';
       case "description":
-        return '<div class="vistaview-description"></div>';
+        return '<div class="vvw-desc vvw-ui"></div>';
       default:
         return "";
     }
-  return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
+  return `<button data-vvw-control="${s.name}">${s.icon}</button>`;
 }
-function k(s, t) {
-  var d, h;
-  const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((d = s.imageElm) == null ? void 0 : d.naturalWidth) || "", r = ((h = s.imageElm) == null ? void 0 : h.naturalHeight) || "", l = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", c = document.createElement("div");
-  c.className = "vistaview-item", c.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, c.dataset.vistaviewIndex = s.index.toString();
-  const a = O(`<img class="vistaview-image-lowres"
-    style="${n ? `object-fit:${n};` : ""}${l ? `width:${l};` : ""}${o ? `height:${o};` : ""}"
-    src="${s.thumb || s.src}" 
-    alt="${s.alt || ""}"
-    ${e ? `width="${e}"` : ""}
-    ${r ? `height="${r}"` : ""}
-  />
-  <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
-  return c.appendChild(a), c;
+function j(s, t) {
+  const e = document.createElement("div");
+  e.className = "vvw-item", e.dataset.vvwPos = `${t !== void 0 ? t : ""}`, e.dataset.vvwIdx = s.index.toString(), e.appendChild(
+    W(
+      `<p class="vvw-img-err">Error loading image</p>
+      <img class="vvw-img-lo" src="${s.thumb || s.src}" alt="${s.alt || ""}" />
+      <img class="vvw-img-hi" src="${s.src}" alt="${s.alt || ""}" />`
+    )
+  );
+  const i = e.querySelector("img.vvw-img-lo"), n = e.querySelector("img.vvw-img-hi");
+  return M(s, n, i, t === 0), e;
 }
-function ot({
-  controls: s,
-  isReducedMotion: t
+function U({
+  controls: s
 }) {
-  const i = (e) => e ? e.map(st).join("") : "";
-  return O(
-    `<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>${i(s == null ? void 0 : s.topLeft)}</div><div>${i(s == null ? void 0 : s.topCenter)}</div><div>${i(s == null ? void 0 : s.topRight)}</div></div>
-    <div class="vistaview-bottom-bar vistaview-ui"><div>${i(s == null ? void 0 : s.bottomLeft)}</div><div>${i(s == null ? void 0 : s.bottomCenter)}</div><div>${i(s == null ? void 0 : s.bottomRight)}</div></div>
-    <div class="vistaview-prev-btn vistaview-ui"><button>${G}</button></div>
-    <div class="vistaview-next-btn vistaview-ui"><button>${J}</button></div>
+  const t = (i) => i ? i.map(N).join("") : "";
+  return W(
+    `<div class="vvw-root" id="vvw-root">
+    <div class="vvw-container">
+      <div class="vvw-bg"></div>
+      <div class="vvw-image-container"></div>
+      <div class="vvw-top-bar vvw-ui"><div>${t(s == null ? void 0 : s.topLeft)}</div><div>${t(s == null ? void 0 : s.topCenter)}</div><div>${t(s == null ? void 0 : s.topRight)}</div></div>
+      <div class="vvw-bottom-bar vvw-ui"><div>${t(s == null ? void 0 : s.bottomLeft)}</div><div>${t(s == null ? void 0 : s.bottomCenter)}</div><div>${t(s == null ? void 0 : s.bottomRight)}</div></div>
+      <div class="vvw-prev vvw-ui"><button>${q}</button></div>
+      <div class="vvw-next vvw-ui"><button>${k}</button></div>
     </div>
     </div>`
   );
 }
-let A = null, M = null, Z = null, T = null;
-function rt(s) {
-  F(s);
-  const t = s.imageContainerElm, i = s.elements.length;
-  if (!t) return;
-  let n = 0, e = 0, r = 0, l = 0, o = null, c = 0, a = !1;
-  A = (d) => {
-    d.preventDefault(), d.stopPropagation(), s.isZoomed === !1 && (a = !0, n = d.pageX, e = d.pageY, r = d.pageX, l = d.pageY, c = Date.now(), o = null, t.setPointerCapture(d.pointerId));
-  }, M = (d) => {
-    if (d.preventDefault(), d.stopPropagation(), s.isZoomed !== !1 || !a) return;
-    const h = d.pageX - n, u = d.pageY - e;
-    r = d.pageX, l = d.pageY, Math.abs(h) >= Math.abs(u) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${h}px`), o = !0) : Math.abs(u) > Math.abs(h) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${u}px`), o = !1);
-  }, T = (d) => {
-    if (d.preventDefault(), d.stopPropagation(), t.releasePointerCapture(d.pointerId), s.isZoomed !== !1 || !a) return;
-    a = !1, o = null;
-    const h = Array.from(t.querySelectorAll(".vistaview-item"));
-    t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((u) => {
-      u.style.transition = "", u.style.translate = "";
-    });
-  }, Z = (d) => {
-    if (d.preventDefault(), d.stopPropagation(), t.releasePointerCapture(d.pointerId), s.isZoomed !== !1 || !a) return;
-    a = !1;
-    const h = Array.from(t.querySelectorAll(".vistaview-item")), u = r - n, w = l - e, f = Date.now() - c, v = u / f, y = w / f, b = s.options.touchSpeedThreshold || 0.5, L = h.find(
-      (g) => g.dataset.vistaviewPos === "0"
-    ), C = Number(L.dataset.vistaviewIndex);
-    function E() {
-      h[0].removeEventListener("transitionend", E), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((g) => {
-        g.style.transition = "", g.style.translate = "";
-      });
-    }
-    function m(g = "0%", x = "0%") {
-      h.forEach((I) => {
-        I.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, I.style.translate = `${g} ${x}`;
-      });
-    }
-    if (v < -b || v > b) {
-      let g = function() {
-        h[0].removeEventListener("transitionend", g), setTimeout(() => {
-          const x = s.isReducedMotion, I = s.options.detectReducedMotion;
-          s.isReducedMotion = !0, s.options.detectReducedMotion = !0, E(), s.view(
-            v < -b ? (C + 1) % i : (C - 1 + i) % i,
-            {
-              next: v < -b,
-              prev: v > b
-            }
-          ), s.isReducedMotion = x, s.options.detectReducedMotion = I;
-        }, 100);
-      };
-      m(v < -b ? "-100%" : "100%"), h[0].addEventListener("transitionend", g);
-    } else y < -b || y > b ? (s.close(), m("0%", "0%")) : (h[0].addEventListener("transitionend", E), m("0%"), v === 0 && y === 0 && s.zoomIn());
-  }, t.addEventListener("pointermove", M), t.addEventListener("pointerup", Z), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", T);
-}
-function F(s) {
-  const t = s.imageContainerElm;
-  t && (M && t.removeEventListener("pointermove", M), Z && t.removeEventListener("pointerup", Z), A && t.removeEventListener("pointerdown", A), T && t.removeEventListener("pointercancel", T));
-}
-const at = (s) => {
-  rt(s);
-}, lt = ({
-  htmlElements: { to: s },
-  index: { to: t },
-  vistaView: i
-}) => {
-  i.elements instanceof NodeList && t !== null && (i.elements.forEach((n) => n.style.opacity = "1"), i.elements[t].style.opacity = "0"), s && s.forEach((n) => {
-    const e = Number(n.dataset.vistaviewPos);
-    e !== 0 ? (n.style.zIndex = "1", n.style.left = 100 * e + "%") : n.style.zIndex = "2";
-  });
-}, dt = async ({
-  htmlElements: { from: s },
-  via: { next: t, prev: i },
-  vistaView: n
-  // index: { from: fromIndex, to: toIndex },
-}, e) => {
-  if (n.options.detectReducedMotion && n.isReducedMotion)
-    return;
-  const r = s.filter((l) => l.dataset.vistaviewPos === "0" || (t ? l.dataset.vistaviewPos === "1" : l.dataset.vistaviewPos === "-1"));
-  await new Promise((l, o) => {
-    let c = 0, a = !1;
-    if (e.aborted) {
-      o(new z("Transition aborted"));
-      return;
-    }
-    const d = (h) => {
-      if (a) return o(new z("Transition aborted"));
-      if (e.aborted)
-        return a || (a = !0), o(new z("Transition aborted"));
-      h.currentTarget.removeEventListener("transitionend", d), c++, c >= r.length && l(0);
-    };
-    r.forEach((h) => {
-      h.style.transition = `translate ${n.options.animationDurationBase * 0.5}ms ease-out`, h.style.translate = t ? "-100%" : i ? "100%" : "0%", h.addEventListener("transitionend", d);
-    });
-  });
-}, ct = (s) => {
-  s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), F(s);
-};
-class z extends Error {
-  constructor(t) {
-    super(t), this.name = "VistaViewTransitionAbortedError";
-  }
-}
-const W = {
-  detectReducedMotion: !0,
+const H = {
   // debug, don't remove
   // animationDurationBase: 1000,
   animationDurationBase: 333,
@@ -260,340 +188,354 @@ const W = {
   preloads: 1,
   keyboardListeners: !0,
   arrowOnSmallScreens: !1,
+  rapidLimit: 222,
   controls: {
     topLeft: ["indexDisplay"],
-    topRight: ["zoomIn", "zoomOut", nt(), "close"],
-    bottomCenter: ["description"]
+    topRight: ["zoomIn", "zoomOut", B(), "close"],
+    bottomLeft: ["description"]
   }
-}, S = {
-  somethingOpened: null
 };
-class ht {
-  constructor(t, i) {
-    p(this, "options");
-    p(this, "elements");
-    p(this, "isReducedMotion");
-    p(this, "currentIndex", {
-      _value: null,
-      _vistaView: null,
-      _via: { next: !1, prev: !1 },
-      set value(t) {
-        var n, e, r;
-        const i = this._value;
-        this._value = t;
-        for (const l in (n = this._vistaView) == null ? void 0 : n.transitionAbortControllers)
-          (e = this._vistaView) == null || e.transitionAbortControllers[l].abort();
-        (r = this._vistaView) == null || r.swap(i, this._value);
-      },
-      get value() {
-        return this._value;
-      },
-      get via() {
-        return this._via;
+function K(s) {
+}
+function _(s) {
+  const t = s.options.preloads;
+  s.imageContainer.style.width = `${(t * 2 + 1) * 100}vw`, s.imageContainer.style.left = `-${t * 100}vw`, s.imageContainer.style.display = "flex", G(s);
+}
+function G(s) {
+  let t = { x: 0, y: 0 }, e = { x: 0, y: 0 }, i = null;
+  s.registerPointerListener((n) => {
+    if (!n.hasInternalExecution && !(n.pointers.length > 1)) {
+      if (n.event === "down" && (t = { x: n.pointer.x, y: n.pointer.y }, e = { x: n.pointer.x, y: n.pointer.y }), n.event === "move") {
+        e = { x: n.pointer.x, y: n.pointer.y };
+        const o = e.x - t.x, r = e.y - t.y;
+        if (!i && Math.abs(r) > Math.abs(o) || i === "y") {
+          const a = r / window.innerHeight * 100;
+          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${a}vh)`, i = "y";
+        } else if (!i && Math.abs(o) > Math.abs(r) || i === "x") {
+          const a = o / window.innerWidth * 100;
+          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${a}vw)`, i = "x";
+        }
+      }
+      if (n.event === "up" || n.event === "cancel") {
+        let o = function(r) {
+          var a;
+          (a = s.imageContainer) == null || a.addEventListener("transitionend", function h() {
+            var c;
+            (c = s.imageContainer) == null || c.removeEventListener("transitionend", h), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
+          }), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = r;
+        };
+        if (i === "y") {
+          const r = e.y - t.y, a = n.pointer.movementY, h = 8;
+          s.imageContainer.style.transition = "", r > 0 && Math.abs(a) > h || r < 0 && Math.abs(a) > h ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : o("translateY(0vh)");
+        }
+        if (i === "x") {
+          const r = e.x - t.x, a = n.pointer.movementX, h = 8;
+          s.imageContainer.style.transition = "", r > 0 && Math.abs(a) > h ? s.prev() : r < 0 && Math.abs(a) > h ? s.next() : o("translateX(0vw)");
+        }
+        i = null;
+      }
+    }
+  });
+}
+function J(s) {
+}
+async function Q({
+  vistaView: { isReducedMotion: s },
+  htmlElements: { to: t },
+  index: { from: e, to: i },
+  vistaView: { elements: n, imageContainer: o, options: r }
+}, a) {
+  if (!t || a.aborted || s || !(Math.abs(i - e) === 1 || e === 0 && i === n.length - 1 || e === n.length - 1 && i === 0))
+    return;
+  const c = Math.round(r.animationDurationBase * 1.5 * 100) / 100;
+  return new Promise((m) => {
+    o.addEventListener(
+      "transitionend",
+      () => {
+        m(() => {
+          o.style.transition = "", o.style.transform = "";
+        });
       },
-      set via(t) {
-        this._via = t;
+      { once: !0 }
+    );
+    const w = i === e + 1 || e === n.length - 1 && i === 0 ? "translateX(-100vw)" : "translateX(100vw)";
+    o.style.transition = `transform ${c}ms ease`, o.style.transform = w;
+  });
+}
+class V {
+  constructor({ elm: t, listeners: e }) {
+    l(this, "pointers", []);
+    l(this, "elm");
+    l(this, "listeners", []);
+    l(this, "lastPointerDownId", null);
+    l(this, "removeLastPointer", () => {
+      if (this.pointers.length && this.lastPointerDownId !== null) {
+        const t = this.pointers.findIndex((e) => e.id === this.lastPointerDownId);
+        t !== -1 && this.pointers.splice(t, 1);
       }
     });
-    p(this, "rootElm", null);
-    p(this, "imageContainerElm", null);
-    p(this, "customControls", {});
-    p(this, "currentImages", null);
-    p(this, "currentItems", null);
-    p(this, "isZoomed", !1);
-    p(this, "onClickElements", (t) => {
+    l(this, "onPointerDown", (t) => {
+      if (!this.listeners.length || t.button !== 0) return;
+      t.preventDefault(), this.lastPointerDownId = t.pointerId, window.addEventListener("contextmenu", this.removeLastPointer, { once: !0 }), window.addEventListener("auxclick", this.removeLastPointer, { once: !0 });
+      let e = {
+        x: t.clientX,
+        y: t.clientY,
+        movementX: 0,
+        movementY: 0,
+        id: t.pointerId
+      };
+      this.pointers.push(e), this.listeners.forEach(
+        (i) => i({
+          event: "down",
+          pointer: e,
+          pointers: this.pointers,
+          lastPointerLen: this.pointers.length - 1
+        })
+      );
+    });
+    l(this, "onPointerMove", (t) => {
+      if (!this.listeners.length) return;
       t.preventDefault();
-      const i = t.currentTarget;
-      i.dataset.vistaviewIndex && this.open(parseInt(i.dataset.vistaviewIndex));
+      const e = this.pointers.find((i) => i.id === t.pointerId);
+      e && (e.movementX = t.movementX, e.movementY = t.movementY, e.x = t.clientX, e.y = t.clientY, this.listeners.forEach(
+        (i) => i({
+          event: "move",
+          pointer: e,
+          pointers: this.pointers,
+          lastPointerLen: this.pointers.length - 1
+        })
+      ));
     });
-    p(this, "defaultOnClickHandler", (t) => t.preventDefault());
-    p(this, "onResizeHandler", null);
-    p(this, "onKeyDown", null);
-    p(this, "userSetup", lt);
-    p(this, "userTransition", dt);
-    p(this, "userClose", ct);
-    p(this, "userInit", at);
-    p(this, "onZoomedPointerDown", null);
-    p(this, "onZoomedPointerMove", null);
-    p(this, "onZoomedPointerUp", null);
-    p(this, "transitionAbortControllers", {});
-    // weird on iphones
-    // private loadImageWaiting = (img: HTMLImageElement): Promise<void> => {
-    //   return new Promise((resolve) => {
-    //     const observer = new MutationObserver((mutations) => {
-    //       mutations.forEach((mutation) => {
-    //         if (
-    //           mutation.type === 'attributes' &&
-    //           mutation.attributeName === 'class' &&
-    //           (mutation.target as HTMLElement).classList.contains('vistaview-image-settled')
-    //         ) {
-    //           console.log('vistaview-image-settled detected')
-    //           resolve()
-    //         }
-    //       });
-    //       // Start observing
-    //       observer.observe(img, {
-    //         attributes: true,
-    //         attributeOldValue: true,
-    //         attributeFilter: ['class']
-    //       });
-    //     });
-    //   });
-    // };
-    p(this, "loadImageTimeout", null);
-    this.elements = t, this.currentIndex._vistaView = this, this.options = {
-      ...W,
-      ...i || {},
-      controls: {
-        ...W.controls,
-        ...(i == null ? void 0 : i.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, e) => {
-      n.dataset.vistaviewIndex = e.toString(), n.addEventListener("click", this.defaultOnClickHandler), n.addEventListener("pointerup", this.onClickElements);
+    l(this, "onPointerUp", (t) => {
+      if (!this.listeners.length || t.button !== 0 || (window.removeEventListener("contextmenu", this.removeLastPointer), window.removeEventListener("auxclick", this.removeLastPointer), t.target instanceof Node && !this.elm.contains(t.target) && t.target !== document.querySelector("html") && t.target !== document))
+        return;
+      t.preventDefault();
+      const e = this.pointers.findIndex((o) => o.id === t.pointerId);
+      if (e === -1) return;
+      const i = this.pointers[e];
+      i.x = t.clientX, i.y = t.clientY;
+      const n = this.pointers.length;
+      this.pointers.splice(e, 1), this.listeners.forEach(
+        (o) => o({
+          event: "up",
+          pointer: i,
+          pointers: this.pointers,
+          lastPointerLen: n
+        })
+      );
+    });
+    l(this, "onPointerCancel", (t) => {
+      if (!this.listeners.length || t.target instanceof Node && !this.elm.contains(t.target) && t.target !== document.querySelector("html") && t.target !== document)
+        return;
+      t.preventDefault();
+      const e = this.pointers.findIndex((o) => o.id === t.pointerId);
+      if (e === -1) return;
+      const i = this.pointers[e];
+      i.x = t.clientX, i.y = t.clientY;
+      const n = this.pointers.length;
+      this.pointers.splice(e, 1), this.listeners.forEach(
+        (o) => o({
+          event: "cancel",
+          pointer: i,
+          pointers: this.pointers,
+          lastPointerLen: n
+        })
+      );
     });
+    this.elm = t ?? document, e && (this.listeners = e), this.startListeners();
   }
-  setFullSizeImageDim(t) {
-    var r, l;
-    const i = t.getBoundingClientRect(), { width: n, height: e } = q(t);
-    if (n === i.width && e === i.height)
-      (l = (r = t.parentElement) == null ? void 0 : r.querySelector(".vistaview-image-lowres")) == null || l.classList.add("vistaview-image--hidden"), t.classList.add("vistaview-image-settled");
-    else {
-      let o = 0;
-      const c = () => {
-        var a, d;
-        o++, !(o < 3) && (t.removeEventListener("transitionend", c), (d = (a = t.parentElement) == null ? void 0 : a.querySelector(".vistaview-image-lowres")) == null || d.classList.add("vistaview-image--hidden"), t.classList.add("vistaview-image-settled"));
-      };
-      requestAnimationFrame(() => {
-        t.addEventListener("transitionend", c), t.style.width = `${n}px`, t.style.height = `${e}px`;
-      });
-    }
+  startListeners() {
+    this.elm.addEventListener("pointerdown", this.onPointerDown), this.elm.addEventListener("pointermove", this.onPointerMove), document.addEventListener("pointerup", this.onPointerUp), document.addEventListener("pointercancel", this.onPointerCancel);
   }
-  async swap(t, i) {
-    var d, h;
-    if (!S.somethingOpened || t === i || t === null) return;
-    if (!this.imageContainerElm)
-      throw new Error("VistaView: imageContainerElm is null in swap()");
-    this.setIndexDisplay(), this.clearZoom();
-    const { images: n, positions: e } = this.getCurrentIndexes(i), r = this.getImages(n), l = r.map((u, w) => k(u, e[w])), o = {
-      htmlElements: { from: this.currentItems, to: l },
-      images: { from: this.currentImages, to: r },
-      index: { from: t, to: i },
-      via: this.currentIndex.via,
-      vistaView: this
-    };
-    this.userSetup(o);
-    const c = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-    this.transitionAbortControllers[c] = new AbortController();
-    try {
-      await this.userTransition(o, this.transitionAbortControllers[c].signal);
-    } catch (u) {
-      u instanceof z || console.warn(u);
-    }
-    const a = l.find((u) => u.dataset.vistaviewPos === "0");
-    if (a) {
-      const u = a.dataset.vistaviewIndex, w = this.currentItems.find((v) => v.dataset.vistaviewIndex === u), f = w == null ? void 0 : w.querySelector(".vistaview-image-highres");
-      if (f) {
-        const v = a.querySelector(
-          ".vistaview-image-highres"
-        );
-        if (v.setAttribute("class", f.getAttribute("class") || ""), v.setAttribute("style", f.getAttribute("style") || ""), v.classList.remove("vistaview-image--zooming"), f.classList.contains("vistaview-image-loaded") && !f.classList.contains("vistaview-image-settled")) {
-          const y = f.getBoundingClientRect();
-          v.style.width = `${y.width}px`, v.style.height = `${y.height}px`;
-        }
-      }
-    }
-    delete this.transitionAbortControllers[c], this.imageContainerElm.innerHTML = "", l.forEach((u) => {
-      var y;
-      const w = u.querySelector(".vistaview-image-highres"), f = !!w.classList.contains("vistaview-image-loaded"), v = !!w.classList.contains("vistaview-image-settled");
-      this.imageContainerElm.appendChild(u), f && !v ? this.setFullSizeImageDim(w) : f && v && ((y = u == null ? void 0 : u.querySelector(".vistaview-image-lowres")) == null || y.classList.add("vistaview-image--hidden"));
-    }), this.setInitialDimPos(), this.currentImages = r, this.currentItems = l, this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (h = (d = this.options).onImageView) == null || h.call(d, o), this.loadImageTimeout && clearTimeout(this.loadImageTimeout), this.loadImageTimeout = setTimeout(() => {
-      this.loadImages();
-    }, 333);
-  }
-  //
-  setZoomed(t) {
-    var n, e, r, l, o, c;
-    if (this.isZoomed === t) return;
-    let i = null;
-    if (this.isZoomed) {
-      i && cancelAnimationFrame(i);
-      let a = this.isZoomed;
-      if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((n = a.parentElement) == null || n.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((e = a.parentElement) == null || e.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((r = a.parentElement) == null || r.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), a == null || a.style.removeProperty("--pointer-diff-x"), a == null || a.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
-        a == null || a.classList.remove("vistaview-image--zooming");
-      }, 500), this.isZoomed = !1, !t) return;
-    }
-    if (t) {
-      let a = function({ speedX: m, speedY: g }) {
-        i = requestAnimationFrame(() => {
-          if (Math.abs(m) < 0.01 && Math.abs(g) < 0.01)
-            return;
-          const x = t, I = window.innerWidth / 2, P = window.innerHeight / 2, D = x.getBoundingClientRect(), X = D.bottom < P, Y = D.top > P, B = D.right < I, _ = D.left > I;
-          w += m, f += g, X && (f += (P - D.bottom) / C), Y && (f -= (D.top - P) / C), B && (w += (I - D.right) / C), _ && (w -= (D.left - I) / C), x == null || x.style.setProperty("--pointer-diff-x", `${w}px`), x == null || x.style.setProperty("--pointer-diff-y", `${f}px`), a({
-            speedX: m * (1 - E),
-            speedY: g * (1 - E)
-          });
-        });
-      };
-      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 d = !1, h = 0, u = 0, w = 0, f = 0, v = 0, y = 0, b = 0, L = 15, C = 5, E = 0.1;
-      this.onZoomedPointerDown = (m) => {
-        i && cancelAnimationFrame(i), m.preventDefault(), m.stopPropagation(), d = !0, h = m.pageX, u = m.pageY, b = performance.now(), t.setPointerCapture(m.pointerId);
-      }, this.onZoomedPointerMove = (m) => {
-        d && (m.preventDefault(), v = m.pageX - h, y = m.pageY - u, t == null || t.style.setProperty("--pointer-diff-x", `${v + w}px`), t == null || t.style.setProperty("--pointer-diff-y", `${y + f}px`));
-      }, this.onZoomedPointerUp = (m) => {
-        if (d = !1, t.releasePointerCapture(m.pointerId), w += v, f += y, v === 0 && y === 0)
-          this.zoomIn();
-        else {
-          let g = performance.now() - b;
-          if (g === 0) return;
-          let x = (m.pageY - u) / g, I = (m.pageX - h) / g;
-          a({ speedX: I * L, speedY: x * L });
-        }
-        v = 0, y = 0;
-      }, (l = t == null ? void 0 : t.parentElement) == null || l.addEventListener("pointerdown", this.onZoomedPointerDown), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointermove", this.onZoomedPointerMove), (c = t == null ? void 0 : t.parentElement) == null || c.addEventListener("pointerup", this.onZoomedPointerUp);
-      return;
-    }
+  removeListeners() {
+    this.elm.removeEventListener("pointerdown", this.onPointerDown), this.elm.removeEventListener("pointermove", this.onPointerMove), document.removeEventListener("pointerup", this.onPointerUp), document.removeEventListener("pointercancel", this.onPointerCancel), this.pointers = [];
   }
-  zoomIn() {
-    var r, l, o, c, a;
-    const t = (r = this.rootElm) == null ? void 0 : r.querySelector(
-      '[data-vistaview-pos="0"] .vistaview-image-highres'
-    ), i = t.width, n = t.height;
-    t.dataset.vistaviewInitialWidth || (t.dataset.vistaviewInitialWidth = i.toString()), t.dataset.vistaviewInitialHeight || (t.dataset.vistaviewInitialHeight = n.toString()), this.setZoomed(t);
-    const e = (t.naturalWidth || 0) * this.options.maxZoomLevel;
-    if (i && e && i < e) {
-      const d = Math.min(i + this.options.zoomStep, e);
-      t.style.width = `${d}px`;
-      const h = d / i * n;
-      t.style.height = `${h}px`, (o = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = d.toString(), t.dataset.vistaviewCurrentHeight = h.toString(), d === e && ((a = (c = this.rootElm) == null ? void 0 : c.querySelector("button.vistaview-zoom-in-btn")) == null || a.setAttribute("disabled", "true"));
-    }
+  addEventListener(t) {
+    this.listeners.push(t);
   }
-  zoomOut() {
-    var l, o, c, a, d;
-    const t = (l = this.rootElm) == null ? void 0 : l.querySelector(
-      '[data-vistaview-pos="0"] .vistaview-image-highres'
-    ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, r = (h) => {
-      h.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", r));
-    };
-    if (t.addEventListener("transitionend", r), t.classList.add("vistaview-image--zooming-out"), i && e && i > e) {
-      const h = Math.max(i - this.options.zoomStep, e);
-      t.style.width = `${h}px`;
-      const u = h / i * n;
-      t.style.height = `${u}px`, (c = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || c.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = h.toString(), t.dataset.vistaviewCurrentHeight = u.toString();
-      const { maxDiffX: w, minDiffY: f, maxDiffY: v, minDiffX: y } = j(h, u);
-      let b = parseInt(
-        (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
-      ), L = parseInt(
-        (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
-      );
-      b = Math.min(w, Math.max(y, b)), L = Math.min(v, Math.max(f, L)), t == null || t.style.setProperty("--pointer-diff-x", `${b}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`), h === e && ((d = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-out-btn")) == null || d.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));
-    }
+  removeEventListener(t) {
+    this.listeners = this.listeners.filter((e) => e !== t);
   }
-  clearZoom() {
-  }
-  getImages(t) {
-    return t.map((i, n) => {
-      const e = this.elements[i];
-      if (e instanceof HTMLElement) {
-        const r = e.querySelector("img"), l = e.getAttribute("href") || "", o = e.getAttribute("src") || "", c = e.dataset.vistaviewSrc || l || o || (r == null ? void 0 : r.src) || "", a = e.dataset.vistaviewAlt || e.getAttribute("alt") || (r == null ? void 0 : r.alt) || "", d = e.dataset.vistaviewThumb || (r == null ? void 0 : r.src) || l || o || "";
-        return {
-          index: t[n],
-          src: c,
-          alt: a,
-          thumb: d,
-          imageElm: e instanceof HTMLImageElement ? e : r,
-          anchorElm: e instanceof HTMLAnchorElement ? e : void 0
-        };
-      } else
-        return { index: t[n], ...e };
-    });
+  getPointerDistance(t, e) {
+    const i = t.x - e.x, n = t.y - e.y;
+    return Math.sqrt(i * i + n * n);
   }
-  setInitialDimPos() {
-    var a, d;
-    if (!this.rootElm) return;
-    const t = (a = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : a.dataset.vistaviewIndex, i = ((d = this.currentImages) == null ? void 0 : d.find((h) => h.index === Number(t))) || null;
-    if (!i) return;
-    const n = i.imageElm ? R(i.imageElm) : void 0, e = i.anchorElm ? R(i.anchorElm) : void 0, r = (e == null ? void 0 : e.width) || (n == null ? void 0 : n.width) || 0, l = (e == null ? void 0 : e.height) || (n == null ? void 0 : n.height) || 0, o = ((e == null ? void 0 : e.left) || (n == null ? void 0 : n.left) || 0) + r / 2, c = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + l / 2;
-    this.rootElm.style.setProperty("--vistaview-container-initial-width", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", l + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", c + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
-      "--vistaview-image-border-radius",
-      H(e == null ? void 0 : e.borderRadius) || H(n == null ? void 0 : n.borderRadius) || "0px"
+  getCentroid() {
+    if (this.pointers.length === 0) return null;
+    const t = this.pointers.reduce(
+      (e, i) => (e.x += i.x, e.y += i.y, e),
+      { x: 0, y: 0 }
     );
+    return {
+      x: t.x / this.pointers.length,
+      y: t.y / this.pointers.length
+    };
+  }
+}
+class tt {
+  constructor(t, e) {
+    l(this, "maxZoomLevel");
+    l(this, "image", null);
+    l(this, "rect", null);
+    l(this, "initialCenter", { x: 0, y: 0 });
+    l(this, "maxDimension", { width: 0 });
+    l(this, "minDimension", { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 });
+    l(this, "accumulatedTranslate", { x: 0, y: 0 });
+    // state
+    l(this, "scale", 1);
+    l(this, "translate", { x: 0, y: 0 });
+    l(this, "onScale", null);
+    l(this, "animationTimestamp", 0);
+    this.maxZoomLevel = t, this.onScale = e;
   }
-  updateZoomButtonsVisibility() {
-    var e;
-    const t = (e = this.rootElm) == null ? void 0 : e.querySelector(
-      '[data-vistaview-pos="0"] img.vistaview-image-highres'
+  clean() {
+    this.image && (this.image.style.transform = "", this.image.style.width = "", this.image.style.height = "", this.image.style.top = "", this.image.style.left = "", this.image.style.opacity = "");
+  }
+  reset() {
+    this.clean(), this.image = null, this.rect = null, this.initialCenter = { x: window.innerWidth / 2, y: window.innerHeight / 2 }, this.maxDimension = { width: 0 }, this.minDimension = { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 }, this.accumulatedTranslate = { x: 0, y: 0 }, this.scale = 1, this.translate = { x: 0, y: 0 };
+  }
+  setCurrentImage(t) {
+    if (this.rect = null, this.image = t, this.maxDimension = {
+      width: t.naturalWidth * this.maxZoomLevel
+    }, !t.dataset.vvwWidth || !t.dataset.vvwHeight)
+      throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");
+    const e = parseFloat(t.dataset.vvwWidth), i = parseFloat(t.dataset.vvwHeight);
+    this.minDimension = {
+      initialWidth: e,
+      initialHeight: i,
+      minWidth: e * 0.1,
+      closingWidth: e * 0.5
+    }, this.accumulatedTranslate = { x: 0, y: 0 };
+  }
+  setInitialCenter(t) {
+    this.initialCenter = t || { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+  }
+  move(t) {
+    this.image && (this.rect || (this.rect = this.image.getBoundingClientRect()), this.translate.x = C(t.x - this.initialCenter.x), this.translate.y = C(t.y - this.initialCenter.y), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`);
+  }
+  scaleMove(t, e) {
+    if (!this.image) return;
+    this.rect || (this.rect = this.image.getBoundingClientRect()), e || (e = this.initialCenter);
+    const i = P(
+      this.rect.width * t,
+      this.minDimension.minWidth,
+      this.maxDimension.width
     );
-    if (!t) return;
-    const i = this;
-    function n() {
-      var d, h;
-      const r = (d = i.rootElm) == null ? void 0 : d.querySelector(
-        "button.vistaview-zoom-in-btn"
-      ), l = (h = i.rootElm) == null ? void 0 : h.querySelector(
-        "button.vistaview-zoom-out-btn"
-      ), o = parseInt(t.style.width) || t.width, c = t.naturalWidth * i.options.maxZoomLevel, a = o < c && c > 0;
-      r && (r.style.display = a ? "" : "none"), l && (l.style.display = a ? "" : "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((i, n) => {
-      const e = i, l = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
-      if (l) {
-        const { width: a, height: d } = K(l);
-        o.w = Math.min(l.width, a), o.h = Math.min(l.height, d);
-      }
-      const c = () => {
-        var d;
-        const a = () => {
-          var h;
-          o.w && o.h && (e.style.width = `${o.w}px`, e.style.height = `${o.h}px`, e.style.setProperty("--vistaview-fitted-width", `${o.w}px`), e.style.setProperty("--vistaview-fitted-height", `${o.h}px`)), e.classList.add("vistaview-image-loaded"), e.width = e.naturalWidth, e.height = e.naturalHeight, setTimeout(() => {
-            this.setFullSizeImageDim(e);
-          }, 100), (h = i.parentElement) != null && h.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
-        };
-        if ((d = this.rootElm) != null && d.classList.contains("vistaview--opened"))
-          a();
-        else {
-          const h = setInterval(() => {
-            var u;
-            (u = this.rootElm) != null && u.classList.contains("vistaview--opened") && (clearInterval(h), a());
-          }, 50);
-        }
-      };
-      e.complete && e.naturalWidth > 0 ? c() : (e.onload = c, e.onerror = () => {
-        var a;
-        console.error("VistaView: failed to load image " + e.src), (a = e.parentElement) == null || a.classList.add("vistaview-image-load-failed");
+    this.onScale && this.onScale({
+      scale: i / (this.maxDimension.width / this.maxZoomLevel),
+      isMax: i >= this.maxDimension.width,
+      isMin: i <= this.minDimension.initialWidth
+    }), this.scale = C(i / this.rect.width);
+    const n = this.rect.left + this.rect.width / 2, o = this.rect.top + this.rect.height / 2, r = this.initialCenter.x - n, a = this.initialCenter.y - o, h = r * (1 - this.scale), c = a * (1 - this.scale), m = e.x - this.initialCenter.x, w = e.y - this.initialCenter.y;
+    this.translate.x = C(h + m), this.translate.y = C(c + w), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, i <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
+  }
+  moveAndNormalize(t) {
+    let e = 0, i = !1;
+    const n = ({ x: o, y: r }) => {
+      if (i)
+        return;
+      if (Math.abs(o) < 1e-3 && Math.abs(r) < 1e-3)
+        return this.normalize();
+      o *= 0.9, r *= 0.9;
+      const a = this.image.getBoundingClientRect();
+      this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + r), a.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - a.right) * 0.1, o *= 0.7), a.left > window.innerWidth / 2 && (this.translate.x -= (a.left - window.innerWidth / 2) * 0.1, o *= 0.7), a.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - a.bottom) * 0.1, r *= 0.7), a.top > window.innerHeight / 2 && (this.translate.y -= (a.top - window.innerHeight / 2) * 0.1, r *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => n({ x: o, y: r }));
+    };
+    return n({
+      x: t.movementX,
+      y: t.movementY
+    }), () => {
+      i = !0, cancelAnimationFrame(e), this.normalize(!1);
+    };
+  }
+  animateZoom(t) {
+    if (!this.image) return;
+    this.rect || (this.rect = this.image.getBoundingClientRect());
+    const e = Date.now(), i = this.image;
+    this.rect.width * t < this.minDimension.closingWidth || i.width < Math.floor(this.minDimension.initialWidth) || (i.addEventListener(
+      "transitionend",
+      () => {
+        this.animationTimestamp === e && i && (i.style.transition = "", this.normalize());
+      },
+      { once: !0 }
+    ), i.style.transition || (i.style.transition = "all 222ms ease"), this.animationTimestamp = e, this.scaleMove(t));
+  }
+  normalize(t = !0) {
+    if (!this.image || !this.rect) return;
+    let e = this.rect.width * this.scale, i = this.rect.height * this.scale;
+    if (Math.round(e) === Math.round(this.minDimension.initialWidth) && (e = this.minDimension.initialWidth, i = this.minDimension.initialHeight), this.image.style.width = `${e}px`, this.image.style.height = `${i}px`, this.scale = 1, this.image.style.opacity = "", this.accumulatedTranslate.x += this.translate.x, this.accumulatedTranslate.y += this.translate.y, this.image.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, this.image.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`, this.translate = { x: 0, y: 0 }, this.image.style.transform = "", this.rect = this.image.getBoundingClientRect(), e <= this.minDimension.closingWidth)
+      return this.clean(), !0;
+    if (e < this.minDimension.initialWidth)
+      this.accumulatedTranslate.x = 0, this.accumulatedTranslate.y = 0, requestAnimationFrame(() => {
+        const n = this.image;
+        n && (n.addEventListener(
+          "transitionend",
+          () => {
+            n && (this.clean(), this.rect = null);
+          },
+          { once: !0 }
+        ), n.style.transition = "all 222ms ease", n.style.width = `${this.minDimension.initialWidth}px`, n.style.height = `${this.minDimension.initialHeight}px`, n.style.left = "50%", n.style.top = "50%");
       });
-    });
+    else if (t) {
+      let n = !1;
+      if (this.rect.right < window.innerWidth / 2 && (n = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (n = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (n = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (n = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), n) {
+        const o = this.image;
+        o.addEventListener(
+          "transitionend",
+          () => {
+            o && (o.style.transition = "", this.rect = null);
+          },
+          { once: !0 }
+        ), o.style.transition = "all 222ms ease", o.style.left = `calc(50% + ${this.accumulatedTranslate.x}px)`, o.style.top = `calc(50% + ${this.accumulatedTranslate.y}px)`;
+      } else
+        this.rect = null;
+    }
   }
-  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 i = this.options.preloads, n = this.elements.length, e = n < 1 || !i ? [t] : [
-      .../* @__PURE__ */ new Set([
-        ...Array.from(
-          { length: i },
-          (l, o) => ((t - i + o) % n + n) % n
-        ),
-        t,
-        ...Array.from({ length: i }, (l, o) => (t + 1 + o) % n)
-      ])
-    ], r = n < 1 || !i ? [0] : e.map((l, o) => o - Math.floor(e.length / 2));
-    return {
-      images: e,
-      positions: r
+}
+class et {
+  constructor() {
+    l(this, "fiolast", {});
+  }
+  // first in out
+  fio(t, e, i = 50) {
+    const o = Date.now() - (this.fiolast[e] ?? 0), r = () => {
+      this.fiolast[e] = Date.now(), t();
     };
+    if (!this.fiolast[e]) {
+      r();
+      return;
+    }
+    o >= i && r();
   }
-  setKeyboardListeners() {
-    this.onKeyDown = (t) => {
+}
+const x = {
+  somethingOpened: null
+};
+class it {
+  constructor(t, e = {}) {
+    l(this, "options");
+    l(this, "elements");
+    l(this, "isReducedMotion");
+    l(this, "currentIndex", -1);
+    l(this, "currentChildren", null);
+    l(this, "setupFunction", K);
+    l(this, "initFunction", _);
+    l(this, "closeFunction", J);
+    l(this, "transitionFunction", Q);
+    l(this, "pointers", null);
+    l(this, "imageState");
+    l(this, "root", null);
+    l(this, "imageContainer", null);
+    l(this, "onClickElements", (t) => {
+      t.preventDefault();
+      const e = t.currentTarget;
+      e.dataset.vistaIdx && this.open(parseInt(e.dataset.vistaIdx));
+    });
+    l(this, "defaultOnClickHandler", (t) => t.preventDefault());
+    l(this, "abortController", null);
+    l(this, "throttle", new et());
+    l(this, "lastSwapTime", 0);
+    l(this, "isZoomedIn", !1);
+    l(this, "onKeyDown", (t) => {
       switch (t.key) {
         case "ArrowLeft":
           t.preventDefault(), this.prev();
@@ -611,164 +553,332 @@ class ht {
           t.preventDefault(), this.close();
           break;
       }
-    }, window.addEventListener("keydown", this.onKeyDown);
-  }
-  setResizeListeners() {
-    this.onResizeHandler = () => {
-      var i;
-      this.setInitialDimPos();
-      const t = (i = this.rootElm) == null ? void 0 : i.querySelectorAll(
-        ".vistaview-image-highres.vistaview-image-loaded"
-      );
-      t == null || t.forEach((n) => {
-        const e = n, { width: r, height: l } = q(e);
-        e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = r.toString(), e.dataset.vistaviewInitialHeight = l.toString()) : (e.style.width = `${r}px`, e.style.height = `${l}px`);
+    });
+    l(this, "onScroll", (t) => {
+      t.preventDefault();
+      const e = t.deltaY;
+      this.imageState.setInitialCenter({
+        x: t.clientX,
+        y: t.clientY
+      }), e < 0 ? this.zoomIn() : e > 0 && this.zoomOut();
+    });
+    l(this, "onResizeHandler", () => {
+      this.currentChildren.htmls.forEach((t, e) => {
+        const i = this.currentChildren.images[e], n = t.querySelector("img.vvw-img-hi"), o = t.querySelector("img.vvw-img-lo");
+        if (M(i, n, o, !1), n.classList.contains("vvw--loaded")) {
+          const { width: r, height: a } = D(n);
+          n.style.setProperty("--vvw-current-w", `${r}px`), n.style.setProperty("--vvw-current-h", `${a}px`), n.dataset.vvwWidth = r.toString(), n.dataset.vvwHeight = a.toString();
+        }
+      });
+    });
+    /// POINTERS
+    l(this, "pointerListeners", []);
+    l(this, "getInternalPointerListener", () => {
+      const t = this.imageState;
+      let e = 0, i = !1, n = () => {
+      };
+      return (o) => {
+        if (o.event === "down") {
+          if (n(), this.isZoomedIn && o.pointers.length === 1) {
+            const r = this.pointers.getCentroid();
+            t.setInitialCenter(r);
+          }
+          if (o.pointers.length >= 2) {
+            i = !0;
+            const r = this.pointers.getCentroid();
+            e = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]), t.setInitialCenter(r);
+          }
+        } else if (o.event === "move") {
+          if (this.isZoomedIn && o.pointers.length === 1 && o.lastPointerLen === 0) {
+            const r = this.pointers.getCentroid();
+            t.move(r);
+          }
+          if (o.pointers.length >= 2 && i) {
+            const r = this.pointers.getCentroid(), a = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]);
+            t.scaleMove(a / e, r);
+          }
+        } else (o.event === "up" || o.event === "cancel") && (i || this.isZoomedIn) && (i ? (i = !1, t.normalize() && requestAnimationFrame(() => {
+          this.close();
+        })) : this.isZoomedIn && o.pointers.length === 0 && (n = t.moveAndNormalize(o.pointer)));
+        this.pointerListeners.forEach(
+          (r) => r({
+            ...o,
+            hasInternalExecution: this.isZoomedIn || i
+          })
+        );
+      };
+    });
+    this.elements = t, this.options = {
+      ...H,
+      ...e,
+      controls: {
+        ...H.controls,
+        ...e.controls
+      }
+    }, this.imageState = new tt(
+      this.options.maxZoomLevel,
+      (i) => {
+        var n, o, r, a, h, c;
+        i.isMin ? (this.isZoomedIn = !1, (n = this.qs(".vvw-zoom-out")) == null || n.setAttribute("disabled", "true"), (o = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || o.style.setProperty(
+          "pointer-events",
+          "none"
+        )) : (this.isZoomedIn = !0, (r = this.qs(".vvw-zoom-out")) == null || r.removeAttribute("disabled"), (a = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || a.style.setProperty(
+          "pointer-events",
+          "auto"
+        )), i.isMax ? (h = this.qs(".vvw-zoom-in")) == null || h.setAttribute("disabled", "true") : (c = this.qs(".vvw-zoom-in")) == null || c.removeAttribute("disabled");
+      }
+    ), this.options.setupFunction && (this.setupFunction = this.options.setupFunction), this.options.closeFunction && (this.closeFunction = this.options.closeFunction), this.options.initFunction && (this.initFunction = this.options.initFunction), this.options.transitionFunction && (this.transitionFunction = this.options.transitionFunction), this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements instanceof NodeList && this.elements.forEach((i, n) => {
+      i.dataset.vistaIdx = n.toString(), i.addEventListener("click", this.defaultOnClickHandler), i.addEventListener("pointerup", this.onClickElements);
+    });
+  }
+  qs(t) {
+    return this.root ? this.root.querySelector(t) : null;
+  }
+  async swap(t, e) {
+    const i = this.options.preloads || 0, n = this.currentIndex, { htmls: o, images: r } = this.getChildElements(i, n), a = this.imageContainer, h = this.currentChildren, c = {
+      htmlElements: { from: h.htmls, to: o },
+      images: { from: h.images, to: r },
+      index: { from: t, to: this.currentIndex },
+      via: e || { next: !1, prev: !1 },
+      vistaView: this
+    };
+    this.setupFunction(c), this.currentChildren = { htmls: o, images: r }, this.displayActiveIndex();
+    const m = this.abortController.signal, w = performance.now(), L = w - this.lastSwapTime < this.options.rapidLimit;
+    let p = null;
+    L || (p = await this.transitionFunction(c, m)), this.lastSwapTime = w;
+    const d = o[Math.floor(o.length / 2)].dataset.vvwIdx, v = a.querySelector(
+      `.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`
+    ), g = v.getAttribute("style") || "", f = v.classList.contains("vvw--loaded"), u = v.width, b = v.height;
+    this.imageState.reset(), a.innerHTML = "", p instanceof Function && p(), o.forEach((E) => {
+      const y = E.querySelector("img.vvw-img-hi");
+      E.dataset.vvwPos === "0" && !m.aborted && g && f && // ready &&
+      u && b && (y.classList.add("vvw--loaded"), y.classList.add("vvw--ready"), y.setAttribute("style", g), y.width = u, y.height = b, y.dataset.vvwWidth = u.toString(), y.dataset.vvwHeight = b.toString()), a.appendChild(E), y.classList.contains("vvw--ready") && (this.imageState.setCurrentImage(y), this.imageState.setInitialCenter());
+    }), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
+  }
+  getChildElements(t, e) {
+    const i = [], n = [];
+    for (let o = -t; o <= t; o++) {
+      const r = (e + o + this.elements.length) % this.elements.length, a = this.elements[r], h = a instanceof HTMLImageElement ? a : a instanceof HTMLAnchorElement && a.querySelector("img") || void 0, c = a instanceof HTMLElement ? {
+        index: r,
+        imageElm: h instanceof HTMLImageElement ? h : void 0,
+        anchorElm: a instanceof HTMLAnchorElement ? a : void 0,
+        src: a.dataset.vistaviewSrc || a.getAttribute("href") || a.getAttribute("src") || "",
+        thumb: a.dataset.vistaviewThumb || (h instanceof HTMLImageElement ? h.getAttribute("src") : void 0) || a.getAttribute("href") || void 0,
+        alt: h instanceof HTMLImageElement && h.getAttribute("alt") || void 0
+      } : {
+        index: r,
+        ...a
+      };
+      n.push(c), i.push(j(c, o));
+    }
+    return {
+      htmls: i,
+      images: n
+    };
+  }
+  zoomIn() {
+    this.throttle.fio(
+      () => {
+        this.imageState.animateZoom(1.68);
+      },
+      "zoom",
+      222
+    );
+  }
+  zoomOut() {
+    this.throttle.fio(
+      () => {
+        this.imageState.animateZoom(0.68);
+      },
+      "zoom",
+      222
+    );
+  }
+  displayActiveIndex() {
+    var n;
+    const t = this.currentIndex;
+    this.elements instanceof NodeList && this.elements.forEach((o, r) => {
+      o.style.opacity = "", r === t && (o.style.opacity = "0");
+    });
+    const e = this.qs(".vvw-index");
+    e && (e.textContent = `${t + 1} / ${this.elements.length}`);
+    const i = this.qs(".vvw-desc");
+    if (i) {
+      const o = (n = this.currentChildren) == null ? void 0 : n.images.find((r) => r.index === t);
+      o && o.alt ? i.textContent = o.alt : i.textContent = "";
+    }
+  }
+  waitForImagesToLoad() {
+    this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((i) => {
+      const n = i, o = () => {
+        var a;
+        n.width = n.naturalWidth, n.height = n.naturalHeight;
+        const r = (a = n.parentElement) == null ? void 0 : a.matches(`[data-vvw-idx="${this.currentIndex}"]`);
+        n.addEventListener(
+          "transitionend",
+          () => {
+            r && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
+          },
+          { once: !0 }
+        ), n.classList.add("vvw--loaded"), requestAnimationFrame(() => {
+          const { width: h, height: c } = D(n);
+          n.style.setProperty("--vvw-current-w", `${h}px`), n.style.setProperty("--vvw-current-h", `${c}px`), n.dataset.vvwWidth = h.toString(), n.dataset.vvwHeight = c.toString(), n.style.setProperty("--vvw-current-radius", "0px");
+        });
+      };
+      if (n.complete && n.naturalWidth !== 0) {
+        o();
+        return;
+      }
+      n.addEventListener("load", () => {
+        o();
+      }), n.addEventListener("error", () => {
+        n.classList.add("vvw--loaderror");
       });
-    }, window.addEventListener("resize", this.onResizeHandler);
+    });
+  }
+  registerPointerListener(t) {
+    this.pointerListeners.push(t);
+  }
+  unregisterPointerListeners() {
+    this.pointerListeners = [];
   }
+  /// OPEN
   open(t = 0) {
-    var o, c, a, d, h, u, w, f, v, y, b, L, C;
-    if (S.somethingOpened) {
-      console.error("VistaView: another instance is already opened. Returning.");
+    var c, m, w, L, p;
+    if (x.somethingOpened)
       return;
-    }
-    if (S.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
-      ot({
-        controls: this.options.controls,
-        isReducedMotion: this.isReducedMotion
-      })
-    ), this.rootElm = document.querySelector("#vistaview-root"), this.imageContainerElm = ((o = this.rootElm) == null ? void 0 : o.querySelector(".vistaview-image-container")) || null, !this.rootElm || !this.imageContainerElm)
-      throw S.somethingOpened = null, new Error("Failed to create VistaView element");
-    this.options.arrowOnSmallScreens || this.rootElm.classList.add("vistaview-no-arrows-sm");
-    const { images: i, positions: n } = this.getCurrentIndexes(t);
-    this.currentImages = this.getImages(i);
-    const e = this.currentImages.map((E, m) => k(E, n[m]));
-    this.currentItems = e;
-    const r = {
-      htmlElements: { from: null, to: this.currentItems },
-      images: { from: null, to: this.currentImages },
-      index: { from: null, to: t },
-      via: this.currentIndex.via,
+    x.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
+    const e = U({
+      controls: this.options.controls
+    });
+    if (document.body.prepend(e), this.root = document.body.querySelector("#vvw-root"), !this.root)
+      throw new Error("Failed to setup VistaView root element.");
+    this.imageContainer = this.qs(".vvw-image-container"), this.options.animationDurationBase && this.root.style.setProperty("--vvw-anim-dur", `${this.options.animationDurationBase}`), this.options.initialZIndex !== void 0 && this.root.style.setProperty("--vvw-init-z", `${this.options.initialZIndex}`);
+    const i = this.options.preloads || 0, n = t, { images: o, htmls: r } = this.getChildElements(i, n), a = {
+      htmlElements: { from: null, to: r },
+      images: { from: null, to: o },
+      index: { from: null, to: this.currentIndex },
+      via: { next: !1, prev: !1 },
       vistaView: this
     };
-    this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((E) => {
-      this.imageContainerElm.appendChild(E);
+    this.setupFunction(a), this.currentChildren = { htmls: r, images: o }, r.forEach((d) => {
+      this.imageContainer.appendChild(d);
+    }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (m = this.qs(".vvw-zoom-in")) == null || m.addEventListener("click", () => this.zoomIn()), (w = this.qs(".vvw-zoom-out")) == null || w.addEventListener("click", () => this.zoomOut()), (L = this.qs(".vvw-prev>button")) == null || L.addEventListener("click", () => this.prev()), (p = this.qs(".vvw-next>button")) == null || p.addEventListener("click", () => this.next()), window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new V({
+      elm: this.imageContainer,
+      listeners: [this.getInternalPointerListener()]
     });
-    let l = 0;
-    this.rootElm.addEventListener("animationend", (E) => {
-      var m;
-      E.currentTarget === this.rootElm && (l++, l >= 2 && ((m = this.rootElm) == null || m.classList.add("vistaview--opened")));
-    }), (c = this.rootElm.querySelector(".vistaview-close-btn")) == null || c.addEventListener("click", () => this.close()), (a = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || a.addEventListener("click", () => this.zoomIn()), (d = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || d.addEventListener("click", () => this.zoomOut()), (h = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || h.addEventListener("click", () => this.prev()), (u = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || u.addEventListener("click", () => this.next()), [
+    const h = {};
+    [
       ...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((E) => {
-      typeof E != "string" && (this.customControls[E.name] = E);
-    }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((E) => {
-      E.addEventListener("click", (m) => {
-        const g = this.customControls[m.currentTarget.dataset.vistaviewCustomControl], x = this.currentImages.find(
-          (I) => I.index === this.currentIndex.value
+    ].forEach((d) => {
+      typeof d != "string" && (h[d.name] = d);
+    }), this.root.querySelectorAll("button[data-vvw-control]").forEach((d) => {
+      const v = d;
+      v.addEventListener("click", (g) => {
+        const f = g.currentTarget.dataset.vvwControl, u = h[f], b = this.currentChildren.images.find(
+          (E) => E.index === this.currentIndex
         );
-        g && x && (g.onClick.constructor.name === "AsyncFunction" ? (E.classList.add("vistaview-button--loading"), g.onClick(x).finally(() => {
-          E.classList.remove("vistaview-button--loading");
-        })) : g.onClick(x));
-      });
-    }), 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.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((w = this.rootElm.querySelector(".vistaview-prev-btn")) == null || w.classList.add("vistaview-ui--none"), (f = this.rootElm.querySelector(".vistaview-next-btn")) == null || f.classList.add("vistaview-ui--none"), (v = this.rootElm.querySelector(".vistaview-index-display")) == null || v.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (b = (y = this.options).onOpen) == null || b.call(y, r), (C = (L = this.options).onImageView) == null || C.call(L, r);
-  }
-  async close(t = !0) {
-    var n, e, r;
-    if (S.somethingOpened !== this) return;
-    t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((l) => {
-      var c;
-      let o;
-      (c = this.rootElm) == null || c.addEventListener("transitionend", (a) => {
-        a.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
-          l();
-        }, 333));
+        u && b && (u.onClick.constructor.name === "AsyncFunction" ? (v.classList.add("vvw--loading"), u.onClick(b, this).finally(() => {
+          v.classList.remove("vvw--loading");
+        })) : u.onClick(b, this));
       });
-    }));
-    const i = {
-      htmlElements: { from: this.currentItems, to: null },
-      images: { from: this.currentImages, to: null },
-      index: { from: this.currentIndex.value, to: null },
-      via: { prev: !1, next: !1 },
-      vistaView: this
-    };
-    this.userClose(this), (r = (e = this.options).onClose) == null || r.call(e, i), 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.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);
-    for (const l in this.transitionAbortControllers)
-      this.transitionAbortControllers[l].abort();
-    this.transitionAbortControllers = {}, S.somethingOpened = null;
-  }
-  destroy() {
-    this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
-      t.dataset.vistaviewIndex && delete t.dataset.vistaviewIndex, t.removeEventListener("click", this.defaultOnClickHandler), t.removeEventListener("pointerup", this.onClickElements);
+    }), this.initFunction(this), requestAnimationFrame(() => {
+      var d;
+      (d = this.root) == null || d.addEventListener(
+        "transitionend",
+        () => {
+          var v, g;
+          (v = this.root) == null || v.classList.add("vvw--settled"), this.waitForImagesToLoad(), (g = this.qs(".vvw-bg")) == null || g.addEventListener("click", (f) => {
+            f.preventDefault(), this.close();
+          }), this.imageState.reset();
+        },
+        { once: !0 }
+      ), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(a);
     });
   }
-  view(t, i) {
-    S.somethingOpened === this && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = i || { next: !1, prev: !1 }, this.currentIndex.value = t);
+  /// CLOSE
+  async close(t = !0) {
+    x.somethingOpened === this && this.root && (t ? await new Promise((e) => {
+      let n = 0;
+      this.root.addEventListener("transitionend", (o) => {
+        o.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((r) => {
+          r.style.opacity = "";
+        }), n === 3 && e(null));
+      }), this.root.classList.add("vvw--closing");
+    }) : this.elements instanceof NodeList && this.elements.forEach((e) => {
+      e.style.opacity = "";
+    }), window.removeEventListener("keydown", this.onKeyDown), window.removeEventListener("resize", this.onResizeHandler), window.removeEventListener("wheel", this.onScroll), this.unregisterPointerListeners(), this.pointers.removeListeners(), this.root.remove(), this.root = null, this.imageContainer = null, this.currentChildren = null, this.currentIndex = -1, document.body.style.overflow = "", x.somethingOpened = null, this.closeFunction(this), this.options.onClose && this.options.onClose(this));
   }
   next() {
-    S.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
+    if (x.somethingOpened !== this)
+      return;
+    const t = (this.currentIndex + 1) % this.elements.length;
+    this.view(t, { next: !0, prev: !1 });
   }
   prev() {
-    S.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
+    if (x.somethingOpened !== this)
+      return;
+    const t = (this.currentIndex - 1 + this.elements.length) % this.elements.length;
+    this.view(t, { next: !1, prev: !0 });
+  }
+  destroy() {
+    this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
+      t.removeAttribute("data-vista-idx"), t.removeEventListener("click", this.defaultOnClickHandler), t.removeEventListener("pointerup", this.onClickElements);
+    });
   }
   getCurrentIndex() {
-    return S.somethingOpened === this ? this.currentIndex.value : -1;
+    return x.somethingOpened !== this ? -1 : this.currentIndex;
+  }
+  view(t, e) {
+    if (x.somethingOpened !== this || t < 0 || t >= this.elements.length)
+      return;
+    const i = this.currentIndex;
+    this.currentIndex = t;
+    const n = this.abortController;
+    n == null || n.abort(), this.abortController = new AbortController(), this.swap(i, e);
   }
 }
-function ut(s) {
+function nt(s) {
   let t = null;
   if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
-    for (let i = 0; i < t.length; i++) {
-      const n = t[i];
-      if (!(n.dataset.vistaviewSrc || n.getAttribute("href") || n.getAttribute("src") || ""))
-        return `Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`;
+    for (let e = 0; e < t.length; e++) {
+      const i = t[e];
+      if (!(i.dataset.vistaviewSrc || i.getAttribute("href") || i.getAttribute("src") || ""))
+        return `Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`;
     }
   else {
-    const i = s;
-    for (let n = 0; n < i.length; n++)
-      if (!i[n].src)
-        return `Element at index ${n} is missing 'src' attribute.`;
+    const e = s;
+    for (let i = 0; i < e.length; i++)
+      if (!e[i].src)
+        return `Element at index ${i} is missing 'src' attribute.`;
   }
   return t || s;
 }
-function mt({ elements: s, ...t }) {
+function ot({ elements: s, ...t }) {
   if (!s) throw new Error("No elements");
-  let i = ut(s);
-  if (typeof i == "string")
-    return console.error(i), console.warn("VistaView: silently returning."), null;
-  const n = new ht(i, t);
+  let e = nt(s);
+  if (typeof e == "string")
+    return null;
+  const i = new it(e, t);
   return {
-    open: (e = 0) => n.open(e),
-    close: () => n.close(),
-    next: () => n.next(),
-    prev: () => n.prev(),
-    destroy: () => n.destroy(),
-    getCurrentIndex: () => n.getCurrentIndex(),
-    view: (e) => {
-      n.view(e);
+    open: (n = 0) => i.open(n),
+    close: () => i.close(),
+    next: () => i.next(),
+    prev: () => i.prev(),
+    destroy: () => i.destroy(),
+    getCurrentIndex: () => i.getCurrentIndex(),
+    view: (n) => {
+      i.view(n);
     }
   };
 }
 export {
-  W as DefaultOptions,
-  z as VistaViewTransitionAbortedError,
-  ct as defaultClose,
-  at as defaultInit,
-  lt as defaultSetup,
-  dt as defaultTransition,
-  F as removeTouchActions,
-  rt as setTouchActions,
-  mt as vistaView,
-  nt as vistaViewDownload
+  H as DefaultOptions,
+  ot as vistaView,
+  B as vistaViewDownload
 };