76 lines
3.3 KiB
JavaScript
76 lines
3.3 KiB
JavaScript
|
import { calendarConfig } from '../core/CalendarConfig';
|
||
|
|
/**
|
||
|
|
* 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
|
||
|
|
*/
|
||
|
|
updateGridStyles(resourceData = null) {
|
||
|
|
const root = document.documentElement;
|
||
|
|
const gridSettings = calendarConfig.getGridSettings();
|
||
|
|
const calendar = document.querySelector('swp-calendar');
|
||
|
|
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
|
||
|
|
*/
|
||
|
|
setTimeVariables(root, gridSettings) {
|
||
|
|
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
|
||
|
|
*/
|
||
|
|
calculateColumnCount(calendarType, resourceData) {
|
||
|
|
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
|
||
|
|
*/
|
||
|
|
setColumnWidth(root, gridSettings) {
|
||
|
|
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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=GridStyleManager.js.map
|