Broadcast common CSS classes to components

Integrated event-based broadcasting to share common CSS classes across modal-related components. Replaced direct class addition with event listeners to enhance modularity and flexibility. This facilitates easier maintenance and further customization of component behavior.

Author: 0xMax42

src/libs/Modals/Modal/Modal.ts

@@ -1,5 +1,6 @@
 import { ImplementsStatic } from 'src/classes/decorators/ImplementsStatic';
 import type { ILogger, ILogger_ } from 'src/interfaces/ILogger';
+import { broadcastEvent, DIComponent } from 'src/libs/DIComponent';
 import type { IFlow_, IFlowApi } from 'src/libs/HTMLFlow/interfaces/IFlow';
 import { Opts } from 'src/libs/HTMLFlow/Opts';
 import { IFlowConfig } from 'src/libs/HTMLFlow/types/IFlowDelegates';
@@ -22,7 +23,6 @@ import {
     IOpenCallback,
     IShouldOpenCallback,
 } from './types/IModalCallbacks';
-import { DIComponent } from '../../DIComponent/DIComponent';
 
 /**
  * Represents a custom modal, which can be dragged around
@@ -233,6 +233,15 @@ export class Modal extends DIComponent implements IModal, IModalFluentApi {
      */
     public override onload(): void {
         this._open();
+
+        /**
+         * Broadcast the common window classes to the plugin.
+         */
+        if (this._draggableElement?.className != null) {
+            this[broadcastEvent]('common-window-classes', [
+                this._draggableElement.className,
+            ]);
+        }
     }
 
     /**

src/libs/Settings/SettingColumns/Input.ts

@@ -2,6 +2,7 @@ import createFuzzySearch from '@nozbe/microfuzz';
 import { ImplementsStatic } from 'src/classes/decorators/ImplementsStatic';
 import type { IApp } from 'src/interfaces/IApp';
 import type { ILogger, ILogger_ } from 'src/interfaces/ILogger';
+import { onEvent } from 'src/libs/DIComponent';
 import { DIComponent } from 'src/libs/DIComponent/DIComponent';
 import type { IFlow_, IFlowApi } from 'src/libs/HTMLFlow/interfaces/IFlow';
 import { Opts } from 'src/libs/HTMLFlow/Opts';
@@ -154,15 +155,6 @@ export class Input
                 )(input).map((result) => result.item.value);
             },
         );
-
-        const draggableClassName =
-            this.parentSettingItem?.parentModal?.draggableClassName;
-
-        if (draggableClassName != null) {
-            this._suggester.suggestContainerEl?.classList.add(
-                draggableClassName,
-            );
-        }
     }
 
     public readonly parentSettingItem: ISettingRowProtected;
@@ -198,6 +190,13 @@ export class Input
         );
 
         this.addChild(flow);
+
+        /**
+         * Adds the common window classes to the suggester container.
+         */
+        this[onEvent]('common-window-classes', (classes: string[]) => {
+            this._suggester?.suggestContainerEl?.classList.add(...classes);
+        });
     }
 
     /**

src/libs/Settings/SettingColumns/TagSearch.ts

@@ -2,6 +2,7 @@ import createFuzzySearch from '@nozbe/microfuzz';
 import { LazzyLoading } from 'src/classes/decorators/LazzyLoading';
 import type { IApp } from 'src/interfaces/IApp';
 import type { ILogger_, ILogger } from 'src/interfaces/ILogger';
+import { onEvent } from 'src/libs/DIComponent';
 import { DIComponent } from 'src/libs/DIComponent/DIComponent';
 import type { ITag, ITag_ } from 'src/libs/Tags/interfaces/ITag';
 import type { ITags, ITags_ } from 'src/libs/Tags/interfaces/ITags';
@@ -149,6 +150,13 @@ export class TagSearch
     public override onload(): void {
         this._configurator?.(this);
         this.build();
+
+        /**
+         * Adds the common window classes to the suggester container.
+         */
+        this[onEvent]('common-window-classes', (classes: string[]) => {
+            this._suggester?.suggestContainerEl?.classList.add(...classes);
+        });
     }
 
     /**
@@ -226,15 +234,6 @@ export class TagSearch
                     return filteredItems;
                 },
             );
-
-            const draggableClassName =
-                this.parentSettingItem?.parentModal?.draggableClassName;
-
-            if (draggableClassName != null) {
-                this._suggester.suggestContainerEl?.classList.add(
-                    draggableClassName,
-                );
-            }
         }
     }