Refactors and optimizes core calendar managers
Streamlines several core managers by removing unnecessary complexity, caching, and redundant methods Key improvements: - Simplified event and view management logic - Removed unnecessary caching mechanisms - Reduced method complexity in managers - Improved code readability and performance
This commit is contained in:
Janus C. H. Knudsen
parent
1ae4f00f2b
commit
b6ab1ff50e
6 changed files with 193 additions and 327 deletions
|
|
@ -5,10 +5,6 @@ import { CoreEvents } from '../constants/CoreEvents';
|
|||
import { NavigationRenderer } from '../renderers/NavigationRenderer';
|
||||
import { GridRenderer } from '../renderers/GridRenderer';
|
||||
|
||||
/**
|
||||
* NavigationManager handles calendar navigation (prev/next/today buttons)
|
||||
* with simplified CSS Grid approach
|
||||
*/
|
||||
export class NavigationManager {
|
||||
private eventBus: IEventBus;
|
||||
private navigationRenderer: NavigationRenderer;
|
||||
|
|
@ -49,20 +45,12 @@ export class NavigationManager {
|
|||
}
|
||||
|
||||
|
||||
private getCalendarContainer(): HTMLElement | null {
|
||||
return document.querySelector('swp-calendar-container');
|
||||
}
|
||||
|
||||
private getCurrentGrid(): HTMLElement | null {
|
||||
return document.querySelector('swp-calendar-container swp-grid-container:not([data-prerendered])');
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -73,11 +61,11 @@ export class NavigationManager {
|
|||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const navButton = target.closest('[data-action]') as HTMLElement;
|
||||
|
||||
|
||||
if (!navButton) return;
|
||||
|
||||
|
||||
const action = navButton.dataset.action;
|
||||
|
||||
|
||||
switch (action) {
|
||||
case 'prev':
|
||||
this.navigateToPreviousWeek();
|
||||
|
|
@ -118,12 +106,12 @@ export class NavigationManager {
|
|||
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);
|
||||
});
|
||||
}
|
||||
|
|
@ -134,10 +122,10 @@ export class NavigationManager {
|
|||
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
|
||||
|
|
@ -145,7 +133,7 @@ export class NavigationManager {
|
|||
eventStartTime
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
if (currentTime < targetTime) {
|
||||
this.animationQueue++;
|
||||
this.animateTransition('next', weekStart);
|
||||
|
|
@ -179,13 +167,13 @@ export class NavigationManager {
|
|||
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);
|
||||
|
|
@ -198,10 +186,10 @@ export class NavigationManager {
|
|||
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);
|
||||
|
|
@ -215,9 +203,10 @@ export class NavigationManager {
|
|||
* Animation transition using pre-rendered containers when available
|
||||
*/
|
||||
private animateTransition(direction: 'prev' | 'next', targetWeek: Date): void {
|
||||
const container = this.getCalendarContainer();
|
||||
const currentGrid = this.getCurrentGrid();
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
@ -225,25 +214,25 @@ export class NavigationManager {
|
|||
// 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 as HTMLElement).style.transform = '';
|
||||
currentGrid.style.transform = '';
|
||||
|
||||
// Animate transition using Web Animations API
|
||||
const slideOutAnimation = (currentGrid as HTMLElement).animate([
|
||||
const slideOutAnimation = currentGrid.animate([
|
||||
{ transform: 'translateX(0)', opacity: '1' },
|
||||
{ transform: direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)', opacity: '0.5' }
|
||||
], {
|
||||
|
|
@ -263,7 +252,7 @@ export class NavigationManager {
|
|||
|
||||
// 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++) {
|
||||
|
|
@ -273,16 +262,16 @@ export class NavigationManager {
|
|||
// 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();
|
||||
|
||||
|
|
@ -291,7 +280,7 @@ export class NavigationManager {
|
|||
direction,
|
||||
currentDate: this.currentWeek
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -299,7 +288,7 @@ export class NavigationManager {
|
|||
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,
|
||||
|
|
@ -308,35 +297,4 @@ export class NavigationManager {
|
|||
weekEnd
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current week start date
|
||||
*/
|
||||
getCurrentWeek(): Date {
|
||||
return new Date(this.currentWeek);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get target week (where navigation is heading)
|
||||
*/
|
||||
getTargetWeek(): Date {
|
||||
return new Date(this.targetWeek);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if navigation animation is in progress
|
||||
*/
|
||||
isAnimating(): boolean {
|
||||
return this.animationQueue > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force navigation to specific week without animation
|
||||
*/
|
||||
setWeek(weekStart: Date): void {
|
||||
this.currentWeek = new Date(weekStart);
|
||||
this.targetWeek = new Date(weekStart);
|
||||
this.updateWeekInfo();
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue