From 5075b71eb26d5076da15b42565396ccc4094f2fa Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Thu, 13 Nov 2025 20:41:33 +0100 Subject: [PATCH] Refactors navigation event handling and payload Updates navigation button event emission to use a more consistent payload type Simplifies navigation logic by centralizing date navigation in NavigationManager Removes redundant method implementations and standardizes event handling --- src/components/NavigationButtons.ts | 58 +++++----------------- src/managers/NavigationManager.ts | 74 +++++++++-------------------- src/types/EventTypes.ts | 6 +++ 3 files changed, 42 insertions(+), 96 deletions(-) diff --git a/src/components/NavigationButtons.ts b/src/components/NavigationButtons.ts index 2fe0817..5011a64 100644 --- a/src/components/NavigationButtons.ts +++ b/src/components/NavigationButtons.ts @@ -2,6 +2,7 @@ import { IEventBus, CalendarView } from '../types/CalendarTypes'; import { CoreEvents } from '../constants/CoreEvents'; import { DateService } from '../utils/DateService'; import { Configuration } from '../configurations/CalendarConfig'; +import { INavButtonClickedEventPayload } from '../types/EventTypes'; /** * NavigationButtons - Manages navigation button UI and navigation logic @@ -93,7 +94,7 @@ export class NavigationButtons { /** * Navigate in specified direction */ - private navigate(direction: 'next' | 'prev'): void { + private navigate(direction: 'next' | 'previous'): void { const offset = direction === 'next' ? 1 : -1; let newDate: Date; @@ -113,11 +114,12 @@ export class NavigationButtons { this.currentDate = newDate; - this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, { - direction: direction === 'next' ? 'next' : 'previous', - newDate: newDate, - periodLabel: this.getCurrentPeriodLabel() - }); + const payload: INavButtonClickedEventPayload = { + direction: direction, + newDate: newDate + }; + + this.eventBus.emit(CoreEvents.NAV_BUTTON_CLICKED, payload); } /** @@ -131,7 +133,7 @@ export class NavigationButtons { * Navigate to previous period */ private navigatePrevious(): void { - this.navigate('prev'); + this.navigate('previous'); } /** @@ -140,46 +142,12 @@ export class NavigationButtons { private navigateToday(): void { this.currentDate = new Date(); - this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, { + const payload: INavButtonClickedEventPayload = { direction: 'today', - newDate: this.currentDate, - periodLabel: this.getCurrentPeriodLabel() - }); - } + newDate: this.currentDate + }; - /** - * Get ISO week start (Monday) - */ - private getISOWeekStart(date: Date): Date { - const weekBounds = this.dateService.getWeekBounds(date); - return this.dateService.startOfDay(weekBounds.start); - } - - /** - * Get week end (Sunday) - */ - private getWeekEnd(date: Date): Date { - const weekBounds = this.dateService.getWeekBounds(date); - return this.dateService.endOfDay(weekBounds.end); - } - - /** - * Get current period label - */ - private getCurrentPeriodLabel(): string { - switch (this.currentView) { - case 'week': - case 'day': - const weekStart = this.getISOWeekStart(this.currentDate); - const weekEnd = this.getWeekEnd(this.currentDate); - return this.dateService.formatDateRange(weekStart, weekEnd); - case 'month': - return this.dateService.formatMonthYear(this.currentDate); - default: - const defaultWeekStart = this.getISOWeekStart(this.currentDate); - const defaultWeekEnd = this.getWeekEnd(this.currentDate); - return this.dateService.formatDateRange(defaultWeekStart, defaultWeekEnd); - } + this.eventBus.emit(CoreEvents.NAV_BUTTON_CLICKED, payload); } /** diff --git a/src/managers/NavigationManager.ts b/src/managers/NavigationManager.ts index 1f170fb..da415eb 100644 --- a/src/managers/NavigationManager.ts +++ b/src/managers/NavigationManager.ts @@ -4,6 +4,7 @@ import { DateService } from '../utils/DateService'; import { CoreEvents } from '../constants/CoreEvents'; import { WeekInfoRenderer } from '../renderers/WeekInfoRenderer'; import { GridRenderer } from '../renderers/GridRenderer'; +import { INavButtonClickedEventPayload } from '../types/EventTypes'; export class NavigationManager { private eventBus: IEventBus; @@ -57,21 +58,12 @@ export class NavigationManager { this.weekInfoRenderer.applyFilterToPreRenderedGrids(detail); }); - // Listen for navigation button clicks from NavigationButtonsManager + // Listen for navigation button clicks from NavigationButtons this.eventBus.on(CoreEvents.NAV_BUTTON_CLICKED, (event: Event) => { - const { action } = (event as CustomEvent).detail; + const { direction, newDate } = (event as CustomEvent).detail; - switch (action) { - case 'prev': - this.navigateToPreviousWeek(); - break; - case 'next': - this.navigateToNextWeek(); - break; - case 'today': - this.navigateToToday(); - break; - } + // Navigate to the new date with animation + this.navigateToDate(newDate, direction); }); // Listen for external navigation requests @@ -145,52 +137,32 @@ export class NavigationManager { } } - private navigateToPreviousWeek(): void { - this.targetWeek = this.dateService.addWeeks(this.targetWeek, -1); - const weekToShow = new Date(this.targetWeek); - this.animationQueue++; - this.animateTransition('prev', weekToShow); - } - private navigateToNextWeek(): void { - this.targetWeek = this.dateService.addWeeks(this.targetWeek, 1); - const weekToShow = new Date(this.targetWeek); - this.animationQueue++; - this.animateTransition('next', weekToShow); - } - - private navigateToToday(): void { - const today = new Date(); - const todayWeekStart = this.getISOWeekStart(today); - - // Reset to today - this.targetWeek = new Date(todayWeekStart); - - const currentTime = this.currentWeek.getTime(); - const targetTime = todayWeekStart.getTime(); - - if (currentTime < targetTime) { - this.animationQueue++; - this.animateTransition('next', todayWeekStart); - } else if (currentTime > targetTime) { - this.animationQueue++; - this.animateTransition('prev', todayWeekStart); - } - } - - private navigateToDate(date: Date): void { + private navigateToDate(date: Date, direction?: 'next' | 'previous' | 'today'): void { const weekStart = this.getISOWeekStart(date); this.targetWeek = new Date(weekStart); const currentTime = this.currentWeek.getTime(); const targetTime = weekStart.getTime(); - if (currentTime < targetTime) { + // Use provided direction or calculate based on time comparison + let animationDirection: 'next' | 'prev'; + + if (direction === 'next') { + animationDirection = 'next'; + } else if (direction === 'previous') { + animationDirection = 'prev'; + } else if (direction === 'today') { + // For "today", determine direction based on current position + animationDirection = currentTime < targetTime ? 'next' : 'prev'; + } else { + // Fallback: calculate direction + animationDirection = currentTime < targetTime ? 'next' : 'prev'; + } + + if (currentTime !== targetTime) { this.animationQueue++; - this.animateTransition('next', weekStart); - } else if (currentTime > targetTime) { - this.animationQueue++; - this.animateTransition('prev', weekStart); + this.animateTransition(animationDirection, weekStart); } } diff --git a/src/types/EventTypes.ts b/src/types/EventTypes.ts index 72db8be..3344ea7 100644 --- a/src/types/EventTypes.ts +++ b/src/types/EventTypes.ts @@ -97,4 +97,10 @@ export interface IResizeEndEventPayload { eventId: string; element: HTMLElement; finalHeight: number; +} + +// Navigation button clicked event payload +export interface INavButtonClickedEventPayload { + direction: 'next' | 'previous' | 'today'; + newDate: Date; } \ No newline at end of file