Start fixing MDI

This commit is contained in:
2025-04-22 13:54:57 +02:00
parent 792272a478
commit f3b508c9f7
8 changed files with 461 additions and 228 deletions

View File

@@ -1,6 +1,5 @@
import { EventEmitter } from '$lib/utils/EventEmitter';
import { get } from 'svelte/store';
import { accessibilitySettings, uiSettings } from '$lib/stores/mudStore';
import { get, writable, type Writable } from 'svelte/store';
export interface Settings {
accessibility: {
@@ -30,6 +29,11 @@ export interface Settings {
export class SettingsManager extends EventEmitter {
private settings: Settings;
private readonly STORAGE_KEY = 'svelte-mud-settings';
private initialized = false;
// Create our own stores rather than depending on the ones from mudStore
public accessibilitySettings: Writable<Settings['accessibility']>;
public uiSettings: Writable<Settings['ui']>;
constructor() {
super();
@@ -60,6 +64,31 @@ export class SettingsManager extends EventEmitter {
}
};
// Create the stores with default values
this.accessibilitySettings = writable(this.settings.accessibility);
this.uiSettings = writable(this.settings.ui);
// Set up subscriptions to save settings when they change
this.accessibilitySettings.subscribe(value => {
// Skip during initialization
if (!this.initialized) return;
if (typeof window !== 'undefined') {
// Use a small timeout to batch multiple rapid changes
setTimeout(() => this.saveSettings(), 100);
}
});
this.uiSettings.subscribe(value => {
// Skip during initialization
if (!this.initialized) return;
if (typeof window !== 'undefined') {
// Use a small timeout to batch multiple rapid changes
setTimeout(() => this.saveSettings(), 100);
}
});
// Load settings from storage
this.loadSettings();
}
@@ -68,102 +97,87 @@ export class SettingsManager extends EventEmitter {
* Load settings from localStorage
*/
private loadSettings(): void {
if (typeof window === 'undefined') {
return; // Skip during SSR
// Skip during SSR
if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
console.log('SSR environment detected, skipping settings load');
return;
}
try {
const storedSettings = localStorage.getItem(this.STORAGE_KEY);
if (storedSettings) {
console.log('Retrieved settings from localStorage');
const parsedSettings = JSON.parse(storedSettings);
// Merge with defaults to ensure all properties exist
this.settings = {
accessibility: {
...this.settings.accessibility,
...parsedSettings.accessibility
},
ui: {
...this.settings.ui,
...parsedSettings.ui
}
};
console.log('Loaded settings from localStorage:', this.settings);
// Update Svelte stores with loaded settings
accessibilitySettings.set(this.settings.accessibility);
uiSettings.set(this.settings.ui);
this.emit('settingsLoaded', this.settings);
if (parsedSettings && typeof parsedSettings === 'object') {
// Update internal settings
this.settings = {
accessibility: {
...this.settings.accessibility,
...(parsedSettings.accessibility || {})
},
ui: {
...this.settings.ui,
...(parsedSettings.ui || {})
}
};
console.log('Loaded settings from localStorage:', this.settings);
// Set the stores without triggering the save callback
this.accessibilitySettings.set(this.settings.accessibility);
this.uiSettings.set(this.settings.ui);
} else {
console.warn('Invalid settings format found in localStorage');
}
} else {
console.log('No settings found in localStorage, using defaults');
// Update Svelte stores with default settings
accessibilitySettings.set(this.settings.accessibility);
uiSettings.set(this.settings.ui);
}
// Now that settings are loaded, mark as initialized
this.initialized = true;
// Notify listeners
this.emit('settingsLoaded', this.settings);
} catch (error) {
console.error('Failed to load settings from localStorage:', error);
// Mark as initialized even on error
this.initialized = true;
}
}
/**
* Save settings to localStorage
*/
// Save settings to localStorage
public saveSettings(): void {
if (typeof window === 'undefined') {
return; // Skip during SSR
}
if (typeof window === 'undefined' || !this.initialized) return;
try {
// Get current values from stores
this.settings.accessibility = get(accessibilitySettings);
this.settings.ui = get(uiSettings);
this.settings.accessibility = get(this.accessibilitySettings);
this.settings.ui = get(this.uiSettings);
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.settings));
console.log('Saved settings to localStorage:', this.settings);
console.log('Saved settings to localStorage');
this.emit('settingsSaved', this.settings);
} catch (error) {
console.error('Failed to save settings to localStorage:', error);
console.error('Failed to save settings:', error);
}
}
/**
* Update accessibility settings
*/
// Update methods
public updateAccessibilitySettings(newSettings: Partial<Settings['accessibility']>): void {
accessibilitySettings.update(current => {
const updated = { ...current, ...newSettings };
this.settings.accessibility = updated;
this.saveSettings();
return updated;
});
this.emit('accessibilitySettingsUpdated', get(accessibilitySettings));
this.accessibilitySettings.update(current => ({...current, ...newSettings}));
}
/**
* Update UI settings
*/
public updateUiSettings(newSettings: Partial<Settings['ui']>): void {
uiSettings.update(current => {
const updated = { ...current, ...newSettings };
this.settings.ui = updated;
this.saveSettings();
return updated;
});
this.emit('uiSettingsUpdated', get(uiSettings));
this.uiSettings.update(current => ({...current, ...newSettings}));
}
/**
* Reset settings to defaults
*/
// Reset settings to defaults
public resetSettings(): void {
// Create default settings
const defaultSettings: Settings = {
const defaults = {
accessibility: {
textToSpeech: false,
highContrast: false,
@@ -188,27 +202,19 @@ export class SettingsManager extends EventEmitter {
}
};
// Update stores
accessibilitySettings.set(defaultSettings.accessibility);
uiSettings.set(defaultSettings.ui);
// Update internal settings and save
this.settings = defaultSettings;
this.saveSettings();
this.emit('settingsReset', defaultSettings);
this.accessibilitySettings.set(defaults.accessibility);
this.uiSettings.set(defaults.ui);
this.emit('settingsReset', defaults);
}
/**
* Import settings from a JSON string
*/
// Import/export
public importSettings(json: string): void {
try {
const imported = JSON.parse(json);
if (typeof imported === 'object' && imported !== null) {
// Create a valid settings object with defaults for missing properties
const newSettings: Settings = {
const newSettings = {
accessibility: {
...this.settings.accessibility,
...(imported.accessibility || {})
@@ -220,12 +226,11 @@ export class SettingsManager extends EventEmitter {
};
// Update stores
accessibilitySettings.set(newSettings.accessibility);
uiSettings.set(newSettings.ui);
this.accessibilitySettings.set(newSettings.accessibility);
this.uiSettings.set(newSettings.ui);
// Update internal settings and save
// Update internal settings
this.settings = newSettings;
this.saveSettings();
this.emit('settingsImported', newSettings);
}
@@ -235,13 +240,10 @@ export class SettingsManager extends EventEmitter {
}
}
/**
* Export settings to a JSON string
*/
public exportSettings(): string {
// Get current values from stores
this.settings.accessibility = get(accessibilitySettings);
this.settings.ui = get(uiSettings);
this.settings.accessibility = get(this.accessibilitySettings);
this.settings.ui = get(this.uiSettings);
return JSON.stringify(this.settings, null, 2);
}