mirror of
https://github.com/jxpeng98/obsidian-to-NotionNext
synced 2026-07-29 08:08:34 +08:00
basic display of modal
This commit is contained in:
Jiaxin Peng
@@ -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",
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
export const ja = {
|
||||
databaseFormat: "データベース形式",
|
||||
databaseFormatDesc: "同期したいデータベース形式を選択してください",
|
||||
databaseNext: "NotionNext",
|
||||
databaseGeneral: "一般的なNotion",
|
||||
databaseCustom: "カスタム",
|
||||
ribbonIcon: "NotionNextで共有",
|
||||
GeneralSetting: "一般設定",
|
||||
CommandID: "share-to-notionnext",
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
export const zh = {
|
||||
databaseFormat: "数据库格式",
|
||||
databaseFormatDesc: "选择你想要同步的数据库格式Next 或者 普通",
|
||||
databaseNext: "NotionNext",
|
||||
databaseGeneral: "普通",
|
||||
databaseCustom: "自定义",
|
||||
ribbonIcon: "分享到 NotionNext",
|
||||
GeneralSetting: "通用设置",
|
||||
CommandID: "share-to-notionnext",
|
||||
|
||||
@@ -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();
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user