reorganise the code for add new setting container

This commit is contained in:
Jiaxin Peng
2023-11-15 12:25:30 +00:00
parent 6550bca70f
commit 4e3c88f129

View File

@@ -112,8 +112,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
}) })
}); });
notionAPINextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; this.updateSettingEl(notionAPINextEl, value);
notionAPINextEl.style.paddingTop = value ? "0.75em" : "0";
new Setting(databaseIDNextEl) new Setting(databaseIDNextEl)
.setName(i18nConfig.DatabaseID) .setName(i18nConfig.DatabaseID)
@@ -130,14 +129,11 @@ export class ObsidianSettingTab extends PluginSettingTab {
} }
); );
databaseIDNextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; this.updateSettingEl(databaseIDNextEl, value)
databaseIDNextEl.style.paddingTop = value ? "0.75em" : "0";
} else { } else {
notionAPINextEl.style.borderTop = "none"; this.updateSettingEl(notionAPINextEl, false)
notionAPINextEl.style.paddingTop = "0"; this.updateSettingEl(databaseIDNextEl, false);
databaseIDNextEl.style.borderTop = "none";
databaseIDNextEl.style.paddingTop = "0";
} }
}) })
); );
@@ -185,11 +181,11 @@ export class ObsidianSettingTab extends PluginSettingTab {
await this.plugin.commands.updateCommand(); await this.plugin.commands.updateCommand();
// Clear existing components // Clear existing components
dynamicSettingContainer.empty(); CustomNameEl.empty();
// Add new components based on the toggle value // Add new components based on the toggle value
if (this.plugin.settings.CustomTitleButton) { if (this.plugin.settings.CustomTitleButton) {
new Setting(dynamicSettingContainer) new Setting(CustomNameEl)
.setName(i18nConfig.NotionCustomTitleName) .setName(i18nConfig.NotionCustomTitleName)
.setDesc(i18nConfig.NotionCustomTitleNameDesc) .setDesc(i18nConfig.NotionCustomTitleNameDesc)
.addText((text) => .addText((text) =>
@@ -205,17 +201,14 @@ export class ObsidianSettingTab extends PluginSettingTab {
CustomTitleEl.empty(); CustomTitleEl.empty();
}) })
); );
dynamicSettingContainer.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; this.updateSettingEl(CustomNameEl, value)
dynamicSettingContainer.style.paddingTop = value ? "0.75em" : "0";
} else { } else {
dynamicSettingContainer.style.borderTop = "none"; this.updateSettingEl(CustomNameEl, false);
dynamicSettingContainer.style.paddingTop = "0"; }
}
}) })
); );
CustomTitleEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; this.updateSettingEl(CustomTitleEl, value);
CustomTitleEl.style.paddingTop = value ? "0.75em" : "0";
new Setting(notionAPIGeneralEl) new Setting(notionAPIGeneralEl)
.setName(i18nConfig.NotionAPI) .setName(i18nConfig.NotionAPI)
@@ -231,8 +224,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
}) })
}); });
notionAPIGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; this.updateSettingEl(notionAPIGeneralEl, value);
notionAPIGeneralEl.style.paddingTop = value ? "0.75em" : "0";
new Setting(databaseIDGeneralEl) new Setting(databaseIDGeneralEl)
@@ -250,23 +242,19 @@ export class ObsidianSettingTab extends PluginSettingTab {
} }
); );
databaseIDGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; this.updateSettingEl(databaseIDGeneralEl, value);
databaseIDGeneralEl.style.paddingTop = value ? "0.75em" : "0";
} else { } else {
CustomTitleEl.style.borderTop = "none"; this.updateSettingEl(CustomTitleEl, false);
CustomTitleEl.style.paddingTop = "0"; this.updateSettingEl(notionAPIGeneralEl, false);
notionAPIGeneralEl.style.borderTop = "none"; this.updateSettingEl(databaseIDGeneralEl, false);
notionAPIGeneralEl.style.paddingTop = "0";
databaseIDGeneralEl.style.borderTop = "none";
databaseIDGeneralEl.style.paddingTop = "0";
} }
}) })
); );
const CustomTitleEl = this.createStyleDiv('custom-title'); const CustomTitleEl = this.createStyleDiv('custom-title');
const dynamicSettingContainer = this.createStyleDiv('dynamic-setting'); const CustomNameEl = this.createStyleDiv('custom-name');
// new Setting(containerEl) // new Setting(containerEl)
// .setName("Convert tags(optional)") // .setName("Convert tags(optional)")
@@ -311,12 +299,55 @@ export class ObsidianSettingTab extends PluginSettingTab {
} }
// function to add one setting element in the setting tab. // function to add one setting element in the setting tab.
private createSettingEl() { private createSettingEl(containerEl: HTMLElement, name: string, desc: string, type:string, placeholder: string, setvalue: any) {
if (type === 'password') {
return new Setting(containerEl)
.setName(name)
.setDesc(desc)
.addText((text) => {
text.inputEl.type = type;
return text
.setPlaceholder(placeholder)
.setValue(setvalue)
.onChange(async (value) => {
setvalue = value;
await this.plugin.saveSettings();
})
}
)
} else if (type === 'toggle') {
return new Setting(containerEl)
.setName(name)
.setDesc(desc)
.addToggle((toggle) =>
toggle
.setValue(setvalue)
.onChange(async (value) => {
setvalue = value;
await this.plugin.saveSettings();
await this.plugin.commands.updateCommand();
})
)
} else if (type === 'text') {
new Setting(containerEl)
.setName(name)
.setDesc(desc)
.addText((text) =>
text
.setPlaceholder(placeholder)
.setValue(setvalue)
.onChange(async (value) => {
setvalue = value;
await this.plugin.saveSettings();
await this.plugin.commands.updateCommand();
})
)
}
} }
// update the setting display style in the setting tab // update the setting display style in the setting tab
private updateSettingEl() { private updateSettingEl(element: HTMLElement, value: boolean) {
element.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
element.style.paddingTop = value ? "0.75em" : "0";
} }
} }