import { IEventBus } from '../types/CalendarTypes'; import { EventRenderingService } from '../renderers/EventRendererManager'; import { DateService } from '../utils/DateService'; import { CoreEvents } from '../constants/CoreEvents'; import { WeekInfoRenderer } from '../renderers/WeekInfoRenderer'; import { GridRenderer } from '../renderers/GridRenderer'; export class NavigationManager { private eventBus: IEventBus; private weekInfoRenderer: WeekInfoRenderer; private gridRenderer: GridRenderer; private dateService: DateService; private currentWeek: Date; private targetWeek: Date; private animationQueue: number = 0; constructor( eventBus: IEventBus, eventRenderer: EventRenderingService, gridRenderer: GridRenderer, dateService: DateService, weekInfoRenderer: WeekInfoRenderer ) { this.eventBus = eventBus; this.dateService = dateService; this.weekInfoRenderer = weekInfoRenderer; this.gridRenderer = gridRenderer; this.currentWeek = this.getISOWeekStart(new Date()); this.targetWeek = new Date(this.currentWeek); this.init(); } private init(): void { this.setupEventListeners(); } /** * Get the start of the ISO week (Monday) for a given date * @param date - Any date in the week * @returns The Monday of the ISO week */ private getISOWeekStart(date: Date): Date { const weekBounds = this.dateService.getWeekBounds(date); return this.dateService.startOfDay(weekBounds.start); } private setupEventListeners(): void { // Initial DOM update when calendar is initialized this.eventBus.on(CoreEvents.INITIALIZED, () => { this.updateWeekInfo(); }); // Listen for filter changes and apply to pre-rendered grids this.eventBus.on(CoreEvents.FILTER_CHANGED, (e: Event) => { const detail = (e as CustomEvent).detail; this.weekInfoRenderer.applyFilterToPreRenderedGrids(detail); }); // Listen for navigation button clicks from NavigationButtonsManager this.eventBus.on(CoreEvents.NAV_BUTTON_CLICKED, (event: Event) => { const { action } = (event as CustomEvent).detail; switch (action) { case 'prev': this.navigateToPreviousWeek(); break; case 'next': this.navigateToNextWeek(); break; case 'today': this.navigateToToday(); break; } }); // Listen for external navigation requests this.eventBus.on(CoreEvents.DATE_CHANGED, (event: Event) => { const customEvent = event as CustomEvent; const dateFromEvent = customEvent.detail.currentDate; // Validate date before processing if (!dateFromEvent) { console.warn('NavigationManager: No date provided in DATE_CHANGED event'); return; } const targetDate = new Date(dateFromEvent); // Use DateService validation const validation = this.dateService.validateDate(targetDate); if (!validation.valid) { console.warn('NavigationManager: Invalid date received:', validation.error); return; } this.navigateToDate(targetDate); }); // Listen for event navigation requests this.eventBus.on(CoreEvents.NAVIGATE_TO_EVENT, (event: Event) => { const customEvent = event as CustomEvent; const { eventDate, eventStartTime } = customEvent.detail; if (!eventDate || !eventStartTime) { console.warn('NavigationManager: Invalid event navigation data'); return; } this.navigateToEventDate(eventDate, eventStartTime); }); } /** * Navigate to specific event date and emit scroll event after navigation */ private navigateToEventDate(eventDate: Date, eventStartTime: string): void { const weekStart = this.getISOWeekStart(eventDate); this.targetWeek = new Date(weekStart); const currentTime = this.currentWeek.getTime(); const targetTime = weekStart.getTime(); // Store event start time for scrolling after navigation const scrollAfterNavigation = () => { // Emit scroll request after navigation is complete this.eventBus.emit('scroll:to-event-time', { eventStartTime }); }; if (currentTime < targetTime) { this.animationQueue++; this.animateTransition('next', weekStart); // Listen for navigation completion to trigger scroll this.eventBus.once(CoreEvents.NAVIGATION_COMPLETED, scrollAfterNavigation); } else if (currentTime > targetTime) { this.animationQueue++; this.animateTransition('prev', weekStart); // Listen for navigation completion to trigger scroll this.eventBus.once(CoreEvents.NAVIGATION_COMPLETED, scrollAfterNavigation); } else { // Already on correct week, just scroll scrollAfterNavigation(); } } 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 { const weekStart = this.getISOWeekStart(date); this.targetWeek = new Date(weekStart); const currentTime = this.currentWeek.getTime(); const targetTime = weekStart.getTime(); if (currentTime < targetTime) { this.animationQueue++; this.animateTransition('next', weekStart); } else if (currentTime > targetTime) { this.animationQueue++; this.animateTransition('prev', weekStart); } } /** * Animation transition using pre-rendered containers when available */ private animateTransition(direction: 'prev' | 'next', targetWeek: Date): void { const container = document.querySelector('swp-calendar-container') as HTMLElement; const currentGrid = document.querySelector('swp-calendar-container swp-grid-container:not([data-prerendered])') as HTMLElement; if (!container || !currentGrid) { return; } // Reset all-day height BEFORE creating new grid to ensure base height const root = document.documentElement; root.style.setProperty('--all-day-row-height', '0px'); let newGrid: HTMLElement; console.group('🔧 NavigationManager.refactored'); console.log('Calling GridRenderer instead of NavigationRenderer'); console.log('Target week:', targetWeek); // Always create a fresh container for consistent behavior newGrid = this.gridRenderer.createNavigationGrid(container, targetWeek); console.groupEnd(); // Clear any existing transforms before animation newGrid.style.transform = ''; currentGrid.style.transform = ''; // Animate transition using Web Animations API const slideOutAnimation = currentGrid.animate([ { transform: 'translateX(0)', opacity: '1' }, { transform: direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)', opacity: '0.5' } ], { duration: 400, easing: 'ease-in-out', fill: 'forwards' }); const slideInAnimation = newGrid.animate([ { transform: direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)' }, { transform: 'translateX(0)' } ], { duration: 400, easing: 'ease-in-out', fill: 'forwards' }); // Handle animation completion slideInAnimation.addEventListener('finish', () => { // Cleanup: Remove all old grids except the new one const allGrids = container.querySelectorAll('swp-grid-container'); for (let i = 0; i < allGrids.length - 1; i++) { allGrids[i].remove(); } // Reset positioning newGrid.style.position = 'relative'; newGrid.removeAttribute('data-prerendered'); // Update state this.currentWeek = new Date(targetWeek); this.animationQueue--; // If this was the last queued animation, ensure we're in sync if (this.animationQueue === 0) { this.currentWeek = new Date(this.targetWeek); } // Update week info and notify other managers this.updateWeekInfo(); // Emit period change event for ScrollManager this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, { direction, currentDate: this.currentWeek }); }); } private updateWeekInfo(): void { const weekNumber = this.dateService.getWeekNumber(this.currentWeek); const weekEnd = this.dateService.addDays(this.currentWeek, 6); const dateRange = this.dateService.formatDateRange(this.currentWeek, weekEnd); // Notify other managers about week info update - DOM manipulation should happen via events this.eventBus.emit(CoreEvents.PERIOD_INFO_UPDATE, { weekNumber, dateRange, weekStart: this.currentWeek, weekEnd }); } }