Calendar/src/managers/HeaderManager.ts
Janus C. H. Knudsen f5e9909935 Separates all-day event rendering; handles header lifecycle
Event rendering strategies now exclusively handle timed events, while all-day events are managed by a dedicated renderer.

Centralizes calendar header creation within `GridRenderer`, ensuring the header element is always present from initial DOM construction. `HeaderManager` and `ScrollManager` now react to a `header:ready` event, which signifies the header is fully initialized.

Synchronizes all-day event rendering with header readiness, temporarily queuing events until the header is prepared. Emits an `allday:checkHeight` event to prompt all-day container height adjustments after rendering.
2025-09-22 21:53:18 +02:00

213 lines
No EOL
6.8 KiB
TypeScript

import { eventBus } from '../core/EventBus';
import { calendarConfig } from '../core/CalendarConfig';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { CoreEvents } from '../constants/CoreEvents';
import { HeaderRenderContext } from '../renderers/HeaderRenderer';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload } from '../types/EventTypes';
/**
* HeaderManager - Handles all header-related event logic
* Separates event handling from rendering concerns
*/
export class HeaderManager {
// Event listeners for drag events
private dragMouseEnterHeaderListener: ((event: Event) => void) | null = null;
private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
constructor() {
// Bind methods for event listeners
this.setupHeaderDragListeners = this.setupHeaderDragListeners.bind(this);
this.destroy = this.destroy.bind(this);
// Listen for navigation events to update header
this.setupNavigationListener();
// Listen for requests to ensure all-day container
this.setupContainerRequestListener();
}
/**
* Initialize header with initial date
*/
public initializeHeader(currentDate: Date, resourceData: ResourceCalendarData | null = null): void {
this.updateHeader(currentDate, resourceData);
}
/**
* Get cached calendar header element
*/
private getCalendarHeader(): HTMLElement | null {
return document.querySelector('swp-calendar-header');
}
/**
* Setup header drag event listeners - REFACTORED to listen to DragDropManager events
*/
public setupHeaderDragListeners(): void {
console.log('🎯 HeaderManager: Setting up drag event listeners');
// Create and store event listeners
this.dragMouseEnterHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
console.log('🎯 HeaderManager: Received drag:mouseenter-header', {
targetDate,
originalElement: !!originalElement,
cloneElement: !!cloneElement
});
if (targetDate) {
// Ensure all-day container exists
this.ensureAllDayContainer();
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
}
};
this.dragMouseLeaveHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
console.log('🚪 HeaderManager: Received drag:mouseleave-header', {
targetDate,
originalElement: !!originalElement,
cloneElement: !!cloneElement
});
eventBus.emit('header:mouseleave', {
element: this.getCalendarHeader(),
targetDate,
originalElement,
cloneElement
});
};
// Listen for drag events from DragDropManager
eventBus.on('drag:mouseenter-header', this.dragMouseEnterHeaderListener);
eventBus.on('drag:mouseleave-header', this.dragMouseLeaveHeaderListener);
console.log('✅ HeaderManager: Drag event listeners attached');
}
/**
* Ensure all-day container exists in header - creates directly
*/
private ensureAllDayContainer(): HTMLElement | null {
const calendarHeader = this.getCalendarHeader();
if (!calendarHeader) return null;
let allDayContainer = calendarHeader.querySelector('swp-allday-container') as HTMLElement;
if (!allDayContainer) {
console.log('📍 HeaderManager: Creating all-day container directly...');
allDayContainer = document.createElement('swp-allday-container');
calendarHeader.appendChild(allDayContainer);
console.log('✅ HeaderManager: All-day container created');
}
return allDayContainer;
}
/**
* Setup navigation event listener
*/
private setupNavigationListener(): void {
eventBus.on(CoreEvents.NAVIGATION_COMPLETED, (event) => {
const { currentDate, resourceData } = (event as CustomEvent).detail;
this.updateHeader(currentDate, resourceData);
});
// Also listen for date changes (including initial setup)
eventBus.on(CoreEvents.DATE_CHANGED, (event) => {
const { currentDate } = (event as CustomEvent).detail;
this.updateHeader(currentDate, null);
});
// Listen for workweek header updates after grid rebuild
eventBus.on('workweek:header-update', (event) => {
const { currentDate } = (event as CustomEvent).detail;
this.updateHeader(currentDate, null);
});
}
/**
* Setup listener for all-day container creation requests
*/
private setupContainerRequestListener(): void {
eventBus.on('header:ensure-allday-container', () => {
console.log('📍 HeaderManager: Received request to ensure all-day container');
this.ensureAllDayContainer();
});
}
/**
* Update header content for navigation
*/
private updateHeader(currentDate: Date, resourceData: ResourceCalendarData | null = null): void {
const calendarHeader = this.getOrCreateCalendarHeader();
if (!calendarHeader) return;
// Clear existing content
calendarHeader.innerHTML = '';
// Render new header content
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
const context: HeaderRenderContext = {
currentWeek: currentDate,
config: calendarConfig,
resourceData: resourceData
};
headerRenderer.render(calendarHeader, context);
// Setup event listeners on the new content
this.setupHeaderDragListeners();
// Notify other managers that header is ready
eventBus.emit('header:ready', {
headerElement: calendarHeader
});
}
/**
* Get calendar header element - header always exists now
*/
private getOrCreateCalendarHeader(): HTMLElement | null {
const calendarHeader = this.getCalendarHeader();
if (!calendarHeader) {
console.warn('HeaderManager: Calendar header not found - should always exist now!');
return null;
}
return calendarHeader;
}
/**
* Clean up resources and event listeners
*/
public destroy(): void {
// Remove eventBus listeners
if (this.dragMouseEnterHeaderListener) {
eventBus.off('drag:mouseenter-header', this.dragMouseEnterHeaderListener);
}
if (this.dragMouseLeaveHeaderListener) {
eventBus.off('drag:mouseleave-header', this.dragMouseLeaveHeaderListener);
}
// Clear references
this.dragMouseEnterHeaderListener = null;
this.dragMouseLeaveHeaderListener = null;
}
}