wip

src/v2/V2CompositionRoot.ts

@@ -10,6 +10,7 @@ import { RendererRegistry } from './core/RendererRegistry';
 import { CalendarOrchestrator } from './core/CalendarOrchestrator';
 import { TimeAxisRenderer } from './features/timeaxis/TimeAxisRenderer';
 import { ScrollManager } from './core/ScrollManager';
+import { HeaderDrawerManager } from './core/HeaderDrawerManager';
 import { MockTeamStore, MockResourceStore } from './demo/MockStores';
 import { DemoApp } from './demo/DemoApp';
 
@@ -47,6 +48,7 @@ export function createV2Container(): Container {
   builder.registerType(CalendarOrchestrator).as<CalendarOrchestrator>();
   builder.registerType(TimeAxisRenderer).as<TimeAxisRenderer>();
   builder.registerType(ScrollManager).as<ScrollManager>();
+  builder.registerType(HeaderDrawerManager).as<HeaderDrawerManager>();
 
   // Demo app
   builder.registerType(DemoApp).as<DemoApp>();

src/v2/core/HeaderDrawerManager.ts

@@ -0,0 +1,47 @@
+export class HeaderDrawerManager {
+  private drawer!: HTMLElement;
+  private spacer!: HTMLElement;
+  private expanded = false;
+  private readonly expandedHeight = 24;
+  private readonly duration = 200;
+
+  init(container: HTMLElement): void {
+    this.drawer = container.querySelector('swp-header-drawer')!;
+    this.spacer = container.querySelector('swp-header-spacer')!;
+  }
+
+  toggle(): void {
+    this.expanded ? this.collapse() : this.expand();
+  }
+
+  expand(): void {
+    if (this.expanded) return;
+    this.expanded = true;
+    this.animate(0, this.expandedHeight);
+  }
+
+  collapse(): void {
+    if (!this.expanded) return;
+    this.expanded = false;
+    this.animate(this.expandedHeight, 0);
+  }
+
+  private animate(from: number, to: number): void {
+    const keyframes = [
+      { height: `${from}px` },
+      { height: `${to}px` }
+    ];
+    const options: KeyframeAnimationOptions = {
+      duration: this.duration,
+      easing: 'ease',
+      fill: 'forwards'
+    };
+
+    this.drawer.animate(keyframes, options);
+    this.spacer.animate(keyframes, options);
+  }
+
+  isExpanded(): boolean {
+    return this.expanded;
+  }
+}

src/v2/demo/DemoApp.ts

@@ -3,6 +3,7 @@ import { TimeAxisRenderer } from '../features/timeaxis/TimeAxisRenderer';
 import { NavigationAnimator } from '../core/NavigationAnimator';
 import { DateService } from '../core/DateService';
 import { ScrollManager } from '../core/ScrollManager';
+import { HeaderDrawerManager } from '../core/HeaderDrawerManager';
 import { ViewConfig } from '../core/ViewConfig';
 
 export class DemoApp {
@@ -15,7 +16,8 @@ export class DemoApp {
     private orchestrator: CalendarOrchestrator,
     private timeAxisRenderer: TimeAxisRenderer,
     private dateService: DateService,
-    private scrollManager: ScrollManager
+    private scrollManager: ScrollManager,
+    private headerDrawerManager: HeaderDrawerManager
   ) {}
 
   init(): void {
@@ -54,9 +56,13 @@ export class DemoApp {
     // Init scroll synkronisering
     this.scrollManager.init(this.container);
 
+    // Init header drawer
+    this.headerDrawerManager.init(this.container);
+
     // Setup event handlers
     this.setupNavigation();
     this.setupViewSwitchers();
+    this.setupDrawerToggle();
 
     // Initial render
     this.orchestrator.render(this.views.simple, this.container);
@@ -86,4 +92,10 @@ export class DemoApp {
     document.getElementById('btn-team')!.onclick = () =>
       this.animator.slide('left', () => this.orchestrator.render(this.views.team, this.container));
   }
+
+  private setupDrawerToggle(): void {
+    document.getElementById('btn-drawer')!.onclick = () => {
+      this.headerDrawerManager.toggle();
+    };
+  }
 }