@arsedizioni/ars-utils 18.2.247 → 18.2.250

package/fesm2022/arsedizioni-ars-utils-core.mjs

@@ -1843,39 +1843,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                 }]
         }] });
 
+/**
+ * Standard Broadcast Messages Manager
+ * https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
+ */
+/**
+ * Web Standard Broadcast Messages Manager
+ * https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
+ */
+class BroadcastChannelManager {
+    /**
+     * Get the current channel registration
+     */
+    get currentBus() {
+        return this.channel?.name;
+    }
+    constructor(bus) {
+        this.channel = undefined;
+        this.subscriptions = [];
+        this.channel = new BroadcastChannel(bus);
+        this.channel.onmessageerror = (e) => {
+            console.error('[BroadcastChannelManager] Errore di ricezione del messaggio', e);
+        };
+        this.channel.onmessage = (e) => {
+            const bag = e.data;
+            if (bag) {
+                const bagInfo = this.subscriptions.find(m => m.messageId === bag.messageId);
+                bagInfo?.action(bag);
+            }
+        };
+    }
+    dispose() {
+        this.subscriptions = [];
+        this.channel?.close();
+        this.channel = null;
+    }
+    /**
+     * overloads
+     */
+    sendMessage(messageIdorBag, dataOrDelay = null, delay = 0) {
+        // console.warn({ messageIdorBag, dataOrDelay, delay });
+        setTimeout(() => {
+            if (typeof messageIdorBag === 'string') {
+                this.channel?.postMessage({ messageId: messageIdorBag, data: dataOrDelay });
+            }
+            else {
+                this.channel?.postMessage(messageIdorBag);
+            }
+        }, (typeof dataOrDelay === 'number' ? dataOrDelay : delay) ?? 0);
+    }
+    /**
+     * Subscribe to a message
+     * @param args The subscription info, see also {@link BroadcastChannelSubscriberInfo}
+     */
+    subscribe(args) {
+        const i = this.subscriptions.findIndex(m => m.messageId === args.messageId);
+        if (i === -1) {
+            this.subscriptions.push(args);
+        }
+        else {
+            this.subscriptions[i].action = args.action;
+        }
+    }
+    /**
+     * Remove a message subscription
+     * @param messageId The message id
+     */
+    unsubscribe(messageId) {
+        const i = this.subscriptions.findIndex(m => m.messageId === messageId);
+        if (i !== -1) {
+            this.subscriptions.splice(i, 1);
+        }
+    }
+    /**
+     * Remove all the current subscriptions
+     */
+    unsubscribeAll() {
+        this.subscriptions = [];
+    }
+}
+
 class ThemeService {
     constructor() {
+        // messaggi broadcast
+        this.broadcastChannel = new BroadcastChannelManager('THEME-SERVICE');
+        this.broadcastMessage = '$theme-changed';
+        // per intercettare il cambio di tema a livello di sistema
+        this.prefersColorSchemeMediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
         this.renderFactory2 = inject(RendererFactory2);
         this.renderer = this.renderFactory2.createRenderer(null, null);
+        /**
+         * Current theme
+         */
         this.theme = signal("light");
-        this.themeIcon = computed(() => {
-            return this.theme() === "dark" ? "light_mode" : "dark_mode";
-        });
-        this.themeName = computed(() => {
-            return this.theme() === "dark" ? "Passa a tema chiaro" : "Passa a tema scuro";
+        /**
+         * The current theme is "System default"
+         */
+        this.auto = computed(() => this.theme() === 'system');
+        /**
+         * Configuration schema about the icon, the text and the toggle() sequence
+         */
+        this.themeInfo = {
+            ['system']: { icon: 'auto_mode', name: 'Impostazione predefinita di sistema', next: 'light', tooltip: 'Passa a tema chiaro', },
+            ['light']: { icon: 'light_mode', name: 'Tema chiaro', next: 'dark', tooltip: 'Passa a tema scuro', },
+            ['dark']: { icon: 'dark_mode', name: 'Tema scuro', next: 'system', tooltip: 'Passa a tema predefinito di sistema', },
+        };
+        /**
+         * Icon of the current theme (mat-icon code)
+         */
+        this.themeIcon = computed(() => this.themeInfo[this.theme()].icon);
+        /**
+         * Current theme name
+         */
+        this.themeName = computed(() => this.themeInfo[this.theme()].name);
+        /**
+         * Tooltip text on toggle
+         */
+        this.toggleTooltip = computed(() => this.themeInfo[this.theme()].tooltip);
+        // reagisce al cambio di tema nel sistema
+        this.prefersColorSchemeMediaQueryList.onchange = (_) => this.auto() ? this.setTheme() : null;
+        // reagisce al messaggio broadcast (sincronizza i temi tra i popup dell'applicazione)
+        this.broadcastChannel.subscribe({
+            messageId: this.broadcastMessage,
+            action: (bag) => {
+                if (this.theme() !== bag.data) {
+                    this.setTheme(bag.data);
+                }
+            }
         });
+        // inizializza il tema
         this.setTheme(localStorage.getItem("preferred-theme") ?? null);
     }
+    ngOnDestroy() {
+        // chiude il canale di comunicazione broadcast
+        this.broadcastChannel.dispose();
+    }
     /**
      * Set the new theme
-     * @param theme : the theme
+     * @param theme the new theme
      */
-    setTheme(theme = null) {
-        if (!theme) {
-            this.theme.set(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-        }
-        else {
-            this.renderer.removeClass(document.body, this.theme());
-            this.theme.set(theme);
-        }
-        this.renderer.addClass(document.body, this.theme());
+    setTheme(theme = 'system') {
+        this.renderer.removeClass(document.body, 'light');
+        this.renderer.removeClass(document.body, 'dark');
+        this.theme.set(theme);
         localStorage.setItem("preferred-theme", this.theme());
+        this.renderer.addClass(document.body, this.auto() ? (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") : theme);
+        // lancia il messaggio broadcast
+        this.broadcastChannel.sendMessage(this.broadcastMessage, this.theme());
     }
     /**
      * Toggle theme
      */
     toggleTheme() {
-        this.setTheme(this.theme() === "dark" ? "light" : "dark");
+        this.setTheme(this.themeInfo[this.theme()].next);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ThemeService, providedIn: "root" }); }