8456d8aa28
Replaces isolated grid column update with comprehensive CSS property management Extends configuration synchronization to include: - Dynamic grid layout dimensions - Hour height configuration - Work and day hour boundaries Provides more flexible and configurable grid styling
78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import { Configuration } from './CalendarConfig';
|
|
import { ICalendarConfig } from './ICalendarConfig';
|
|
import { TimeFormatter } from '../utils/TimeFormatter';
|
|
|
|
/**
|
|
* ConfigManager - Static configuration loader
|
|
* Loads JSON and creates Configuration instance
|
|
* Also manages CSS custom properties for dynamic styling
|
|
*/
|
|
export class ConfigManager {
|
|
/**
|
|
* Synchronize all CSS custom properties with configuration
|
|
* This ensures CSS grid, time axis, and grid lines match the configuration
|
|
*/
|
|
static updateCSSProperties(config: Configuration): void {
|
|
const gridSettings = config.gridSettings;
|
|
const workWeekSettings = config.getWorkWeekSettings();
|
|
|
|
// Grid layout
|
|
document.documentElement.style.setProperty('--grid-columns', workWeekSettings.totalDays.toString());
|
|
|
|
// Grid timing and dimensions
|
|
document.documentElement.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
|
|
document.documentElement.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
|
|
document.documentElement.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
|
|
document.documentElement.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
|
|
document.documentElement.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
|
|
}
|
|
|
|
/**
|
|
* Load configuration from JSON and create Configuration instance
|
|
*/
|
|
static async load(): Promise<Configuration> {
|
|
const response = await fetch('/wwwroot/data/calendar-config.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load config: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Build main config
|
|
const mainConfig: ICalendarConfig = {
|
|
scrollbarWidth: data.scrollbar.width,
|
|
scrollbarColor: data.scrollbar.color,
|
|
scrollbarTrackColor: data.scrollbar.trackColor,
|
|
scrollbarHoverColor: data.scrollbar.hoverColor,
|
|
scrollbarBorderRadius: data.scrollbar.borderRadius,
|
|
allowDrag: data.interaction.allowDrag,
|
|
allowResize: data.interaction.allowResize,
|
|
allowCreate: data.interaction.allowCreate,
|
|
apiEndpoint: data.api.endpoint,
|
|
dateFormat: data.api.dateFormat,
|
|
timeFormat: data.api.timeFormat,
|
|
enableSearch: data.features.enableSearch,
|
|
enableTouch: data.features.enableTouch,
|
|
defaultEventDuration: data.eventDefaults.defaultEventDuration,
|
|
minEventDuration: data.gridSettings.snapInterval,
|
|
maxEventDuration: data.eventDefaults.maxEventDuration
|
|
};
|
|
|
|
// Create Configuration instance
|
|
const config = new Configuration(
|
|
mainConfig,
|
|
data.gridSettings,
|
|
data.dateViewSettings,
|
|
data.timeFormatConfig,
|
|
data.currentWorkWeek
|
|
);
|
|
|
|
// Configure TimeFormatter
|
|
TimeFormatter.configure(config.timeFormatConfig);
|
|
|
|
// Synchronize all CSS custom properties with configuration
|
|
ConfigManager.updateCSSProperties(config);
|
|
|
|
return config;
|
|
}
|
|
}
|