vistaview 0.3.7 → 0.3.9

package/dist/vistaview.js

@@ -1,6 +1,6 @@
 var X = Object.defineProperty;
 var Y = (s, t, i) => t in s ? X(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
-var w = (s, t, i) => Y(s, typeof t != "symbol" ? t + "" : t, i);
+var y = (s, t, i) => Y(s, typeof t != "symbol" ? t + "" : t, i);
 function z(s) {
   const t = getComputedStyle(s), i = s.getBoundingClientRect();
   return {
@@ -16,11 +16,11 @@ function z(s) {
     naturalHeight: s.naturalHeight
   };
 }
-let S = null;
+let P = null;
 function V() {
-  return S || (window.trustedTypes || (window.trustedTypes = {
+  return P || (window.trustedTypes || (window.trustedTypes = {
     createPolicy: (s, t) => t
-  }), S = window.trustedTypes.createPolicy("vistaView-policy", {
+  }), P = window.trustedTypes.createPolicy("vistaView-policy", {
     createHTML: (s) => s,
     // HTML is generated by us, not user input
     createScript: () => {
@@ -29,7 +29,7 @@ function V() {
     createScriptURL: () => {
       throw new Error("Not implemented");
     }
-  }), S);
+  }), P);
 }
 function W(s) {
   const i = V().createHTML(s), n = document.createElement("template");
@@ -40,30 +40,30 @@ function W(s) {
 function R(s) {
   return s && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim()) && s;
 }
-function B(s) {
-  const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), a = s.naturalWidth, d = s.naturalHeight;
+function _(s) {
+  const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), r = s.naturalWidth, d = s.naturalHeight;
   if (!i)
     return { width: n, height: e };
-  if (!a || !d)
+  if (!r || !d)
     return { width: n, height: e };
-  const o = a / d, l = n / e;
+  const o = r / d, a = n / e;
   switch (i) {
     case "fill":
       return { width: n, height: e };
     case "none":
-      return { width: a, height: d };
+      return { width: r, height: d };
     case "contain":
-      return o > l ? { width: n, height: n / o } : { width: e * o, height: e };
+      return o > a ? { width: n, height: n / o } : { width: e * o, height: e };
     case "cover":
-      return o < l ? { width: n, height: n / o } : { width: e * o, height: e };
+      return o < a ? { width: n, height: n / o } : { width: e * o, height: e };
     case "scale-down": {
-      const h = { width: a, height: d }, r = o > l ? { width: n, height: n / o } : { width: e * o, height: e };
-      return r.width <= h.width && r.height <= h.height ? r : h;
+      const c = { width: r, height: d }, l = o > a ? { width: n, height: n / o } : { width: e * o, height: e };
+      return l.width <= c.width && l.height <= c.height ? l : c;
     }
   }
   return { width: n, height: e };
 }
-function H(s) {
+function T(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");
@@ -72,31 +72,31 @@ function H(s) {
       width: n,
       height: e
     };
-  const a = n / e, d = t / i;
-  let o, l;
-  return a > d ? (o = t, l = t / a) : (l = i, o = i * a), {
+  const r = n / e, d = t / i;
+  let o, a;
+  return r > d ? (o = t, a = t / r) : (a = i, o = i * r), {
     width: o,
-    height: l
+    height: a
   };
 }
-function T(s, t) {
-  const i = window.innerHeight, n = window.innerWidth, e = s, a = t, d = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (a - i) / 2) + i / 2, l = -d, h = -o;
+function H(s, t) {
+  const i = window.innerHeight, n = window.innerWidth, e = s, r = t, d = Math.max(0, (e - n) / 2) + n / 2, o = Math.max(0, (r - i) / 2) + i / 2, a = -d, c = -o;
   return {
     maxDiffX: d,
-    minDiffY: h,
+    minDiffY: c,
     maxDiffY: o,
-    minDiffX: l
+    minDiffX: a
   };
 }
-const _ = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', F = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', N = '<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>', U = '<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>', K = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', j = '<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>';
+const B = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', F = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>', N = '<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>', U = '<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>', K = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', j = '<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 G() {
   return {
     name: "download",
     icon: j,
     onClick: async (s) => {
-      var a;
+      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 = ((a = n.split("/").pop()) == null ? void 0 : a.split("?")[0].split("#")[0]) || "download", document.body.appendChild(e), e.click(), document.body.removeChild(e);
+      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);
     }
   };
 }
@@ -119,18 +119,18 @@ function J(s) {
   return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
 }
 function q(s, t) {
-  var r, c;
-  const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((r = s.imageElm) == null ? void 0 : r.naturalWidth) || "", a = ((c = s.imageElm) == null ? void 0 : c.naturalHeight) || "", d = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", l = document.createElement("div");
-  l.className = "vistaview-item", l.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, l.dataset.vistaviewIndex = s.index.toString();
-  const h = W(`<img class="vistaview-image-lowres"
+  var l, h;
+  const i = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (i == null ? void 0 : i.objectFit) || "", e = ((l = s.imageElm) == null ? void 0 : l.naturalWidth) || "", r = ((h = s.imageElm) == null ? void 0 : h.naturalHeight) || "", d = (i == null ? void 0 : i.width) || "", o = (i == null ? void 0 : i.height) || "", a = document.createElement("div");
+  a.className = "vistaview-item", a.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, a.dataset.vistaviewIndex = s.index.toString();
+  const c = W(`<img class="vistaview-image-lowres"
     style="${n ? `object-fit:${n};` : ""}${d ? `width:${d};` : ""}${o ? `height:${o};` : ""}"
     src="${s.thumb || s.src}" 
     alt="${s.alt || ""}"
     ${e ? `width="${e}"` : ""}
-    ${a ? `height="${a}"` : ""}
+    ${r ? `height="${r}"` : ""}
   />
   <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
-  return l.appendChild(h), l;
+  return a.appendChild(c), a;
 }
 function Q({
   controls: s,
@@ -143,67 +143,67 @@ function Q({
     <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>${_}</button></div>
+    <div class="vistaview-prev-btn vistaview-ui"><button>${B}</button></div>
     <div class="vistaview-next-btn vistaview-ui"><button>${F}</button></div>
     </div>
     </div>`
   );
 }
-let A = null, $ = null, Z = null, M = null;
+let A = null, M = null, Z = null, $ = null;
 function tt(s) {
   O(s);
   const t = s.imageContainerElm, i = s.elements.length;
   if (!t) return;
-  let n = 0, e = 0, a = 0, d = 0, o = null, l = 0, h = !1;
-  A = (r) => {
-    r.preventDefault(), r.stopPropagation(), s.isZoomed === !1 && (h = !0, n = r.pageX, e = r.pageY, a = r.pageX, d = r.pageY, l = Date.now(), o = null, t.setPointerCapture(r.pointerId));
-  }, $ = (r) => {
-    if (r.preventDefault(), r.stopPropagation(), s.isZoomed !== !1 || !h) return;
-    const c = r.pageX - n, m = r.pageY - e;
-    a = r.pageX, d = r.pageY, Math.abs(c) >= Math.abs(m) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${c}px`), o = !0) : Math.abs(m) > Math.abs(c) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${m}px`), o = !1);
-  }, M = (r) => {
-    if (r.preventDefault(), r.stopPropagation(), t.releasePointerCapture(r.pointerId), s.isZoomed !== !1 || !h) return;
-    h = !1, o = null;
-    const c = Array.from(t.querySelectorAll(".vistaview-item"));
-    t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), c.forEach((m) => {
+  let n = 0, e = 0, r = 0, d = 0, o = null, a = 0, c = !1;
+  A = (l) => {
+    l.preventDefault(), l.stopPropagation(), s.isZoomed === !1 && (c = !0, n = l.pageX, e = l.pageY, r = l.pageX, d = l.pageY, a = Date.now(), o = null, t.setPointerCapture(l.pointerId));
+  }, M = (l) => {
+    if (l.preventDefault(), l.stopPropagation(), s.isZoomed !== !1 || !c) return;
+    const h = l.pageX - n, m = l.pageY - e;
+    r = l.pageX, d = l.pageY, Math.abs(h) >= Math.abs(m) && (o === null || o === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${h}px`), o = !0) : Math.abs(m) > Math.abs(h) && (o === null || o === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${m}px`), o = !1);
+  }, $ = (l) => {
+    if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !c) return;
+    c = !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((m) => {
       m.style.transition = "", m.style.translate = "";
     });
-  }, Z = (r) => {
-    if (r.preventDefault(), r.stopPropagation(), t.releasePointerCapture(r.pointerId), s.isZoomed !== !1 || !h) return;
-    h = !1;
-    const c = Array.from(t.querySelectorAll(".vistaview-item")), m = a - n, f = d - e, u = Date.now() - l, v = m / u, y = f / u, p = s.options.touchSpeedThreshold || 0.5, x = c.find(
+  }, Z = (l) => {
+    if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !c) return;
+    c = !1;
+    const h = Array.from(t.querySelectorAll(".vistaview-item")), m = r - n, v = d - e, f = Date.now() - a, u = m / f, w = v / f, g = s.options.touchSpeedThreshold || 0.5, b = h.find(
       (E) => E.dataset.vistaviewPos === "0"
-    ), b = Number(x.dataset.vistaviewIndex);
-    function g() {
-      c[0].removeEventListener("transitionend", g), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), c.forEach((E) => {
+    ), I = Number(b.dataset.vistaviewIndex);
+    function p() {
+      h[0].removeEventListener("transitionend", p), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), h.forEach((E) => {
         E.style.transition = "", E.style.translate = "";
       });
     }
-    function I(E = "0%", L = "0%") {
-      c.forEach((D) => {
+    function x(E = "0%", L = "0%") {
+      h.forEach((D) => {
         D.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, D.style.translate = `${E} ${L}`;
       });
     }
-    if (v < -p || v > p) {
+    if (u < -g || u > g) {
       let E = function() {
-        c[0].removeEventListener("transitionend", E), setTimeout(() => {
+        h[0].removeEventListener("transitionend", E), setTimeout(() => {
           const L = s.isReducedMotion;
-          s.isReducedMotion = !0, g(), s.view(
-            v < -p ? (b + 1) % i : (b - 1 + i) % i,
+          s.isReducedMotion = !0, p(), s.view(
+            u < -g ? (I + 1) % i : (I - 1 + i) % i,
             {
-              next: v < -p,
-              prev: v > p
+              next: u < -g,
+              prev: u > g
             }
           ), s.isReducedMotion = L;
         }, 100);
       };
-      I(v < -p ? "-100%" : "100%"), c[0].addEventListener("transitionend", E);
-    } else y < -p || y > p ? (s.close(), I("0%", "0%")) : (c[0].addEventListener("transitionend", g), I("0%"));
-  }, t.addEventListener("pointermove", $), t.addEventListener("pointerup", Z), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", M);
+      x(u < -g ? "-100%" : "100%"), h[0].addEventListener("transitionend", E);
+    } else w < -g || w > g ? (s.close(), x("0%", "0%")) : (h[0].addEventListener("transitionend", p), x("0%"), u === 0 && w === 0 && s.zoomIn());
+  }, t.addEventListener("pointermove", M), t.addEventListener("pointerup", Z), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", $);
 }
 function O(s) {
   const t = s.imageContainerElm;
-  t && ($ && t.removeEventListener("pointermove", $), Z && t.removeEventListener("pointerup", Z), A && t.removeEventListener("pointerdown", A), M && t.removeEventListener("pointercancel", M));
+  t && (M && t.removeEventListener("pointermove", M), Z && t.removeEventListener("pointerup", Z), A && t.removeEventListener("pointerdown", A), $ && t.removeEventListener("pointercancel", $));
 }
 const et = (s) => {
   tt(s);
@@ -220,60 +220,49 @@ const et = (s) => {
   htmlElements: { from: s, to: t },
   images: { to: i },
   via: { next: n, prev: e },
-  options: a,
+  options: r,
   isReducedMotion: d
   // index: { from: fromIndex, to: toIndex },
 }, o) => {
   if (!i) throw new Error("VistaView: images is null in defaultTransition()");
-  const l = s.filter((h) => h.dataset.vistaviewPos === "0" || (n ? h.dataset.vistaviewPos === "1" : h.dataset.vistaviewPos === "-1"));
-  d || await new Promise((h, r) => {
-    let c = 0;
+  if (d)
+    return;
+  const a = s.filter((c) => c.dataset.vistaviewPos === "0" || (n ? c.dataset.vistaviewPos === "1" : c.dataset.vistaviewPos === "-1"));
+  await new Promise((c, l) => {
+    let h = 0;
     if (o.aborted) {
-      r(new P("Transition aborted"));
+      l(new S("Transition aborted"));
       return;
     }
-    const m = (f) => {
-      if (o.aborted) {
-        r(new P("Transition aborted"));
-        return;
-      }
-      if (f.currentTarget.removeEventListener("transitionend", m), c++, c < l.length) return;
-      const u = t == null ? void 0 : t.find((g) => g.dataset.vistaviewPos === "0"), v = u ? Number(u.dataset.vistaviewIndex) : 0, y = l.find((g) => Number(g.dataset.vistaviewIndex) === v), p = y == null ? void 0 : y.querySelector(
+    const m = (v) => {
+      if (o.aborted)
+        return l(new S("Transition aborted"));
+      if (v.currentTarget.removeEventListener("transitionend", m), h++, h < a.length) return;
+      const f = t == null ? void 0 : t.find((p) => p.dataset.vistaviewPos === "0"), u = f ? Number(f.dataset.vistaviewIndex) : 0, w = a.find((p) => Number(p.dataset.vistaviewIndex) === u), g = w == null ? void 0 : w.querySelector(
         ".vistaview-image-highres"
       );
-      if (!p) {
-        r(new Error("current image element not found"));
-        return;
-      }
-      if (!p.classList.contains("vistaview-image-loaded")) {
-        h(0);
-        return;
-      }
-      if (u == null || u.classList.add("vistaview-image-loaded"), p.classList.contains("vistaview-image-settled")) {
-        u == null || u.classList.add("vistaview-image-settled"), h(0);
-        return;
-      }
-      let x = 0;
-      const b = setInterval(() => {
-        if (o.aborted) {
-          clearInterval(b), r(new P("Transition aborted"));
-          return;
-        }
-        if (x++, x > a.animationDurationBase / 20 * 1.5) {
-          clearInterval(b), h(0);
-          return;
-        }
-        p.classList.contains("vistaview-image-settled") && (u == null || u.classList.add("vistaview-image-settled"), clearInterval(b), h(0));
+      if (!g)
+        return l(new Error("current image element not found"));
+      if (!g.classList.contains("vistaview-image-loaded") || g.classList.contains("vistaview-image-settled"))
+        return c(0);
+      let b = 0;
+      const I = setInterval(() => {
+        if (o.aborted)
+          return clearInterval(I), l(new S("Transition aborted"));
+        if (b++, b > r.animationDurationBase / 20 * 1.5)
+          return clearInterval(I), c(0);
+        if (g.classList.contains("vistaview-image-settled"))
+          return f == null || f.classList.add("vistaview-image-settled"), clearInterval(I), c(0);
       }, 20);
     };
-    l.forEach((f) => {
-      f.style.transition = `translate ${a.animationDurationBase * 0.5}ms ease-out`, f.style.translate = n ? "-100%" : e ? "100%" : "0%", f.addEventListener("transitionend", m);
+    a.forEach((v) => {
+      v.style.transition = `translate ${r.animationDurationBase * 0.5}ms ease-out`, v.style.translate = n ? "-100%" : e ? "100%" : "0%", v.addEventListener("transitionend", m);
     });
   });
 }, st = (s) => {
   s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), O(s);
 };
-class P extends Error {
+class S extends Error {
   constructor(t) {
     super(t), this.name = "VistaViewTransitionAbortedError";
   }
@@ -299,17 +288,20 @@ const k = {
 };
 class ot {
   constructor(t, i) {
-    w(this, "options");
-    w(this, "elements");
-    w(this, "isReducedMotion");
-    w(this, "currentIndex", {
+    y(this, "options");
+    y(this, "elements");
+    y(this, "isReducedMotion");
+    y(this, "currentIndex", {
       _value: null,
       _vistaView: null,
       _via: { next: !1, prev: !1 },
       set value(t) {
-        var n;
+        var n, e, r;
         const i = this._value;
-        this._value = t, (n = this._vistaView) == null || n.swap(i, this._value);
+        this._value = t;
+        for (const d in (n = this._vistaView) == null ? void 0 : n.transitionAbortControllers)
+          (e = this._vistaView) == null || e.transitionAbortControllers[d].abort();
+        (r = this._vistaView) == null || r.swap(i, this._value);
       },
       get value() {
         return this._value;
@@ -321,29 +313,30 @@ class ot {
         this._via = t;
       }
     });
-    w(this, "rootElm", null);
-    w(this, "imageContainerElm", null);
-    w(this, "customControls", {});
-    w(this, "currentImages", null);
-    w(this, "currentItems", null);
-    w(this, "navActive", !0);
-    w(this, "isZoomed", !1);
-    w(this, "onClickElements", (t) => {
+    y(this, "rootElm", null);
+    y(this, "imageContainerElm", null);
+    y(this, "customControls", {});
+    y(this, "currentImages", null);
+    y(this, "currentItems", null);
+    y(this, "navActive", !0);
+    y(this, "isZoomed", !1);
+    y(this, "onClickElements", (t) => {
       t.preventDefault();
       const i = t.currentTarget;
       i.dataset.vistaviewIndex && this.open(parseInt(i.dataset.vistaviewIndex));
     });
-    w(this, "defaultOnClickHandler", (t) => t.preventDefault());
-    w(this, "onResizeHandler", null);
-    w(this, "onKeyDown", null);
-    w(this, "userSetup", it);
-    w(this, "userTransition", nt);
-    w(this, "userClose", st);
-    w(this, "userInit", et);
-    w(this, "onZoomedPointerDown", null);
-    w(this, "onZoomedPointerMove", null);
-    w(this, "onZoomedPointerUp", null);
-    w(this, "transitionAbortController", null);
+    y(this, "defaultOnClickHandler", (t) => t.preventDefault());
+    y(this, "onResizeHandler", null);
+    y(this, "onKeyDown", null);
+    y(this, "userSetup", it);
+    y(this, "userTransition", nt);
+    y(this, "userClose", st);
+    y(this, "userInit", et);
+    y(this, "onZoomedPointerDown", null);
+    y(this, "onZoomedPointerMove", null);
+    y(this, "onZoomedPointerUp", null);
+    y(this, "transitionAbortControllers", {});
+    y(this, "loadImageTimeout", null);
     this.elements = t, this.currentIndex._vistaView = this, this.options = {
       ...k,
       ...i || {},
@@ -356,14 +349,14 @@ class ot {
     });
   }
   async swap(t, i) {
-    var l, h;
+    var l, h, m;
     if (!C.somethingOpened || t === i || t === null) return;
-    if (this.transitionAbortController && this.transitionAbortController.abort(), !this.imageContainerElm)
+    if (!this.imageContainerElm)
       throw new Error("VistaView: imageContainerElm is null in swap()");
     this.setIndexDisplay(), this.clearZoom();
-    const { images: n, positions: e } = this.getCurrentIndexes(i), a = this.getImages(n), d = a.map((r, c) => q(r, e[c])), o = {
+    const { images: n, positions: e } = this.getCurrentIndexes(i), r = this.getImages(n), d = r.map((v, f) => q(v, e[f])), o = {
       htmlElements: { from: this.currentItems, to: d },
-      images: { from: this.currentImages, to: a },
+      images: { from: this.currentImages, to: r },
       index: { from: t, to: i },
       via: this.currentIndex.via,
       container: this.imageContainerElm,
@@ -373,84 +366,96 @@ class ot {
       isZoomed: this.isZoomed,
       options: this.options
     };
-    this.userSetup(o), this.transitionAbortController = new AbortController();
+    this.userSetup(o), (l = this.currentItems) == null || l.forEach((v) => {
+      v.classList.add("vistaview-image--ending");
+    });
+    const a = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    this.transitionAbortControllers[a] = new AbortController();
     try {
-      await this.userTransition(o, this.transitionAbortController.signal);
-    } catch (r) {
-      r instanceof P || console.error(r);
+      await this.userTransition(o, this.transitionAbortControllers[a].signal);
+    } catch (v) {
+      v instanceof S || console.warn(v);
     }
-    this.imageContainerElm.innerHTML = "", d.forEach((r) => {
-      const c = r.dataset.vistaviewPos, m = r.dataset.vistaviewIndex;
-      if (c === "0") {
-        const f = this.currentItems.find((y) => y.dataset.vistaviewIndex === m), u = r.querySelector(".vistaview-image-highres"), v = f == null ? void 0 : f.querySelector(".vistaview-image-highres");
-        v && (u.setAttribute("class", v.getAttribute("class") || ""), u.setAttribute("style", v.getAttribute("style") || "")), this.imageContainerElm.appendChild(r);
-      } else
-        this.imageContainerElm.appendChild(r);
-    }), this.setInitialDimPos(), this.currentImages = a, this.currentItems = d, this.loadImages(), this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (h = (l = this.options).onImageView) == null || h.call(l, o);
+    delete this.transitionAbortControllers[a];
+    const c = d.find((v) => v.dataset.vistaviewPos === "0");
+    if (c) {
+      const v = c.dataset.vistaviewIndex, f = this.currentItems.find((w) => w.dataset.vistaviewIndex === v), u = f == null ? void 0 : f.querySelector(".vistaview-image-highres");
+      if (u) {
+        const w = c.querySelector(
+          ".vistaview-image-highres"
+        );
+        w.setAttribute("class", u.getAttribute("class") || ""), w.setAttribute("style", u.getAttribute("style") || ""), w.classList.remove("vistaview-image--zooming"), w.classList.remove("vistaview-image-settled"), u.classList.contains("vistaview-image-loaded") && !u.classList.contains("vistaview-image-settled") && w.classList.remove("vistaview-image-loaded");
+      }
+    }
+    this.imageContainerElm.innerHTML = "", d.forEach((v) => {
+      this.imageContainerElm.appendChild(v);
+    }), this.setInitialDimPos(), this.currentImages = r, this.currentItems = d, this.setCurrentDescription(), this.updateZoomButtonsVisibility(), (m = (h = this.options).onImageView) == null || m.call(h, o), this.loadImageTimeout && clearTimeout(this.loadImageTimeout), this.loadImageTimeout = setTimeout(() => {
+      this.loadImages();
+    }, 333);
   }
   //
   setZoomed(t) {
-    var i, n, e, a, d, o;
+    var i, n, e, r, d, o;
     if (this.isZoomed !== t) {
       if (this.isZoomed) {
-        let l = this.isZoomed;
-        if (l.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((i = l.parentElement) == null || i.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = l.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((e = l.parentElement) == null || e.removeEventListener("pointerup", this.onZoomedPointerUp), this.onZoomedPointerUp = null), l == null || l.style.removeProperty("--pointer-diff-x"), l == null || l.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
-          l == null || l.classList.remove("vistaview-image--zooming");
+        let a = this.isZoomed;
+        if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((i = a.parentElement) == null || i.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = a.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((e = a.parentElement) == null || e.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) {
         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 l = !1, h = 0, r = 0, c = 0, m = 0, f = 0, u = 0;
-        this.onZoomedPointerDown = (v) => {
-          v.preventDefault(), v.stopPropagation(), l = !0, h = v.pageX, r = v.pageY, t.setPointerCapture(v.pointerId);
-        }, this.onZoomedPointerMove = (v) => {
-          if (!l) return;
-          v.preventDefault(), f = v.pageX - h, u = v.pageY - r;
-          const y = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), p = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: x, minDiffY: b, maxDiffY: g, minDiffX: I } = T(
-            y,
-            p
-          ), E = Math.min(x, Math.max(I, c + f)), L = Math.min(g, Math.max(b, m + u));
-          f = E - c, u = L - m, t == null || t.style.setProperty("--pointer-diff-x", `${E}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`);
-        }, this.onZoomedPointerUp = (v) => {
-          l = !1, t.releasePointerCapture(v.pointerId), c += f, m += u, f = 0, u = 0;
-        }, (a = t == null ? void 0 : t.parentElement) == null || a.addEventListener("pointerdown", this.onZoomedPointerDown), (d = t == null ? void 0 : t.parentElement) == null || d.addEventListener("pointermove", this.onZoomedPointerMove), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerup", this.onZoomedPointerUp);
+        let a = !1, c = 0, l = 0, h = 0, m = 0, v = 0, f = 0;
+        this.onZoomedPointerDown = (u) => {
+          u.preventDefault(), u.stopPropagation(), a = !0, c = u.pageX, l = u.pageY, t.setPointerCapture(u.pointerId);
+        }, this.onZoomedPointerMove = (u) => {
+          if (!a) return;
+          u.preventDefault(), v = u.pageX - c, f = u.pageY - l;
+          const w = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), g = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: b, minDiffY: I, maxDiffY: p, minDiffX: x } = H(
+            w,
+            g
+          ), E = Math.min(b, Math.max(x, h + v)), L = Math.min(p, Math.max(I, m + f));
+          v = E - h, f = L - m, t == null || t.style.setProperty("--pointer-diff-x", `${E}px`), t == null || t.style.setProperty("--pointer-diff-y", `${L}px`);
+        }, this.onZoomedPointerUp = (u) => {
+          a = !1, t.releasePointerCapture(u.pointerId), h += v, m += f, v = 0, f = 0;
+        }, (r = t == null ? void 0 : t.parentElement) == null || r.addEventListener("pointerdown", this.onZoomedPointerDown), (d = t == null ? void 0 : t.parentElement) == null || d.addEventListener("pointermove", this.onZoomedPointerMove), (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerup", this.onZoomedPointerUp);
         return;
       }
     }
   }
   zoomIn() {
-    var a, d, o, l, h;
-    const t = (a = this.rootElm) == null ? void 0 : a.querySelector(
+    var r, d, o, a, c;
+    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 r = Math.min(i + this.options.zoomStep, e);
-      t.style.width = `${r}px`;
-      const c = r / i * n;
-      t.style.height = `${c}px`, (o = (d = this.rootElm) == null ? void 0 : d.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = r.toString(), t.dataset.vistaviewCurrentHeight = c.toString(), r === e && ((h = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-in-btn")) == null || h.setAttribute("disabled", "true"));
+      const l = Math.min(i + this.options.zoomStep, e);
+      t.style.width = `${l}px`;
+      const h = l / i * n;
+      t.style.height = `${h}px`, (o = (d = this.rootElm) == null ? void 0 : d.querySelector("button.vistaview-zoom-out-btn")) == null || o.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = l.toString(), t.dataset.vistaviewCurrentHeight = h.toString(), l === e && ((c = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-in-btn")) == null || c.setAttribute("disabled", "true"));
     }
   }
   zoomOut() {
-    var d, o, l, h, r;
+    var d, o, a, c, l;
     const t = (d = this.rootElm) == null ? void 0 : d.querySelector(
       '[data-vistaview-pos="0"] .vistaview-image-highres'
-    ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, a = (c) => {
-      c.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", a));
+    ), 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", a), t.classList.add("vistaview-image--zooming-out"), i && e && i > e) {
-      const c = Math.max(i - this.options.zoomStep, e);
-      t.style.width = `${c}px`;
-      const m = c / i * n;
-      t.style.height = `${m}px`, (l = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || l.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = c.toString(), t.dataset.vistaviewCurrentHeight = m.toString();
-      const { maxDiffX: f, minDiffY: u, maxDiffY: v, minDiffX: y } = T(c, m);
-      let p = parseInt(
+    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 m = h / i * n;
+      t.style.height = `${m}px`, (a = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || a.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = h.toString(), t.dataset.vistaviewCurrentHeight = m.toString();
+      const { maxDiffX: v, minDiffY: f, maxDiffY: u, minDiffX: w } = H(h, m);
+      let g = parseInt(
         (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
-      ), x = parseInt(
+      ), b = parseInt(
         (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
       );
-      p = Math.min(f, Math.max(y, p)), x = Math.min(v, Math.max(u, x)), t == null || t.style.setProperty("--pointer-diff-x", `${p}px`), t == null || t.style.setProperty("--pointer-diff-y", `${x}px`), c === e && ((r = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || r.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));
+      g = Math.min(v, Math.max(w, g)), b = Math.min(u, Math.max(f, b)), t == null || t.style.setProperty("--pointer-diff-x", `${g}px`), t == null || t.style.setProperty("--pointer-diff-y", `${b}px`), h === e && ((l = (c = this.rootElm) == null ? void 0 : c.querySelector("button.vistaview-zoom-out-btn")) == null || l.setAttribute("disabled", "true"), t.removeAttribute("data-vistaview-current-width"), t.removeAttribute("data-vistaview-current-height"), t.removeAttribute("data-vistaview-initial-width"), t.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
     }
   }
   clearZoom() {
@@ -459,13 +464,13 @@ class ot {
     return t.map((i, n) => {
       const e = this.elements[i];
       if (e instanceof HTMLElement) {
-        const a = e.querySelector("img"), d = e.getAttribute("href") || "", o = e.getAttribute("src") || "", l = e.dataset.vistaviewSrc || d || o || (a == null ? void 0 : a.src) || "", h = e.dataset.vistaviewAlt || e.getAttribute("alt") || (a == null ? void 0 : a.alt) || "", r = e.dataset.vistaviewThumb || (a == null ? void 0 : a.src) || d || o || "";
+        const r = e.querySelector("img"), d = e.getAttribute("href") || "", o = e.getAttribute("src") || "", a = e.dataset.vistaviewSrc || d || o || (r == null ? void 0 : r.src) || "", c = e.dataset.vistaviewAlt || e.getAttribute("alt") || (r == null ? void 0 : r.alt) || "", l = e.dataset.vistaviewThumb || (r == null ? void 0 : r.src) || d || o || "";
         return {
           index: t[n],
-          src: l,
-          alt: h,
-          thumb: r,
-          imageElm: e instanceof HTMLImageElement ? e : a,
+          src: a,
+          alt: c,
+          thumb: l,
+          imageElm: e instanceof HTMLImageElement ? e : r,
           anchorElm: e instanceof HTMLAnchorElement ? e : void 0
         };
       } else
@@ -473,12 +478,12 @@ class ot {
     });
   }
   setInitialDimPos() {
-    var h, r;
+    var c, l;
     if (!this.rootElm) return;
-    const t = (h = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : h.dataset.vistaviewIndex, i = ((r = this.currentImages) == null ? void 0 : r.find((c) => c.index === Number(t))) || null;
+    const t = (c = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : c.dataset.vistaviewIndex, i = ((l = this.currentImages) == null ? void 0 : l.find((h) => h.index === Number(t))) || null;
     if (!i) return;
-    const n = i.imageElm ? z(i.imageElm) : void 0, e = i.anchorElm ? z(i.anchorElm) : void 0, a = (e == null ? void 0 : e.width) || (n == null ? void 0 : n.width) || 0, d = (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) + a / 2, l = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + d / 2;
-    this.rootElm.style.setProperty("--vistaview-container-initial-width", a + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", d + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", l + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
+    const n = i.imageElm ? z(i.imageElm) : void 0, e = i.anchorElm ? z(i.anchorElm) : void 0, r = (e == null ? void 0 : e.width) || (n == null ? void 0 : n.width) || 0, d = (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, a = ((e == null ? void 0 : e.top) || (n == null ? void 0 : n.top) || 0) + d / 2;
+    this.rootElm.style.setProperty("--vistaview-container-initial-width", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", d + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", a + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", o + "px"), this.rootElm.style.setProperty(
       "--vistaview-image-border-radius",
       R(e == null ? void 0 : e.borderRadius) || R(n == null ? void 0 : n.borderRadius) || "0px"
     );
@@ -491,13 +496,13 @@ class ot {
     if (!t) return;
     const i = this;
     function n() {
-      var r, c;
-      const a = (r = i.rootElm) == null ? void 0 : r.querySelector(
+      var l, h;
+      const r = (l = i.rootElm) == null ? void 0 : l.querySelector(
         "button.vistaview-zoom-in-btn"
-      ), d = (c = i.rootElm) == null ? void 0 : c.querySelector(
+      ), d = (h = i.rootElm) == null ? void 0 : h.querySelector(
         "button.vistaview-zoom-out-btn"
-      ), o = parseInt(t.style.width) || t.width, l = t.naturalWidth * i.options.maxZoomLevel, h = o < l && l > 0;
-      a && (a.style.display = h ? "" : "none"), d && (d.style.display = h ? "" : "none");
+      ), o = parseInt(t.style.width) || t.width, a = t.naturalWidth * i.options.maxZoomLevel, c = o < a && a > 0;
+      r && (r.style.display = c ? "" : "none"), d && (d.style.display = c ? "" : "none");
     }
     t.complete && t.naturalWidth > 0 ? n() : t.addEventListener("load", n);
   }
@@ -508,35 +513,37 @@ class ot {
     ).forEach((i, n) => {
       const e = i, d = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
       if (d) {
-        const { width: h, height: r } = B(d);
-        o.w = Math.min(d.width, h), o.h = Math.min(d.height, r);
+        const { width: c, height: l } = _(d);
+        o.w = Math.min(d.width, c), o.h = Math.min(d.height, l);
       }
-      const l = () => {
-        var r;
-        const h = () => {
-          var c;
+      const a = () => {
+        var l, h;
+        if ((l = e.parentElement) != null && l.classList.contains("vistaview-image--ending"))
+          return;
+        const c = () => {
+          var m;
           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(() => {
-            var y, p;
-            let m = 0;
+            var g, b, I;
+            if ((g = e.parentElement) != null && g.classList.contains("vistaview-image--ending"))
+              return;
+            let v = 0;
             const f = () => {
-              var x, b;
-              m++, !(m < 3) && (e.removeEventListener("transitionend", f), (b = (x = e.parentElement) == null ? void 0 : x.querySelector(".vistaview-image-lowres")) == null || b.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled"));
-            };
-            e.addEventListener("transitionend", f);
-            const { width: u, height: v } = H(e);
-            e.style.width = `${u}px`, e.style.height = `${v}px`, o.w && o.h && u === o.w && v === o.h ? ((p = (y = e.parentElement) == null ? void 0 : y.querySelector(".vistaview-image-lowres")) == null || p.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled")) : (e.style.width = `${u}px`, e.style.height = `${v}px`);
-          }, 100), (c = i.parentElement) != null && c.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
+              var p, x;
+              v++, !(v < 3) && (e.removeEventListener("transitionend", f), (x = (p = e.parentElement) == null ? void 0 : p.querySelector(".vistaview-image-lowres")) == null || x.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled"));
+            }, { width: u, height: w } = T(e);
+            o.w && o.h && u === o.w && w === o.h ? ((I = (b = e.parentElement) == null ? void 0 : b.querySelector(".vistaview-image-lowres")) == null || I.classList.add("vistaview-image--hidden"), e.classList.add("vistaview-image-settled")) : (e.addEventListener("transitionend", f), e.style.width = `${u}px`, e.style.height = `${w}px`);
+          }, 100), (m = i.parentElement) != null && m.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
         };
-        if ((r = this.rootElm) != null && r.classList.contains("vistaview--opened"))
-          h();
+        if ((h = this.rootElm) != null && h.classList.contains("vistaview--opened"))
+          c();
         else {
-          const c = setInterval(() => {
-            var m;
-            (m = this.rootElm) != null && m.classList.contains("vistaview--opened") && (clearInterval(c), h());
+          const m = setInterval(() => {
+            var v;
+            (v = this.rootElm) != null && v.classList.contains("vistaview--opened") && (clearInterval(m), c());
           }, 50);
         }
       };
-      e.complete && e.naturalWidth > 0 ? l() : e.onload = l;
+      e.complete && e.naturalWidth > 0 ? a() : e.onload = a;
     });
   }
   setIndexDisplay() {
@@ -555,10 +562,10 @@ class ot {
         t,
         ...Array.from({ length: i }, (d, o) => (t + 1 + o) % n)
       ])
-    ], a = n < 1 || !i ? [0] : e.map((d, o) => o - Math.floor(e.length / 2));
+    ], r = n < 1 || !i ? [0] : e.map((d, o) => o - Math.floor(e.length / 2));
     return {
       images: e,
-      positions: a
+      positions: r
     };
   }
   setKeyboardListeners() {
@@ -590,13 +597,13 @@ class ot {
         ".vistaview-image-highres.vistaview-image-loaded"
       );
       t == null || t.forEach((n) => {
-        const e = n, { width: a, height: d } = H(e);
-        e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = a.toString(), e.dataset.vistaviewInitialHeight = d.toString()) : (e.style.width = `${a}px`, e.style.height = `${d}px`);
+        const e = n, { width: r, height: d } = T(e);
+        e.classList.contains("vistaview-image--zooming") ? (e.dataset.vistaviewInitialWidth = r.toString(), e.dataset.vistaviewInitialHeight = d.toString()) : (e.style.width = `${r}px`, e.style.height = `${d}px`);
       });
     }, window.addEventListener("resize", this.onResizeHandler);
   }
   open(t = 0) {
-    var o, l, h, r, c, m, f, u, v, y, p, x, b;
+    var o, a, c, l, h, m, v, f, u, w, g, b, I;
     if (C.somethingOpened) {
       console.error("VistaView: another instance is already opened. Returning.");
       return;
@@ -611,9 +618,9 @@ class ot {
     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((g, I) => q(g, n[I]));
+    const e = this.currentImages.map((p, x) => q(p, n[x]));
     this.currentItems = e;
-    const a = {
+    const r = {
       htmlElements: { from: null, to: this.currentItems },
       images: { from: null, to: this.currentImages },
       index: { from: null, to: t },
@@ -625,29 +632,29 @@ class ot {
       isZoomed: this.isZoomed,
       options: this.options
     };
-    this.userSetup(a), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((g) => {
-      this.imageContainerElm.appendChild(g);
+    this.userSetup(r), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((p) => {
+      this.imageContainerElm.appendChild(p);
     });
     let d = 0;
-    this.rootElm.addEventListener("animationend", (g) => {
-      var I;
-      g.currentTarget === this.rootElm && (d++, d >= 2 && ((I = this.rootElm) == null || I.classList.add("vistaview--opened")));
-    }), (l = this.rootElm.querySelector(".vistaview-close-btn")) == null || l.addEventListener("click", () => this.close()), (h = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || h.addEventListener("click", () => this.zoomIn()), (r = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || r.addEventListener("click", () => this.zoomOut()), (c = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || c.addEventListener("click", () => this.prev()), (m = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || m.addEventListener("click", () => this.next()), [
+    this.rootElm.addEventListener("animationend", (p) => {
+      var x;
+      p.currentTarget === this.rootElm && (d++, d >= 2 && ((x = this.rootElm) == null || x.classList.add("vistaview--opened")));
+    }), (a = this.rootElm.querySelector(".vistaview-close-btn")) == null || a.addEventListener("click", () => this.close()), (c = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || c.addEventListener("click", () => this.zoomIn()), (l = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || l.addEventListener("click", () => this.zoomOut()), (h = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || h.addEventListener("click", () => this.prev()), (m = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || m.addEventListener("click", () => this.next()), [
       ...this.options.controls.topLeft || [],
       ...this.options.controls.topRight || [],
       ...this.options.controls.topCenter || [],
       ...this.options.controls.bottomCenter || [],
       ...this.options.controls.bottomLeft || [],
       ...this.options.controls.bottomRight || []
-    ].forEach((g) => {
-      typeof g != "string" && (this.customControls[g.name] = g);
-    }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((g) => {
-      g.addEventListener("click", (I) => {
-        const E = this.customControls[I.currentTarget.dataset.vistaviewCustomControl], L = this.currentImages.find(
+    ].forEach((p) => {
+      typeof p != "string" && (this.customControls[p.name] = p);
+    }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((p) => {
+      p.addEventListener("click", (x) => {
+        const E = this.customControls[x.currentTarget.dataset.vistaviewCustomControl], L = this.currentImages.find(
           (D) => D.index === this.currentIndex.value
         );
-        E && L && (E.onClick.constructor.name === "AsyncFunction" ? (g.classList.add("vistaview-button--loading"), E.onClick(L).finally(() => {
-          g.classList.remove("vistaview-button--loading");
+        E && L && (E.onClick.constructor.name === "AsyncFunction" ? (p.classList.add("vistaview-button--loading"), E.onClick(L).finally(() => {
+          p.classList.remove("vistaview-button--loading");
         })) : E.onClick(L));
       });
     }), this.options.animationDurationBase && this.rootElm.style.setProperty(
@@ -656,16 +663,16 @@ class ot {
     ), 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 && ((f = this.rootElm.querySelector(".vistaview-prev-btn")) == null || f.classList.add("vistaview-ui--none"), (u = this.rootElm.querySelector(".vistaview-next-btn")) == null || u.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), (p = (y = this.options).onOpen) == null || p.call(y, a), (b = (x = this.options).onImageView) == null || b.call(x, a);
+    ), this.setInitialDimPos(), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((v = this.rootElm.querySelector(".vistaview-prev-btn")) == null || v.classList.add("vistaview-ui--none"), (f = this.rootElm.querySelector(".vistaview-next-btn")) == null || f.classList.add("vistaview-ui--none"), (u = this.rootElm.querySelector(".vistaview-index-display")) == null || u.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (g = (w = this.options).onOpen) == null || g.call(w, r), (I = (b = this.options).onImageView) == null || I.call(b, r);
   }
   async close(t = !0) {
-    var n, e, a;
+    var n, e, r;
     if (C.somethingOpened !== this) return;
     t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((d) => {
-      var l;
+      var a;
       let o;
-      (l = this.rootElm) == null || l.addEventListener("transitionend", (h) => {
-        h.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
+      (a = this.rootElm) == null || a.addEventListener("transitionend", (c) => {
+        c.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
           d();
         }, 333));
       });
@@ -682,7 +689,10 @@ class ot {
       isZoomed: this.isZoomed,
       options: this.options
     };
-    this.userClose(this), (a = (e = this.options).onClose) == null || a.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.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null), this.transitionAbortController && (this.transitionAbortController.abort(), this.transitionAbortController = null), C.somethingOpened = null;
+    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.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null);
+    for (const d in this.transitionAbortControllers)
+      this.transitionAbortControllers[d].abort();
+    this.transitionAbortControllers = {}, C.somethingOpened = null;
   }
   destroy() {
     this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
@@ -738,7 +748,7 @@ function lt({ elements: s, ...t }) {
 }
 export {
   k as DefaultOptions,
-  P as VistaViewTransitionAbortedError,
+  S as VistaViewTransitionAbortedError,
   st as defaultClose,
   et as defaultInit,
   it as defaultSetup,