From b978cf7e01e09f528f673bfb81798f41fc7b74cd Mon Sep 17 00:00:00 2001 From: Jiaxin Peng Date: Thu, 16 Nov 2023 00:02:35 +0000 Subject: [PATCH] complete the setting ui --- src/ui/settingTabs.ts | 308 ++++++------------ .../upload_general/Upload2NotionGeneral.ts | 2 +- 2 files changed, 94 insertions(+), 216 deletions(-) diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index 6a7b2f1..8be0ad7 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -53,35 +53,13 @@ export class ObsidianSettingTab extends PluginSettingTab { // General Settings containerEl.createEl('h2', { text: i18nConfig.GeneralSetting }); - new Setting(containerEl) - .setName(i18nConfig.BannerUrl) - .setDesc(i18nConfig.BannerUrlDesc) - .addText((text) => - text - .setPlaceholder(i18nConfig.BannerUrlText) - .setValue(this.plugin.settings.bannerUrl) - .onChange(async (value) => { - this.plugin.settings.bannerUrl = value; - await this.plugin.saveSettings(); - }) - ); + this.createSettingEl(containerEl, i18nConfig.BannerUrl, i18nConfig.BannerUrlDesc, 'text', i18nConfig.BannerUrlText, this.plugin.settings.bannerUrl) - - new Setting(containerEl) - .setName(i18nConfig.NotionUser) - .setDesc(i18nConfig.NotionUserDesc) - .addText((text) => - text - .setPlaceholder(i18nConfig.NotionUserText) - .setValue(this.plugin.settings.notionUser) - .onChange(async (value) => { - this.plugin.settings.notionUser = value; - await this.plugin.saveSettings(); - }) - ); + this.createSettingEl(containerEl, i18nConfig.NotionUser, i18nConfig.NotionUserDesc, 'text', i18nConfig.NotionUserText, this.plugin.settings.notionUser) containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }) + new Setting(containerEl) .setName(i18nConfig.NotionNextButton) .setDesc(i18nConfig.NotionNextButtonDesc) @@ -90,61 +68,22 @@ export class ObsidianSettingTab extends PluginSettingTab { .setValue(this.plugin.settings.NextButton) .onChange(async (value) => { this.plugin.settings.NextButton = value; + + this.updateSettingEl(notionAPINextEl, value) + + this.updateSettingEl(databaseIDNextEl, value) + await this.plugin.saveSettings(); await this.plugin.commands.updateCommand(); - - // Clear existing components - notionAPINextEl.empty(); - databaseIDNextEl.empty(); - - if (value) { - new Setting(notionAPINextEl) - .setName(i18nConfig.NotionAPI) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.NotionAPIText) - .setValue(this.plugin.settings.notionAPINext) - .onChange(async (value) => { - this.plugin.settings.notionAPINext = value; - await this.plugin.saveSettings(); - }) - }); - - this.updateSettingEl(notionAPINextEl, value); - - new Setting(databaseIDNextEl) - .setName(i18nConfig.DatabaseID) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.DatabaseIDText) - .setValue(this.plugin.settings.databaseIDNext) - .onChange(async (value) => { - this.plugin.settings.databaseIDNext = value; - await this.plugin.saveSettings(); - }) - } - ); - - this.updateSettingEl(databaseIDNextEl, value) - - } else { - this.updateSettingEl(notionAPINextEl, false) - this.updateSettingEl(databaseIDNextEl, false); - } }) ); - const notionAPINextEl = this.createStyleDiv('api-next') - const databaseIDNextEl = this.createStyleDiv('databaseID-next') + const notionAPINextEl = this.createStyleDiv('api-next', this.plugin.settings.NextButton) + this.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext) - - - // notionDatabaseID.controlEl.querySelector('input').type='password' + const databaseIDNextEl = this.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) + this.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext) // General Database Settings @@ -160,101 +99,37 @@ export class ObsidianSettingTab extends PluginSettingTab { .setValue(this.plugin.settings.GeneralButton) .onChange(async (value) => { this.plugin.settings.GeneralButton = value; + + this.updateSettingEl(CustomTitleEl, value) + this.updateSettingEl(notionAPIGeneralEl, value) + this.updateSettingEl(databaseIDGeneralEl, value) + + await this.plugin.saveSettings(); await this.plugin.commands.updateCommand(); - // Clear existing components - CustomTitleEl.empty(); - notionAPIGeneralEl.empty(); - databaseIDGeneralEl.empty(); - - if (value) { - new Setting(CustomTitleEl) - .setName(i18nConfig.NotionCustomTitle) - .setDesc(i18nConfig.NotionCustomTitleDesc) - .addToggle((toggle) => - toggle - .setValue(this.plugin.settings.CustomTitleButton) - .onChange(async (value) => { - this.plugin.settings.CustomTitleButton = value; - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); - - // Clear existing components - CustomNameEl.empty(); - - // Add new components based on the toggle value - if (this.plugin.settings.CustomTitleButton) { - new Setting(CustomNameEl) - .setName(i18nConfig.NotionCustomTitleName) - .setDesc(i18nConfig.NotionCustomTitleNameDesc) - .addText((text) => - text - .setPlaceholder(i18nConfig.NotionCustomTitleText) - .setValue(this.plugin.settings.CustomTitleName) - .onChange(async (value) => { - this.plugin.settings.CustomTitleName = value; - await this.plugin.saveSettings(); - await this.plugin.commands.updateCommand(); - - // Clear existing components - CustomTitleEl.empty(); - }) - ); - this.updateSettingEl(CustomNameEl, value) - } else { - this.updateSettingEl(CustomNameEl, false); - } - }) - ); - - this.updateSettingEl(CustomTitleEl, value); - - new Setting(notionAPIGeneralEl) - .setName(i18nConfig.NotionAPI) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.NotionAPIText) - .setValue(this.plugin.settings.notionAPIGeneral) - .onChange(async (value) => { - this.plugin.settings.notionAPIGeneral = value; - await this.plugin.saveSettings(); - }) - }); - - this.updateSettingEl(notionAPIGeneralEl, value); - - - new Setting(databaseIDGeneralEl) - .setName(i18nConfig.DatabaseID) - .setDesc(i18nConfig.NotionAPIDesc) - .addText((text) => { - text.inputEl.type = 'password'; - return text - .setPlaceholder(i18nConfig.NotionIDText) - .setValue(this.plugin.settings.databaseIDGeneral) - .onChange(async (value) => { - this.plugin.settings.databaseIDGeneral = value; - await this.plugin.saveSettings(); - }) - } - ); - - this.updateSettingEl(databaseIDGeneralEl, value); - - } else { - this.updateSettingEl(CustomTitleEl, false); - this.updateSettingEl(notionAPIGeneralEl, false); - this.updateSettingEl(databaseIDGeneralEl, false); - } }) ); - const CustomTitleEl = this.createStyleDiv('custom-title'); + const CustomTitleEl = this.createStyleDiv('custom-title', this.plugin.settings.GeneralButton); + new Setting(CustomTitleEl) + .setName(i18nConfig.NotionCustomTitle) + .setDesc(i18nConfig.NotionCustomTitleDesc) + .addToggle((toggle) => + toggle + .setValue(this.plugin.settings.CustomTitleButton) + .onChange(async (value) => { + this.plugin.settings.CustomTitleButton = value; - const CustomNameEl = this.createStyleDiv('custom-name'); + this.updateSettingEl(CustomNameEl, value) + + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + }) + ); + + const CustomNameEl = this.createStyleDiv('custom-name', this.plugin.settings.CustomTitleButton); + this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.plugin.settings.CustomTitleName) // new Setting(containerEl) // .setName("Convert tags(optional)") @@ -268,9 +143,12 @@ export class ObsidianSettingTab extends PluginSettingTab { // }) // ); - const notionAPIGeneralEl = this.createStyleDiv('api-general'); + const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton); + this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPIGeneral) - const databaseIDGeneralEl = this.createStyleDiv('databaseID-general'); + + const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton); + this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDGeneral) // Custom Database Settings @@ -289,65 +167,65 @@ export class ObsidianSettingTab extends PluginSettingTab { // ); } - // create a function to create a div with a style for pop over elements - private createStyleDiv(className: string | DomElementInfo) { + // create a function to create a div with a style for pop over elements + private createStyleDiv(className: string, commandValue: boolean = false) { return this.containerEl.createDiv(className, (div) => { - div.style.alignItems = "center"; - div.style.borderTop = "none"; - div.style.paddingBottom = "0"; - }); + this.updateSettingEl(div, commandValue); + }); + } + // update the setting display style in the setting tab + private updateSettingEl(element: HTMLElement, commandValue: boolean) { + element.style.borderTop = commandValue ? "1px solid var(--background-modifier-border)" : "none"; + element.style.paddingTop = commandValue ? "0.75em" : "0"; + element.style.display = commandValue? "block" : "none"; + element.style.alignItems = "center"; } - // function to add one setting element in the setting tab. - 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(); + // function to add one setting element in the setting tab. + private createSettingEl(containerEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any) { + if (type === 'password') { + return new Setting(containerEl) + .setName(name) + .setDesc(desc) + .addText((text) => { + text.inputEl.type = type; + return text + .setPlaceholder(placeholder) + .setValue(holderValue) + .onChange(async (value) => { + holderValue = 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(); + return new Setting(containerEl) + .setName(name) + .setDesc(desc) + .addToggle((toggle) => + toggle + .setValue(holderValue) + .onChange(async (value) => { + holderValue = 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(holderValue) + .onChange(async (value) => { + holderValue = value; + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + }) + ) } - } - - // update the setting display style in the setting tab - private updateSettingEl(element: HTMLElement, value: boolean) { - element.style.borderTop = value ? "1px solid var(--background-modifier-border)" : "none"; - element.style.paddingTop = value ? "0.75em" : "0"; } + } diff --git a/src/upload/upload_general/Upload2NotionGeneral.ts b/src/upload/upload_general/Upload2NotionGeneral.ts index a73bfb1..dcc5555 100644 --- a/src/upload/upload_general/Upload2NotionGeneral.ts +++ b/src/upload/upload_general/Upload2NotionGeneral.ts @@ -43,7 +43,7 @@ export class Upload2NotionGeneral extends UploadBaseGeneral { title: string, cover: string, tags: string[], - childArr: any + childArr: any, ) { const bodyString: any = { parent: {