wip

PlanTempus.Application/wwwroot/ts/modules/drawers.ts

@@ -13,6 +13,7 @@ export class DrawerController {
   private newTodoDrawer: HTMLElement | null = null;
   private overlay: HTMLElement | null = null;
   private activeDrawer: DrawerName | null = null;
+  private activeGenericDrawer: HTMLElement | null = null;
 
   constructor() {
     this.profileDrawer = document.getElementById('profileDrawer');
@@ -22,6 +23,7 @@ export class DrawerController {
     this.overlay = document.getElementById('drawerOverlay');
 
     this.setupListeners();
+    this.setupGenericDrawers();
   }
 
   /**
@@ -71,11 +73,37 @@ export class DrawerController {
     [this.profileDrawer, this.notificationDrawer, this.todoDrawer, this.newTodoDrawer]
       .forEach(drawer => drawer?.classList.remove('active'));
 
+    // Close any generic drawers
+    this.closeGenericDrawer();
+
     this.overlay?.classList.remove('active');
     document.body.style.overflow = '';
     this.activeDrawer = null;
   }
 
+  /**
+   * Open a generic drawer by ID
+   */
+  openGenericDrawer(drawerId: string): void {
+    this.closeAll();
+
+    const drawer = document.getElementById(drawerId);
+    if (drawer && this.overlay) {
+      drawer.classList.add('open');
+      this.overlay.classList.add('active');
+      document.body.style.overflow = 'hidden';
+      this.activeGenericDrawer = drawer;
+    }
+  }
+
+  /**
+   * Close the currently open generic drawer
+   */
+  closeGenericDrawer(): void {
+    this.activeGenericDrawer?.classList.remove('open');
+    this.activeGenericDrawer = null;
+  }
+
   /**
    * Open profile drawer
    */
@@ -223,4 +251,35 @@ export class DrawerController {
       option.classList.add('active');
     }
   }
+
+  /**
+   * Setup generic drawer triggers and close buttons
+   * Uses data-drawer-trigger="drawer-id" and data-drawer-close attributes
+   */
+  private setupGenericDrawers(): void {
+    // Handle drawer triggers
+    document.addEventListener('click', (e: Event) => {
+      const target = e.target as HTMLElement;
+      const trigger = target.closest<HTMLElement>('[data-drawer-trigger]');
+
+      if (trigger) {
+        const drawerId = trigger.dataset.drawerTrigger;
+        if (drawerId) {
+          this.openGenericDrawer(drawerId);
+        }
+      }
+    });
+
+    // Handle drawer close buttons
+    document.addEventListener('click', (e: Event) => {
+      const target = e.target as HTMLElement;
+      const closeBtn = target.closest<HTMLElement>('[data-drawer-close]');
+
+      if (closeBtn) {
+        this.closeGenericDrawer();
+        this.overlay?.classList.remove('active');
+        document.body.style.overflow = '';
+      }
+    });
+  }
 }