Added custom event support

codewithkyle · codewithkyle · commit 34888b622758 · 2025-03-15T16:23:02.000-04:00
diff --git a/src/notifications.ts b/src/notifications.ts
@@ -8,6 +8,9 @@ class Notifications {
         this.notifications = [];
         this.time = performance.now();
         this.loop();
+        window.addEventListener("notify:alert", (e:CustomEvent) => {
+            if (e?.detail) this.push(e.detail);
+        });
     }
 
     private loop() {
diff --git a/src/snackbar.ts b/src/snackbar.ts
@@ -8,6 +8,9 @@ class Snackbar {
         this.snackbarQueue = [];
         this.time = performance.now();
         this.loop();
+        window.addEventListener("notify:snackbar", (e:CustomEvent) => {
+            if (e?.detail) this.snackbar(e.detail);
+        });
     }
 
     private loop() {
diff --git a/src/toaster.ts b/src/toaster.ts
@@ -8,6 +8,9 @@ class Toaster {
         this.toastQueue = [];
         this.time = performance.now();
         this.loop();
+        window.addEventListener("notify:toast", (e:CustomEvent) => {
+            if (e?.detail) this.push(e.detail);
+        });
     }
 
     private loop() {
diff --git a/test/index.html b/test/index.html
@@ -20,12 +20,20 @@
     <link href="./sonner.css" rel="stylesheet" />
 </head>
 <body>
-    <div class="w-screen h-screen" flex="justify-center items-center">
-        <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-snackbar">Test Snackbar</button>
-        <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-notif">Test Notification</button>
-        <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-custom-notif">Test Custom Notification</button>
-        <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-toast">Test Toast</button>
-        <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-sonner">Test Sonner</button>
+    <div class="w-screen h-screen" flex="column wrap justify-center items-center">
+        <div class="w-full mb-2" flex="justify-center items-center">
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-snackbar">Test Snackbar</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-notif">Test Notification</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-custom-notif">Test Custom Notification</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-toast">Test Toast</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--blue-700);color: #fff;height: 36px;" class="js-sonner">Test Sonner</button>
+        </div>
+        <div class="w-full" flex="justify-center items-center">
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--amber-700);color: #fff;height: 36px;" class="js-snackbar2">Test Snackbar</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--amber-700);color: #fff;height: 36px;" class="js-notif2">Test Notification</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--amber-700);color: #fff;height: 36px;" class="js-toast2">Test Toast</button>
+            <button style="padding: 0 1rem;margin-right: 1rem;background-color: var(--amber-700);color: #fff;height: 36px;" class="js-sonner2">Test Sonner</button>
+        </div>
     </div>
 
     <script type="module">
@@ -34,6 +42,64 @@
         import notifications from "./dist/notifications.js";
         import sonner from "./dist/sonner.js";
 
+        let count = 0;
+
+        const sonner2 = document.body.querySelector(".js-sonner2");
+        sonner2.addEventListener("click", ()=>{
+            const event = new CustomEvent("notify:sonner", {
+                detail: {
+                    message: `Example sonner toast message.`,
+                }
+            });
+            window.dispatchEvent(event);
+        });
+
+        const toast2 = document.body.querySelector(".js-toast2");
+        toast2.addEventListener("click", ()=>{
+            const event = new CustomEvent("notify:toast", {
+                detail: {
+                    message: `Example toast message ${count++}.`,
+                }
+            });
+            window.dispatchEvent(event);
+        });
+
+        const alert2 = document.body.querySelector(".js-notif2");
+        alert2.addEventListener("click", ()=>{
+            const event = new CustomEvent("notify:alert", {
+                detail: {
+                    title: "Example Toast Message",
+                    message: "This is what a toaster message might look like. Click the button to stack notifications.",
+                    buttons: [
+                        {
+                            label: "Reload",
+                            callback: ()=>{ location.reload(); },
+                        },
+                    ],
+                    duration: 10,
+                }
+            });
+            window.dispatchEvent(event);
+        });
+
+        const snackbarButton2 = document.body.querySelector(".js-snackbar2");
+        snackbarButton2.addEventListener("click", ()=>{
+            const event = new CustomEvent("notify:snackbar", {
+                detail: {
+                    message: "Example snackbar message.",
+                    autofocus: true,
+                    duration: Infinity,
+                    buttons: [
+                        {
+                            label: "Reload",
+                            callback: ()=>{ location.reload(); },
+                        },
+                    ],
+                }
+            });
+            window.dispatchEvent(event);
+        });
+
         const snackbarButton = document.body.querySelector(".js-snackbar");
         snackbarButton.addEventListener("click", () =>{
             snackbar({
@@ -88,7 +154,6 @@
             notifications.append(new CustomNotificationElement("Custom toaster notification example."));
         });
 
-        let count = 0;
         const toastButton = document.body.querySelector(".js-toast");
         toastButton.addEventListener("click", () => {
             toaster.push({

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,9 @@ class Notifications {`
`8`	`8`	`this.notifications = [];`
`9`	`9`	`this.time = performance.now();`
`10`	`10`	`this.loop();`
	`11`	`+ window.addEventListener("notify:alert", (e:CustomEvent) => {`
	`12`	`+ if (e?.detail) this.push(e.detail);`
	`13`	`+ });`
`11`	`14`	`}`
`12`	`15`
`13`	`16`	`private loop() {`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,9 @@ class Snackbar {`
`8`	`8`	`this.snackbarQueue = [];`
`9`	`9`	`this.time = performance.now();`
`10`	`10`	`this.loop();`
	`11`	`+ window.addEventListener("notify:snackbar", (e:CustomEvent) => {`
	`12`	`+ if (e?.detail) this.snackbar(e.detail);`
	`13`	`+ });`
`11`	`14`	`}`
`12`	`15`
`13`	`16`	`private loop() {`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,9 @@ class Toaster {`
`8`	`8`	`this.toastQueue = [];`
`9`	`9`	`this.time = performance.now();`
`10`	`10`	`this.loop();`
	`11`	`+ window.addEventListener("notify:toast", (e:CustomEvent) => {`
	`12`	`+ if (e?.detail) this.push(e.detail);`
	`13`	`+ });`
`11`	`14`	`}`
`12`	`15`
`13`	`16`	`private loop() {`