Change the way EventHandler works

This commit is contained in:
MotorTruck1221 2025-01-03 05:04:44 -07:00
parent 5aa0169e81
commit 927b68dab7
No known key found for this signature in database
GPG key ID: 08F417E2B8B61EA4
2 changed files with 28 additions and 33 deletions

View file

@ -3,11 +3,11 @@ import LoadingComponent from "@components/Loading.astro";
import Layout from "@layouts/Layout.astro"; import Layout from "@layouts/Layout.astro";
--- ---
<Layout title="Loading page..." noHeader="true"> <!-- Layout title="Loading page..." noHeader="true">
<LoadingComponent /> <LoadingComponent />
</Layout> </Layout -->
<script> <script>
import { pageLoad } from "@utils/events"; import { EventHandler } from "@utils/events";
import { navigate } from "astro:transitions/client"; import { navigate } from "astro:transitions/client";
function isComingFromIframe() { function isComingFromIframe() {
try { try {
@ -17,11 +17,19 @@ import Layout from "@layouts/Layout.astro";
return true; return true;
} }
} }
pageLoad(() => {
const eHandle = new EventHandler({
events: {
"astro:page-load": (() => {
const isIframe = isComingFromIframe(); const isIframe = isComingFromIframe();
if (!isIframe) { if (!isIframe) {
console.log("Assuming request isn't coming from iFrame. Redirecting..."); console.log("Assuming request isn't coming from iframe. Redirecting...");
navigate('/'); navigate("/");
} }
})
},
logging: false
}); });
//Handle the events.
eHandle.handleEvents();
</script> </script>

View file

@ -19,15 +19,11 @@ interface Events {
* "astro:before-swap": () => {}, * "astro:before-swap": () => {},
* "astro:after-swap": () => {}, * "astro:after-swap": () => {},
* "DOMContentLoaded": () => {} * "DOMContentLoaded": () => {}
* }, // Do note: these are optional to pass. But if you try to call the method associated with the event, it WILL throw an error. * }, // Pass any number of these : D (they are all optional)
* logging: false // Set this to true to enable logging when things go wrong. * logging: false // Set this to true to enable logging when things go wrong.
* }); * });
* *
* eventHandler.pageLoad(); // For astro:page-load * eventHandler.handleEvents(); // Attaches every event you passed.
* eventHandler.beforeSwap(); // For astro:before-swap
* eventHandler.afterSwap(); // For astro:after-swap
* eventHandler.domContent(); // For DOMContentLoaded
* // NOTE: If you do not pass a function in the events: {} associated with these events, it WILL throw an error.
*/ */
class EventHandler { class EventHandler {
#eventItems: Events; #eventItems: Events;
@ -38,24 +34,15 @@ class EventHandler {
if (items.logging) return document.addEventListener(eventType, () => fn()); if (items.logging) return document.addEventListener(eventType, () => fn());
try { document.addEventListener(eventType, () => fn()) } catch (_) {}; try { document.addEventListener(eventType, () => fn()) } catch (_) {};
} }
#throwErrorOnUnspecified(fn: Event) { /**
throw new Error(`No function specified for ${fn}`); * Attatches the events you passed when creating the class. If none are passed, an error is thrown.
} */
pageLoad() { handleEvents() {
if (!this.#eventItems.events["astro:page-load"]) return this.#throwErrorOnUnspecified("astro:page-load"); const events = Object.entries(this.#eventItems.events);
this.#attachEvent(this.#eventItems, "astro:page-load", this.#eventItems.events["astro:page-load"]); if (!events || events.length === 0) throw new Error('No events added!');
} events.map((event) => {
beforeSwap() { this.#attachEvent(this.#eventItems, event[0] as Event, event[1]);
if (!this.#eventItems.events["astro:before-swap"]) return this.#throwErrorOnUnspecified("astro:before-swap"); });
this.#attachEvent(this.#eventItems, "astro:before-swap", this.#eventItems.events["astro:before-swap"]);
}
afterSwap() {
if (!this.#eventItems.events["astro:after-swap"]) return this.#throwErrorOnUnspecified("astro:after-swap");
this.#attachEvent(this.#eventItems, "astro:after-swap", this.#eventItems.events["astro:after-swap"]);
}
domContent() {
if (!this.#eventItems.events.DOMContentLoaded) return this.#throwErrorOnUnspecified("DOMContentLoaded");
this.#attachEvent(this.#eventItems, "DOMContentLoaded", this.#eventItems.events.DOMContentLoaded);
} }
} }