vistaview 0.3.5 → 0.3.6

package/dist/vistaview.js

@@ -1,26 +1,26 @@
-var Y = Object.defineProperty;
-var _ = (s, t, e) => t in s ? Y(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var p = (s, t, e) => _(s, typeof t != "symbol" ? t + "" : t, e);
-function A(s) {
-  const t = getComputedStyle(s), e = s.getBoundingClientRect();
+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);
+function z(s) {
+  const t = getComputedStyle(s), i = s.getBoundingClientRect();
   return {
     objectFit: t.objectFit,
     borderRadius: t.borderRadius,
     objectPosition: t.objectPosition,
     overflow: t.overflow,
-    top: e.top,
-    left: e.left,
-    width: e.width,
-    height: e.height,
+    top: i.top,
+    left: i.left,
+    width: i.width,
+    height: i.height,
     naturalWidth: s.naturalWidth,
     naturalHeight: s.naturalHeight
   };
 }
-let D = null;
-function B() {
-  return D || (window.trustedTypes || (window.trustedTypes = {
+let S = null;
+function V() {
+  return S || (window.trustedTypes || (window.trustedTypes = {
     createPolicy: (s, t) => t
-  }), D = window.trustedTypes.createPolicy("vistaView-policy", {
+  }), S = window.trustedTypes.createPolicy("vistaView-policy", {
     createHTML: (s) => s,
     // HTML is generated by us, not user input
     createScript: () => {
@@ -29,74 +29,74 @@ function B() {
     createScriptURL: () => {
       throw new Error("Not implemented");
     }
-  }), D);
+  }), S);
 }
-function k(s) {
-  const e = B().createHTML(s), n = document.createElement("template");
-  n.innerHTML = e;
-  const i = n.content;
-  return n.remove(), i;
+function W(s) {
+  const i = V().createHTML(s), n = document.createElement("template");
+  n.innerHTML = i;
+  const e = n.content;
+  return n.remove(), e;
 }
 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 H(s) {
-  const e = window.getComputedStyle(s).objectFit || "", { width: n, height: i } = s.getBoundingClientRect(), o = s.naturalWidth, h = s.naturalHeight;
-  if (!e)
-    return { width: n, height: i };
-  if (!o || !h)
-    return { width: n, height: i };
-  const r = o / h, a = n / i;
-  switch (e) {
+function B(s) {
+  const i = window.getComputedStyle(s).objectFit || "", { width: n, height: e } = s.getBoundingClientRect(), a = s.naturalWidth, d = s.naturalHeight;
+  if (!i)
+    return { width: n, height: e };
+  if (!a || !d)
+    return { width: n, height: e };
+  const o = a / d, l = n / e;
+  switch (i) {
     case "fill":
-      return { width: n, height: i };
+      return { width: n, height: e };
     case "none":
-      return { width: o, height: h };
+      return { width: a, height: d };
     case "contain":
-      return r > a ? { width: n, height: n / r } : { width: i * r, height: i };
+      return o > l ? { width: n, height: n / o } : { width: e * o, height: e };
     case "cover":
-      return r < a ? { width: n, height: n / r } : { width: i * r, height: i };
+      return o < l ? { width: n, height: n / o } : { width: e * o, height: e };
     case "scale-down": {
-      const c = { width: o, height: h }, l = r > a ? { width: n, height: n / r } : { width: i * r, height: i };
-      return l.width <= c.width && l.height <= c.height ? l : c;
+      const c = { width: a, height: d }, r = o > l ? { width: n, height: n / o } : { width: e * o, height: e };
+      return r.width <= c.width && r.height <= c.height ? r : c;
     }
   }
-  return { width: n, height: i };
+  return { width: n, height: e };
 }
-function P(s) {
-  const t = window.innerWidth, e = window.innerHeight, n = s.naturalWidth, i = s.naturalHeight;
-  if (!n || !i)
+function H(s) {
+  const t = window.innerWidth, i = window.innerHeight, n = s.naturalWidth, e = s.naturalHeight;
+  if (!n || !e)
     throw console.error("Error", s), new Error("Image natural dimensions are zero");
-  if (n < t && i < e)
+  if (n < t && e < i)
     return {
       width: n,
-      height: i
+      height: e
     };
-  const o = n / i, h = t / e;
-  let r, a;
-  return o > h ? (r = t, a = t / o) : (a = e, r = e * o), {
-    width: r,
-    height: a
+  const a = n / e, d = t / i;
+  let o, l;
+  return a > d ? (o = t, l = t / a) : (l = i, o = i * a), {
+    width: o,
+    height: l
   };
 }
-function W(s, t) {
-  const e = window.innerHeight, n = window.innerWidth, i = s, o = t, h = Math.max(0, (i - n) / 2) + n / 2, r = Math.max(0, (o - e) / 2) + e / 2, a = -h, c = -r;
+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, c = -o;
   return {
-    maxDiffX: h,
+    maxDiffX: d,
     minDiffY: c,
-    maxDiffY: r,
-    minDiffX: a
+    maxDiffY: o,
+    minDiffX: l
   };
 }
-const F = '<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>', V = '<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></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="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></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="8" x2="14" y1="11" y2="11"/></svg>', j = '<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>', K = '<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 _ = '<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: K,
+    icon: j,
     onClick: async (s) => {
-      var o;
-      const t = await fetch(s.src), e = await t.blob(), n = t.url, i = document.createElement("a");
-      i.href = URL.createObjectURL(e), i.download = ((o = n.split("/").pop()) == null ? void 0 : o.split("?")[0].split("#")[0]) || "download", document.body.appendChild(i), i.click(), document.body.removeChild(i);
+      var a;
+      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);
     }
   };
 }
@@ -104,11 +104,11 @@ function J(s) {
   if (typeof s == "string")
     switch (s) {
       case "zoomIn":
-        return `<button class="vistaview-zoom-in-btn">${U}</button>`;
+        return `<button class="vistaview-zoom-in-btn">${N}</button>`;
       case "zoomOut":
-        return `<button disabled class="vistaview-zoom-out-btn">${N}</button>`;
+        return `<button disabled class="vistaview-zoom-out-btn">${U}</button>`;
       case "close":
-        return `<button class="vistaview-close-btn">${j}</button>`;
+        return `<button class="vistaview-close-btn">${K}</button>`;
       case "indexDisplay":
         return '<div class="vistaview-index-display"></div>';
       case "description":
@@ -118,126 +118,172 @@ function J(s) {
     }
   return `<button data-vistaview-custom-control="${s.name}">${s.icon}</button>`;
 }
-function T(s, t) {
-  var l, d;
-  const e = s.imageElm ? getComputedStyle(s.imageElm) : null, n = (e == null ? void 0 : e.objectFit) || "", i = ((l = s.imageElm) == null ? void 0 : l.naturalWidth) || "", o = ((d = s.imageElm) == null ? void 0 : d.naturalHeight) || "", h = (e == null ? void 0 : e.width) || "", r = (e == null ? void 0 : e.height) || "", a = document.createElement("div");
-  a.className = "vistaview-item", a.dataset.vistaviewPos = `${t !== void 0 ? t : ""}`, a.dataset.vistaviewIndex = s.index.toString();
-  const c = k(`<img class="vistaview-image-lowres"
-    style="${n ? `object-fit:${n};` : ""}${h ? `width:${h};` : ""}${r ? `height:${r};` : ""}"
+function q(s, t) {
+  var r, h;
+  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 = ((h = s.imageElm) == null ? void 0 : h.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 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 || ""}"
-    ${i ? `width="${i}"` : ""}
-    ${o ? `height="${o}"` : ""}
+    ${e ? `width="${e}"` : ""}
+    ${a ? `height="${a}"` : ""}
   />
   <img class="vistaview-image-highres" src="${s.src}" alt="${s.alt || ""}" />`);
-  return a.appendChild(c), a;
+  return l.appendChild(c), l;
 }
 function Q({
   controls: s,
   isReducedMotion: t
 }) {
-  const e = (i) => i ? i.map(J).join("") : "";
-  return k(
+  const i = (e) => e ? e.map(J).join("") : "";
+  return W(
     `<div class="vistaview-root${t ? " vistaview--reduced-motion" : ""}" id="vistaview-root">
     <div class="vistaview-container">
     <div class="vistaview-image-container"></div>
-    <div class="vistaview-top-bar vistaview-ui"><div>${e(s == null ? void 0 : s.topLeft)}</div><div>${e(s == null ? void 0 : s.topCenter)}</div><div>${e(s == null ? void 0 : s.topRight)}</div></div>
-    <div class="vistaview-bottom-bar vistaview-ui"><div>${e(s == null ? void 0 : s.bottomLeft)}</div><div>${e(s == null ? void 0 : s.bottomCenter)}</div><div>${e(s == null ? void 0 : s.bottomRight)}</div></div>
-    <div class="vistaview-prev-btn vistaview-ui"><button>${F}</button></div>
-    <div class="vistaview-next-btn vistaview-ui"><button>${V}</button></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-next-btn vistaview-ui"><button>${F}</button></div>
     </div>
     </div>`
   );
 }
-let S = null, $ = null, M = null, Z = null;
+let A = null, $ = null, Z = null, M = null;
 function tt(s) {
   O(s);
-  const t = s.imageContainerElm, e = s.elements.length;
+  const t = s.imageContainerElm, i = s.elements.length;
   if (!t) return;
-  let n = 0, i = 0, o = 0, h = 0, r = null, a = 0, c = !1;
-  S = (l) => {
-    l.preventDefault(), l.stopPropagation(), s.isZoomed === !1 && (c = !0, n = l.pageX, i = l.pageY, o = l.pageX, h = l.pageY, a = Date.now(), r = null, t.setPointerCapture(l.pointerId));
-  }, $ = (l) => {
-    if (l.preventDefault(), l.stopPropagation(), s.isZoomed !== !1 || !c) return;
-    const d = l.pageX - n, u = l.pageY - i;
-    o = l.pageX, h = l.pageY, Math.abs(d) >= Math.abs(u) && (r === null || r === !0) ? (t.style.setProperty("--vistaview-pointer-diff-x", `${d}px`), r = !0) : Math.abs(u) > Math.abs(d) && (r === null || r === !1) && (t.style.setProperty("--vistaview-pointer-diff-y", `${u}px`), r = !1);
-  }, Z = (l) => {
-    if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !c) return;
-    c = !1, r = null;
-    const d = Array.from(t.querySelectorAll(".vistaview-item"));
-    t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), d.forEach((u) => {
-      u.style.transition = "", u.style.translate = "";
+  let n = 0, e = 0, a = 0, d = 0, o = null, l = 0, c = !1;
+  A = (r) => {
+    r.preventDefault(), r.stopPropagation(), s.isZoomed === !1 && (c = !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 || !c) return;
+    const h = r.pageX - n, m = r.pageY - e;
+    a = r.pageX, d = r.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);
+  }, M = (r) => {
+    if (r.preventDefault(), r.stopPropagation(), t.releasePointerCapture(r.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 = "";
     });
-  }, M = (l) => {
-    if (l.preventDefault(), l.stopPropagation(), t.releasePointerCapture(l.pointerId), s.isZoomed !== !1 || !c) return;
+  }, Z = (r) => {
+    if (r.preventDefault(), r.stopPropagation(), t.releasePointerCapture(r.pointerId), s.isZoomed !== !1 || !c) return;
     c = !1;
-    const d = Array.from(t.querySelectorAll(".vistaview-item")), u = o - n, v = h - i, g = Date.now() - a, m = u / g, E = v / g, f = s.options.touchSpeedThreshold || 0.5, y = d.find(
-      (x) => x.dataset.vistaviewPos === "0"
-    ), w = Number(y.dataset.vistaviewIndex), C = s.isReducedMotion;
-    function b() {
-      d[0].removeEventListener("transitionend", b), t.style.removeProperty("--vistaview-pointer-diff-x"), t.style.removeProperty("--vistaview-pointer-diff-y"), d.forEach((x) => {
-        x.style.transition = "", x.style.translate = "";
+    const h = 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, b = h.find(
+      (E) => E.dataset.vistaviewPos === "0"
+    ), x = Number(b.dataset.vistaviewIndex);
+    function g() {
+      h[0].removeEventListener("transitionend", g), 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(x = "0%", X = "0%") {
-      d.forEach((z) => {
-        z.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, z.style.translate = `${x} ${X}`;
+    function I(E = "0%", L = "0%") {
+      h.forEach((D) => {
+        D.style.transition = `translate ${s.options.animationDurationBase * 0.5}ms ease-out`, D.style.translate = `${E} ${L}`;
       });
     }
-    m < -f || m > f ? (d[0].addEventListener("transitionend", () => {
-      s.isReducedMotion = !0, b(), s.view(
-        m < -f ? (w + 1) % e : (w - 1 + e) % e,
-        {
-          next: m < -f,
-          prev: m > f
-        }
-      ), s.isReducedMotion = C;
-    }), I(m < -f ? "-100%" : "100%")) : E < -f || E > f ? (s.close(), I("0%", "0%")) : (d[0].addEventListener("transitionend", b), I("0%"));
-  }, t.addEventListener("pointermove", $), t.addEventListener("pointerup", M), t.addEventListener("pointerdown", S), t.addEventListener("pointercancel", Z);
+    if (v < -p || v > p) {
+      let E = function() {
+        h[0].removeEventListener("transitionend", E), setTimeout(() => {
+          const L = s.isReducedMotion;
+          s.isReducedMotion = !0, g(), s.view(
+            v < -p ? (x + 1) % i : (x - 1 + i) % i,
+            {
+              next: v < -p,
+              prev: v > p
+            }
+          ), s.isReducedMotion = L;
+        }, 100);
+      };
+      I(v < -p ? "-100%" : "100%"), h[0].addEventListener("transitionend", E);
+    } else y < -p || y > p ? (s.close(), I("0%", "0%")) : (h[0].addEventListener("transitionend", g), I("0%"));
+  }, t.addEventListener("pointermove", $), t.addEventListener("pointerup", Z), t.addEventListener("pointerdown", A), t.addEventListener("pointercancel", M);
 }
 function O(s) {
   const t = s.imageContainerElm;
-  t && ($ && t.removeEventListener("pointermove", $), M && t.removeEventListener("pointerup", M), S && t.removeEventListener("pointerdown", S), Z && t.removeEventListener("pointercancel", Z));
+  t && ($ && t.removeEventListener("pointermove", $), Z && t.removeEventListener("pointerup", Z), A && t.removeEventListener("pointerdown", A), M && t.removeEventListener("pointercancel", M));
 }
 const et = (s) => {
   tt(s);
 }, it = ({
   htmlElements: { to: s },
   index: { to: t },
-  elements: e
+  elements: i
 }) => {
-  e instanceof NodeList && t !== null && (e.forEach((n) => n.style.opacity = "1"), e[t].style.opacity = "0"), s && s.forEach((n) => {
-    const i = Number(n.dataset.vistaviewPos);
-    i !== 0 ? (n.style.zIndex = "1", n.style.left = 100 * i + "%") : n.style.zIndex = "2";
+  i instanceof NodeList && t !== null && (i.forEach((n) => n.style.opacity = "1"), i[t].style.opacity = "0"), s && s.forEach((n) => {
+    const e = Number(n.dataset.vistaviewPos);
+    e !== 0 ? (n.style.zIndex = "1", n.style.left = 100 * e + "%") : n.style.zIndex = "2";
   });
 }, nt = async ({
   htmlElements: { from: s, to: t },
-  images: { to: e },
-  via: { next: n, prev: i },
-  container: o,
-  options: h,
-  isReducedMotion: r
+  images: { to: i },
+  via: { next: n, prev: e },
+  options: a,
+  isReducedMotion: d
   // index: { from: fromIndex, to: toIndex },
-}) => {
-  if (!e) throw new Error("VistaView: images is null in defaultTransition()");
-  if (r)
-    return o.innerHTML = "", t.forEach((c) => {
-      o.appendChild(c);
-    }), e[e.length === 1 ? 0 : Math.floor(e.length / 2)];
-  const a = s.filter((c) => c.dataset.vistaviewPos === "0" || (n ? c.dataset.vistaviewPos === "1" : c.dataset.vistaviewPos === "-1"));
-  return await new Promise((c) => {
-    function l() {
-      o.innerHTML = "", t.forEach((d) => {
-        o.appendChild(d);
-      }), c(0);
+}, o) => {
+  if (console.log("defaultTransition called"), !i) throw new Error("VistaView: images is null in defaultTransition()");
+  const l = s.filter((c) => c.dataset.vistaviewPos === "0" || (n ? c.dataset.vistaviewPos === "1" : c.dataset.vistaviewPos === "-1"));
+  if (d) {
+    console.log("reduced motion, no transition");
+    return;
+  }
+  await new Promise((c, r) => {
+    let h = 0;
+    if (o.aborted) {
+      console.log("transition aborted before start"), r(new P("Transition aborted"));
+      return;
     }
-    a[a.length - 1].addEventListener("transitionend", l), a.forEach((d) => {
-      d.style.transition = `translate ${h.animationDurationBase * 0.5}ms ease-out`, d.style.translate = n ? "-100%" : i ? "100%" : "0%";
+    const m = (f) => {
+      if (o.aborted) {
+        console.log("transition aborted before start"), r(new P("Transition aborted"));
+        return;
+      }
+      if (f.currentTarget.removeEventListener("transitionend", m), h++, h < 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(
+        ".vistaview-image-highres"
+      );
+      if (!p) {
+        r(new Error("current image element not found"));
+        return;
+      }
+      if (!p.classList.contains("vistaview-image-loaded")) {
+        console.log("current image not loaded yet"), c(0);
+        return;
+      }
+      if (u == null || u.classList.add("vistaview-image-loaded"), p.classList.contains("vistaview-image-settled")) {
+        console.log("current image already settled"), u == null || u.classList.add("vistaview-image-settled"), c(0);
+        return;
+      }
+      let b = 0;
+      console.log("waiting for image to be settled...");
+      const x = setInterval(() => {
+        if (o.aborted) {
+          console.log("transition aborted during wait"), clearInterval(x), r(new P("Transition aborted"));
+          return;
+        }
+        if (b++, b > a.animationDurationBase / 20 * 1.5) {
+          console.log("timeout waiting for image to be settled"), clearInterval(x), c(0);
+          return;
+        }
+        p.classList.contains("vistaview-image-settled") && (console.log("image settled"), u == null || u.classList.add("vistaview-image-settled"), clearInterval(x), 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);
     });
-  }), e[e.length === 1 ? 0 : Math.floor(e.length / 2)];
+  });
 }, st = (s) => {
   s.elements instanceof NodeList && s.elements.forEach((t) => t.style.opacity = "1"), O(s);
-}, q = {
+};
+class P extends Error {
+  constructor(t) {
+    super(t), this.name = "VistaViewTransitionAbortedError";
+  }
+}
+const k = {
   detectReducedMotion: !0,
   // debug, don't remove
   // animationDurationBase: 1000,
@@ -253,22 +299,22 @@ const et = (s) => {
     topRight: ["zoomIn", "zoomOut", G(), "close"],
     bottomCenter: ["description"]
   }
-}, L = {
+}, C = {
   somethingOpened: null
 };
 class ot {
-  constructor(t, e) {
-    p(this, "options");
-    p(this, "elements");
-    p(this, "isReducedMotion");
-    p(this, "currentIndex", {
+  constructor(t, i) {
+    w(this, "options");
+    w(this, "elements");
+    w(this, "isReducedMotion");
+    w(this, "currentIndex", {
       _value: null,
       _vistaView: null,
       _via: { next: !1, prev: !1 },
       set value(t) {
         var n;
-        const e = this._value;
-        this._value = t, (n = this._vistaView) == null || n.swap(e, this._value);
+        const i = this._value;
+        this._value = t, (n = this._vistaView) == null || n.swap(i, this._value);
       },
       get value() {
         return this._value;
@@ -280,57 +326,52 @@ class ot {
         this._via = t;
       }
     });
-    p(this, "rootElm", null);
-    p(this, "imageContainerElm", null);
-    p(this, "customControls", {});
-    p(this, "currentImages", null);
-    p(this, "currentItems", null);
-    p(this, "navActive", !0);
-    p(this, "isZoomed", !1);
-    p(this, "onClickElements", []);
-    p(this, "onResizeHandler", null);
-    p(this, "onKeyDown", null);
-    p(this, "userSetup", it);
-    p(this, "userTransition", nt);
-    p(this, "userClose", st);
-    p(this, "userInit", et);
-    p(this, "onZoomedPointerDown", null);
-    p(this, "onZoomedPointerMove", null);
-    p(this, "onZoomedPointerUp", null);
+    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) => {
+      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);
     this.elements = t, this.currentIndex._vistaView = this, this.options = {
-      ...q,
-      ...e || {},
+      ...k,
+      ...i || {},
       controls: {
-        ...q.controls,
-        ...(e == null ? void 0 : e.controls) || {}
+        ...k.controls,
+        ...(i == null ? void 0 : i.controls) || {}
       }
-    }, this.options.initFunction && (this.userInit = this.options.initFunction), this.options.transitionFunction && (this.userTransition = this.options.transitionFunction), this.options.closeFunction && (this.userClose = this.options.closeFunction), this.options.initFunction && (this.userInit = this.options.initFunction), this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements instanceof NodeList && this.elements.forEach((n, i) => {
-      this.onClickElements.push((o) => {
-        o.preventDefault(), this.open(i);
-      }), n.addEventListener("click", this.onClickElements[i]);
+    }, this.options.initFunction && (this.userInit = this.options.initFunction), this.options.transitionFunction && (this.userTransition = this.options.transitionFunction), this.options.closeFunction && (this.userClose = this.options.closeFunction), this.options.initFunction && (this.userInit = this.options.initFunction), this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements instanceof NodeList && this.elements.forEach((n, e) => {
+      n.dataset.vistaviewIndex = e.toString(), n.addEventListener("click", this.defaultOnClickHandler), n.addEventListener("pointerup", this.onClickElements);
     });
   }
-  async swap(t, e) {
-    var c, l;
-    if (!L.somethingOpened || t === e || t === null || this.elements.length === 1) return;
-    if (!this.imageContainerElm)
+  async swap(t, i) {
+    var l, c;
+    if (!C.somethingOpened || t === i || t === null) return;
+    if (console.log("Swapping from", t, "to", i), this.transitionAbortController && this.transitionAbortController.abort(), !this.imageContainerElm)
       throw new Error("VistaView: imageContainerElm is null in swap()");
     this.setIndexDisplay(), this.clearZoom();
-    const { images: n, positions: i } = this.getCurrentIndexes(e), o = this.getImages(n), h = o.map((d, u) => T(d, i[u]));
-    h.forEach((d, u) => {
-      var m, E;
-      const v = d.querySelector(".vistaview-image-highres"), g = o[u].imageElm;
-      if (v.complete && v.naturalWidth > 0) {
-        const { width: f, height: y } = H(g);
-        f && y && (v.style.setProperty("--vistaview-fitted-width", `${f}px`), v.style.setProperty("--vistaview-fitted-height", `${y}px`)), v.classList.add("vistaview-image-loaded"), (m = d.querySelector(".vistaview-image-lowres")) == null || m.classList.add("vistaview-image--hidden");
-        const { width: w, height: C } = P(v);
-        v.style.width = `${w}px`, v.style.height = `${C}px`, v.width = v.naturalWidth, v.height = v.naturalHeight, (E = v.parentElement) != null && E.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
-      }
-    }), this.navActive = !1;
-    const r = {
-      htmlElements: { from: this.currentItems, to: h },
-      images: { from: this.currentImages, to: o },
-      index: { from: t, to: e },
+    const { images: n, positions: e } = this.getCurrentIndexes(i), a = this.getImages(n), d = a.map((r, h) => q(r, e[h]));
+    console.log("swap prepared");
+    const o = {
+      htmlElements: { from: this.currentItems, to: d },
+      images: { from: this.currentImages, to: a },
+      index: { from: t, to: i },
       via: this.currentIndex.via,
       container: this.imageContainerElm,
       elements: this.elements,
@@ -339,117 +380,131 @@ class ot {
       isZoomed: this.isZoomed,
       options: this.options
     };
-    this.userSetup(r);
-    const a = await this.userTransition(r);
-    this.navActive = !0, this.setInitialDimPos(a), this.currentImages = o, this.currentItems = h, this.loadImages(), this.setCurrentDescription(), (l = (c = this.options).onImageView) == null || l.call(c, r);
+    this.userSetup(o), this.transitionAbortController = new AbortController();
+    try {
+      await this.userTransition(o, this.transitionAbortController.signal);
+    } catch (r) {
+      r instanceof P || console.error(r);
+    }
+    console.log("swap completed"), this.imageContainerElm.innerHTML = "", d.forEach((r) => {
+      const h = r.dataset.vistaviewPos, m = r.dataset.vistaviewIndex;
+      if (h === "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(), (c = (l = this.options).onImageView) == null || c.call(l, o);
   }
   //
   setZoomed(t) {
-    var e, n, i, o, h, r;
+    var i, n, e, a, d, o;
     if (this.isZoomed !== t) {
       if (this.isZoomed) {
-        let a = this.isZoomed;
-        if (a.classList.remove("vistaview-image--zooming"), this.onZoomedPointerDown && ((e = a.parentElement) == null || e.removeEventListener("pointerdown", this.onZoomedPointerDown), this.onZoomedPointerDown = null), this.onZoomedPointerMove && ((n = a.parentElement) == null || n.removeEventListener("pointermove", this.onZoomedPointerMove), this.onZoomedPointerMove = null), this.onZoomedPointerUp && ((i = a.parentElement) == null || i.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");
+        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");
         }, 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 a = !1, c = 0, l = 0, d = 0, u = 0, v = 0, g = 0;
-        this.onZoomedPointerDown = (m) => {
-          m.preventDefault(), m.stopPropagation(), a = !0, c = m.pageX, l = m.pageY, t.setPointerCapture(m.pointerId);
-        }, this.onZoomedPointerMove = (m) => {
-          if (!a) return;
-          m.preventDefault(), v = m.pageX - c, g = m.pageY - l;
-          const E = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentWidth) || "0"), f = parseInt((t == null ? void 0 : t.dataset.vistaviewCurrentHeight) || "0"), { maxDiffX: y, minDiffY: w, maxDiffY: C, minDiffX: b } = W(
-            E,
-            f
-          ), I = Math.min(y, Math.max(b, d + v)), x = Math.min(C, Math.max(w, u + g));
-          v = I - d, g = x - u, t == null || t.style.setProperty("--pointer-diff-x", `${I}px`), t == null || t.style.setProperty("--pointer-diff-y", `${x}px`);
-        }, this.onZoomedPointerUp = (m) => {
-          a = !1, t.releasePointerCapture(m.pointerId), d += v, u += g, v = 0, g = 0;
-        }, (o = t == null ? void 0 : t.parentElement) == null || o.addEventListener("pointerdown", this.onZoomedPointerDown), (h = t == null ? void 0 : t.parentElement) == null || h.addEventListener("pointermove", this.onZoomedPointerMove), (r = t == null ? void 0 : t.parentElement) == null || r.addEventListener("pointerup", this.onZoomedPointerUp);
+        let l = !1, c = 0, r = 0, h = 0, m = 0, f = 0, u = 0;
+        this.onZoomedPointerDown = (v) => {
+          v.preventDefault(), v.stopPropagation(), l = !0, c = v.pageX, r = v.pageY, t.setPointerCapture(v.pointerId);
+        }, this.onZoomedPointerMove = (v) => {
+          if (!l) return;
+          v.preventDefault(), f = v.pageX - c, 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: b, minDiffY: x, maxDiffY: g, minDiffX: I } = T(
+            y,
+            p
+          ), E = Math.min(b, Math.max(I, h + f)), L = Math.min(g, Math.max(x, m + u));
+          f = E - h, 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), h += 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);
         return;
       }
     }
   }
   zoomIn() {
-    var o, h, r, a, c;
-    const t = (o = this.rootElm) == null ? void 0 : o.querySelector(
+    var a, d, o, l, c;
+    const t = (a = this.rootElm) == null ? void 0 : a.querySelector(
       '[data-vistaview-pos="0"] .vistaview-image-highres'
-    ), e = t.width, n = t.height;
-    t.dataset.vistaviewInitialWidth || (t.dataset.vistaviewInitialWidth = e.toString()), t.dataset.vistaviewInitialHeight || (t.dataset.vistaviewInitialHeight = n.toString()), this.setZoomed(t);
-    const i = (t.naturalWidth || 0) * this.options.maxZoomLevel;
-    if (e && i && e < i) {
-      const l = Math.min(e + this.options.zoomStep, i);
-      t.style.width = `${l}px`;
-      const d = l / e * n;
-      t.style.height = `${d}px`, (r = (h = this.rootElm) == null ? void 0 : h.querySelector("button.vistaview-zoom-out-btn")) == null || r.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = l.toString(), t.dataset.vistaviewCurrentHeight = d.toString(), l === i && ((c = (a = this.rootElm) == null ? void 0 : a.querySelector("button.vistaview-zoom-in-btn")) == null || c.setAttribute("disabled", "true"));
+    ), 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 h = r / 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 = r.toString(), t.dataset.vistaviewCurrentHeight = h.toString(), r === e && ((c = (l = this.rootElm) == null ? void 0 : l.querySelector("button.vistaview-zoom-in-btn")) == null || c.setAttribute("disabled", "true"));
     }
   }
   zoomOut() {
-    var h, r, a, c, l;
-    const t = (h = this.rootElm) == null ? void 0 : h.querySelector(
+    var d, o, l, c, r;
+    const t = (d = this.rootElm) == null ? void 0 : d.querySelector(
       '[data-vistaview-pos="0"] .vistaview-image-highres'
-    ), e = t.width, n = t.height, i = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, o = (d) => {
-      d.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", o));
+    ), i = t.width, n = t.height, e = t.dataset.vistaviewInitialWidth ? parseInt(t.dataset.vistaviewInitialWidth) : 0, a = (h) => {
+      h.target === t && (t.classList.remove("vistaview-image--zooming-out"), t.removeEventListener("transitionend", a));
     };
-    if (t.addEventListener("transitionend", o), t.classList.add("vistaview-image--zooming-out"), e && i && e > i) {
-      const d = Math.max(e - this.options.zoomStep, i);
-      t.style.width = `${d}px`;
-      const u = d / e * n;
-      t.style.height = `${u}px`, (a = (r = this.rootElm) == null ? void 0 : r.querySelector("button.vistaview-zoom-in-btn")) == null || a.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = d.toString(), t.dataset.vistaviewCurrentHeight = u.toString();
-      const { maxDiffX: v, minDiffY: g, maxDiffY: m, minDiffX: E } = W(d, u);
-      let f = parseInt(
+    if (t.addEventListener("transitionend", a), 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`, (l = (o = this.rootElm) == null ? void 0 : o.querySelector("button.vistaview-zoom-in-btn")) == null || l.removeAttribute("disabled"), t.dataset.vistaviewCurrentWidth = h.toString(), t.dataset.vistaviewCurrentHeight = m.toString();
+      const { maxDiffX: f, minDiffY: u, maxDiffY: v, minDiffX: y } = T(h, m);
+      let p = parseInt(
         (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-x").replace("px", "")) || "0"
-      ), y = parseInt(
+      ), b = parseInt(
         (t == null ? void 0 : t.style.getPropertyValue("--pointer-diff-y").replace("px", "")) || "0"
       );
-      f = Math.min(v, Math.max(E, f)), y = Math.min(m, Math.max(g, y)), t == null || t.style.setProperty("--pointer-diff-x", `${f}px`), t == null || t.style.setProperty("--pointer-diff-y", `${y}px`), d === i && ((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));
+      p = Math.min(f, Math.max(y, p)), b = Math.min(v, Math.max(u, b)), t == null || t.style.setProperty("--pointer-diff-x", `${p}px`), t == null || t.style.setProperty("--pointer-diff-y", `${b}px`), h === e && ((r = (c = this.rootElm) == null ? void 0 : c.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));
     }
   }
   clearZoom() {
   }
   getImages(t) {
-    return t.map((e, n) => {
-      const i = this.elements[e];
-      if (i instanceof HTMLElement) {
-        const o = i.querySelector("img"), h = i.getAttribute("href") || "", r = i.getAttribute("src") || "", a = i.dataset.vistaviewSrc || h || r || (o == null ? void 0 : o.src) || "", c = i.dataset.vistaviewAlt || i.getAttribute("alt") || (o == null ? void 0 : o.alt) || "", l = i.dataset.vistaviewThumb || (o == null ? void 0 : o.src) || h || r || "";
+    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) || "", c = e.dataset.vistaviewAlt || e.getAttribute("alt") || (a == null ? void 0 : a.alt) || "", r = e.dataset.vistaviewThumb || (a == null ? void 0 : a.src) || d || o || "";
         return {
           index: t[n],
-          src: a,
+          src: l,
           alt: c,
-          thumb: l,
-          imageElm: i instanceof HTMLImageElement ? i : o,
-          anchorElm: i instanceof HTMLAnchorElement ? i : void 0
+          thumb: r,
+          imageElm: e instanceof HTMLImageElement ? e : a,
+          anchorElm: e instanceof HTMLAnchorElement ? e : void 0
         };
       } else
-        return { index: t[n], ...i };
+        return { index: t[n], ...e };
     });
   }
-  setInitialDimPos(t) {
+  setInitialDimPos() {
+    var c, r;
     if (!this.rootElm) return;
-    const e = t.imageElm ? A(t.imageElm) : void 0, n = t.anchorElm ? A(t.anchorElm) : void 0, i = (n == null ? void 0 : n.width) || (e == null ? void 0 : e.width) || 0, o = (n == null ? void 0 : n.height) || (e == null ? void 0 : e.height) || 0, h = ((n == null ? void 0 : n.left) || (e == null ? void 0 : e.left) || 0) + i / 2, r = ((n == null ? void 0 : n.top) || (e == null ? void 0 : e.top) || 0) + o / 2;
-    this.rootElm.style.setProperty("--vistaview-container-initial-width", i + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-height", o + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-top", r + "px"), this.rootElm.style.setProperty("--vistaview-container-initial-left", h + "px"), this.rootElm.style.setProperty(
+    const t = (c = this.rootElm.querySelector('[data-vistaview-pos="0"]')) == null ? void 0 : c.dataset.vistaviewIndex, i = ((r = this.currentImages) == null ? void 0 : r.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(
       "--vistaview-image-border-radius",
-      R(n == null ? void 0 : n.borderRadius) || R(e == null ? void 0 : e.borderRadius) || "0px"
+      R(e == null ? void 0 : e.borderRadius) || R(n == null ? void 0 : n.borderRadius) || "0px"
     );
   }
   updateZoomButtonsVisibility() {
-    var i;
-    const t = (i = this.rootElm) == null ? void 0 : i.querySelector(
+    var e;
+    const t = (e = this.rootElm) == null ? void 0 : e.querySelector(
       '[data-vistaview-pos="0"] img.vistaview-image-highres'
     );
     if (!t) return;
-    const e = this;
+    const i = this;
     function n() {
-      var l, d;
-      const o = (l = e.rootElm) == null ? void 0 : l.querySelector(
+      var r, h;
+      const a = (r = i.rootElm) == null ? void 0 : r.querySelector(
         "button.vistaview-zoom-in-btn"
-      ), h = (d = e.rootElm) == null ? void 0 : d.querySelector(
+      ), d = (h = i.rootElm) == null ? void 0 : h.querySelector(
         "button.vistaview-zoom-out-btn"
-      ), r = parseInt(t.style.width) || t.width, a = t.naturalWidth * e.options.maxZoomLevel, c = r < a && a > 0;
-      o && (o.style.display = c ? "" : "none"), h && (h.style.display = c ? "" : "none");
+      ), o = parseInt(t.style.width) || t.width, l = t.naturalWidth * i.options.maxZoomLevel, c = o < l && l > 0;
+      a && (a.style.display = c ? "" : "none"), d && (d.style.display = c ? "" : "none");
     }
     t.complete && t.naturalWidth > 0 ? n() : t.addEventListener("load", n);
   }
@@ -457,28 +512,38 @@ class ot {
     if (!this.rootElm) return;
     this.rootElm.querySelectorAll(
       ".vistaview-image-highres:not(.vistaview-image-loaded)"
-    ).forEach((e, n) => {
-      const i = e, h = this.currentImages[n].imageElm, r = { w: 0, h: 0 };
-      if (h) {
-        const { width: c, height: l } = H(h);
-        r.w = Math.min(h.width, c), r.h = Math.min(h.height, l);
+    ).forEach((i, n) => {
+      const e = i, d = this.currentImages[n].imageElm, o = { w: 0, h: 0 };
+      if (d) {
+        const { width: c, height: r } = B(d);
+        o.w = Math.min(d.width, c), o.h = Math.min(d.height, r);
       }
-      const a = (c = !1) => () => {
-        var l;
-        if (r.w && r.h && (i.style.width = `${r.w}px`, i.style.height = `${r.h}px`, i.style.setProperty("--vistaview-fitted-width", `${r.w}px`), i.style.setProperty("--vistaview-fitted-height", `${r.h}px`)), i.classList.add("vistaview-image-loaded"), i.width = i.naturalWidth, i.height = i.naturalHeight, c) {
-          const { width: d, height: u } = P(i);
-          i.style.width = `${d}px`, i.style.height = `${u}px`;
-        } else
-          setTimeout(() => {
-            const { width: d, height: u } = P(i);
-            i.style.width = `${d}px`, i.style.height = `${u}px`;
-          }, 333);
-        setTimeout(() => {
-          var d, u;
-          (u = (d = i.parentElement) == null ? void 0 : d.querySelector(".vistaview-image-lowres")) == null || u.classList.add("vistaview-image--hidden");
-        }, 500), (l = e.parentElement) != null && l.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
+      const l = () => {
+        var r;
+        const c = () => {
+          var h;
+          o.w && o.h && (e.style.width = `${o.w}px`, e.style.height = `${o.h}px`, e.style.setProperty("--vistaview-fitted-width", `${o.w}px`), e.style.setProperty("--vistaview-fitted-height", `${o.h}px`)), e.classList.add("vistaview-image-loaded"), e.width = e.naturalWidth, e.height = e.naturalHeight, setTimeout(() => {
+            var y, p;
+            let m = 0;
+            const f = () => {
+              var b, x;
+              m++, !(m < 3) && (e.removeEventListener("transitionend", f), (x = (b = e.parentElement) == null ? void 0 : b.querySelector(".vistaview-image-lowres")) == null || x.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), (h = i.parentElement) != null && h.matches('[data-vistaview-pos="0"]') && this.updateZoomButtonsVisibility();
+        };
+        if ((r = this.rootElm) != null && r.classList.contains("vistaview--opened"))
+          c();
+        else {
+          const h = setInterval(() => {
+            var m;
+            (m = this.rootElm) != null && m.classList.contains("vistaview--opened") && (clearInterval(h), c());
+          }, 50);
+        }
       };
-      i.complete && i.naturalWidth > 0 ? a(!0)() : i.onload = a(!1);
+      e.complete && e.naturalWidth > 0 ? l() : e.onload = l;
     });
   }
   setIndexDisplay() {
@@ -488,19 +553,19 @@ class ot {
     this.rootElm.querySelector(".vistaview-description").textContent = (this.currentImages[1] || this.currentImages[0]).alt || "";
   }
   getCurrentIndexes(t) {
-    const e = this.options.preloads, n = this.elements.length, i = n < 1 || !e ? [t] : [
+    const i = this.options.preloads, n = this.elements.length, e = n < 1 || !i ? [t] : [
       .../* @__PURE__ */ new Set([
         ...Array.from(
-          { length: e },
-          (h, r) => ((t - e + r) % n + n) % n
+          { length: i },
+          (d, o) => ((t - i + o) % n + n) % n
         ),
         t,
-        ...Array.from({ length: e }, (h, r) => (t + 1 + r) % n)
+        ...Array.from({ length: i }, (d, o) => (t + 1 + o) % n)
       ])
-    ], o = n < 1 || !e ? [0] : i.map((h, r) => r - Math.floor(i.length / 2));
+    ], a = n < 1 || !i ? [0] : e.map((d, o) => o - Math.floor(e.length / 2));
     return {
-      images: i,
-      positions: o
+      images: e,
+      positions: a
     };
   }
   setKeyboardListeners() {
@@ -526,37 +591,36 @@ class ot {
   }
   setResizeListeners() {
     this.onResizeHandler = () => {
-      var n;
-      const t = this.currentImages[this.currentImages.length === 1 ? 0 : Math.floor(this.currentImages.length / 2)];
-      this.setInitialDimPos(t);
-      const e = (n = this.rootElm) == null ? void 0 : n.querySelectorAll(
+      var i;
+      this.setInitialDimPos();
+      const t = (i = this.rootElm) == null ? void 0 : i.querySelectorAll(
         ".vistaview-image-highres.vistaview-image-loaded"
       );
-      e == null || e.forEach((i) => {
-        const o = i, { width: h, height: r } = P(o);
-        o.classList.contains("vistaview-image--zooming") ? (o.dataset.vistaviewInitialWidth = h.toString(), o.dataset.vistaviewInitialHeight = r.toString()) : (o.style.width = `${h}px`, o.style.height = `${r}px`);
+      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`);
       });
     }, window.addEventListener("resize", this.onResizeHandler);
   }
   open(t = 0) {
-    var h, r, a, c, l, d, u, v, g, m, E, f, y;
-    if (L.somethingOpened) {
+    var o, l, c, r, h, m, f, u, v, y, p, b, x;
+    if (C.somethingOpened) {
       console.error("VistaView: another instance is already opened. Returning.");
       return;
     }
-    if (L.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
+    if (C.somethingOpened = this, this.currentIndex._value = t, document.body.prepend(
       Q({
         controls: this.options.controls,
         isReducedMotion: this.isReducedMotion
       })
-    ), this.rootElm = document.querySelector("#vistaview-root"), this.imageContainerElm = ((h = this.rootElm) == null ? void 0 : h.querySelector(".vistaview-image-container")) || null, !this.rootElm || !this.imageContainerElm)
-      throw L.somethingOpened = null, new Error("Failed to create VistaView element");
+    ), this.rootElm = document.querySelector("#vistaview-root"), this.imageContainerElm = ((o = this.rootElm) == null ? void 0 : o.querySelector(".vistaview-image-container")) || null, !this.rootElm || !this.imageContainerElm)
+      throw C.somethingOpened = null, new Error("Failed to create VistaView element");
     this.options.arrowOnSmallScreens || this.rootElm.classList.add("vistaview-no-arrows-sm");
-    const { images: e, positions: n } = this.getCurrentIndexes(t);
-    this.currentImages = this.getImages(e);
-    const i = this.currentImages.map((w, C) => T(w, n[C]));
-    this.currentItems = i;
-    const o = {
+    const { images: i, positions: n } = this.getCurrentIndexes(t);
+    this.currentImages = this.getImages(i);
+    const e = this.currentImages.map((g, I) => q(g, n[I]));
+    this.currentItems = e;
+    const a = {
       htmlElements: { from: null, to: this.currentItems },
       images: { from: null, to: this.currentImages },
       index: { from: null, to: t },
@@ -568,25 +632,30 @@ class ot {
       isZoomed: this.isZoomed,
       options: this.options
     };
-    this.userSetup(o), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((w) => {
-      this.imageContainerElm.appendChild(w);
-    }), (r = this.rootElm.querySelector(".vistaview-close-btn")) == null || r.addEventListener("click", () => this.close()), (a = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || a.addEventListener("click", () => this.zoomIn()), (c = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || c.addEventListener("click", () => this.zoomOut()), (l = this.rootElm.querySelector(".vistaview-prev-btn>button")) == null || l.addEventListener("click", () => this.prev()), (d = this.rootElm.querySelector(".vistaview-next-btn>button")) == null || d.addEventListener("click", () => this.next()), [
+    this.userSetup(a), this.imageContainerElm.innerHTML = "", this.currentItems.forEach((g) => {
+      this.imageContainerElm.appendChild(g);
+    });
+    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()), (c = this.rootElm.querySelector(".vistaview-zoom-in-btn")) == null || c.addEventListener("click", () => this.zoomIn()), (r = this.rootElm.querySelector(".vistaview-zoom-out-btn")) == null || r.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((w) => {
-      typeof w != "string" && (this.customControls[w.name] = w);
-    }), this.rootElm.querySelectorAll("button[data-vistaview-custom-control]").forEach((w) => {
-      w.addEventListener("click", (C) => {
-        const b = this.customControls[C.currentTarget.dataset.vistaviewCustomControl], I = this.currentImages.find(
-          (x) => x.index === this.currentIndex.value
+    ].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(
+          (D) => D.index === this.currentIndex.value
         );
-        b && I && (b.onClick.constructor.name === "AsyncFunction" ? (w.classList.add("vistaview-button--loading"), b.onClick(I).finally(() => {
-          w.classList.remove("vistaview-button--loading");
-        })) : b.onClick(I));
+        E && L && (E.onClick.constructor.name === "AsyncFunction" ? (g.classList.add("vistaview-button--loading"), E.onClick(L).finally(() => {
+          g.classList.remove("vistaview-button--loading");
+        })) : E.onClick(L));
       });
     }), this.options.animationDurationBase && this.rootElm.style.setProperty(
       "--vistaview-animation-duration",
@@ -594,23 +663,21 @@ class ot {
     ), this.options.initialZIndex !== void 0 && this.rootElm.style.setProperty(
       "--vistaview-initial-z-index",
       `${this.options.initialZIndex}`
-    ), this.setInitialDimPos(
-      this.currentImages[this.currentImages.length === 1 ? 0 : Math.floor(this.currentImages.length / 2)]
-    ), this.setResizeListeners(), this.options.keyboardListeners && this.setKeyboardListeners(), this.elements.length === 1 && ((u = this.rootElm.querySelector(".vistaview-prev-btn")) == null || u.classList.add("vistaview-ui--none"), (v = this.rootElm.querySelector(".vistaview-next-btn")) == null || v.classList.add("vistaview-ui--none"), (g = this.rootElm.querySelector(".vistaview-index-display")) == null || g.classList.add("vistaview-ui--none")), this.rootElm && this.rootElm.classList.add("vistaview--initialized"), this.loadImages(), this.setCurrentDescription(), this.setIndexDisplay(), this.userInit(this), (E = (m = this.options).onOpen) == null || E.call(m, o), (y = (f = this.options).onImageView) == null || y.call(f, o);
+    ), 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), (x = (b = this.options).onImageView) == null || x.call(b, a);
   }
   async close(t = !0) {
-    var n, i, o;
-    if (L.somethingOpened !== this) return;
-    t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((h) => {
-      var a;
-      let r;
-      (a = this.rootElm) == null || a.addEventListener("transitionend", (c) => {
-        c.currentTarget === this.rootElm && (r && clearTimeout(r), r = setTimeout(() => {
-          h();
+    var n, e, a;
+    if (C.somethingOpened !== this) return;
+    t && ((n = this.rootElm) == null || n.classList.add("vistaview--closing"), await new Promise((d) => {
+      var l;
+      let o;
+      (l = this.rootElm) == null || l.addEventListener("transitionend", (c) => {
+        c.currentTarget === this.rootElm && (o && clearTimeout(o), o = setTimeout(() => {
+          d();
         }, 333));
       });
     }));
-    const e = {
+    const i = {
       htmlElements: { from: this.currentItems, to: null },
       images: { from: this.currentImages, to: null },
       index: { from: this.currentIndex.value, to: null },
@@ -622,62 +689,63 @@ class ot {
       isZoomed: this.isZoomed,
       options: this.options
     };
-    this.userClose(this), (o = (i = this.options).onClose) == null || o.call(i, e), document.body.removeChild(this.rootElm), this.currentIndex._value = null, this.currentIndex._via = { next: !1, prev: !1 }, this.rootElm = null, this.imageContainerElm = null, this.currentImages = null, this.currentItems = null, this.navActive = !0, this.onResizeHandler && (window.removeEventListener("resize", this.onResizeHandler), this.onResizeHandler = null), this.onKeyDown && (window.removeEventListener("keydown", this.onKeyDown), this.onKeyDown = null), (this.onZoomedPointerDown || this.onZoomedPointerMove || this.onZoomedPointerUp) && (this.setZoomed(!1), this.onZoomedPointerDown = null, this.onZoomedPointerMove = null, this.onZoomedPointerUp = null), L.somethingOpened = null;
+    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;
   }
   destroy() {
-    this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t, e) => {
-      t.removeEventListener("click", this.onClickElements[e]);
+    this.close(!1), this.elements instanceof NodeList && this.elements.forEach((t) => {
+      t.dataset.vistaviewIndex && delete t.dataset.vistaviewIndex, t.removeEventListener("click", this.defaultOnClickHandler), t.removeEventListener("pointerup", this.onClickElements);
     });
   }
-  view(t, e) {
-    L.somethingOpened === this && this.navActive && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = e || { next: !1, prev: !1 }, this.currentIndex.value = t);
+  view(t, i) {
+    C.somethingOpened === this && this.navActive && (t < 0 && (t = this.elements.length - 1), t >= this.elements.length && (t = 0), this.currentIndex.via = i || { next: !1, prev: !1 }, this.currentIndex.value = t);
   }
   next() {
-    L.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
+    C.somethingOpened === this && this.view(this.currentIndex.value + 1, { next: !0, prev: !1 });
   }
   prev() {
-    L.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
+    C.somethingOpened === this && this.view(this.currentIndex.value - 1, { next: !1, prev: !0 });
   }
   getCurrentIndex() {
-    return L.somethingOpened === this ? this.currentIndex.value : -1;
+    return C.somethingOpened === this ? this.currentIndex.value : -1;
   }
 }
 function rt(s) {
   let t = null;
   if (typeof s == "string" ? t = document.querySelectorAll(s) : s instanceof NodeList && (t = s), t)
-    for (let e = 0; e < t.length; e++) {
-      const n = t[e];
+    for (let i = 0; i < t.length; i++) {
+      const n = t[i];
       if (!(n.dataset.vistaviewSrc || n.getAttribute("href") || n.getAttribute("src") || ""))
-        return `Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`;
+        return `Element at index ${i} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`;
     }
   else {
-    const e = s;
-    for (let n = 0; n < e.length; n++)
-      if (!e[n].src)
+    const i = s;
+    for (let n = 0; n < i.length; n++)
+      if (!i[n].src)
         return `Element at index ${n} is missing 'src' attribute.`;
   }
   return t || s;
 }
 function lt({ elements: s, ...t }) {
   if (!s) throw new Error("No elements");
-  let e = rt(s);
-  if (typeof e == "string")
-    return console.error(e), console.warn("VistaView: silently returning."), null;
-  const n = new ot(e, t);
+  let i = rt(s);
+  if (typeof i == "string")
+    return console.error(i), console.warn("VistaView: silently returning."), null;
+  const n = new ot(i, t);
   return {
-    open: (i = 0) => n.open(i),
+    open: (e = 0) => n.open(e),
     close: () => n.close(),
     next: () => n.next(),
     prev: () => n.prev(),
     destroy: () => n.destroy(),
     getCurrentIndex: () => n.getCurrentIndex(),
-    view: (i) => {
-      n.view(i);
+    view: (e) => {
+      n.view(e);
     }
   };
 }
 export {
-  q as DefaultOptions,
+  k as DefaultOptions,
+  P as VistaViewTransitionAbortedError,
   st as defaultClose,
   et as defaultInit,
   it as defaultSetup,