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.
213 lines
No EOL
6.8 KiB
TypeScript
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;
|
|
|
|
}
|
|
} |