Improved controllers with events

Author: YummYume

assets/shared/controllers/carousel_controller.ts

@@ -1,39 +1,48 @@
 import { ActionEvent, Controller } from '@hotwired/stimulus';
-import { Carousel, type CarouselOptions } from 'flowbite';
+import { Carousel, type CarouselOptions, type CarouselInterface } from 'flowbite';
+
+import { CAROUSEL_EVENTS } from '$assets/types/constants/carousel';
 
 import type { ValueDefinitionMap } from '@hotwired/stimulus/dist/types/core/value_properties';
 
 /* stimulusFetch: 'lazy' */
 export default class CarouselController extends Controller<HTMLElement> {
   static values: ValueDefinitionMap = {
     options: { type: Object, default: {} },
+    eventPrefix: { type: String },
   };
 
-  static targets = ['carousel', 'item'];
+  static targets = ['item'];
 
   declare optionsValue: CarouselOptions;
 
   declare readonly hasOptionsValue: boolean;
 
-  declare readonly carouselTarget: HTMLElement;
+  declare eventPrefixValue: string;
 
-  declare readonly hasCarouselTarget: boolean;
+  declare readonly hasEventPrefixValue: boolean;
 
   declare readonly itemTarget: HTMLElement;
 
   declare readonly itemTargets: HTMLElement[];
 
   declare readonly hasItemTarget: boolean;
 
-  private carousel: Carousel | null = null;
+  private eventPrefix: string | undefined = undefined;
+
+  private carousel: CarouselInterface | null = null;
 
   connect() {
-    this.carousel = new Carousel(this.itemTargets.map((item, position) => ({ el: item, position })), this.optionsValue);
+    this.eventPrefix = this.hasEventPrefixValue ? this.eventPrefixValue : undefined;
+    this.carousel = new Carousel(
+      this.itemTargets.map((item, position) => ({ el: item, position })),
+      { ...this.defaultValues, ...this.optionsValue },
+    );
 
     document.addEventListener('turbo:before-cache', this.beforeCache);
   }
 
-  disconnect(): void {
+  disconnect() {
     document.removeEventListener('turbo:before-cache', this.beforeCache);
   }
 
@@ -79,11 +88,49 @@ export default class CarouselController extends Controller<HTMLElement> {
     this.carousel.cycle();
   }
 
+  isVisible(position: number) {
+    if (!this.carousel) {
+      return false;
+    }
+
+    return this.carousel.getItem(position);
+  }
+
+  isInitialized() {
+    return !!this.carousel;
+  }
+
   private beforeCache = () => {
     if (!this.carousel) {
       return;
     }
 
     this.carousel.slideTo(0);
   };
+
+  get defaultValues(): CarouselOptions {
+    return {
+      onNext: () => {
+        this.dispatch(CAROUSEL_EVENTS.NEXT, {
+          target: this.element,
+          detail: { carousel: this.carousel },
+          prefix: this.eventPrefix,
+        });
+      },
+      onPrev: () => {
+        this.dispatch(CAROUSEL_EVENTS.PREV, {
+          target: this.element,
+          detail: { carousel: this.carousel },
+          prefix: this.eventPrefix,
+        });
+      },
+      onChange: () => {
+        this.dispatch(CAROUSEL_EVENTS.CHANGE, {
+          target: this.element,
+          detail: { carousel: this.carousel },
+          prefix: this.eventPrefix,
+        });
+      },
+    };
+  }
 }

assets/shared/controllers/class-modal_controller.ts

@@ -1,12 +1,15 @@
 import { Controller } from '@hotwired/stimulus';
-import { Dismiss, type DismissOptions } from 'flowbite';
+import { Dismiss, type DismissOptions, type DismissInterface } from 'flowbite';
+
+import { DISMISS_EVENTS } from '$assets/types/constants/dismiss';
 
 import type { ValueDefinitionMap } from '@hotwired/stimulus/dist/types/core/value_properties';
 
 /* stimulusFetch: 'lazy' */
 export default class DismissController extends Controller<HTMLElement> {
   static values: ValueDefinitionMap = {
     options: { type: Object, default: {} },
+    eventPrefix: { type: String },
   };
 
   static targets = ['dismiss', 'trigger'];
@@ -15,6 +18,10 @@ export default class DismissController extends Controller<HTMLElement> {
 
   declare readonly hasOptionsValue: boolean;
 
+  declare eventPrefixValue: string;
+
+  declare readonly hasEventPrefixValue: boolean;
+
   declare readonly dismissTarget: HTMLElement;
 
   declare readonly hasDismissTarget: boolean;
@@ -23,19 +30,25 @@ export default class DismissController extends Controller<HTMLElement> {
 
   declare readonly hasTriggerTarget: boolean;
 
-  private dismiss: Dismiss | null = null;
+  private target = this.element;
+
+  private eventPrefix: string | undefined = undefined;
+
+  private dismiss: DismissInterface | null = null;
 
   connect() {
+    this.target = this.hasDismissTarget ? this.dismissTarget : this.element;
+    this.eventPrefix = this.hasEventPrefixValue ? this.eventPrefixValue : undefined;
     this.dismiss = new Dismiss(
-      this.hasDismissTarget ? this.dismissTarget : this.element,
+      this.target,
       this.hasTriggerTarget ? this.triggerTarget : undefined,
-      this.optionsValue,
+      { ...this.defaultValues, ...this.optionsValue },
     );
 
     document.addEventListener('turbo:before-cache', this.beforeCache);
   }
 
-  disconnect(): void {
+  disconnect() {
     document.removeEventListener('turbo:before-cache', this.beforeCache);
   }
 
@@ -47,11 +60,27 @@ export default class DismissController extends Controller<HTMLElement> {
     this.dismiss.hide();
   }
 
+  isInitialized() {
+    return !!this.dismiss;
+  }
+
   private beforeCache = () => {
     if (!this.dismiss) {
       return;
     }
 
     this.dismiss.hide();
   };
+
+  get defaultValues(): DismissOptions {
+    return {
+      onHide: () => {
+        this.dispatch(DISMISS_EVENTS.HIDE, {
+          target: this.target,
+          detail: { dismiss: this.dismiss },
+          prefix: this.eventPrefix,
+        });
+      },
+    };
+  }
 }

assets/shared/controllers/alert_controller.ts renamed to assets/shared/controllers/dismiss_controller.ts

@@ -1,12 +1,15 @@
 import { Controller } from '@hotwired/stimulus';
-import { Drawer, type DrawerOptions } from 'flowbite';
+import { Drawer, type DrawerOptions, type DrawerInterface } from 'flowbite';
+
+import { DRAWER_EVENTS } from '$assets/types/constants/drawer';
 
 import type { ValueDefinitionMap } from '@hotwired/stimulus/dist/types/core/value_properties';
 
 /* stimulusFetch: 'lazy' */
 export default class DrawerController extends Controller<HTMLElement> {
   static values: ValueDefinitionMap = {
     options: { type: Object, default: {} },
+    eventPrefix: { type: String },
   };
 
   static targets = ['drawer'];
@@ -15,19 +18,29 @@ export default class DrawerController extends Controller<HTMLElement> {
 
   declare readonly hasOptionsValue: boolean;
 
+  declare eventPrefixValue: string;
+
+  declare readonly hasEventPrefixValue: boolean;
+
   declare readonly drawerTarget: HTMLElement;
 
   declare readonly hasDrawerTarget: boolean;
 
-  private drawer: Drawer | null = null;
+  private target = this.element;
+
+  private eventPrefix: string | undefined = undefined;
+
+  private drawer: DrawerInterface | null = null;
 
   connect() {
-    this.drawer = new Drawer(this.hasDrawerTarget ? this.drawerTarget : this.element, this.optionsValue);
+    this.target = this.hasDrawerTarget ? this.drawerTarget : this.element;
+    this.eventPrefix = this.hasEventPrefixValue ? this.eventPrefixValue : undefined;
+    this.drawer = new Drawer(this.target, { ...this.defaultValues, ...this.optionsValue });
 
     document.addEventListener('turbo:before-cache', this.beforeCache);
   }
 
-  disconnect(): void {
+  disconnect() {
     document.removeEventListener('turbo:before-cache', this.beforeCache);
   }
 
@@ -55,11 +68,57 @@ export default class DrawerController extends Controller<HTMLElement> {
     this.drawer.toggle();
   }
 
+  isVisible() {
+    if (!this.drawer) {
+      return false;
+    }
+
+    return this.drawer.isVisible();
+  }
+
+  isHidden() {
+    if (!this.drawer) {
+      return true;
+    }
+
+    return this.drawer.isHidden();
+  }
+
+  isInitialized() {
+    return !!this.drawer;
+  }
+
   private beforeCache = () => {
     if (!this.drawer) {
       return;
     }
 
     this.drawer.hide();
   };
+
+  get defaultValues(): DrawerOptions {
+    return {
+      onHide: () => {
+        this.dispatch(DRAWER_EVENTS.HIDE, {
+          target: this.target,
+          detail: { drawer: this.drawer },
+          prefix: this.eventPrefix,
+        });
+      },
+      onShow: () => {
+        this.dispatch(DRAWER_EVENTS.SHOW, {
+          target: this.target,
+          detail: { drawer: this.drawer },
+          prefix: this.eventPrefix,
+        });
+      },
+      onToggle: () => {
+        this.dispatch(DRAWER_EVENTS.TOGGLE, {
+          target: this.target,
+          detail: { drawer: this.drawer },
+          prefix: this.eventPrefix,
+        });
+      },
+    };
+  }
 }