diff --git a/com/templates/com/screen_slideshow.jinja b/com/templates/com/screen_slideshow.jinja index 08425f7c..4a928cc4 100644 --- a/com/templates/com/screen_slideshow.jinja +++ b/com/templates/com/screen_slideshow.jinja @@ -4,7 +4,7 @@ {% trans %}Slideshow{% endtrans %} - + { - Alpine.start(); -}); diff --git a/core/static/bundled/alpine-index.ts b/core/static/bundled/alpine-index.ts new file mode 100644 index 00000000..9dd1171f --- /dev/null +++ b/core/static/bundled/alpine-index.ts @@ -0,0 +1,21 @@ +import sort from "@alpinejs/sort"; +import { Alpine } from "alpinejs"; +import { limitedChoices } from "#core:alpine/limited-choices"; +import { + type NotificationPlugin, + alpinePlugin as notificationPlugin, +} from "#core:utils/notifications"; + +declare module "alpinejs" { + interface Magics { + $notifications: NotificationPlugin; + } +} +Alpine.plugin([sort, limitedChoices]); +Alpine.magic("notifications", notificationPlugin); +// biome-ignore lint/style/useNamingConvention: it's how it's named +Object.assign(window, { Alpine }); + +window.addEventListener("DOMContentLoaded", () => { + Alpine.start(); +}); diff --git a/core/static/bundled/utils/notifications.ts b/core/static/bundled/utils/notifications.ts index 8af936e3..ecb52b63 100644 --- a/core/static/bundled/utils/notifications.ts +++ b/core/static/bundled/utils/notifications.ts @@ -1,30 +1,40 @@ +import { Alpine } from "alpinejs"; + export enum NotificationLevel { Error = "error", Warning = "warning", Success = "success", } -export function createNotification(message: string, level: NotificationLevel) { - const element = document.getElementById("quick-notifications"); - if (element === null) { - return false; - } - return element.dispatchEvent( - new CustomEvent("quick-notification-add", { - detail: { text: message, tag: level }, - }), - ); +export interface NotificationPlugin { + error: (message: string) => void; + warning: (message: string) => void; + success: (message: string) => void; + clear: () => void; + addMany: (notifs: Notification[]) => void; + getAll: () => Notification[]; } -export function deleteNotifications() { - const element = document.getElementById("quick-notifications"); - if (element === null) { - return false; - } - return element.dispatchEvent(new CustomEvent("quick-notification-delete")); +export interface Notification { + tag: NotificationLevel; + text: string; } -export function alpinePlugin() { +Alpine.store("notifications", [] as Notification[]); + +function createNotification(message: string, level: NotificationLevel) { + (Alpine.store("notifications") as Notification[]).push({ text: message, tag: level }); +} + +function deleteNotifications() { + Alpine.store("notifications", []); +} + +function getNotifications() { + return Alpine.store("notifications") as Notification[]; +} + +export function alpinePlugin(): NotificationPlugin { return { error: (message: string) => createNotification(message, NotificationLevel.Error), warning: (message: string) => @@ -32,5 +42,10 @@ export function alpinePlugin() { success: (message: string) => createNotification(message, NotificationLevel.Success), clear: () => deleteNotifications(), + addMany: (notifs: Notification[]) => + notifs.forEach((n) => { + createNotification(n.text, n.tag); + }), + getAll: () => getNotifications(), }; } diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja index 025dacdf..577546be 100644 --- a/core/templates/core/base.jinja +++ b/core/templates/core/base.jinja @@ -37,7 +37,7 @@ - + diff --git a/core/templates/core/base/notifications.jinja b/core/templates/core/base/notifications.jinja index 030b2d4e..de063fb4 100644 --- a/core/templates/core/base/notifications.jinja +++ b/core/templates/core/base/notifications.jinja @@ -1,15 +1,13 @@
+ ])' +>