Gallery.astro

---
import SectionTitle from "@/components/SectionTitle.astro"

const IMAGES_TO_LOAD = 5

interface Props {
	id: string
	name: string
}

const { id, name } = Astro.props
---

<section class="my-44">
	<SectionTitle title="Galería de Fotos" description={`Fotos de ${name}`} />

	<div id="boxer-gallery" class="relative mt-8 grid grid-cols-[1fr_0.5fr_0.5fr] gap-3">
		{
			Array.from({ length: IMAGES_TO_LOAD }).map((_, index) => (
				<a
					class:list={[
						" aspect-square transition hover:scale-105 hover:brightness-125",
						{ "row-span-2": index === 0 },
					]}
					href={`https://cdn.lavelada.dev/boxers/gallery/${id}/${index + 1}.webp`}
					title={`Abrir imagen ${index} de la galería de ${name}`}
				>
					<figure class="h-full w-full">
						<picture class="block h-full w-full">
							<img
								loading="lazy"
								decoding="async"
								class="aspect-square h-full w-full rounded object-cover object-top"
								alt={`Imagen de la galería de fotos de ${name}`}
								src={`https://cdn.lavelada.dev/boxers/gallery/${id}/${index + 1}.webp`}
							/>
						</picture>
					</figure>
				</a>
			))
		}
		<dialog
			id="lightbox"
			class="h-auto max-h-[80%] w-auto max-w-[80%] items-center justify-center overflow-hidden bg-transparent backdrop:bg-black/70 lg:max-h-[90%] lg:w-full lg:max-w-[90%]"
		>
			<button
				type="button"
				class="fixed right-8 top-8 rounded bg-black/60 p-4 text-white transition hover:scale-110 hover:bg-accent hover:text-black"
			>
				<svg class="size-5" aria-hidden="true" fill="none" viewBox="0 0 14 14">
					<path
						stroke="currentColor"
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"></path>
				</svg>
			</button>
			<div class="mx-auto flex h-full w-full items-center justify-center gap-5">
				<div class="absolute h-full w-full bg-transparent" data-dialog-bg></div>
				<button
					data-btn-prev
					class="group z-10 hidden transition hover:scale-125 motion-reduce:transition-none motion-reduce:hover:scale-100 lg:block"
				>
					<img
						class="size-16 opacity-85 group-hover:opacity-100"
						src="https://cdn.lavelada.dev/ui/left-arrow.svg"
						alt="Imagen anterior"
						title="Ir a la imagen anterior"
					/>
				</button>
				<img
					loading="lazy"
					decoding="async"
					class="boxer-gallery-img z-10 h-full rounded object-contain object-center"
					alt={`Imagen de la galería de fotos de ${name}`}
					src={`https://cdn.lavelada.dev/boxers/gallery/${id}/1.webp`}
				/>
				<button
					data-btn-next
					class="group z-10 hidden transition hover:scale-125 motion-reduce:transition-none motion-reduce:hover:scale-100 lg:block"
				>
					<img
						class="size-16 rotate-180 opacity-85 group-hover:opacity-100"
						src="https://cdn.lavelada.dev/ui/left-arrow.svg"
						alt="Imagen siguiente"
						title="Ir a la imagen siguiente"
					/>
				</button>
			</div>
		</dialog>
	</div>
</section>

<style>
	#lightbox img.boxer-gallery-img {
		view-transition-name: lightbox-image;
	}
</style>

<script>
	import { $ } from "@/lib/dom-selector"

	document.addEventListener("astro:page-load", () => {
		const $lightbox = $("#lightbox") as HTMLDialogElement
		const $gallery = $("#boxer-gallery") as HTMLElement
		if (!$gallery) return

		const $links = $gallery?.querySelectorAll("a")
		const $close = $lightbox?.querySelector("button")

		const updateImg = (link: HTMLElement) => {
			const img = $lightbox?.querySelector(".boxer-gallery-img") as HTMLImageElement
			const newImg = link.querySelector("img") as HTMLImageElement
			if (img && newImg) img.src = newImg.src
		}

		const close = () => {
			$lightbox.close()
		}

		const showPrevImage = () => {
			const current = $gallery.querySelector("a[data-current=true]") as HTMLAnchorElement
			const prev = (current.previousElementSibling ||
				$gallery.querySelector("a:last-of-type")) as HTMLAnchorElement
			prev.click()
		}

		const showNextImage = () => {
			const current = $gallery.querySelector("a[data-current=true]") as HTMLAnchorElement
			const next = (
				current.nextElementSibling?.nodeName === "A"
					? current.nextElementSibling
					: $gallery.querySelector("a:first-of-type")
			) as HTMLAnchorElement
			next.click()
		}

		document.addEventListener("click", (event) => {
			if (!$lightbox.open) return
			const target = event.target as HTMLElement
			const isPrev = target.title.includes("anterior")
			const next = target.title.includes("siguiente")
			if (isPrev) {
				showPrevImage()
			}
			if (next) {
				showNextImage()
			}
		})

		document.addEventListener("keydown", (event) => {
			if (!$lightbox.open) return

			if (event.key === "Escape") {
				close()
			}

			if (event.key === "ArrowRight") {
				showNextImage()
			}

			if (event.key === "ArrowLeft") {
				showPrevImage()
			}
		})

		// al hacer click en el botón de cerrar
		$close?.addEventListener("click", close)

		$lightbox?.addEventListener("click", (event) => {
			const $dialogBg = $("[data-dialog-bg]") as HTMLDivElement
			const canClose = event.target === $dialogBg || event.target === $lightbox
			if (canClose) close()
		})

		// al hacer click en un enlace de lightbox
		// usar la imagen del enlace como imagen principal
		$links.forEach((link) =>
			link.addEventListener("click", (event) => {
				event.preventDefault()
				// remove current data atribute
				$gallery.querySelector("a[data-current=true]")?.removeAttribute("data-current")
				// set current data atribute
				link.setAttribute("data-current", "true")

				// update de image before show lightbox
				if ($lightbox.open && document.startViewTransition) {
					document.startViewTransition(() => {
						updateImg(link)
					})
					return
				} else {
					updateImg(link)
				}

				// add lightbox
				if (!$lightbox.open) {
					$lightbox.showModal()
				}
			})
		)
	})
</script>