Ensure classes are loaded and unloaded

mgmeyers · May 24, 2023 · 79849ba · 79849ba
1 parent 13918cc
commit 79849ba
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 56 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "obsidian-style-settings",
   "name": "Style Settings",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "minAppVersion": "0.11.5",
   "description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
   "author": "mgmeyers",

diff --git a/src/SettingsManager.ts b/src/SettingsManager.ts
@@ -446,9 +446,16 @@ export class CSSSettingsManager {
 				const setting = config[settingId];
 
 				if (setting.type === SettingType.CLASS_TOGGLE) {
-					if (this.getSetting(section, settingId)) {
-						document.body.classList.remove(setting.id);
-					}
+					document.body.classList.remove(setting.id);
+				} else if (setting.type === SettingType.CLASS_SELECT) {
+					const multiToggle = setting as ClassMultiToggle;
+					multiToggle.options.forEach((v) => {
+						if (typeof v === 'string') {
+							document.body.classList.remove(v);
+						} else {
+							document.body.classList.remove(v.value);
+						}
+					});
 				}
 			});
 		});
@@ -547,19 +554,26 @@ export class CSSSettingsManager {
 	setSetting(sectionId: string, settingId: string, value: SettingValue) {
 		this.settings[`${sectionId}@@${settingId}`] = value;
 		this.save();
+		this.removeClasses();
+		this.initClasses();
 	}
 
 	setSettings(settings: Record<string, SettingValue>) {
 		Object.keys(settings).forEach((id) => {
 			this.settings[id] = settings[id];
 		});
 
+		this.removeClasses();
+		this.initClasses();
+
 		return this.save();
 	}
 
 	clearSetting(sectionId: string, settingId: string) {
 		delete this.settings[`${sectionId}@@${settingId}`];
 		this.save();
+		this.removeClasses();
+		this.initClasses();
 	}
 
 	clearSection(sectionId: string) {
@@ -570,6 +584,8 @@ export class CSSSettingsManager {
 			}
 		});
 		this.save();
+		this.removeClasses();
+		this.initClasses();
 	}
 
 	export(section: string, config: Record<string, SettingValue>) {

diff --git a/src/main.ts b/src/main.ts
@@ -66,6 +66,17 @@ export default class CSSSettingsPlugin extends Plugin {
 		document.body.classList.add('css-settings-manager');
 
 		this.parseCSS();
+
+		this.app.workspace.onLayoutReady(() => {
+			if (this.settingsList) {
+				this.app.workspace.getLeavesOfType(viewType).forEach((leaf) => {
+					(leaf.view as SettingsView).setSettings(
+						this.settingsList,
+						this.errorList
+					);
+				});
+			}
+		});
 	}
 
 	getCSSVar(id: string) {
@@ -79,19 +90,19 @@ export default class CSSSettingsPlugin extends Plugin {
 
 	parseCSS() {
 		clearTimeout(this.debounceTimer);
+		this.debounceTimer = activeWindow.setTimeout(() => {
+			this.settingsList = [];
+			this.errorList = [];
 
-		this.settingsList = [];
-		this.errorList = [];
-
-		// remove registered theme commands (sadly undocumented API)
-		for (const command of this.commandList) {
-			// @ts-ignore
-			this.app.commands.removeCommand(command.id);
-		}
+			// remove registered theme commands (sadly undocumented API)
+			for (const command of this.commandList) {
+				// @ts-ignore
+				this.app.commands.removeCommand(command.id);
+			}
 
-		this.commandList = [];
+			this.commandList = [];
+			this.settingsManager.removeClasses();
 
-		this.debounceTimer = activeWindow.setTimeout(() => {
 			const styleSheets = document.styleSheets;
 
 			for (let i = 0, len = styleSheets.length; i < len; i++) {
@@ -109,6 +120,7 @@ export default class CSSSettingsPlugin extends Plugin {
 					this.errorList
 				);
 			});
+			this.settingsManager.setConfig(this.settingsList);
 			this.settingsManager.initClasses();
 			this.registerSettingCommands();
 		}, 100);
@@ -258,13 +270,6 @@ export default class CSSSettingsPlugin extends Plugin {
 						setting.id
 					) as boolean);
 					this.settingsManager.setSetting(section.id, setting.id, value);
-
-					if (value) {
-						document.body.classList.add(setting.id);
-					} else {
-						document.body.classList.remove(setting.id);
-					}
-
 					this.settingsTab.settingsMarkup.rerender();
 					for (const leaf of this.app.workspace.getLeavesOfType(viewType)) {
 						(leaf.view as SettingsView).settingsMarkup.rerender();

diff --git a/src/settingsView/SettingComponents/ClassMultiToggleSettingComponent.ts b/src/settingsView/SettingComponents/ClassMultiToggleSettingComponent.ts
@@ -50,15 +50,6 @@ export class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
 
 			dropdown.onChange((value) => {
 				this.settingsManager.setSetting(this.sectionId, this.setting.id, value);
-
-				if (value !== 'none') {
-					document.body.classList.add(value);
-				}
-
-				if (prevValue) {
-					document.body.classList.remove(prevValue);
-				}
-
 				prevValue = value;
 			});
 
@@ -68,18 +59,7 @@ export class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
 		this.settingEl.addExtraButton((b) => {
 			b.setIcon('reset');
 			b.onClick(() => {
-				const value = this.setting.default || 'none';
-
 				this.dropdownComponent.setValue(this.setting.default || 'none');
-
-				if (value !== 'none') {
-					document.body.classList.add(value);
-				}
-
-				if (prevValue) {
-					document.body.classList.remove(prevValue);
-				}
-
 				this.settingsManager.clearSetting(this.sectionId, this.setting.id);
 			});
 			b.setTooltip(resetTooltip);

diff --git a/src/settingsView/SettingComponents/ClassToggleSettingComponent.ts b/src/settingsView/SettingComponents/ClassToggleSettingComponent.ts
@@ -25,12 +25,6 @@ export class ClassToggleSettingComponent extends AbstractSettingComponent {
 			toggle.setValue(value !== undefined ? !!value : !!this.setting.default);
 			toggle.onChange((value) => {
 				this.settingsManager.setSetting(this.sectionId, this.setting.id, value);
-
-				if (value) {
-					document.body.classList.add(this.setting.id);
-				} else {
-					document.body.classList.remove(this.setting.id);
-				}
 			});
 
 			this.toggleComponent = toggle;
@@ -42,13 +36,6 @@ export class ClassToggleSettingComponent extends AbstractSettingComponent {
 				const value = !!this.setting.default;
 
 				this.toggleComponent.setValue(value);
-
-				if (value) {
-					document.body.classList.add(this.setting.id);
-				} else {
-					document.body.classList.remove(this.setting.id);
-				}
-
 				this.settingsManager.clearSetting(this.sectionId, this.setting.id);
 			});
 			b.setTooltip(resetTooltip);

diff --git a/src/settingsView/SettingsMarkup.ts b/src/settingsView/SettingsMarkup.ts
@@ -61,8 +61,6 @@ export class SettingsMarkup extends Component {
 		this.settings = settings;
 		this.errorList = errorList;
 
-		this.plugin.settingsManager.setConfig(settings);
-
 		if (this.containerEl.parentNode) {
 			this.generate(settings);
 		}