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..75ff18f5 --- /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, + notificationsPlugin as notifications, +} from "#core:utils/notifications"; + +declare module "alpinejs" { + interface Magics { + $notifications: NotificationPlugin; + } +} + +Alpine.plugin([sort, limitedChoices, notifications]); +// 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..f5ee874c 100644 --- a/core/static/bundled/utils/notifications.ts +++ b/core/static/bundled/utils/notifications.ts @@ -1,36 +1,64 @@ +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 { + /** + * Add an error message to the notifications. + */ + error: (message: string) => void; + /** + * Add a warning message to the notifications + */ + warning: (message: string) => void; + /** + * Add a success message to the notifications + */ + success: (message: string) => void; + /** + * Remove all notifications displayed on the page. + */ + clear: () => void; + /** + * Add multiple notifications at once. + * The added notifications can have different notification levels. + */ + addMany: (notifs: Notification[]) => void; + /** + * Return all notifications displayed on the page. + */ + 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() { - return { - error: (message: string) => createNotification(message, NotificationLevel.Error), - warning: (message: string) => - createNotification(message, NotificationLevel.Warning), - success: (message: string) => - createNotification(message, NotificationLevel.Success), - clear: () => deleteNotifications(), - }; +Alpine.store("notifications", [] as Notification[]); + +function createNotification(message: string, level: NotificationLevel) { + (Alpine.store("notifications") as Notification[]).push({ text: message, tag: level }); +} +function createManyNotifications(notifs: Notification[]) { + for (const notif of notifs) { + createNotification(notif.text, notif.tag); + } +} + +export const notifications: NotificationPlugin = { + error: (message: string) => createNotification(message, NotificationLevel.Error), + warning: (message: string) => createNotification(message, NotificationLevel.Warning), + success: (message: string) => createNotification(message, NotificationLevel.Success), + clear: () => Alpine.store("notifications", []), + addMany: (notifs: Notification[]) => createManyNotifications(notifs), + getAll: () => Alpine.store("notifications") as Notification[], +}; + +export function notificationsPlugin(GlobalAlpine: Alpine) { + GlobalAlpine.magic("notifications", () => ({ ...notifications })); } 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..6eb7b749 100644 --- a/core/templates/core/base/notifications.jinja +++ b/core/templates/core/base/notifications.jinja @@ -1,16 +1,13 @@
-