vistaview 0.1.0 → 0.2.0

package/dist/vistaview-D-ZOkDpV.js

@@ -0,0 +1,452 @@
+var chevronLeft = "<svg viewBox=\"0 0 24 24\"><path d=\"m15 18-6-6 6-6\"/></svg>", chevronRight = "<svg viewBox=\"0 0 24 24\"><path d=\"m9 18 6-6-6-6\"/></svg>", zoomInIcon = "<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>", zoomOutIcon = "<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>", downloadIcon = "<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>", closeIcon = "<svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>";
+function getDownloadButton() {
+	return {
+		name: "download",
+		icon: downloadIcon,
+		onClick: (e) => {
+			let c = document.createElement("a");
+			c.href = e.src, c.download = e.src.split("/").pop() || "download", document.body.appendChild(c), c.click(), document.body.removeChild(c);
+		}
+	};
+}
+function convertControlToHtml(e) {
+	if (typeof e == "string") switch (e) {
+		case "zoomIn": return `<button class="vistaview-zoom-in-button">${zoomInIcon}</button>`;
+		case "zoomOut": return `<button disabled class="vistaview-zoom-out-button">${zoomOutIcon}</button>`;
+		case "close": return `<button class="vistaview-close-button">${closeIcon}</button>`;
+		case "indexDisplay": return "<div class=\"vistaview-index-display\"></div>";
+		case "description": return "<div class=\"vistaview-image-description\"></div>";
+		default: return "";
+	}
+	return `<button data-vistaview-custom-control="${e.name}">${e.icon}</button>`;
+}
+function vistaViewComponent(l, u) {
+	let d = (e) => e ? e.map(convertControlToHtml).join("") : "";
+	return `<div class="vistaview-root" id="vistaview-root">
+<div class="vistaview-container">
+<div class="vistaview-image-container">
+${l.map((e) => {
+		let c = e.image ? getComputedStyle(e.image).objectFit : "", l = e.image?.width, u = e.image?.height;
+		return `<div class="vistaview-item">
+<img class="vistaview-image-lowres"${c ? ` style="object-fit:${c}"` : ""} src="${e.smallSrc || e.src}" alt="${e.alt || ""}" width="${l}" height="${u}">
+<img class="vistaview-image-highres" loading="lazy" style="width:${l}px;height:${u}px" src="${e.src}" alt="${e.alt || ""}" width="${e.width}" height="${e.height}">
+</div>`;
+	}).join("")}
+</div>
+<div class="vistaview-top-bar vistaview-ui"><div>${d(u?.topLeft)}</div><div>${d(u?.topCenter)}</div><div>${d(u?.topRight)}</div></div>
+<div class="vistaview-bottom-bar vistaview-ui"><div>${d(u?.bottomLeft)}</div><div>${d(u?.bottomCenter)}</div><div>${d(u?.bottomRight)}</div></div>
+<div class="vistaview-prev-btn vistaview-ui"><button>${chevronLeft}</button></div>
+<div class="vistaview-next-btn vistaview-ui"><button>${chevronRight}</button></div>
+</div>
+</div>`;
+}
+function getElmProperties(e) {
+	let c = getComputedStyle(e);
+	return {
+		objectFit: c.objectFit,
+		borderRadius: c.borderRadius,
+		objectPosition: c.objectPosition,
+		overflow: c.overflow
+	};
+}
+var cachedPolicy = null;
+function getPolicy() {
+	return cachedPolicy || (window.trustedTypes || (window.trustedTypes = { createPolicy: (e, c) => c }), cachedPolicy = window.trustedTypes.createPolicy("vistaView-policy", {
+		createHTML: (e) => e,
+		createScript: () => {
+			throw Error("Not implemented");
+		},
+		createScriptURL: () => {
+			throw Error("Not implemented");
+		}
+	}), cachedPolicy);
+}
+function createTrustedHtml(e) {
+	let c = getPolicy().createHTML(e), l = document.createElement("template");
+	l.innerHTML = c;
+	let u = l.content;
+	return l.remove(), u;
+}
+function isNotZeroCssValue(e) {
+	return e && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim()) && e;
+}
+function getFittedSize(e) {
+	let c = window.getComputedStyle(e).objectFit || "", { width: l, height: u } = e.getBoundingClientRect(), d = e.naturalWidth, f = e.naturalHeight;
+	if (!c || !d || !f) return {
+		width: l,
+		height: u
+	};
+	let p = d / f, m = l / u;
+	switch (c) {
+		case "fill": return {
+			width: l,
+			height: u
+		};
+		case "none": return {
+			width: d,
+			height: f
+		};
+		case "contain": return p > m ? {
+			width: l,
+			height: l / p
+		} : {
+			width: u * p,
+			height: u
+		};
+		case "cover": return p < m ? {
+			width: l,
+			height: l / p
+		} : {
+			width: u * p,
+			height: u
+		};
+		case "scale-down": {
+			let e = {
+				width: d,
+				height: f
+			}, c = p > m ? {
+				width: l,
+				height: l / p
+			} : {
+				width: u * p,
+				height: u
+			};
+			return c.width <= e.width && c.height <= e.height ? c : e;
+		}
+	}
+	return {
+		width: l,
+		height: u
+	};
+}
+function makeFullScreenContain(e, c = !1) {
+	let l = window.innerWidth, u = window.innerHeight, d = e.naturalWidth, f = e.naturalHeight;
+	if (!d || !f) return;
+	if (d < l && f < u) {
+		e.style.width = d + "px", e.style.height = f + "px";
+		return;
+	}
+	let p = d / f, m = l / u, h, g;
+	p > m ? (h = l, g = l / p) : (g = u, h = u * p), c ? (e.dataset.vistaviewInitialWidth = h.toString(), e.dataset.vistaviewInitialHeight = g.toString()) : (e.style.width = h + "px", e.style.height = g + "px");
+}
+function getMaxMinZoomLevels(e, c) {
+	let l = window.innerHeight, u = window.innerWidth, d = e, f = c, p = Math.max(0, (d - u) / 2) + u / 2, m = Math.max(0, (f - l) / 2) + l / 2, h = -p;
+	return {
+		maxDiffX: p,
+		minDiffY: -m,
+		maxDiffY: m,
+		minDiffX: h
+	};
+}
+var GlobalVistaState = { somethingOpened: !1 };
+const DefaultOptions = {
+	detectReducedMotion: !0,
+	zoomStep: 500,
+	maxZoomLevel: 2,
+	touchSpeedThreshold: 1,
+	controls: {
+		topLeft: ["indexDisplay"],
+		topRight: [
+			"zoomIn",
+			"zoomOut",
+			getDownloadButton(),
+			"close"
+		],
+		bottomCenter: ["description"]
+	}
+};
+var VistaView = class {
+	options;
+	elements;
+	currentIndex = 0;
+	currentDescription = "";
+	rootElement = null;
+	containerElement = null;
+	indexDisplayElement = null;
+	descriptionElement = null;
+	isActive = !1;
+	isZoomed = !1;
+	isReducedMotion;
+	setInitialProperties = null;
+	setFullScreenContain = null;
+	onZoomedPointerDown = null;
+	onZoomedPointerMove = null;
+	onZoomedPointerUp = null;
+	onPointerDown = null;
+	onPointerMove = null;
+	onPointerUp = null;
+	onKeyDown = null;
+	constructor(e, c) {
+		this.elements = e, this.options = {
+			...DefaultOptions,
+			...c || {},
+			controls: {
+				...DefaultOptions.controls,
+				...c?.controls || {}
+			}
+		}, this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements.forEach((e, c) => {
+			let l = e.anchor || e.image;
+			l && (e.onClick = (e) => {
+				e.preventDefault(), this.open(c);
+			}, l.addEventListener("click", e.onClick));
+		});
+	}
+	setZoomed(e) {
+		if (this.isZoomed === e) return;
+		let c = this.isZoomed === !1 ? null : this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.isZoomed];
+		if (this.isZoomed = e, this.isZoomed === !1 && c) {
+			this.onZoomedPointerDown &&= (c.parentElement?.removeEventListener("pointerdown", this.onZoomedPointerDown), null), this.onZoomedPointerMove &&= (c.parentElement?.removeEventListener("pointermove", this.onZoomedPointerMove), null), this.onZoomedPointerUp &&= (c.parentElement?.removeEventListener("pointerup", this.onZoomedPointerUp), null), c?.style.removeProperty("--pointer-diff-x"), c?.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
+				c?.classList.remove("vistaview-image--zooming");
+			}, 500);
+			return;
+		}
+		if (this.isZoomed !== !1) {
+			c = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.isZoomed], c.classList.add("vistaview-image--zooming"), c?.style.setProperty("--pointer-diff-x", "0px"), c?.style.setProperty("--pointer-diff-y", "0px");
+			let e = !1, l = 0, u = 0, d = 0, f = 0, p = 0, m = 0;
+			this.onZoomedPointerDown &&= (c.parentElement?.removeEventListener("pointerdown", this.onZoomedPointerDown), null), this.onZoomedPointerMove &&= (c.parentElement?.removeEventListener("pointermove", this.onZoomedPointerMove), null), this.onZoomedPointerUp &&= (c.parentElement?.removeEventListener("pointerup", this.onZoomedPointerUp), null), this.onZoomedPointerDown = (d) => {
+				d.preventDefault(), d.stopPropagation(), e = !0, l = d.pageX, u = d.pageY, c.setPointerCapture(d.pointerId);
+			}, this.onZoomedPointerMove = (h) => {
+				if (!e) return;
+				h.preventDefault(), p = h.pageX - l, m = h.pageY - u;
+				let { maxDiffX: g, minDiffY: _, maxDiffY: v, minDiffX: y } = getMaxMinZoomLevels(parseInt(c?.dataset.vistaviewCurrentWidth || "0"), parseInt(c?.dataset.vistaviewCurrentHeight || "0")), b = Math.min(g, Math.max(y, d + p)), x = Math.min(v, Math.max(_, f + m));
+				p = b - d, m = x - f, c?.style.setProperty("--pointer-diff-x", `${b}px`), c?.style.setProperty("--pointer-diff-y", `${x}px`);
+			}, this.onZoomedPointerUp = (l) => {
+				e = !1, c.releasePointerCapture(l.pointerId), d += p, f += m, p = 0, m = 0;
+			}, c?.parentElement?.addEventListener("pointerdown", this.onZoomedPointerDown), c?.parentElement?.addEventListener("pointermove", this.onZoomedPointerMove), c?.parentElement?.addEventListener("pointerup", this.onZoomedPointerUp);
+		}
+	}
+	setIndexDisplay() {
+		this.indexDisplayElement && (this.indexDisplayElement.textContent = `${this.currentIndex + 1} / ${this.elements.length}`);
+	}
+	setCurrentDescription() {
+		this.descriptionElement && (this.currentDescription = this.elements[this.currentIndex].alt || "", this.descriptionElement && (this.descriptionElement.textContent = this.currentDescription));
+	}
+	getAnimationDurationBase() {
+		let e = window.getComputedStyle(this.rootElement);
+		return parseInt(e.getPropertyValue("--vistaview-animation-duration"));
+	}
+	zoomIn() {
+		let e = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.currentIndex], c = e.width, l = e.height;
+		e.dataset.vistaviewInitialWidth || (e.dataset.vistaviewInitialWidth = c.toString()), e.dataset.vistaviewInitialHeight || (e.dataset.vistaviewInitialHeight = l.toString()), this.setZoomed(this.currentIndex);
+		let u = (e.naturalWidth || 0) * this.options.maxZoomLevel;
+		if (c && u && c < u) {
+			let d = Math.min(c + this.options.zoomStep, u);
+			e.style.width = `${d}px`;
+			let f = d / c * l;
+			e.style.height = `${f}px`, this.containerElement?.querySelector("button.vistaview-zoom-out-button")?.removeAttribute("disabled"), e.dataset.vistaviewCurrentWidth = d.toString(), e.dataset.vistaviewCurrentHeight = f.toString(), d === u && this.containerElement?.querySelector("button.vistaview-zoom-in-button")?.setAttribute("disabled", "true");
+		}
+	}
+	zoomOut() {
+		let e = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.currentIndex], c = e.width, l = e.height, u = e.dataset.vistaviewInitialWidth ? parseInt(e.dataset.vistaviewInitialWidth) : 0;
+		if (e.classList.add("vistaview-image--zooming-out"), setTimeout(() => {
+			e.classList.remove("vistaview-image--zooming-out");
+		}, 333), c && u && c > u) {
+			let d = Math.max(c - this.options.zoomStep, u);
+			e.style.width = `${d}px`;
+			let f = d / c * l;
+			e.style.height = `${f}px`, this.containerElement?.querySelector("button.vistaview-zoom-in-button")?.removeAttribute("disabled"), e.dataset.vistaviewCurrentWidth = d.toString(), e.dataset.vistaviewCurrentHeight = f.toString();
+			let { maxDiffX: p, minDiffY: m, maxDiffY: h, minDiffX: g } = getMaxMinZoomLevels(d, f), _ = parseInt(e?.style.getPropertyValue("--pointer-diff-x").replace("px", "") || "0"), v = parseInt(e?.style.getPropertyValue("--pointer-diff-y").replace("px", "") || "0");
+			_ = Math.min(p, Math.max(g, _)), v = Math.min(h, Math.max(m, v)), e?.style.setProperty("--pointer-diff-x", `${_}px`), e?.style.setProperty("--pointer-diff-y", `${v}px`), d === u && (this.containerElement?.querySelector("button.vistaview-zoom-out-button")?.setAttribute("disabled", "true"), e.removeAttribute("data-vistaview-current-width"), e.removeAttribute("data-vistaview-current-height"), e.removeAttribute("data-vistaview-initial-width"), e.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
+		}
+	}
+	clearZoom() {
+		let e = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.currentIndex];
+		e.dataset.vistaviewInitialWidth && (e.style.width = `${e.dataset.vistaviewInitialWidth}px`), e.dataset.vistaviewInitialHeight && (e.style.height = `${e.dataset.vistaviewInitialHeight}px`), this.containerElement?.querySelector("button.vistaview-zoom-in-button")?.removeAttribute("disabled"), this.containerElement?.querySelector("button.vistaview-zoom-out-button")?.setAttribute("disabled", "true"), e.removeAttribute("data-vistaview-current-width"), e.removeAttribute("data-vistaview-current-height"), e.removeAttribute("data-vistaview-initial-width"), e.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1);
+	}
+	resetImageOpacity(e = !1) {
+		this.elements.forEach((c, l) => {
+			c.image && (c.image?.dataset.vistaviewInitialOpacity || (c.image.dataset.vistaviewInitialOpacity = c.image.style.opacity || "1"), l === this.currentIndex && !e ? c.image.style.opacity = "0" : c.image.style.opacity = c.image.dataset.vistaviewInitialOpacity);
+		});
+	}
+	setTouchActions() {
+		this.removeTouchActions();
+		let e = this.containerElement?.querySelector(".vistaview-image-container");
+		if (!e) return;
+		let c = 0, l = 0, u = 0, d = 0, f = !1, p = this.currentIndex, m;
+		this.onPointerDown = (h) => {
+			if (h.preventDefault(), h.stopPropagation(), this.isZoomed !== !1) return;
+			p = this.currentIndex, f = !0, c = h.pageX, l = h.pageY, u = h.pageX, d = Date.now(), e.classList.add("vistaview-image-container--pointer-down");
+			let g = this.containerElement?.querySelector(".vistaview-image-container"), _ = Array.from(g.querySelectorAll(".vistaview-item"));
+			m = new IntersectionObserver((e) => {
+				e.forEach((e) => {
+					e.isIntersecting && (p = _.indexOf(e.target));
+				});
+			}, {
+				threshold: .5,
+				root: this.containerElement
+			}), _.forEach((e) => {
+				m.observe(e);
+			});
+		}, this.onPointerMove = (d) => {
+			if (d.preventDefault(), d.stopPropagation(), this.isZoomed !== !1 || !f) return;
+			let p = d.pageX - c, m = d.pageY - l;
+			u = d.pageX, e.style.setProperty("--vistaview-pointer-diff-x", `${p}px`), e.style.setProperty("--vistaview-pointer-diff-y", `${m}px`);
+		}, this.onPointerUp = (l) => {
+			if (l.preventDefault(), l.stopPropagation(), this.isZoomed !== !1 || !f) return;
+			f = !1, m.disconnect();
+			let h = (u - c) / (Date.now() - d), g = this.options.touchSpeedThreshold || 1;
+			h < -g && p === this.currentIndex ? p = Math.min(this.currentIndex + 1, this.elements.length - 1) : h > g && p === this.currentIndex && (p = Math.max(this.currentIndex - 1, 0)), e.style.setProperty("--vistaview-pointer-diff-x", "0px"), e.style.setProperty("--vistaview-pointer-diff-y", "0px"), e.classList.remove("vistaview-image-container--pointer-down"), p !== this.currentIndex && this.view(p);
+		}, e.addEventListener("pointermove", this.onPointerMove), e.addEventListener("pointerup", this.onPointerUp), e.addEventListener("pointerdown", this.onPointerDown);
+	}
+	removeTouchActions() {
+		let e = this.containerElement?.querySelector(".vistaview-image-container");
+		e && (this.onPointerMove && e.removeEventListener("pointermove", this.onPointerMove), this.onPointerUp && e.removeEventListener("pointerup", this.onPointerUp), this.onPointerDown && e.removeEventListener("pointerdown", this.onPointerDown));
+	}
+	open(e) {
+		if (GlobalVistaState.somethingOpened) return;
+		if (GlobalVistaState.somethingOpened = !0, this.isActive = !0, e ||= 0, e < 0 || e >= this.elements.length) throw Error("VistaView: Index out of bounds:" + e);
+		this.currentIndex = e;
+		let c = vistaViewComponent(this.elements, this.options.controls);
+		if (document.body.prepend(createTrustedHtml(c)), this.rootElement = document.querySelector("#vistaview-root"), !this.rootElement) throw Error("VistaView: Failed to create root element.");
+		if (this.options.detectReducedMotion && this.isReducedMotion && this.rootElement.classList.add("vistaview--reduced-motion"), this.containerElement = this.rootElement.querySelector(".vistaview-container"), !this.containerElement) throw Error("VistaView: Failed to create container element.");
+		this.indexDisplayElement = this.containerElement.querySelector(".vistaview-index-display"), this.descriptionElement = this.containerElement.querySelector(".vistaview-image-description"), this.options.animationDurationBase && this.rootElement.style.setProperty("--vistaview-animation-duration", `${this.options.animationDurationBase}`), this.options.initialZIndex !== void 0 && this.rootElement.style.setProperty("--vistaview-initial-z-index", `${this.options.initialZIndex}`);
+		let l = this.elements[e].image ? getElmProperties(this.elements[e].image) : void 0, u = this.elements[e].anchor ? getElmProperties(this.elements[e].anchor) : void 0, d = this.elements[e].anchor ? this.elements[e].anchor : this.elements[e].image;
+		if (d) {
+			let e = d.getBoundingClientRect();
+			this.rootElement.style.setProperty("--vistaview-container-initial-width", `${e?.width}px`), this.rootElement.style.setProperty("--vistaview-container-initial-height", `${e?.height}px`), this.rootElement.style.setProperty("--vistaview-container-initial-top", `${e.top + e.height / 2}px`), this.rootElement.style.setProperty("--vistaview-container-initial-left", `${e.left + e.width / 2}px`);
+		}
+		this.rootElement.style.setProperty("--vistaview-number-elements", `${this.elements.length}`), this.rootElement.style.setProperty("--vistaview-image-border-radius", isNotZeroCssValue(l?.borderRadius) || isNotZeroCssValue(u?.borderRadius) || "0px"), this.setInitialProperties = () => {
+			if (!this.isActive) return;
+			let e = this.elements[this.currentIndex].anchor ? this.elements[this.currentIndex].anchor : this.elements[this.currentIndex].image;
+			if (!e) return;
+			let c = e.getBoundingClientRect();
+			this.rootElement?.style.setProperty("--vistaview-container-initial-width", `${c?.width}px`), this.rootElement?.style.setProperty("--vistaview-container-initial-height", `${c?.height}px`), this.rootElement?.style.setProperty("--vistaview-container-initial-top", `${c.top + c.height / 2}px`), this.rootElement?.style.setProperty("--vistaview-container-initial-left", `${c.left + c.width / 2}px`);
+		}, window.addEventListener("resize", this.setInitialProperties);
+		let f = [
+			...this.options.controls.topLeft || [],
+			...this.options.controls.topCenter || [],
+			...this.options.controls.topRight || [],
+			...this.options.controls.bottomLeft || [],
+			...this.options.controls.bottomCenter || [],
+			...this.options.controls.bottomRight || []
+		].filter((e) => typeof e != "string");
+		this.containerElement.querySelectorAll("button").forEach((e) => {
+			let c = e.getAttribute("data-vistaview-custom-control");
+			if (c) {
+				let l = f.find((e) => e.name === c);
+				l && e.addEventListener("click", () => {
+					l.onClick(this.elements[this.currentIndex]);
+				});
+			} else e.classList.contains("vistaview-zoom-in-button") ? e.addEventListener("click", () => {
+				this.zoomIn();
+			}) : e.classList.contains("vistaview-zoom-out-button") ? e.addEventListener("click", () => {
+				this.zoomOut();
+			}) : e.classList.contains("vistaview-close-button") ? e.addEventListener("click", () => {
+				this.close();
+			}) : e.parentElement?.classList.contains("vistaview-prev-btn") ? e.addEventListener("click", () => {
+				this.prev();
+			}) : e.parentElement?.classList.contains("vistaview-next-btn") && e.addEventListener("click", () => {
+				this.next();
+			});
+		}), this.setIndexDisplay(), this.setCurrentDescription(), this.rootElement?.style.setProperty("--vistaview-current-index", `${this.currentIndex}`), this.containerElement.querySelectorAll(".vistaview-image-highres").forEach((e, c) => {
+			let l = e, u = this.elements[c].image;
+			if (u) {
+				let { width: e, height: c } = getFittedSize(u), d = Math.min(u.width, e), f = Math.min(u.height, c);
+				l.style.width = `${d}px`, l.style.height = `${f}px`, l.style.setProperty("--vistaview-fitted-width", `${d}px`), l.style.setProperty("--vistaview-fitted-height", `${f}px`);
+			}
+			function d() {
+				l.classList.add("vistaview-image-loaded"), setTimeout(() => {
+					makeFullScreenContain(l);
+				}, 100), setTimeout(() => {
+					l.parentElement?.querySelector(".vistaview-image-lowres")?.classList.add("vistaview-image--hidden");
+				}, 500);
+			}
+			l.complete ? d() : l.onload = d;
+		}), this.setFullScreenContain = () => {
+			this.isActive && (this.containerElement?.querySelectorAll(".vistaview-image-highres"))?.forEach((e) => {
+				let c = e;
+				makeFullScreenContain(c, c.classList.contains("vistaview-image--zooming"));
+			});
+		}, window.addEventListener("resize", this.setFullScreenContain), this.setTouchActions(), this.onKeyDown = (e) => {
+			if (this.isActive) switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), this.prev();
+					break;
+				case "ArrowRight":
+					e.preventDefault(), this.next();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), this.zoomIn();
+					break;
+				case "ArrowDown":
+					e.preventDefault(), this.zoomOut();
+					break;
+				case "Escape":
+					e.preventDefault(), this.close();
+					break;
+			}
+		}, window.addEventListener("keydown", this.onKeyDown), setTimeout(() => {
+			this.rootElement && this.rootElement.classList.add("vistaview--initialized"), this.resetImageOpacity();
+		}, 33);
+	}
+	async close(e = !0) {
+		if (this.isActive) {
+			if (this.isActive = !1, e) {
+				let e = this.getAnimationDurationBase();
+				this.rootElement?.classList.add("vistaview--closing"), this.options.detectReducedMotion && this.isReducedMotion || await new Promise((c) => {
+					setTimeout(() => {
+						c(!0);
+					}, e * 1.5);
+				});
+			}
+			this.removeTouchActions(), this.rootElement?.remove(), this.rootElement = null, this.containerElement = null, this.resetImageOpacity(!0), this.setInitialProperties && window.removeEventListener("resize", this.setInitialProperties), this.setFullScreenContain && window.removeEventListener("resize", this.setFullScreenContain), this.onKeyDown && window.removeEventListener("keydown", this.onKeyDown), GlobalVistaState.somethingOpened = !1;
+		}
+	}
+	destroy() {
+		this.isActive && (this.close(!1), this.elements.forEach((e) => {
+			let c = e.anchor || e.image;
+			c && e.onClick && c.removeEventListener("click", e.onClick);
+		}));
+	}
+	view(e) {
+		if (this.isActive) {
+			if (e < 0 || e >= this.elements.length) throw Error("VistaView: Index out of bounds:" + e);
+			this.clearZoom(), this.currentIndex = e, this.resetImageOpacity(), this.setIndexDisplay(), this.setCurrentDescription(), this.setInitialProperties && this.setInitialProperties(), this.rootElement?.style.setProperty("--vistaview-current-index", `${this.currentIndex}`);
+		}
+	}
+	next() {
+		this.isActive && this.view((this.currentIndex + 1) % this.elements.length);
+	}
+	prev() {
+		this.isActive && this.view((this.currentIndex - 1 + this.elements.length) % this.elements.length);
+	}
+	getCurrentIndex() {
+		return this.isActive ? this.currentIndex : -1;
+	}
+}, toImage = (e) => {
+	let c = e instanceof HTMLImageElement ? e : e.querySelector("img");
+	return {
+		src: e.dataset.vistaviewSrc || e.getAttribute("href") || e.getAttribute("src") || "",
+		width: +(e.dataset.vistaviewWidth || c?.naturalWidth || 0),
+		height: +(e.dataset.vistaviewHeight || c?.naturalHeight || 0),
+		smallSrc: c?.src || e.dataset.vistaviewSmallsrc || e.getAttribute("src") || "",
+		alt: c?.alt || e.dataset.vistaviewAlt || e.getAttribute("alt") || "",
+		anchor: e instanceof HTMLAnchorElement ? e : void 0,
+		image: c || void 0
+	};
+};
+function vistaView({ parent: e, elements: c, ...l }) {
+	if (!e && !c) throw Error("No parent or elements");
+	let u;
+	if (e) {
+		let c = e.querySelector("img[data-vistaview-src]") ? "img[data-vistaview-src]" : "a[href]";
+		u = Array.from(e.querySelectorAll(c)).map(toImage);
+	} else if (typeof c == "string") u = Array.from(document.querySelectorAll(c)).map(toImage);
+	else if (c instanceof NodeList) u = Array.from(c).map(toImage);
+	else if (Array.isArray(c)) u = c;
+	else throw Error("Invalid elements");
+	if (!u.length) throw Error("No elements found");
+	let d = new VistaView(u, l);
+	return {
+		open: (e = 0) => d.open(e),
+		close: () => d.close(),
+		next: () => d.next(),
+		prev: () => d.prev(),
+		destroy: () => d.destroy(),
+		getCurrentIndex: () => d.getCurrentIndex(),
+		view: (e) => {
+			d.view(e);
+		}
+	};
+}
+export { DefaultOptions as n, getDownloadButton as r, vistaView as t };

package/dist/vistaview.cjs

@@ -0,0 +1 @@
+const e=require(`./vistaview-B7UMydz4.cjs`);exports.DefaultOptions=e.n,exports.getDownloadButton=e.r,exports.vistaView=e.t;