From 3710bb50c0b6e12aecd4f05935f213d6e82502f0 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Tue, 16 Dec 2025 22:51:01 +0100 Subject: [PATCH] Refactor calendar navigation to use event bus Decouples calendar navigation from direct DOM events Adds new event constants for calendar navigation commands Updates CalendarApp to handle navigation via event bus Simplifies navigation logic and improves event-driven architecture --- src/v2/constants/CoreEvents.ts | 6 +++++- src/v2/core/CalendarApp.ts | 32 +++++++++++++++++++++++--------- src/v2/demo/DemoApp.ts | 15 ++++++--------- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/src/v2/constants/CoreEvents.ts b/src/v2/constants/CoreEvents.ts index 9c25100..11ae6c3 100644 --- a/src/v2/constants/CoreEvents.ts +++ b/src/v2/constants/CoreEvents.ts @@ -67,5 +67,9 @@ export const CoreEvents = { AUDIT_LOGGED: 'audit:logged', // Rendering events - EVENTS_RENDERED: 'events:rendered' + EVENTS_RENDERED: 'events:rendered', + + // Calendar command events + CALENDAR_CMD_NAVIGATE_PREV: 'calendar:cmd:navigate:prev', + CALENDAR_CMD_NAVIGATE_NEXT: 'calendar:cmd:navigate:next' } as const; diff --git a/src/v2/core/CalendarApp.ts b/src/v2/core/CalendarApp.ts index 491bb86..ac86fcd 100644 --- a/src/v2/core/CalendarApp.ts +++ b/src/v2/core/CalendarApp.ts @@ -14,6 +14,8 @@ import { SettingsService } from '../storage/settings/SettingsService'; import { ResourceService } from '../storage/resources/ResourceService'; import { ViewConfigService } from '../storage/viewconfigs/ViewConfigService'; import { IWorkweekPreset } from '../types/SettingsTypes'; +import { IEventBus } from '../types/CalendarTypes'; +import { CoreEvents } from '../constants/CoreEvents'; export class CalendarApp { private animator!: NavigationAnimator; @@ -35,7 +37,8 @@ export class CalendarApp { private eventPersistenceManager: EventPersistenceManager, private settingsService: SettingsService, private resourceService: ResourceService, - private viewConfigService: ViewConfigService + private viewConfigService: ViewConfigService, + private eventBus: IEventBus ) {} async init(container: HTMLElement): Promise { @@ -74,16 +77,21 @@ export class CalendarApp { } private setupEventListeners(): void { + // Navigation commands via EventBus + this.eventBus.on(CoreEvents.CALENDAR_CMD_NAVIGATE_PREV, () => { + this.handleNavigatePrev(); + }); + + this.eventBus.on(CoreEvents.CALENDAR_CMD_NAVIGATE_NEXT, () => { + this.handleNavigateNext(); + }); + + // Other commands via container DOM events (migrates later) this.container.addEventListener('calendar:cmd:render', ((e: CustomEvent) => { const { viewId, direction } = e.detail; this.handleRenderCommand(viewId, direction); }) as EventListener); - this.container.addEventListener('calendar:cmd:navigate', ((e: CustomEvent) => { - const { offset, direction } = e.detail; - this.handleNavigateCommand(offset, direction); - }) as EventListener); - this.container.addEventListener('calendar:cmd:drawer:toggle', (() => { this.headerDrawerManager.toggle(); }) as EventListener); @@ -101,9 +109,15 @@ export class CalendarApp { this.emitStatus('rendered', { viewId }); } - private async handleNavigateCommand(offset: number, direction: 'left' | 'right'): Promise { - this.weekOffset += offset; - await this.animator.slide(direction, () => this.render()); + private async handleNavigatePrev(): Promise { + this.weekOffset--; + await this.animator.slide('right', () => this.render()); + this.emitStatus('rendered', { viewId: this.currentViewId }); + } + + private async handleNavigateNext(): Promise { + this.weekOffset++; + await this.animator.slide('left', () => this.render()); this.emitStatus('rendered', { viewId: this.currentViewId }); } diff --git a/src/v2/demo/DemoApp.ts b/src/v2/demo/DemoApp.ts index 2a40d52..78c2293 100644 --- a/src/v2/demo/DemoApp.ts +++ b/src/v2/demo/DemoApp.ts @@ -3,6 +3,8 @@ import { DataSeeder } from '../workers/DataSeeder'; import { AuditService } from '../storage/audit/AuditService'; import { CalendarApp } from '../core/CalendarApp'; import { DateService } from '../core/DateService'; +import { IEventBus } from '../types/CalendarTypes'; +import { CoreEvents } from '../constants/CoreEvents'; export class DemoApp { private container!: HTMLElement; @@ -13,7 +15,8 @@ export class DemoApp { private dataSeeder: DataSeeder, private auditService: AuditService, private calendarApp: CalendarApp, - private dateService: DateService + private dateService: DateService, + private eventBus: IEventBus ) {} async init(): Promise { @@ -48,11 +51,11 @@ export class DemoApp { private setupNavigation(): void { document.getElementById('btn-prev')!.onclick = () => { - this.emitNavigateCommand(-1, 'right'); + this.eventBus.emit(CoreEvents.CALENDAR_CMD_NAVIGATE_PREV); }; document.getElementById('btn-next')!.onclick = () => { - this.emitNavigateCommand(1, 'left'); + this.eventBus.emit(CoreEvents.CALENDAR_CMD_NAVIGATE_NEXT); }; } @@ -97,10 +100,4 @@ export class DemoApp { detail: { viewId, direction } })); } - - private emitNavigateCommand(offset: number, direction: 'left' | 'right'): void { - this.container.dispatchEvent(new CustomEvent('calendar:cmd:navigate', { - detail: { offset, direction } - })); - } }