diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts index c54cfde..db91ea8 100644 --- a/src/lang/locale/en.ts +++ b/src/lang/locale/en.ts @@ -1,4 +1,9 @@ export const en = { + databaseFormat: "Database Format", + databaseFormatDesc: "Select the database format you want to sync to NotionNext or General", + databaseNext: "NotionNext", + databaseGeneral: "General", + databaseCustom: "Custom", ribbonIcon: "Share to NotionNext", GeneralSetting: "General information Settings", CommandID: "share-to-notionnext", diff --git a/src/lang/locale/ja.ts b/src/lang/locale/ja.ts index e2d6362..4c23ae8 100644 --- a/src/lang/locale/ja.ts +++ b/src/lang/locale/ja.ts @@ -1,4 +1,9 @@ export const ja = { + databaseFormat: "データベース形式", + databaseFormatDesc: "同期したいデータベース形式を選択してください", + databaseNext: "NotionNext", + databaseGeneral: "一般的なNotion", + databaseCustom: "カスタム", ribbonIcon: "NotionNextで共有", GeneralSetting: "一般設定", CommandID: "share-to-notionnext", diff --git a/src/lang/locale/zh.ts b/src/lang/locale/zh.ts index a525aba..774dab2 100644 --- a/src/lang/locale/zh.ts +++ b/src/lang/locale/zh.ts @@ -1,4 +1,9 @@ export const zh = { + databaseFormat: "数据库格式", + databaseFormatDesc: "选择你想要同步的数据库格式Next 或者 普通", + databaseNext: "NotionNext", + databaseGeneral: "普通", + databaseCustom: "自定义", ribbonIcon: "分享到 NotionNext", GeneralSetting: "通用设置", CommandID: "share-to-notionnext", diff --git a/src/ui/settingModal.ts b/src/ui/settingModal.ts index a464a42..6a5ef63 100644 --- a/src/ui/settingModal.ts +++ b/src/ui/settingModal.ts @@ -2,85 +2,137 @@ import { Modal, Setting, PluginSettingTab, - ButtonComponent + ButtonComponent, App } from 'obsidian'; import { i18nConfig } from "../lang/I18n"; import ObsidianSyncNotionPlugin from "../main"; +import {ObsidianSettingTab} from "./settingTabs"; +import {SettingNextTabs} from "./settingNextTabs"; +import {SettingGeneralTabs} from "./settingGeneralTabs"; + export class SettingModal extends Modal { plugin: ObsidianSyncNotionPlugin; + settingTab: ObsidianSettingTab; - constructor(plugin: ObsidianSyncNotionPlugin) { - super(plugin.app); + constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab) { + super(app); this.plugin = plugin; + this.settingTab = settingTab; } + display(): void { + this.containerEl.addClass("settings-modal"); + + // create the dropdown button to select the database format + let { contentEl } = this; + contentEl.empty(); + + const settingDiv = contentEl.createDiv('setting-div'); + const nextTabs = contentEl.createDiv('next-tabs'); + + + new Setting(settingDiv) + .setName(i18nConfig.databaseFormat) + .setDesc(i18nConfig.databaseFormatDesc) + .addDropdown((component) => { + component + .addOption('none', '') + .addOption('general', i18nConfig.databaseGeneral) + .addOption('next', i18nConfig.databaseNext) + .addOption('custom', i18nConfig.databaseCustom) + .setValue(this.plugin.settings.databaseFormat) + .onChange(async (value) => { + this.updateContentBasedOnSelection(value, nextTabs); + }); + + // Initialize content based on the current dropdown value + this.updateContentBasedOnSelection(this.plugin.settings.databaseFormat, nextTabs); + }); + } + + updateContentBasedOnSelection(value: string, nextTabs: HTMLElement): void { + // Clear existing content + nextTabs.empty(); + + // Generate content based on the selected value + if (value === 'general') { + nextTabs.createEl('h2', { text: i18nConfig.NotionGeneralSettingHeader }); + // Additional content for 'general'... + } else if (value === 'next') { + nextTabs.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }); + // Additional content for 'next'... + } + // Implement for 'custom' if needed + } + + + onOpen() { - let {contentEl} = this; - contentEl.addClass('sync-to-notion-modal'); - - new Setting(contentEl) - .setName(i18nConfig.GeneralSetting) - .setDesc(i18nConfig.GeneralSetting) - .addToggle((toggle) => { - toggle - .setValue(this.plugin.settings.enableNotionNext) - .onChange(async (value) => { - this.plugin.settings.enableNotionNext = value; - await this.plugin.saveSettings(); - }); - }) - .addToggle((toggle) => { - toggle - .setValue(this.plugin.settings.enableNotionGeneral) - .onChange(async (value) => { - this.plugin.settings.enableNotionGeneral = value; - await this.plugin.saveSettings(); - }); - }); - - new Setting(contentEl) - .setName(i18nConfig.NotionNextSettingHeader) - .setDesc(i18nConfig.NotionNextSettingHeader) - .addText((text) => { - text - .setPlaceholder(i18nConfig.NotionAPI) - .setValue(this.plugin.settings.notionAPI) - .onChange(async (value) => { - this.plugin.settings.notionAPI = value; - await this.plugin.saveSettings(); - }); - }) - .addText((text) => { - text - .setPlaceholder(i18nConfig.DatabaseID) - .setValue(this.plugin.settings.databaseIDNext) - .onChange(async (value) => { - this.plugin.settings.databaseIDNext = value; - await this.plugin.saveSettings(); - }); - }) - .addText((text) => { - text - .setPlaceholder(i18nConfig.BannerUrl) - .setValue(this.plugin.settings.bannerUrl) - .onChange(async (value) => { - this.plugin.settings.bannerUrl = value; - await this.plugin.saveSettings(); - }); - }) - .addText((text) => { - text - .setPlaceholder(i18nConfig.NotionUser) - .setValue(this.plugin.settings.notionUser) - .onChange(async (value) => { - this.plugin.settings.notionUser = value; - await this.plugin.saveSettings(); - }); - }); - - new Setting(contentEl) + // add console log to check if the modal is opened + this.display() } + + + // create a function to create a div with a style for pop over elements + public createStyleDiv(className: string, commandValue: boolean = false) { + return this.contentEl.createDiv(className, (div) => { + this.updateSettingEl(div, commandValue); + }); + } + // update the setting display style in the setting tab + public 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. + public createSettingEl(contentEl: HTMLElement, name: string, desc: string, type: string, placeholder: string, holderValue: any, settingsKey: string) { + if (type === 'password') { + return new Setting(contentEl) + .setName(name) + .setDesc(desc) + .addText((text) => { + text.inputEl.type = type; + return text + .setPlaceholder(placeholder) + .setValue(holderValue) + .onChange(async (value) => { + this.plugin.settings[settingsKey] = value; // Update the plugin settings directly + await this.plugin.saveSettings(); + }) + }); + } else if (type === 'toggle') { + return new Setting(contentEl) + .setName(name) + .setDesc(desc) + .addToggle((toggle) => + toggle + .setValue(holderValue) + .onChange(async (value) => { + this.plugin.settings[settingsKey] = value; // Update the plugin settings directly + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + }) + ); + } else if (type === 'text') { + return new Setting(contentEl) + .setName(name) + .setDesc(desc) + .addText((text) => + text + .setPlaceholder(placeholder) + .setValue(holderValue) + .onChange(async (value) => { + this.plugin.settings[settingsKey] = value; // Update the plugin settings directly + await this.plugin.saveSettings(); + await this.plugin.commands.updateCommand(); + }) + ); + } + } } diff --git a/src/ui/settingNextTabs.ts b/src/ui/settingNextTabs.ts index e0a8c8e..ed96ec1 100644 --- a/src/ui/settingNextTabs.ts +++ b/src/ui/settingNextTabs.ts @@ -2,24 +2,25 @@ import {App, PluginSettingTab, Setting} from "obsidian"; import ObsidianSyncNotionPlugin from "../main"; import {i18nConfig} from "../lang/I18n"; import {ObsidianSettingTab} from "./settingTabs"; +import {SettingModal} from "./settingModal"; export class SettingNextTabs extends PluginSettingTab { plugin: ObsidianSyncNotionPlugin; - private settingTab: ObsidianSettingTab; + settingModal: SettingModal; constructor(app: App, plugin: ObsidianSyncNotionPlugin, settingTab: ObsidianSettingTab) { super(app, plugin); this.plugin = plugin; - this.settingTab = settingTab; } display(): void { // notion next database settings + this.containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }); - this.settingTab.containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }) + const NextButtonEl = this.containerEl.createDiv(); - new Setting(this.settingTab.containerEl) + new Setting(NextButtonEl) .setName(i18nConfig.NotionNextButton) .setDesc(i18nConfig.NotionNextButtonDesc) .addToggle((toggle) => @@ -28,9 +29,9 @@ export class SettingNextTabs extends PluginSettingTab { .onChange(async (value) => { this.plugin.settings.NextButton = value; - this.settingTab.updateSettingEl(notionAPINextEl, value) + this.settingModal.updateSettingEl(notionAPINextEl, value) - this.settingTab.updateSettingEl(databaseIDNextEl, value) + this.settingModal.updateSettingEl(databaseIDNextEl, value) await this.plugin.saveSettings(); await this.plugin.commands.updateCommand(); @@ -38,11 +39,11 @@ export class SettingNextTabs extends PluginSettingTab { ); - const notionAPINextEl = this.settingTab.createStyleDiv('api-next', this.plugin.settings.NextButton) - this.settingTab.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext, 'notionAPINext') + const notionAPINextEl = this.settingModal.createStyleDiv('api-next', this.plugin.settings.NextButton) + this.settingModal.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext, 'notionAPINext') - const databaseIDNextEl = this.settingTab.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) - this.settingTab.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext, 'databaseIDNext') + const databaseIDNextEl = this.settingModal.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) + this.settingModal.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext, 'databaseIDNext') } } diff --git a/src/ui/settingTabs.ts b/src/ui/settingTabs.ts index ec5b71d..48bafe4 100644 --- a/src/ui/settingTabs.ts +++ b/src/ui/settingTabs.ts @@ -66,6 +66,7 @@ export class ObsidianSettingTab extends PluginSettingTab { this.createSettingEl(containerEl, i18nConfig.NotionUser, i18nConfig.NotionUserDesc, 'text', i18nConfig.NotionUserText, this.plugin.settings.notionUser, 'notionUser') + // add new button new Setting(containerEl) @@ -76,7 +77,7 @@ export class ObsidianSettingTab extends PluginSettingTab { .setTooltip("Add New Database") .setIcon("plus") .onClick(async () => { - let modal = new SettingModal(this.plugin); + let modal = new SettingModal(this.app, this.plugin, this); modal.onClose = () => { // if (modal.saved) { @@ -97,141 +98,18 @@ export class ObsidianSettingTab extends PluginSettingTab { - // notion next database settings + // // notion next database settings + // + // const NextTabs = new SettingNextTabs(this.app, this.plugin, this); + // + // NextTabs.display(); + // + // + // // General Database Settings + // const GeneralTabs = new SettingGeneralTabs(this.app, this.plugin, this); + // + // GeneralTabs.display(); - const NextTabs = new SettingNextTabs(this.app, this.plugin, this); - - NextTabs.display(); - - // containerEl.createEl('h2', { text: i18nConfig.NotionNextSettingHeader }) - // - // new Setting(containerEl) - // .setName(i18nConfig.NotionNextButton) - // .setDesc(i18nConfig.NotionNextButtonDesc) - // .addToggle((toggle) => - // toggle - // .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(); - // }) - // ); - // - // - // const notionAPINextEl = this.createStyleDiv('api-next', this.plugin.settings.NextButton) - // this.createSettingEl(notionAPINextEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPINext, 'notionAPINext') - // - // const databaseIDNextEl = this.createStyleDiv('databaseID-next', this.plugin.settings.NextButton) - // this.createSettingEl(databaseIDNextEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDNext, 'databaseIDNext') - - - // General Database Settings - const GeneralTabs = new SettingGeneralTabs(this.app, this.plugin, this); - - GeneralTabs.display(); - - - // containerEl.createEl('h2', { text: i18nConfig.NotionGeneralSettingHeader }); - // - // // new Setting(containerEl) - // // .setName(i18nConfig.NotYetFinish) - // new Setting(containerEl) - // .setName(i18nConfig.NotionGeneralButton) - // .setDesc(i18nConfig.NotionGeneralButtonDesc) - // .addToggle((toggle) => - // toggle - // .setValue(this.plugin.settings.GeneralButton) - // .onChange(async (value) => { - // this.plugin.settings.GeneralButton = value; - // - // this.updateSettingEl(tagButtonEl, value) - // this.updateSettingEl(CustomTitleEl, value) - // // name should follow the result of the title button - // if (value) { - // this.updateSettingEl(CustomNameEl, this.plugin.settings.CustomTitleButton) - // this.updateSettingEl(CustomValuesEl, this.plugin.settings.CustomTitleButton) - // } else { - // this.updateSettingEl(CustomNameEl, value) - // this.updateSettingEl(CustomValuesEl, value) - // } - // - // this.updateSettingEl(notionAPIGeneralEl, value) - // this.updateSettingEl(databaseIDGeneralEl, value) - // - // - // await this.plugin.saveSettings(); - // await this.plugin.commands.updateCommand(); - // - // }) - // ); - // - // // add the tagButton to control whether to add tags to the general database - // const tagButtonEl = this.createStyleDiv('tag-button', (this.plugin.settings.GeneralButton && this.plugin.settings.CustomTitleButton)); - // this.createSettingEl(tagButtonEl, i18nConfig.NotionTagButton, i18nConfig.NotionTagButtonDesc, 'toggle', i18nConfig.NotionCustomTitleText, this.plugin.settings.tagButton, 'tagButton') - // - // // Custom Title Button - // 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; - // - // this.updateSettingEl(CustomNameEl, value) - // - // this.updateSettingEl(CustomValuesEl, value) - // - // await this.plugin.saveSettings(); - // await this.plugin.commands.updateCommand(); - // }) - // ); - // - // // Custom Title Name - // const CustomNameEl = this.createStyleDiv('custom-name', (this.plugin.settings.CustomTitleButton && this.plugin.settings.GeneralButton)); - // this.createSettingEl(CustomNameEl, i18nConfig.NotionCustomTitleName, i18nConfig.NotionCustomTitleNameDesc, 'text', i18nConfig.NotionCustomTitleText, this.plugin.settings.CustomTitleName, 'CustomTitleName') - // - // // Custom database properties - // const CustomValuesEl = this.createStyleDiv('custom-values', (this.plugin.settings.CustomTitleButton && this.plugin.settings.GeneralButton)); - // new Setting(CustomValuesEl) - // .setName(i18nConfig.NotionCustomValues) - // .setDesc(i18nConfig.NotionCustomValuesDesc) - // .addTextArea((text) => - // text - // .setPlaceholder(i18nConfig.NotionCustomValuesText) - // .setValue(this.plugin.settings.CustomValues) - // .onChange(async (value) => { - // this.plugin.settings.CustomValues = value; - // await this.plugin.saveSettings(); - // await this.plugin.commands.updateCommand(); - // }) - // ); - // // new Setting(containerEl) - // // .setName("Convert tags(optional)") - // // .setDesc("Transfer the Obsidian tags to the Notion table. It requires the column with the name 'Tags'") - // // .addToggle((toggle) => - // // toggle - // // .setValue(this.plugin.settings.allowTags) - // // .onChange(async (value) => { - // // this.plugin.settings.allowTags = value; - // // await this.plugin.saveSettings(); - // // }) - // // ); - // - // const notionAPIGeneralEl = this.createStyleDiv('api-general', this.plugin.settings.GeneralButton); - // this.createSettingEl(notionAPIGeneralEl, i18nConfig.NotionAPI, i18nConfig.NotionAPIDesc, 'password', i18nConfig.NotionAPIText, this.plugin.settings.notionAPIGeneral, 'notionAPIGeneral') - // - // - // const databaseIDGeneralEl = this.createStyleDiv('databaseID-general', this.plugin.settings.GeneralButton); - // this.createSettingEl(databaseIDGeneralEl, i18nConfig.DatabaseID, i18nConfig.NotionAPIDesc, 'password', i18nConfig.DatabaseIDText, this.plugin.settings.databaseIDGeneral, 'databaseIDGeneral') // Custom Database Settings