From 2af50b85cfebfc359fcc9500623507178545e50e Mon Sep 17 00:00:00 2001 From: Jiean Yang Date: Tue, 27 Aug 2024 19:56:23 +0200 Subject: [PATCH] Create src/page/SampleSettingTab.ts --- main.ts | 196 ++++++++++++++++------------------- src/page/SampleSettingTab.ts | 30 ++++++ 2 files changed, 118 insertions(+), 108 deletions(-) create mode 100644 src/page/SampleSettingTab.ts diff --git a/main.ts b/main.ts index 2d07212..09a9b05 100644 --- a/main.ts +++ b/main.ts @@ -1,134 +1,114 @@ -import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian'; +import { App, Editor, MarkdownView, Modal, Notice, Plugin } from "obsidian"; +import { SampleSettingTab } from "./src/page/SampleSettingTab"; // Remember to rename these classes and interfaces! interface MyPluginSettings { - mySetting: string; + mySetting: string; } const DEFAULT_SETTINGS: MyPluginSettings = { - mySetting: 'default' -} + mySetting: "default", +}; export default class MyPlugin extends Plugin { - settings: MyPluginSettings; + settings: MyPluginSettings; - async onload() { - await this.loadSettings(); + async onload() { + await this.loadSettings(); - // This creates an icon in the left ribbon. - const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => { - // Called when the user clicks the icon. - new Notice('This is a notice!'); - }); - // Perform additional things with the ribbon - ribbonIconEl.addClass('my-plugin-ribbon-class'); + // This creates an icon in the left ribbon. + const ribbonIconEl = this.addRibbonIcon( + "dice", + "Sample Plugin", + (evt: MouseEvent) => { + // Called when the user clicks the icon. + new Notice("This is a notice!"); + }, + ); + // Perform additional things with the ribbon + ribbonIconEl.addClass("my-plugin-ribbon-class"); - // This adds a status bar item to the bottom of the app. Does not work on mobile apps. - const statusBarItemEl = this.addStatusBarItem(); - statusBarItemEl.setText('Status Bar Text'); + // This adds a status bar item to the bottom of the app. Does not work on mobile apps. + const statusBarItemEl = this.addStatusBarItem(); + statusBarItemEl.setText("Status Bar Text"); - // This adds a simple command that can be triggered anywhere - this.addCommand({ - id: 'open-sample-modal-simple', - name: 'Open sample modal (simple)', - callback: () => { - new SampleModal(this.app).open(); - } - }); - // This adds an editor command that can perform some operation on the current editor instance - this.addCommand({ - id: 'sample-editor-command', - name: 'Sample editor command', - editorCallback: (editor: Editor, view: MarkdownView) => { - console.log(editor.getSelection()); - editor.replaceSelection('Sample Editor Command'); - } - }); - // This adds a complex command that can check whether the current state of the app allows execution of the command - this.addCommand({ - id: 'open-sample-modal-complex', - name: 'Open sample modal (complex)', - checkCallback: (checking: boolean) => { - // Conditions to check - const markdownView = this.app.workspace.getActiveViewOfType(MarkdownView); - if (markdownView) { - // If checking is true, we're simply "checking" if the command can be run. - // If checking is false, then we want to actually perform the operation. - if (!checking) { - new SampleModal(this.app).open(); - } + // This adds a simple command that can be triggered anywhere + this.addCommand({ + id: "open-sample-modal-simple", + name: "Open sample modal (simple)", + callback: () => { + new SampleModal(this.app).open(); + }, + }); + // This adds an editor command that can perform some operation on the current editor instance + this.addCommand({ + id: "sample-editor-command", + name: "Sample editor command", + editorCallback: (editor: Editor, view: MarkdownView) => { + console.log(editor.getSelection()); + editor.replaceSelection("Sample Editor Command"); + }, + }); + // This adds a complex command that can check whether the current state of the app allows execution of the command + this.addCommand({ + id: "open-sample-modal-complex", + name: "Open sample modal (complex)", + checkCallback: (checking: boolean) => { + // Conditions to check + const markdownView = + this.app.workspace.getActiveViewOfType(MarkdownView); + if (markdownView) { + // If checking is true, we're simply "checking" if the command can be run. + // If checking is false, then we want to actually perform the operation. + if (!checking) { + new SampleModal(this.app).open(); + } - // This command will only show up in Command Palette when the check function returns true - return true; - } - } - }); + // This command will only show up in Command Palette when the check function returns true + return true; + } + }, + }); - // This adds a settings tab so the user can configure various aspects of the plugin - this.addSettingTab(new SampleSettingTab(this.app, this)); + // This adds a settings tab so the user can configure various aspects of the plugin + this.addSettingTab(new SampleSettingTab(this.app, this)); - // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin) - // Using this function will automatically remove the event listener when this plugin is disabled. - this.registerDomEvent(document, 'click', (evt: MouseEvent) => { - console.log('click', evt); - }); + // If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin) + // Using this function will automatically remove the event listener when this plugin is disabled. + this.registerDomEvent(document, "click", (evt: MouseEvent) => { + console.log("click", evt); + }); - // When registering intervals, this function will automatically clear the interval when the plugin is disabled. - this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000)); - } + // When registering intervals, this function will automatically clear the interval when the plugin is disabled. + this.registerInterval( + window.setInterval(() => console.log("setInterval"), 5 * 60 * 1000), + ); + } - onunload() { + onunload() {} - } + async loadSettings() { + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); + } - async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - } - - async saveSettings() { - await this.saveData(this.settings); - } + async saveSettings() { + await this.saveData(this.settings); + } } class SampleModal extends Modal { - constructor(app: App) { - super(app); - } + constructor(app: App) { + super(app); + } - onOpen() { - const {contentEl} = this; - contentEl.setText('Woah!'); - } + onOpen() { + const { contentEl } = this; + contentEl.setText("Woah!"); + } - onClose() { - const {contentEl} = this; - contentEl.empty(); - } -} - -class SampleSettingTab extends PluginSettingTab { - plugin: MyPlugin; - - constructor(app: App, plugin: MyPlugin) { - super(app, plugin); - this.plugin = plugin; - } - - display(): void { - const {containerEl} = this; - - containerEl.empty(); - - new Setting(containerEl) - .setName('Setting #1') - .setDesc('It\'s a secret') - .addText(text => text - .setPlaceholder('Enter your secret') - .setValue(this.plugin.settings.mySetting) - .onChange(async (value) => { - this.plugin.settings.mySetting = value; - await this.plugin.saveSettings(); - })); - } + onClose() { + const { contentEl } = this; + contentEl.empty(); + } } diff --git a/src/page/SampleSettingTab.ts b/src/page/SampleSettingTab.ts new file mode 100644 index 0000000..ad5a156 --- /dev/null +++ b/src/page/SampleSettingTab.ts @@ -0,0 +1,30 @@ +import { PluginSettingTab, App, Setting } from "obsidian"; +import MyPlugin from "./main"; + +export class SampleSettingTab extends PluginSettingTab { + plugin: MyPlugin; + + constructor(app: App, plugin: MyPlugin) { + super(app, plugin); + this.plugin = plugin; + } + + display(): void { + const { containerEl } = this; + + containerEl.empty(); + + new Setting(containerEl) + .setName("Setting #1") + .setDesc("It's a secret") + .addText((text) => + text + .setPlaceholder("Enter your secret") + .setValue(this.plugin.settings.mySetting) + .onChange(async (value) => { + this.plugin.settings.mySetting = value; + await this.plugin.saveSettings(); + }), + ); + } +}