2083c6921e
Streamlines calendar configuration by adopting a singleton pattern for consistent access and simplifies event handling.
- Removes direct `CalendarConfig` dependency injection in favor of the `calendarConfig` singleton, reducing code complexity.
- Replaces specific event emissions for grid, date, and resource settings updates with a general `REFRESH_REQUESTED` event.
- Updates event names to be more descriptive and consistent ("NAVIGATION_COMPLETED", "PERIOD_INFO_UPDATE").
- Removes the need to pass the calendar config to renderers since it is now a singleton.
This improves code maintainability and simplifies the event emission process.
87 lines
No EOL
3.2 KiB
TypeScript
87 lines
No EOL
3.2 KiB
TypeScript
import { calendarConfig } from '../core/CalendarConfig';
|
|
import { ResourceCalendarData } from '../types/CalendarTypes';
|
|
|
|
/**
|
|
* GridStyleManager - Manages CSS variables and styling for the grid
|
|
* Separated from GridManager to follow Single Responsibility Principle
|
|
*/
|
|
export class GridStyleManager {
|
|
constructor() {
|
|
}
|
|
|
|
/**
|
|
* Update all grid CSS variables
|
|
*/
|
|
public updateGridStyles(resourceData: ResourceCalendarData | null = null): void {
|
|
const root = document.documentElement;
|
|
const gridSettings = calendarConfig.getGridSettings();
|
|
const calendar = document.querySelector('swp-calendar') as HTMLElement;
|
|
const calendarType = calendarConfig.getCalendarMode();
|
|
|
|
// Set CSS variables for time and grid measurements
|
|
this.setTimeVariables(root, gridSettings);
|
|
|
|
// Set column count based on calendar type
|
|
const columnCount = this.calculateColumnCount(calendarType, resourceData);
|
|
root.style.setProperty('--grid-columns', columnCount.toString());
|
|
|
|
// Set column width based on fitToWidth setting
|
|
this.setColumnWidth(root, gridSettings);
|
|
|
|
// Set fitToWidth data attribute for CSS targeting
|
|
if (calendar) {
|
|
calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Set time-related CSS variables
|
|
*/
|
|
private setTimeVariables(root: HTMLElement, gridSettings: any): void {
|
|
root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
|
|
root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
|
|
root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());
|
|
root.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
|
|
root.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
|
|
root.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
|
|
root.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
|
|
}
|
|
|
|
/**
|
|
* Calculate number of columns based on calendar type and view
|
|
*/
|
|
private calculateColumnCount(calendarType: string, resourceData: ResourceCalendarData | null): number {
|
|
if (calendarType === 'resource' && resourceData) {
|
|
return resourceData.resources.length;
|
|
} else if (calendarType === 'date') {
|
|
const dateSettings = calendarConfig.getDateViewSettings();
|
|
const workWeekSettings = calendarConfig.getWorkWeekSettings();
|
|
|
|
switch (dateSettings.period) {
|
|
case 'day':
|
|
return 1;
|
|
case 'week':
|
|
return workWeekSettings.totalDays;
|
|
case 'month':
|
|
return workWeekSettings.totalDays; // Use work week for month view too
|
|
default:
|
|
return workWeekSettings.totalDays;
|
|
}
|
|
}
|
|
|
|
return calendarConfig.getWorkWeekSettings().totalDays; // Default to work week
|
|
}
|
|
|
|
/**
|
|
* Set column width based on fitToWidth setting
|
|
*/
|
|
private setColumnWidth(root: HTMLElement, gridSettings: any): void {
|
|
if (gridSettings.fitToWidth) {
|
|
root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
|
|
} else {
|
|
root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
|
|
}
|
|
}
|
|
|
|
} |