80 lines
No EOL
3.5 KiB
JavaScript
80 lines
No EOL
3.5 KiB
JavaScript
import { Configuration } from './CalendarConfig';
|
|
import { TimeFormatter } from '../utils/TimeFormatter';
|
|
import { CoreEvents } from '../constants/CoreEvents';
|
|
/**
|
|
* ConfigManager - Configuration loader and CSS property manager
|
|
* Loads JSON and creates Configuration instance
|
|
* Listens to events and manages CSS custom properties for dynamic styling
|
|
*/
|
|
export class ConfigManager {
|
|
constructor(eventBus, config) {
|
|
this.eventBus = eventBus;
|
|
this.config = config;
|
|
this.setupEventListeners();
|
|
this.syncGridCSSVariables();
|
|
this.syncWorkweekCSSVariables();
|
|
}
|
|
/**
|
|
* Setup event listeners for dynamic CSS updates
|
|
*/
|
|
setupEventListeners() {
|
|
// Listen to workweek changes and update CSS accordingly
|
|
this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event) => {
|
|
const { settings } = event.detail;
|
|
this.syncWorkweekCSSVariables(settings);
|
|
});
|
|
}
|
|
/**
|
|
* Sync grid-related CSS variables from configuration
|
|
*/
|
|
syncGridCSSVariables() {
|
|
const gridSettings = this.config.gridSettings;
|
|
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());
|
|
}
|
|
/**
|
|
* Sync workweek-related CSS variables
|
|
*/
|
|
syncWorkweekCSSVariables(workWeekSettings) {
|
|
const settings = workWeekSettings || this.config.getWorkWeekSettings();
|
|
document.documentElement.style.setProperty('--grid-columns', settings.totalDays.toString());
|
|
}
|
|
/**
|
|
* Load configuration from JSON and create Configuration instance
|
|
*/
|
|
static async load() {
|
|
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 = {
|
|
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, data.currentView || 'week');
|
|
// Configure TimeFormatter
|
|
TimeFormatter.configure(config.timeFormatConfig);
|
|
return config;
|
|
}
|
|
}
|
|
//# sourceMappingURL=ConfigManager.js.map
|