Merge pull request #934 from AlejandroSuero/feature/refactor-dom-sele…

…ctors

feat: refactor DOM selectors, using `@/lib/dom-selector`

src/components/AnimatedX.astro

@@ -141,6 +141,8 @@
 	>
 </span>
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	let intervalId: NodeJS.Timeout
 	type AnimatedXElement = SVGGElement | null
 
@@ -152,9 +154,9 @@
 		if (prefersReducedMotion) return
 
 		intervalId && clearInterval(intervalId)
-		const $svgGroup1 = document.getElementById("layer1") as AnimatedXElement
-		const $svgGroup2 = document.getElementById("layer2") as AnimatedXElement
-		const $svgGroup3 = document.getElementById("layer3") as AnimatedXElement
+		const $svgGroup1 = $("#layer1") as AnimatedXElement
+		const $svgGroup2 = $("#layer2") as AnimatedXElement
+		const $svgGroup3 = $("#layer3") as AnimatedXElement
 
 		intervalId = setInterval(() => drawGroup([$svgGroup1, $svgGroup2, $svgGroup3]), INTERVAL_TIME)
 	})

src/components/Boxers/Gallery.astro

@@ -99,9 +99,11 @@ const { id, name } = Astro.props
 </style>
 
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
-		const $lightbox = document.getElementById("lightbox") as HTMLDialogElement
-		const $gallery = document.getElementById("boxer-gallery") as HTMLElement
+		const $lightbox = $("#lightbox") as HTMLDialogElement
+		const $gallery = $("#boxer-gallery") as HTMLElement
 		if (!$gallery) return
 
 		const $links = $gallery?.querySelectorAll("a")
@@ -167,7 +169,7 @@ const { id, name } = Astro.props
 		$close?.addEventListener("click", close)
 
 		$lightbox?.addEventListener("click", (event) => {
-			const $dialogBg = document.querySelector("[data-dialog-bg]") as HTMLDivElement
+			const $dialogBg = $("[data-dialog-bg]") as HTMLDivElement
 			const canClose = event.target === $dialogBg || event.target === $lightbox
 			if (canClose) close()
 		})

src/components/ButtonUp.astro

@@ -19,9 +19,11 @@
 </div>
 
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
 		let timeout: number = 0 // Identificador para clearTimeout
-		const $button = document.getElementById("scroll-to-top") as HTMLButtonElement
+		const $button = $("#scroll-to-top") as HTMLButtonElement
 
 		const DISPLAY = { BLOCK: "block", NONE: "none" } as const
 

src/components/CalendarButton.astro

@@ -12,6 +12,8 @@ import Action from "@/components/Action.astro"
 </Action>
 
 <script is:inline>
+	import { $ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
 		const config = {
 			name: "🥊 La Velada del Año 4 - El Evento del Año",
@@ -42,7 +44,7 @@ import Action from "@/components/Action.astro"
 			})
 		}
 
