From 79849bab781a01aad918317d595f6bcccb7218ef Mon Sep 17 00:00:00 2001 From: mgmeyers Date: Wed, 24 May 2023 16:07:37 -0700 Subject: [PATCH] Ensure classes are loaded and unloaded --- manifest.json | 2 +- src/SettingsManager.ts | 22 +++++++++-- src/main.ts | 39 +++++++++++-------- .../ClassMultiToggleSettingComponent.ts | 20 ---------- .../ClassToggleSettingComponent.ts | 13 ------- src/settingsView/SettingsMarkup.ts | 2 - 6 files changed, 42 insertions(+), 56 deletions(-) diff --git a/manifest.json b/manifest.json index fe7bc75..608de1f 100644 --- 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 index 218d415..904af62 100644 --- 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,6 +554,8 @@ export class CSSSettingsManager { setSetting(sectionId: string, settingId: string, value: SettingValue) { this.settings[`${sectionId}@@${settingId}`] = value; this.save(); + this.removeClasses(); + this.initClasses(); } setSettings(settings: Record) { @@ -554,12 +563,17 @@ export class CSSSettingsManager { 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) { diff --git a/src/main.ts b/src/main.ts index 2dc8195..a2b0c62 100644 --- 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 index 71712f9..b77a149 100644 --- 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 index a615cc8..d57179e 100644 --- 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 index 5e4bac2..7afcc2e 100644 --- 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); }