vistaview 0.6.6 → 0.7.0

package/dist/vistaview.js

@@ -1,31 +1,31 @@
-var W = Object.defineProperty;
-var A = (s, t, e) => t in s ? W(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var l = (s, t, e) => A(s, typeof t != "symbol" ? t + "" : t, e);
-function $(s) {
+var F = Object.defineProperty;
+var A = (s, t, e) => t in s ? F(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var h = (s, t, e) => A(s, typeof t != "symbol" ? t + "" : t, e);
+function S(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, a = s.naturalHeight;
+function z(s) {
+  const e = window.getComputedStyle(s).objectFit || "", { width: n, height: i } = s.getBoundingClientRect(), o = s.naturalWidth, a = s.naturalHeight;
   if (!e)
-    return { width: i, height: n };
+    return { width: n, height: i };
   if (!o || !a)
-    return { width: i, height: n };
-  const r = o / a, h = i / n;
+    return { width: n, height: i };
+  const r = o / a, l = n / i;
   switch (e) {
     case "fill":
-      return { width: i, height: n };
+      return { width: n, height: i };
     case "none":
       return { width: o, height: a };
     case "contain":
-      return r > h ? { width: i, height: i / r } : { width: n * r, height: n };
+      return r > l ? { width: n, height: n / r } : { width: i * r, height: i };
     case "cover":
-      return r < h ? { width: i, height: i / r } : { width: n * r, height: n };
+      return r < l ? { width: n, height: n / r } : { width: i * r, height: i };
     case "scale-down": {
-      const c = { width: o, height: a }, m = r > h ? { width: i, height: i / r } : { width: n * r, height: n };
+      const c = { width: o, height: a }, m = r > l ? { width: n, height: n / r } : { width: i * r, height: i };
       return m.width <= c.width && m.height <= c.height ? m : c;
     }
   }
-  return { width: i, height: n };
+  return { width: n, height: i };
 }
 function D(s) {
   const t = getComputedStyle(s), e = s.getBoundingClientRect();
@@ -42,13 +42,13 @@ function D(s) {
     naturalHeight: s.naturalHeight
   };
 }
-function P(s) {
-  const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(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 : "") || "";
+function k(s) {
+  const t = s.imageElm ? D(s.imageElm) : null, e = s.anchorElm ? D(s.anchorElm) : null, n = S(t == null ? void 0 : t.borderRadius), i = e && S(e == null ? void 0 : e.borderRadius), o = (i ? e == null ? void 0 : e.borderRadius : n ? 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 : "",
+    overflow: i ? e.overflow : n ? 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,
@@ -57,53 +57,53 @@ function P(s) {
     left: (e == null ? void 0 : e.left) || (t == null ? void 0 : t.left) || 0
   };
 }
-function H(s, t, e, i = !1) {
+function W(s, t, e, n = !1) {
   const {
-    fit: n,
+    fit: i,
     w: o,
     h: a,
     // this ones makes things hard. not used.
     // pos,
     // overflow,
     nw: r,
-    nh: h,
+    nh: l,
     br: c,
     top: m,
-    left: w
-  } = P(s), b = Math.min(Math.max(w, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, p = Math.min(Math.max(m, -a), window.innerHeight + a) - window.innerHeight / 2 + a / 2, d = e.style;
-  d.width = `${o}px`, d.height = `${a}px`, d.objectFit = n, e.width = r, e.height = h, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${b}px`), d.setProperty("--vvw-init-y", `${p}px`), i && (d.setProperty("--vvw-current-x", `${b}px`), d.setProperty("--vvw-current-y", `${p}px`));
-  const v = F(s.imageElm), g = Math.min(o, v.width), f = Math.min(a, 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());
+    left: p
+  } = k(s), L = Math.min(Math.max(p, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, g = Math.min(Math.max(m, -a), window.innerHeight + a) - window.innerHeight / 2 + a / 2, d = e.style;
+  d.width = `${o}px`, d.height = `${a}px`, d.objectFit = i, e.width = r, e.height = l, 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", `${g}px`), n && (d.setProperty("--vvw-current-x", `${L}px`), d.setProperty("--vvw-current-y", `${g}px`));
+  const u = z(s.imageElm), y = Math.min(o, u.width), f = Math.min(a, u.height), v = t.style;
+  v.setProperty("--vvw-init-radius", `${c}`), v.setProperty("--vvw-init-w", `${y}px`), v.setProperty("--vvw-init-h", `${f}px`), n && (v.setProperty("--vvw-current-radius", `${c}`), v.setProperty("--vvw-current-w", `${y}px`), v.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = y.toString(), t.dataset.vvwHeight = f.toString());
 }
-function S(s) {
-  const t = window.innerWidth, e = window.innerHeight, i = s.naturalWidth, n = s.naturalHeight;
-  if (!i || !n)
+function M(s) {
+  const t = window.innerWidth, e = window.innerHeight, n = s.naturalWidth, i = s.naturalHeight;
+  if (!n || !i)
     throw new Error("Image natural dimensions are zero");
-  if (i < t && n < e)
+  if (n < t && i < e)
     return {
-      width: i,
-      height: n
+      width: n,
+      height: i
     };
-  const o = i / n, a = t / e;
-  let r, h;
-  return o > a ? (r = t, h = t / o) : (h = e, r = e * o), {
+  const o = n / i, a = t / e;
+  let r, l;
+  return o > a ? (r = t, l = t / o) : (l = e, r = e * o), {
     width: r,
-    height: h
+    height: l
   };
 }
-function z(s, t, e) {
+function q(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 k = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', q = '<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>', Z = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', Y = '<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 = {
+const R = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', O = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', Z = '<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>', X = '<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>', N = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', Y = '<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 $ = null;
+function B() {
+  return $ || (window.trustedTypes || (window.trustedTypes = {
     createPolicy: (s, t) => t
-  }), I = window.trustedTypes.createPolicy("vistaView-policy", {
+  }), $ = window.trustedTypes.createPolicy("vistaView-policy", {
     createHTML: (s) => s,
     // HTML is generated by us, not user input
     createScript: () => {
@@ -112,34 +112,34 @@ function X() {
     createScriptURL: () => {
       throw new Error("Not implemented");
     }
-  }), I);
+  }), $);
 }
-function M(s) {
-  const e = X().createHTML(s), i = document.createElement("template");
-  i.innerHTML = e;
-  const n = i.content;
-  return i.remove(), n;
+function P(s) {
+  const e = B().createHTML(s), n = document.createElement("template");
+  n.innerHTML = e;
+  const i = n.content;
+  return n.remove(), i;
 }
-function N() {
+function j() {
   return {
     name: "download",
     icon: Y,
     onClick: async (s) => {
       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);
+      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 B(s) {
+function V(s) {
   if (typeof s == "string")
     switch (s) {
       case "zoomIn":
-        return `<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${R}</button>`;
+        return `<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;
       case "zoomOut":
-        return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${O}</button>`;
+        return `<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${X}</button>`;
       case "close":
-        return `<button aria-label="Close" class="vvw-close vvw-ui">${Z}</button>`;
+        return `<button aria-label="Close" class="vvw-close vvw-ui">${N}</button>`;
       case "indexDisplay":
         return '<div class="vvw-index vvw-ui" aria-hidden="true"></div>';
       case "description":
@@ -149,35 +149,35 @@ function B(s) {
     }
   return `<button class="vvw-ui" aria-label="${s.description || s.name}" data-vvw-control="${s.name}">${s.icon}</button>`;
 }
-function j(s, t) {
+function U(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(
-    M(
+    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 H(s, n, i, t === 0), e;
+  const n = e.querySelector("img.vvw-img-lo"), i = e.querySelector("img.vvw-img-hi");
+  return W(s, i, n, t === 0), e;
 }
-function U({
+function K({
   controls: s
 }) {
-  const t = (i) => i ? i.map(B).join("") : "";
-  return M(
+  const t = (n) => n ? n.map(V).join("") : "";
+  return P(
     `<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"><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"><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 aria-label="Previous">${k}</button></div>
-      <div class="vvw-next vvw-ui"><button aria-label="Next">${q}</button></div>
+      <div class="vvw-prev vvw-ui"><button aria-label="Previous">${R}</button></div>
+      <div class="vvw-next vvw-ui"><button aria-label="Next">${O}</button></div>
     </div>
     </div>`
   );
 }
-const T = {
+const H = {
   // debug, don't remove
   // animationDurationBase: 1000,
   animationDurationBase: 333,
@@ -188,90 +188,98 @@ const T = {
   rapidLimit: 222,
   controls: {
     topLeft: ["indexDisplay"],
-    topRight: ["zoomIn", "zoomOut", N(), "close"],
+    topRight: ["zoomIn", "zoomOut", j(), "close"],
     bottomLeft: ["description"]
   }
 };
-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, a = e.y - t.y;
-        if (!i && Math.abs(a) > Math.abs(o) || i === "y") {
-          const r = a / window.innerHeight * 100;
-          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${r}vh)`, i = "y";
-        } else if (!i && Math.abs(o) > Math.abs(a) || i === "x") {
-          const r = o / window.innerWidth * 100;
-          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${r}vw)`, i = "x";
+  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", J(s);
+}
+function J(s) {
+  let t = { x: 0, y: 0 }, e = { x: 0, y: 0 }, n = null;
+  s.registerPointerListener((i) => {
+    var o;
+    if (!i.hasInternalExecution && !(i.pointers.length > 1)) {
+      if (i.event === "down" && (t = { x: i.pointer.x, y: i.pointer.y }, e = { x: i.pointer.x, y: i.pointer.y }, (o = i.abortController) == null || o.abort()), i.event === "move") {
+        e = { x: i.pointer.x, y: i.pointer.y };
+        const a = e.x - t.x, r = e.y - t.y;
+        if (!n && Math.abs(r) > Math.abs(a) || n === "y") {
+          const l = r / window.innerHeight * 100;
+          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateY(${l}vh)`, n = "y";
+        } else if (!n && Math.abs(a) > Math.abs(r) || n === "x") {
+          const l = a / window.innerWidth * 100;
+          s.imageContainer.style.transition = "none", s.imageContainer.style.transform = `translateX(${l}vw)`, n = "x";
         }
       }
-      if (n.event === "up" || n.event === "cancel") {
-        let o = function(a) {
-          var r;
-          (r = s.imageContainer) == null || r.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 = a;
+      if (i.event === "up" || i.event === "cancel") {
+        let a = function(r) {
+          var l;
+          (l = s.imageContainer) == null || l.addEventListener("transitionend", function c() {
+            var m;
+            (m = s.imageContainer) == null || m.removeEventListener("transitionend", c), s.imageContainer.style.transition = "", s.imageContainer.style.transform = "";
+          }), s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = r;
         };
-        if (i === "y") {
-          const a = e.y - t.y, r = n.pointer.movementY, h = 8;
-          s.imageContainer.style.transition = "", a > 0 && Math.abs(r) > h || a < 0 && Math.abs(r) > h ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : o("translateY(0vh)");
+        if (n === "y") {
+          const r = e.y - t.y;
+          Math.abs(r) > 144 ? (s.imageContainer.style.transition = "transform 222ms ease", s.imageContainer.style.transform = "translateY(0vh)", s.close()) : a("translateY(0vh)");
         }
-        if (i === "x") {
-          const a = e.x - t.x, r = n.pointer.movementX, h = 8;
-          s.imageContainer.style.transition = "", a > 0 && Math.abs(r) > h ? s.prev() : a < 0 && Math.abs(r) > h ? s.next() : o("translateX(0vw)");
+        if (n === "x") {
+          const r = e.x - t.x, l = i.pointer.movementX, c = 1;
+          s.imageContainer.style.transition = "", r > 0 && Math.abs(l) > c ? s.prev() : r < 0 && Math.abs(l) > c ? s.next() : a("translateX(0vw)");
         }
-        i = null, t = { x: 0, y: 0 }, e = { x: 0, y: 0 };
+        n = null, t = { x: 0, y: 0 }, e = { x: 0, y: 0 };
       }
     }
   });
 }
-function J(s) {
+function Q(s) {
 }
-async function Q({
+function tt({
   vistaView: { isReducedMotion: s },
   htmlElements: { to: t },
-  index: { from: e, to: i },
-  vistaView: { elements: n, imageContainer: o, options: a }
+  index: { from: e, to: n },
+  vistaView: { elements: i, imageContainer: o, options: a }
 }, r) {
-  if (!t || r.aborted || s || !(Math.abs(i - e) === 1 || e === 0 && i === n.length - 1 || e === n.length - 1 && i === 0))
-    return;
-  const c = Math.round(a.animationDurationBase * 100) / 100;
-  return new Promise((m) => {
-    o.addEventListener(
-      "transitionend",
-      () => {
-        m(() => {
-          o.style.transition = "", o.style.transform = "";
-        });
+  if (!(!t || r.aborted || s || !(Math.abs(n - e) === 1 || e === 0 && n === i.length - 1 || e === i.length - 1 && n === 0)))
+    return {
+      cleanup: () => {
+        o.style.transition = "", o.style.transform = "";
       },
-      { 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;
-  });
+      transitionEnded: new Promise((c) => {
+        o.addEventListener(
+          "transitionend",
+          () => {
+            c();
+          },
+          { once: !0 }
+        ), o.addEventListener(
+          "transitioncancel",
+          () => {
+            r.aborted && c();
+          },
+          { once: !0 }
+        );
+        const m = Math.round(a.animationDurationBase * 100) / 100, p = n === e + 1 || e === i.length - 1 && n === 0 ? "translateX(-100vw)" : "translateX(100vw)";
+        o.style.transition = `transform ${m}ms ease`, o.style.transform = p;
+      })
+    };
 }
-class V {
+class et {
   constructor({ elm: t, listeners: e }) {
-    l(this, "pointers", []);
-    l(this, "elm");
-    l(this, "listeners", []);
-    l(this, "lastPointerDownId", null);
-    l(this, "removeLastPointer", () => {
+    h(this, "pointers", []);
+    h(this, "elm");
+    h(this, "listeners", []);
+    h(this, "lastPointerDownId", null);
+    h(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);
       }
     });
-    l(this, "onPointerDown", (t) => {
+    h(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 = {
@@ -282,7 +290,7 @@ class V {
         id: t.pointerId
       };
       this.pointers.push(e), this.listeners.forEach(
-        (i) => i({
+        (n) => n({
           event: "down",
           pointer: e,
           pointers: this.pointers,
@@ -290,12 +298,12 @@ class V {
         })
       );
     });
-    l(this, "onPointerMove", (t) => {
+    h(this, "onPointerMove", (t) => {
       if (!this.listeners.length) return;
       t.preventDefault();
-      const e = this.pointers.find((i) => i.id === t.pointerId);
+      const e = this.pointers.find((n) => n.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({
+        (n) => n({
           event: "move",
           pointer: e,
           pointers: this.pointers,
@@ -303,39 +311,39 @@ class V {
         })
       ));
     });
-    l(this, "onPointerUp", (t) => {
+    h(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;
+      const n = this.pointers[e];
+      n.x = t.clientX, n.y = t.clientY;
+      const i = this.pointers.length;
       this.pointers.splice(e, 1), this.listeners.forEach(
         (o) => o({
           event: "up",
-          pointer: i,
+          pointer: n,
           pointers: this.pointers,
-          lastPointerLen: n
+          lastPointerLen: i
         })
       );
     });
-    l(this, "onPointerCancel", (t) => {
+    h(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;
+      const n = this.pointers[e];
+      n.x = t.clientX, n.y = t.clientY;
+      const i = this.pointers.length;
       this.pointers.splice(e, 1), this.listeners.forEach(
         (o) => o({
           event: "cancel",
-          pointer: i,
+          pointer: n,
           pointers: this.pointers,
-          lastPointerLen: n
+          lastPointerLen: i
         })
       );
     });
@@ -354,13 +362,13 @@ class V {
     this.listeners = this.listeners.filter((e) => e !== t);
   }
   getPointerDistance(t, e) {
-    const i = t.x - e.x, n = t.y - e.y;
-    return Math.sqrt(i * i + n * n);
+    const n = t.x - e.x, i = t.y - e.y;
+    return Math.sqrt(n * n + i * i);
   }
   getCentroid() {
     if (this.pointers.length === 0) return null;
     const t = this.pointers.reduce(
-      (e, i) => (e.x += i.x, e.y += i.y, e),
+      (e, n) => (e.x += n.x, e.y += n.y, e),
       { x: 0, y: 0 }
     );
     return {
@@ -369,20 +377,20 @@ class V {
     };
   }
 }
-class tt {
+class it {
   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 });
+    h(this, "maxZoomLevel");
+    h(this, "image", null);
+    h(this, "rect", null);
+    h(this, "initialCenter", { x: 0, y: 0 });
+    h(this, "maxDimension", { width: 0 });
+    h(this, "minDimension", { initialWidth: 0, initialHeight: 0, minWidth: 0, closingWidth: 0 });
+    h(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);
+    h(this, "scale", 1);
+    h(this, "translate", { x: 0, y: 0 });
+    h(this, "onScale", null);
+    h(this, "animationTimestamp", 0);
     this.maxZoomLevel = t, this.onScale = e;
   }
   clean() {
@@ -396,10 +404,10 @@ class tt {
       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);
+    const e = parseFloat(t.dataset.vvwWidth), n = parseFloat(t.dataset.vvwHeight);
     this.minDimension = {
       initialWidth: e,
-      initialHeight: i,
+      initialHeight: n,
       minWidth: e * 0.1,
       closingWidth: e * 0.5
     }, this.accumulatedTranslate = { x: 0, y: 0 };
@@ -410,79 +418,79 @@ class tt {
   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})`);
   }
-  snapToTargetIfClose(t, e, i = 1) {
-    return Math.abs(t - e) <= i && (t = e), t;
+  snapToTargetIfClose(t, e, n = 1) {
+    return Math.abs(t - e) <= n && (t = e), t;
   }
   scaleMove(t, e) {
     if (!this.image) return;
     this.rect || (this.rect = this.image.getBoundingClientRect()), e || (e = this.initialCenter);
-    const i = this.snapToTargetIfClose(
-      z(this.rect.width * t, this.minDimension.minWidth, this.maxDimension.width),
+    const n = this.snapToTargetIfClose(
+      q(this.rect.width * t, this.minDimension.minWidth, this.maxDimension.width),
       this.minDimension.initialWidth
     );
     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, a = this.initialCenter.x - n, r = this.initialCenter.y - o, h = a * (1 - this.scale), c = r * (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 = "";
+      scale: n / (this.maxDimension.width / this.maxZoomLevel),
+      isMax: n >= this.maxDimension.width,
+      isMin: n <= this.minDimension.initialWidth
+    }), this.scale = C(n / this.rect.width);
+    const i = this.rect.left + this.rect.width / 2, o = this.rect.top + this.rect.height / 2, a = this.initialCenter.x - i, r = this.initialCenter.y - o, l = a * (1 - this.scale), c = r * (1 - this.scale), m = e.x - this.initialCenter.x, p = e.y - this.initialCenter.y;
+    this.translate.x = C(l + m), this.translate.y = C(c + p), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, n <= 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: a }) => {
-      if (i)
+    let e = 0, n = !1;
+    const i = ({ x: o, y: a }) => {
+      if (n)
         return;
       if (Math.abs(o) < 1e-3 && Math.abs(a) < 1e-3)
         return this.normalize();
       o *= 0.9, a *= 0.9;
       const r = this.image.getBoundingClientRect();
-      this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + a), r.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - r.right) * 0.1, o *= 0.7), r.left > window.innerWidth / 2 && (this.translate.x -= (r.left - window.innerWidth / 2) * 0.1, o *= 0.7), r.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - r.bottom) * 0.1, a *= 0.7), r.top > window.innerHeight / 2 && (this.translate.y -= (r.top - window.innerHeight / 2) * 0.1, a *= 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: a }));
+      this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + a), r.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - r.right) * 0.1, o *= 0.7), r.left > window.innerWidth / 2 && (this.translate.x -= (r.left - window.innerWidth / 2) * 0.1, o *= 0.7), r.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - r.bottom) * 0.1, a *= 0.7), r.top > window.innerHeight / 2 && (this.translate.y -= (r.top - window.innerHeight / 2) * 0.1, a *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => i({ x: o, y: a }));
     };
-    return n({
+    return i({
       x: t.movementX,
       y: t.movementY
     }), () => {
-      i = !0, cancelAnimationFrame(e), this.normalize(!1);
+      n = !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(
+    const e = Date.now(), n = this.image;
+    this.rect.width * t < this.minDimension.closingWidth || n.width < Math.floor(this.minDimension.initialWidth) || (n.addEventListener(
       "transitionend",
       () => {
-        this.animationTimestamp === e && i && (i.style.transition = "", this.normalize());
+        this.animationTimestamp === e && n && (n.style.transition = "", this.normalize());
       },
       { once: !0 }
-    ), i.style.transition || (i.style.transition = "all 222ms ease"), this.animationTimestamp = e, this.scaleMove(t));
+    ), n.style.transition || (n.style.transition = "all 222ms ease"), this.animationTimestamp = e, this.scaleMove(t));
   }
   normalize(t = !0) {
     if (!this.image || !this.rect) return;
     const e = this.snapToTargetIfClose(
       this.rect.width * this.scale,
       this.minDimension.initialWidth
-    ), i = this.snapToTargetIfClose(
+    ), n = this.snapToTargetIfClose(
       this.rect.height * this.scale,
       this.minDimension.initialHeight
     );
-    if (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)
+    if (this.image.style.width = `${e}px`, this.image.style.height = `${n}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(
+        const i = this.image;
+        i && (i.addEventListener(
           "transitionend",
           () => {
-            n && (this.clean(), this.rect = null);
+            i && (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%");
+        ), i.style.transition = "all 222ms ease", i.style.width = `${this.minDimension.initialWidth}px`, i.style.height = `${this.minDimension.initialHeight}px`, i.style.left = "50%", i.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) {
+      let i = !1;
+      if (this.rect.right < window.innerWidth / 2 && (i = !0, this.accumulatedTranslate.x += window.innerWidth / 2 - this.rect.right), this.rect.left > window.innerWidth / 2 && (i = !0, this.accumulatedTranslate.x -= this.rect.left - window.innerWidth / 2), this.rect.bottom < window.innerHeight / 2 && (i = !0, this.accumulatedTranslate.y += window.innerHeight / 2 - this.rect.bottom), this.rect.top > window.innerHeight / 2 && (i = !0, this.accumulatedTranslate.y -= this.rect.top - window.innerHeight / 2), i) {
         const o = this.image;
         o.addEventListener(
           "transitionend",
@@ -496,12 +504,12 @@ class tt {
     }
   }
 }
-class et {
+class nt {
   constructor() {
-    l(this, "fiolast", {});
+    h(this, "fiolast", {});
   }
   // first in out
-  fio(t, e, i = 50) {
+  fio(t, e, n = 50) {
     const o = Date.now() - (this.fiolast[e] ?? 0), a = () => {
       this.fiolast[e] = Date.now(), t();
     };
@@ -509,38 +517,40 @@ class et {
       a();
       return;
     }
-    o >= i && a();
+    o >= n && a();
   }
 }
 const x = {
   somethingOpened: null
 };
-class it {
+class st {
   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) => {
+    h(this, "options");
+    h(this, "elements");
+    h(this, "isReducedMotion");
+    h(this, "currentIndex", -1);
+    h(this, "currentChildren", null);
+    h(this, "setupFunction", _);
+    h(this, "initFunction", G);
+    h(this, "closeFunction", Q);
+    h(this, "transitionFunction", tt);
+    h(this, "pointers", null);
+    h(this, "imageState");
+    h(this, "imageTransitions", /* @__PURE__ */ new Map());
+    h(this, "root", null);
+    h(this, "imageContainer", null);
+    h(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) => {
+    h(this, "defaultOnClickHandler", (t) => t.preventDefault());
+    h(this, "abortController", null);
+    h(this, "throttle", new nt());
+    h(this, "lastSwapTime", 0);
+    h(this, "transitionCleanup", null);
+    h(this, "isZoomedIn", !1);
+    h(this, "onKeyDown", (t) => {
       switch (t.key) {
         case "ArrowLeft":
           t.preventDefault(), this.prev();
@@ -559,7 +569,7 @@ class it {
           break;
       }
     });
-    l(this, "onScroll", (t) => {
+    h(this, "onScroll", (t) => {
       t.preventDefault();
       const e = t.deltaY;
       this.imageState.setInitialCenter({
@@ -567,29 +577,29 @@ class it {
         y: t.clientY
       }), e < 0 ? this.zoomIn() : e > 0 && this.zoomOut();
     });
-    l(this, "onResizeHandler", () => {
+    h(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 (H(i, n, o, !1), n.classList.contains("vvw--loaded")) {
-          const { width: a, height: r } = S(n);
-          n.style.setProperty("--vvw-current-w", `${a}px`), n.style.setProperty("--vvw-current-h", `${r}px`), n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = r.toString();
+        const n = this.currentChildren.images[e], i = t.querySelector("img.vvw-img-hi"), o = t.querySelector("img.vvw-img-lo");
+        if (W(n, i, o, !1), i.classList.contains("vvw--loaded")) {
+          const { width: a, height: r } = M(i);
+          i.style.setProperty("--vvw-current-w", `${a}px`), i.style.setProperty("--vvw-current-h", `${r}px`), i.dataset.vvwWidth = a.toString(), i.dataset.vvwHeight = r.toString();
         }
       });
     });
     /// POINTERS
-    l(this, "pointerListeners", []);
-    l(this, "getInternalPointerListener", () => {
+    h(this, "pointerListeners", []);
+    h(this, "getInternalPointerListener", () => {
       const t = this.imageState;
-      let e = 0, i = !1, n = () => {
+      let e = 0, n = !1, i = () => {
       };
       return (o) => {
         if (o.event === "down") {
-          if (n(), this.isZoomedIn && o.pointers.length === 1) {
+          if (i(), this.isZoomedIn && o.pointers.length === 1) {
             const a = this.pointers.getCentroid();
             t.setInitialCenter(a);
           }
           if (o.pointers.length >= 2) {
-            i = !0;
+            n = !0;
             const a = this.pointers.getCentroid();
             e = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]), t.setInitialCenter(a);
           }
@@ -598,87 +608,97 @@ class it {
             const a = this.pointers.getCentroid();
             t.move(a);
           }
-          if (o.pointers.length >= 2 && i) {
+          if (o.pointers.length >= 2 && n) {
             const a = this.pointers.getCentroid(), r = this.pointers.getPointerDistance(o.pointers[0], o.pointers[1]);
             t.scaleMove(r / e, a);
           }
-        } else (o.event === "up" || o.event === "cancel") && (i || this.isZoomedIn) && (i ? (i = !1, t.normalize() && requestAnimationFrame(() => {
+        } else (o.event === "up" || o.event === "cancel") && (n || this.isZoomedIn) && (n ? (n = !1, t.normalize() && requestAnimationFrame(() => {
           this.close();
-        })) : this.isZoomedIn && o.pointers.length === 0 && (n = t.moveAndNormalize(o.pointer)));
+        })) : this.isZoomedIn && o.pointers.length === 0 && (i = t.moveAndNormalize(o.pointer)));
         this.pointerListeners.forEach(
           (a) => a({
             ...o,
-            hasInternalExecution: this.isZoomedIn || i
+            hasInternalExecution: this.isZoomedIn || n,
+            abortController: this.abortController
           })
         );
       };
     });
     this.elements = t, this.options = {
-      ...T,
+      ...H,
       ...e,
       controls: {
-        ...T.controls,
+        ...H.controls,
         ...e.controls
       }
-    }, this.imageState = new tt(
+    }, this.imageState = new it(
       this.options.maxZoomLevel,
-      (i) => {
-        var n, o, a, r, 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(
+      (n) => {
+        var i, o, a, r, l, c;
+        n.isMin ? (this.isZoomedIn = !1, (i = this.qs(".vvw-zoom-out")) == null || i.setAttribute("disabled", "true"), (o = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || o.style.setProperty(
           "pointer-events",
           "none"
         )) : (this.isZoomedIn = !0, (a = this.qs(".vvw-zoom-out")) == null || a.removeAttribute("disabled"), (r = this.qs('.vvw-item[data-vvw-idx="' + this.currentIndex + '"]')) == null || r.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");
+        )), n.isMax ? (l = this.qs(".vvw-zoom-in")) == null || l.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);
+    ), 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((n, i) => {
+      n.dataset.vistaIdx = i.toString(), n.addEventListener("click", this.defaultOnClickHandler), n.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: a } = this.getChildElements(i, n), r = this.imageContainer, h = this.currentChildren, c = {
-      htmlElements: { from: h.htmls, to: o },
-      images: { from: h.images, to: a },
+    const n = this.options.preloads || 0, i = this.currentIndex, { htmls: o, images: a } = this.getChildElements(n, i), r = this.imageContainer, l = this.currentChildren, c = {
+      htmlElements: { from: l.htmls, to: o },
+      images: { from: l.images, to: a },
       index: { from: t, to: this.currentIndex },
       via: e || { next: !1, prev: !1 },
       vistaView: this
     };
     this.setupFunction(c), this.currentChildren = { htmls: o, images: a }, this.displayActiveIndex();
-    const m = this.abortController.signal, w = performance.now(), b = w - this.lastSwapTime < this.options.rapidLimit;
-    let p = null;
-    b || (p = await this.transitionFunction(c, m)), this.lastSwapTime = w;
-    const d = o[Math.floor(o.length / 2)].dataset.vvwIdx, v = r.querySelector(
+    const m = this.abortController.signal;
+    if (performance.now() - this.lastSwapTime < this.options.rapidLimit) {
+      r.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((b) => {
+        r.appendChild(b);
+      }), this.lastSwapTime = performance.now(), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
+      return;
+    }
+    const g = this.transitionFunction(c, m);
+    g && (this.transitionCleanup = g.cleanup, await g.transitionEnded), this.lastSwapTime = performance.now();
+    const d = o[Math.floor(o.length / 2)].dataset.vvwIdx, u = r.querySelector(
       `.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`
-    ), g = v.getAttribute("style") || "", f = v.classList.contains("vvw--loaded"), u = v.width, L = v.height;
-    this.imageState.reset(), r.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 && L && (y.classList.add("vvw--loaded"), y.classList.add("vvw--ready"), y.setAttribute("style", g), y.width = u, y.height = L, y.dataset.vvwWidth = u.toString(), y.dataset.vvwHeight = L.toString()), r.appendChild(E), y.classList.contains("vvw--ready") && (this.imageState.setCurrentImage(y), this.imageState.setInitialCenter());
+    ), y = this.imageTransitions.get(u);
+    this.imageTransitions.delete(u);
+    const f = u.getAttribute("style") || "", v = u.classList.contains("vvw--loaded"), E = u.classList.contains("vvw--ready"), I = u.width, T = u.height;
+    this.imageState.reset(), r.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((b) => {
+      const w = b.querySelector("img.vvw-img-hi");
+      b.dataset.vvwPos === "0" && !m.aborted && f && I && T && (v && (w.classList.add("vvw--loaded"), w.dataset.vvwWidth = u.dataset.vvwWidth || "", w.dataset.vvwHeight = u.dataset.vvwHeight || ""), E && (w.classList.add("vvw--ready"), w.width = I, w.height = T), w.setAttribute("style", f)), r.appendChild(b), b.dataset.vvwPos === "0" && !m.aborted && E ? (this.imageState.setCurrentImage(w), this.imageState.setInitialCenter()) : b.dataset.vvwPos === "0" && !m.aborted && f && I && T && v && y && (this.imageTransitions.set(w, y), this.transitionImage(w, () => {
+        this.imageState.setCurrentImage(w), this.imageState.setInitialCenter(), w.classList.add("vvw--ready");
+      }));
     }), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
   }
   getChildElements(t, e) {
-    const i = [], n = [];
+    const n = [], i = [];
     for (let o = -t; o <= t; o++) {
-      const a = (e + o + this.elements.length) % this.elements.length, r = this.elements[a], h = r instanceof HTMLImageElement ? r : r instanceof HTMLAnchorElement && r.querySelector("img") || void 0, c = r instanceof HTMLElement ? {
+      const a = (e + o + this.elements.length) % this.elements.length, r = this.elements[a], l = r instanceof HTMLImageElement ? r : r instanceof HTMLAnchorElement && r.querySelector("img") || void 0, c = r instanceof HTMLElement ? {
         index: a,
-        imageElm: h instanceof HTMLImageElement ? h : void 0,
+        imageElm: l instanceof HTMLImageElement ? l : void 0,
         anchorElm: r instanceof HTMLAnchorElement ? r : void 0,
         src: r.dataset.vistaviewSrc || r.getAttribute("href") || r.getAttribute("src") || "",
-        thumb: r.dataset.vistaviewThumb || (h instanceof HTMLImageElement ? h.getAttribute("src") : void 0) || r.getAttribute("href") || void 0,
-        alt: h instanceof HTMLImageElement && h.getAttribute("alt") || void 0
+        thumb: r.dataset.vistaviewThumb || (l instanceof HTMLImageElement ? l.getAttribute("src") : void 0) || r.getAttribute("href") || void 0,
+        alt: l instanceof HTMLImageElement && l.getAttribute("alt") || void 0
       } : {
         index: a,
         ...r
       };
-      n.push(c), i.push(j(c, o));
+      i.push(c), n.push(U(c, o));
     }
     return {
-      htmls: i,
-      images: n
+      htmls: n,
+      images: i
     };
   }
   zoomIn() {
@@ -702,45 +722,56 @@ class it {
   displayActiveIndex() {
     var a;
     const t = this.currentIndex;
-    this.elements instanceof NodeList && this.elements.forEach((r, h) => {
-      r.style.opacity = "", h === t && (r.style.opacity = "0");
+    this.elements instanceof NodeList && this.elements.forEach((r, l) => {
+      r.style.opacity = "", l === t && (r.style.opacity = "0");
     });
-    const e = this.qs(".vvw-index"), i = `${t + 1}`, n = `${this.elements.length}`;
-    e && (e.textContent = `${i} / ${n}`);
+    const e = this.qs(".vvw-index"), n = `${t + 1}`, i = `${this.elements.length}`;
+    e && (e.textContent = `${n} / ${i}`);
     const o = this.qs(".vvw-desc");
     if (o) {
-      const r = (a = this.currentChildren) == null ? void 0 : a.images.find((c) => c.index === t), h = (r == null ? void 0 : r.alt) || "";
-      h ? (o.textContent = h, o.setAttribute("aria-label", `Image ${i} of ${n}: ${h}`)) : (o.textContent = "", o.setAttribute("aria-label", `Image ${i} of ${n}`));
+      const r = (a = this.currentChildren) == null ? void 0 : a.images.find((c) => c.index === t), l = (r == null ? void 0 : r.alt) || "";
+      l ? (o.textContent = l, o.setAttribute("aria-label", `Image ${n} of ${i}: ${l}`)) : (o.textContent = "", o.setAttribute("aria-label", `Image ${n} of ${i}`));
     }
   }
+  transitionImage(t, e) {
+    const n = this.imageTransitions.get(t);
+    n && requestAnimationFrame(() => {
+      const { current: i, target: o } = n, a = {
+        width: i.width + (o.width - i.width) * 0.1,
+        height: i.height + (o.height - i.height) * 0.1,
+        radius: i.radius + (o.radius - i.radius) * 0.1
+      };
+      Math.abs(a.width - o.width) < 0.5 && Math.abs(a.height - o.height) < 0.5 && Math.abs(a.radius - o.radius) < 0.5 ? (t.style.setProperty("--vvw-current-w", `${o.width}px`), t.style.setProperty("--vvw-current-h", `${o.height}px`), t.style.setProperty("--vvw-current-radius", `${o.radius}px`), this.imageTransitions.delete(t), e()) : (t.style.setProperty("--vvw-current-w", `${a.width}px`), t.style.setProperty("--vvw-current-h", `${a.height}px`), t.style.setProperty("--vvw-current-radius", `${a.radius}px`), this.imageTransitions.set(t, { current: a, target: o }), this.transitionImage(t, e));
+    });
+  }
   waitForImagesToLoad() {
-    this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((i) => {
-      const n = i, o = () => {
-        var r;
-        n.width = n.naturalWidth, n.height = n.naturalHeight;
-        const a = (r = n.parentElement) == null ? void 0 : r.matches(`[data-vvw-idx="${this.currentIndex}"]`);
-        n.addEventListener(
-          "transitionend",
-          () => {
-            a && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
+    this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((n) => {
+      const i = n, o = () => {
+        var c;
+        i.width = i.naturalWidth, i.height = i.naturalHeight;
+        const a = (c = i.parentElement) == null ? void 0 : c.matches(`[data-vvw-idx="${this.currentIndex}"]`), { width: r, height: l } = M(i);
+        i.dataset.vvwWidth = r.toString(), i.dataset.vvwHeight = l.toString(), i.classList.add("vvw--loaded"), this.imageTransitions.set(i, {
+          current: {
+            width: i.style.getPropertyValue("--vvw-current-w") ? parseFloat(i.style.getPropertyValue("--vvw-current-w")) : 0,
+            height: i.style.getPropertyValue("--vvw-current-h") ? parseFloat(i.style.getPropertyValue("--vvw-current-h")) : 0,
+            radius: i.style.getPropertyValue("--vvw-current-radius") ? parseFloat(i.style.getPropertyValue("--vvw-current-radius")) : 0
           },
-          { once: !0 }
-        ), n.classList.add("vvw--loaded"), requestAnimationFrame(() => {
-          const { width: h, height: c } = S(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");
+          target: { width: r, height: l, radius: 0 }
+        }), this.transitionImage(i, () => {
+          a && (this.imageState.setCurrentImage(i), this.imageState.setInitialCenter()), i.classList.add("vvw--ready");
         });
       };
-      if (n.complete && n.naturalWidth !== 0) {
+      if (i.complete && i.naturalWidth !== 0) {
         o();
         return;
       }
-      n.addEventListener("load", () => {
+      i.addEventListener("load", () => {
         o();
-      }), n.addEventListener("error", () => {
+      }), i.addEventListener("error", () => {
         var r;
-        n.classList.add("vvw--loaderror");
+        i.classList.add("vvw--loaderror");
         const a = document.createElement("p");
-        a.className = "vvw-img-err", a.setAttribute("role", "alert"), a.textContent = "Error loading image", (r = n.parentNode) == null || r.appendChild(a);
+        a.className = "vvw-img-err", a.setAttribute("role", "alert"), a.textContent = "Error loading image", (r = i.parentNode) == null || r.appendChild(a);
       });
     });
   }
@@ -752,17 +783,17 @@ class it {
   }
   /// OPEN
   open(t = 0) {
-    var c, m, w, b, p;
+    var c, m, p, L, g;
     if (x.somethingOpened)
       return;
     x.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
-    const e = U({
+    const e = K({
       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 ?? 0}`), this.options.arrowOnSmallScreens && this.root.classList.add("vvw-arrow-sm");
-    const i = this.options.preloads || 0, n = t, { images: o, htmls: a } = this.getChildElements(i, n), r = {
+    const n = this.options.preloads || 0, i = t, { images: o, htmls: a } = this.getChildElements(n, i), r = {
       htmlElements: { from: null, to: a },
       images: { from: null, to: o },
       index: { from: null, to: this.currentIndex },
@@ -771,11 +802,11 @@ class it {
     };
     this.setupFunction(r), this.currentChildren = { htmls: a, images: o }, a.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()), (b = this.qs(".vvw-prev>button")) == null || b.addEventListener("click", () => this.prev()), (p = this.qs(".vvw-next>button")) == null || p.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new V({
+    }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (m = this.qs(".vvw-zoom-in")) == null || m.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (L = this.qs(".vvw-prev>button")) == null || L.addEventListener("click", () => this.prev()), (g = this.qs(".vvw-next>button")) == null || g.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new et({
       elm: this.imageContainer,
       listeners: [this.getInternalPointerListener()]
     });
-    const h = {};
+    const l = {};
     [
       ...this.options.controls.topLeft || [],
       ...this.options.controls.topRight || [],
@@ -784,26 +815,24 @@ class it {
       ...this.options.controls.bottomLeft || [],
       ...this.options.controls.bottomRight || []
     ].forEach((d) => {
-      typeof d != "string" && (h[d.name] = d);
+      typeof d != "string" && (l[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], L = this.currentChildren.images.find(
-          (E) => E.index === this.currentIndex
+      const u = d;
+      u.addEventListener("click", (y) => {
+        const f = y.currentTarget.dataset.vvwControl, v = l[f], E = this.currentChildren.images.find(
+          (I) => I.index === this.currentIndex
         );
-        u && L && (u.onClick.constructor.name === "AsyncFunction" ? (v.classList.add("vvw--loading"), u.onClick(L, this).finally(() => {
-          v.classList.remove("vvw--loading");
-        })) : u.onClick(L, this));
+        v && E && (v.onClick.constructor.name === "AsyncFunction" ? (u.classList.add("vvw--loading"), v.onClick(E, this).finally(() => {
+          u.classList.remove("vvw--loading");
+        })) : v.onClick(E, this));
       });
     }), 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();
+          var u;
+          (u = this.root) == null || u.classList.add("vvw--settled"), this.waitForImagesToLoad(), 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(r);
@@ -812,11 +841,11 @@ class it {
   /// CLOSE
   async close(t = !0) {
     x.somethingOpened === this && this.root && (t ? await new Promise((e) => {
-      let n = 0;
+      let i = 0;
       this.root.addEventListener("transitionend", (o) => {
-        o.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((a) => {
+        o.target === this.root && (i++, i === 2 && this.elements instanceof NodeList && this.elements.forEach((a) => {
           a.style.opacity = "";
-        }), n === 3 && e(null));
+        }), i === 3 && e(null));
       }), this.root.classList.add("vvw--closing");
     }) : this.elements instanceof NodeList && this.elements.forEach((e) => {
       e.style.opacity = "";
@@ -845,48 +874,48 @@ class it {
   view(t, e) {
     if (x.somethingOpened !== this || t < 0 || t >= this.elements.length)
       return;
-    const i = this.currentIndex;
+    const n = this.currentIndex;
     this.currentIndex = t;
-    const n = this.abortController;
-    n == null || n.abort(), this.abortController = new AbortController(), this.swap(i, e);
+    const i = this.abortController;
+    i == null || i.abort(), this.abortController = new AbortController(), this.swap(n, e);
   }
 }
-function nt(s) {
+function ot(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 i = t[e];
-      if (!(i.dataset.vistaviewSrc || i.getAttribute("href") || i.getAttribute("src") || ""))
+      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 i = 0; i < e.length; i++)
-      if (!e[i].src)
-        return `Element at index ${i} is missing 'src' attribute.`;
+    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 }) {
+function at({ elements: s, ...t }) {
   if (!s) throw new Error("No elements");
-  let e = nt(s);
+  let e = ot(s);
   if (typeof e == "string")
     return null;
-  const i = new it(e, t);
+  const n = new st(e, t);
   return {
-    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);
+    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 {
-  T as DefaultOptions,
-  ot as vistaView,
-  N as vistaViewDownload
+  H as DefaultOptions,
+  at as vistaView,
+  j as vistaViewDownload
 };