-		const button = document.querySelector("#add-to-calendar")
+		const button = $("#add-to-calendar")
 
 		const handleClick = async () => {
 			if (status === "loading") return

src/components/ClipsModal.astro

@@ -57,11 +57,13 @@
 </style>
 
 <script>
+	import { $, $$ } from "@/lib/dom-selector"
+
 	document.addEventListener("astro:page-load", () => {
-		const $clipContainer = document.querySelectorAll(".clip-container")
-		const $clipDialog = document.querySelector(".clip-dialog") as HTMLDialogElement
-		const $closeButton = document.querySelector(".close-dialog")
-		const $ytFrame = document.querySelector(".yt-iframe")
+		const $clipContainer = $$(".clip-container")
+		const $clipDialog = $(".clip-dialog") as HTMLDialogElement
+		const $closeButton = $(".close-dialog")
+		const $ytFrame = $(".yt-iframe")
 
 		if (!$clipDialog) return
 

src/components/SmokeBackground.astro

@@ -3,8 +3,10 @@
 </div>
 
 <script>
+	import { $ } from "@/lib/dom-selector"
+
 	const NUM_PARTICLES = 50 // Número de partículas
-	const canvas = document.getElementById("smoke-canvas") as HTMLCanvasElement
+	const canvas = $("#smoke-canvas") as HTMLCanvasElement
 	const ctx = canvas.getContext("2d") as CanvasRenderingContext2D
 	let raf: number
 

src/components/TwitchLiveBox.astro

@@ -40,20 +40,22 @@ const { streamer = "ibai" } = Astro.props
 </div>
 
 <script is:inline>
+	import { $ } from "@/lib/dom-selector"
+
 	const CONFIG = {
 		MIDU_API_UPTIME_WORKER: "https://midudev-apis.midudev.workers.dev/uptime",
 		VELADA_DATE: "2024-07-13 19:00:00 GMT+0100",
 		TWITCH_PLAYER_URL: "https://player.twitch.tv",
 	}
-	const streamer = document.querySelector("#streamer").value
+	const streamer = $("#streamer").value
 	const isVeladaTime = new Date().getTime() >= new Date(CONFIG.VELADA_DATE).getTime()
 	if (isVeladaTime) {
 		fetch(`${CONFIG.MIDU_API_UPTIME_WORKER}/${streamer}`)
 			.then((res) => res.json())
 			.then(({ online }) => {
 				if (online) {
-					document.querySelector("#live").style.display = "block"
-					document.querySelector("#live-frame").innerHTML =
+					$("#live").style.display = "block"
+					$("#live-frame").innerHTML =
 						`<iframe src="${CONFIG.TWITCH_PLAYER_URL}/?channel=${streamer}&parent=${document.location.hostname}" frameborder="0" width="380" height="200" allowfullscreen="true" scrolling="no"></iframe>`
 				}
 			})
@@ -62,9 +64,9 @@ const { streamer = "ibai" } = Astro.props
 			})
 	}
 
-	const closeButton = document.querySelector("#live-close")
+	const closeButton = $("#live-close")
 	closeButton?.addEventListener("click", () => {
-		document.querySelector("#live").style.display = "none"
-		document.querySelector("#live").innerHTML = ""
+		$("#live").style.display = "none"
+		$("#live").innerHTML = ""
 	})
 </script>

src/function/toast.ts

@@ -1,4 +1,5 @@
 // from: https://github.com/dgtlss/butterup/tree/main
+import { $ } from "@/lib/dom-selector"
 
 interface ToastOptions {
 	title: string
@@ -41,7 +42,7 @@ export const butterup: ButterupProps = {
 		stackedToasts: true,
 	},
 	toast({ title, message, type, location, icon, theme, dismissible }) {
-		let toaster = document.getElementById("toaster")
+		let toaster = $("#toaster")
 		if (toaster == null) {
 			// toaster doesn't exist, create it
 			toaster = document.createElement("div")
@@ -54,7 +55,7 @@ export const butterup: ButterupProps = {
 			document.body.appendChild(toaster)
 
 			// Create the toasting rack inside of the toaster
-			if (document.getElementById("butterupRack") == null) {
+			if ($("#butterupRack") == null) {
 				const rack = document.createElement("ol")
 				rack.id = "butterupRack"
 				rack.className = "rack"
@@ -85,8 +86,8 @@ export const butterup: ButterupProps = {
 		// Check if there are too many toasts on the screen
 		if (butterup.options.currentToasts >= butterup.options.maxToasts) {
 			// there are too many toasts on the screen, delete the oldest one
-			const oldestToast = document.getElementById("butterupRack")?.firstChild
-			if (oldestToast) document.getElementById("butterupRack")?.removeChild(oldestToast)
+			const oldestToast = $("#butterupRack")?.firstChild
+			if (oldestToast) $("#butterupRack")?.removeChild(oldestToast)
 			butterup.options.currentToasts--
 		}
 
@@ -119,7 +120,7 @@ export const butterup: ButterupProps = {
 		}
 
 		// Add the toast to the rack
-		document.getElementById("butterupRack")?.appendChild(toast)
+		$("#butterupRack")?.appendChild(toast)
 
 		// check if the user wants an icon
 		if (icon != null && icon === true) {
@@ -205,7 +206,7 @@ export const butterup: ButterupProps = {
 	},
 	despawnToast(toastId) {
 		// fade out the toast and then remove it from the DOM
-		const toast = document.getElementById(toastId)
+		const toast = $(`#${toastId}`)
 		// does the toast exist?
 		if (toast != null) {
 			toast.className += " fadeOutToast"
@@ -220,7 +221,7 @@ export const butterup: ButterupProps = {
 				}
 				// if this was the last toast on the screen, remove the toaster
 				if (butterup.options.currentToasts === 0) {
-					const toaster = document.getElementById("toaster")
+					const toaster = $("#toaster")
 					if (toaster) toaster.parentNode?.removeChild(toaster)
 				}
 			}, 500)

src/sections/PrincipalDate.astro

@@ -167,7 +167,7 @@ import MapMarkerIcon from "@/icons/map-marker.astro"
 	// Verifica si el evento ya ha pasado
 	const eventHasPassed = EVENT_TIMESTAMP < Date.now()
 	if (eventHasPassed) {
-		const addToCalendarBtn = document.getElementById("add-to-calendar")
+		const addToCalendarBtn = $("#add-to-calendar")
 		if (addToCalendarBtn) {
 			addToCalendarBtn.remove()
 		}

src/sections/SelectYourBoxer.astro

@@ -124,7 +124,7 @@ const boxerColumns = [
 			new URLSearchParams(window.location.search).get("boxer") ||
 			"el-mariana"
 
-		const updatedSelectedBoxerElement: HTMLElement | null = document.querySelector(
+		const updatedSelectedBoxerElement: HTMLElement | null = $(
 			`.boxer-link[data-id=${updatedSelectedBoxerId}]`
 		)
 		if (updatedSelectedBoxerElement) {