Change the way EventHandler works
This commit is contained in:
parent
5aa0169e81
commit
927b68dab7
2 changed files with 28 additions and 33 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue