import { CoreEvents } from '../constants/CoreEvents'; export class NavigationManager { constructor(eventBus, eventRenderer, gridRenderer, dateService, weekInfoRenderer) { this.animationQueue = 0; 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(); } init() { 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 */ getISOWeekStart(date) { const weekBounds = this.dateService.getWeekBounds(date); return this.dateService.startOfDay(weekBounds.start); } setupEventListeners() { // Listen for filter changes and apply to pre-rendered grids this.eventBus.on(CoreEvents.FILTER_CHANGED, (e) => { const detail = e.detail; this.weekInfoRenderer.applyFilterToPreRenderedGrids(detail); }); // Listen for navigation button clicks from NavigationButtons this.eventBus.on(CoreEvents.NAV_BUTTON_CLICKED, (event) => { const { direction, newDate } = event.detail; // Navigate to the new date with animation this.navigateToDate(newDate, direction); }); // Listen for external navigation requests this.eventBus.on(CoreEvents.DATE_CHANGED, (event) => { const customEvent = event; 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) => { const customEvent = event; 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 */ navigateToEventDate(eventDate, eventStartTime) { 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(); } } navigateToDate(date, direction) { const weekStart = this.getISOWeekStart(date); this.targetWeek = new Date(weekStart); const currentTime = this.currentWeek.getTime(); const targetTime = weekStart.getTime(); // Use provided direction or calculate based on time comparison let animationDirection; 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(animationDirection, weekStart); } } /** * Animation transition using pre-rendered containers when available */ animateTransition(direction, targetWeek) { const container = document.querySelector('swp-calendar-container'); const currentGrid = document.querySelector('swp-calendar-container swp-grid-container:not([data-prerendered])'); 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; 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); } // Emit navigation completed event this.eventBus.emit(CoreEvents.NAVIGATION_COMPLETED, { direction, newDate: this.currentWeek }); }); } } //# sourceMappingURL=NavigationManager.js.map