58d6ad2ed2
Simplifies header animation logic by leveraging CSS Grid for height transitions. This change removes the direct height animation of the calendar header and relies on CSS Grid's auto row feature to manage the header expansion. It also removes the manual spacer height calculations in Typescript, and relies on CSS variables to control this. This results in a smoother and more efficient animation, especially when all-day events are present.
90 lines
No EOL
3.3 KiB
TypeScript
90 lines
No EOL
3.3 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 {
|
|
private config: CalendarConfig;
|
|
|
|
constructor(config: CalendarConfig) {
|
|
this.config = config;
|
|
}
|
|
|
|
/**
|
|
* Update all grid CSS variables
|
|
*/
|
|
public updateGridStyles(resourceData: ResourceCalendarData | null = null): void {
|
|
const root = document.documentElement;
|
|
const gridSettings = this.config.getGridSettings();
|
|
const calendar = document.querySelector('swp-calendar') as HTMLElement;
|
|
const calendarType = this.config.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 = this.config.getDateViewSettings();
|
|
const workWeekSettings = this.config.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 this.config.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
|
|
}
|
|
}
|
|
|
|
} |