reorganise the setting coding

This commit is contained in:
Jiaxin Peng
2023-11-15 09:34:22 +00:00
parent 662edbb84c
commit 6550bca70f

View File

@@ -50,7 +50,7 @@ export class ObsidianSettingTab extends PluginSettingTab {
containerEl.empty(); containerEl.empty();
// General Settings // General Settings
containerEl.createEl('h2', { text: i18nConfig.GeneralSetting }); containerEl.createEl('h2', { text: i18nConfig.GeneralSetting });
new Setting(containerEl) new Setting(containerEl)
@@ -93,68 +93,58 @@ export class ObsidianSettingTab extends PluginSettingTab {
await this.plugin.saveSettings(); await this.plugin.saveSettings();
await this.plugin.commands.updateCommand(); await this.plugin.commands.updateCommand();
// Clear existing components // Clear existing components
notionAPINextEl.empty(); notionAPINextEl.empty();
databaseIDNextEl.empty(); databaseIDNextEl.empty();
if (value) { if (value) {
new Setting(notionAPINextEl) new Setting(notionAPINextEl)
.setName(i18nConfig.NotionAPI) .setName(i18nConfig.NotionAPI)
.setDesc(i18nConfig.NotionAPIDesc) .setDesc(i18nConfig.NotionAPIDesc)
.addText((text) => { .addText((text) => {
text.inputEl.type = 'password'; text.inputEl.type = 'password';
return text return text
.setPlaceholder(i18nConfig.NotionAPIText) .setPlaceholder(i18nConfig.NotionAPIText)
.setValue(this.plugin.settings.notionAPINext) .setValue(this.plugin.settings.notionAPINext)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.notionAPINext = value; this.plugin.settings.notionAPINext = value;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}) })
}); });
notionAPINextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; notionAPINextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
notionAPINextEl.style.paddingTop = value ? "0.75em" : "0"; notionAPINextEl.style.paddingTop = value ? "0.75em" : "0";
new Setting(databaseIDNextEl) new Setting(databaseIDNextEl)
.setName(i18nConfig.DatabaseID) .setName(i18nConfig.DatabaseID)
.setDesc(i18nConfig.NotionAPIDesc) .setDesc(i18nConfig.NotionAPIDesc)
.addText((text) => { .addText((text) => {
text.inputEl.type = 'password'; text.inputEl.type = 'password';
return text return text
.setPlaceholder(i18nConfig.DatabaseIDText) .setPlaceholder(i18nConfig.DatabaseIDText)
.setValue(this.plugin.settings.databaseIDNext) .setValue(this.plugin.settings.databaseIDNext)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.databaseIDNext = value; this.plugin.settings.databaseIDNext = value;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}) })
} }
); );
databaseIDNextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; databaseIDNextEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
databaseIDNextEl.style.paddingTop = value ? "0.75em" : "0"; databaseIDNextEl.style.paddingTop = value ? "0.75em" : "0";
} else { } else {
notionAPINextEl.style.borderTop = "none"; notionAPINextEl.style.borderTop = "none";
notionAPINextEl.style.paddingTop = "0"; notionAPINextEl.style.paddingTop = "0";
databaseIDNextEl.style.borderTop = "none"; databaseIDNextEl.style.borderTop = "none";
databaseIDNextEl.style.paddingTop = "0"; databaseIDNextEl.style.paddingTop = "0";
} }
}) })
); );
const notionAPINextEl = containerEl.createDiv('api-next', (div) => { const notionAPINextEl = this.createStyleDiv('api-next')
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
}
);
const databaseIDNextEl = containerEl.createDiv('databaseID-next', (div) => { const databaseIDNextEl = this.createStyleDiv('databaseID-next')
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
}
);
@@ -177,115 +167,106 @@ export class ObsidianSettingTab extends PluginSettingTab {
await this.plugin.saveSettings(); await this.plugin.saveSettings();
await this.plugin.commands.updateCommand(); await this.plugin.commands.updateCommand();
// Clear existing components // Clear existing components
CustomTitleEl.empty(); CustomTitleEl.empty();
notionAPIGeneralEl.empty(); notionAPIGeneralEl.empty();
databaseIDGeneralEl.empty(); databaseIDGeneralEl.empty();
if (value) { if (value) {
new Setting(CustomTitleEl) new Setting(CustomTitleEl)
.setName(i18nConfig.NotionCustomTitle) .setName(i18nConfig.NotionCustomTitle)
.setDesc(i18nConfig.NotionCustomTitleDesc) .setDesc(i18nConfig.NotionCustomTitleDesc)
.addToggle((toggle) => .addToggle((toggle) =>
toggle toggle
.setValue(this.plugin.settings.CustomTitleButton) .setValue(this.plugin.settings.CustomTitleButton)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.CustomTitleButton = value; this.plugin.settings.CustomTitleButton = value;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
await this.plugin.commands.updateCommand(); await this.plugin.commands.updateCommand();
// Clear existing components // Clear existing components
dynamicSettingContainer.empty(); dynamicSettingContainer.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(dynamicSettingContainer)
.setName(i18nConfig.NotionCustomTitleName) .setName(i18nConfig.NotionCustomTitleName)
.setDesc(i18nConfig.NotionCustomTitleNameDesc) .setDesc(i18nConfig.NotionCustomTitleNameDesc)
.addText((text) => .addText((text) =>
text text
.setPlaceholder(i18nConfig.NotionCustomTitleText) .setPlaceholder(i18nConfig.NotionCustomTitleText)
.setValue(this.plugin.settings.CustomTitleName) .setValue(this.plugin.settings.CustomTitleName)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.CustomTitleName = value; this.plugin.settings.CustomTitleName = value;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
await this.plugin.commands.updateCommand(); await this.plugin.commands.updateCommand();
// Clear existing components // Clear existing components
CustomTitleEl.empty(); CustomTitleEl.empty();
}) })
); );
dynamicSettingContainer.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; dynamicSettingContainer.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
dynamicSettingContainer.style.paddingTop = value ? "0.75em" : "0"; dynamicSettingContainer.style.paddingTop = value ? "0.75em" : "0";
} else { } else {
dynamicSettingContainer.style.borderTop = "none"; dynamicSettingContainer.style.borderTop = "none";
dynamicSettingContainer.style.paddingTop = "0"; dynamicSettingContainer.style.paddingTop = "0";
} }
}) })
); );
CustomTitleEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; CustomTitleEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
CustomTitleEl.style.paddingTop = value ? "0.75em" : "0"; CustomTitleEl.style.paddingTop = value ? "0.75em" : "0";
new Setting(notionAPIGeneralEl) new Setting(notionAPIGeneralEl)
.setName(i18nConfig.NotionAPI) .setName(i18nConfig.NotionAPI)
.setDesc(i18nConfig.NotionAPIDesc) .setDesc(i18nConfig.NotionAPIDesc)
.addText((text) => { .addText((text) => {
text.inputEl.type = 'password'; text.inputEl.type = 'password';
return text return text
.setPlaceholder(i18nConfig.NotionAPIText) .setPlaceholder(i18nConfig.NotionAPIText)
.setValue(this.plugin.settings.notionAPIGeneral) .setValue(this.plugin.settings.notionAPIGeneral)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.notionAPIGeneral = value; this.plugin.settings.notionAPIGeneral = value;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}) })
}); });
notionAPIGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; notionAPIGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
notionAPIGeneralEl.style.paddingTop = value ? "0.75em" : "0"; notionAPIGeneralEl.style.paddingTop = value ? "0.75em" : "0";
new Setting(databaseIDGeneralEl) new Setting(databaseIDGeneralEl)
.setName(i18nConfig.DatabaseID) .setName(i18nConfig.DatabaseID)
.setDesc(i18nConfig.NotionAPIDesc) .setDesc(i18nConfig.NotionAPIDesc)
.addText((text) => { .addText((text) => {
text.inputEl.type = 'password'; text.inputEl.type = 'password';
return text return text
.setPlaceholder(i18nConfig.NotionIDText) .setPlaceholder(i18nConfig.NotionIDText)
.setValue(this.plugin.settings.databaseIDGeneral) .setValue(this.plugin.settings.databaseIDGeneral)
.onChange(async (value) => { .onChange(async (value) => {
this.plugin.settings.databaseIDGeneral = value; this.plugin.settings.databaseIDGeneral = value;
await this.plugin.saveSettings(); await this.plugin.saveSettings();
}) })
} }
); );
databaseIDGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; databaseIDGeneralEl.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none";
databaseIDGeneralEl.style.paddingTop = value ? "0.75em" : "0"; databaseIDGeneralEl.style.paddingTop = value ? "0.75em" : "0";
} else { } else {
CustomTitleEl.style.borderTop = "none"; CustomTitleEl.style.borderTop = "none";
CustomTitleEl.style.paddingTop = "0"; CustomTitleEl.style.paddingTop = "0";
notionAPIGeneralEl.style.borderTop = "none"; notionAPIGeneralEl.style.borderTop = "none";
notionAPIGeneralEl.style.paddingTop = "0"; notionAPIGeneralEl.style.paddingTop = "0";
databaseIDGeneralEl.style.borderTop = "none"; databaseIDGeneralEl.style.borderTop = "none";
databaseIDGeneralEl.style.paddingTop = "0"; databaseIDGeneralEl.style.paddingTop = "0";
} }
}) })
); );
const CustomTitleEl = containerEl.createDiv('api-general', (div) => { const CustomTitleEl = this.createStyleDiv('custom-title');
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
}
);
const dynamicSettingContainer = containerEl.createDiv('setting-popover', (div) => { const dynamicSettingContainer = this.createStyleDiv('dynamic-setting');
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
});
// new Setting(containerEl) // new Setting(containerEl)
// .setName("Convert tags(optional)") // .setName("Convert tags(optional)")
@@ -299,21 +280,9 @@ export class ObsidianSettingTab extends PluginSettingTab {
// }) // })
// ); // );
const notionAPIGeneralEl = this.createStyleDiv('api-general');
const notionAPIGeneralEl = containerEl.createDiv('api-general', (div) => { const databaseIDGeneralEl = this.createStyleDiv('databaseID-general');
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
}
);
const databaseIDGeneralEl = containerEl.createDiv('databaseID-general', (div) => {
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
}
);
// Custom Database Settings // Custom Database Settings
@@ -331,4 +300,23 @@ export class ObsidianSettingTab extends PluginSettingTab {
// }) // })
// ); // );
} }
// create a function to create a div with a style for pop over elements
private createStyleDiv(className: string | DomElementInfo) {
return this.containerEl.createDiv(className, (div) => {
div.style.alignItems = "center";
div.style.borderTop = "none";
div.style.paddingBottom = "0";
});
}
// function to add one setting element in the setting tab.
private createSettingEl() {
}
// update the setting display style in the setting tab
private updateSettingEl() {
}
} }