Example View working

main.ts

@@ -1,112 +1,52 @@
-import { App, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
+import { Plugin } from "obsidian";
+import { ExampleSettingsTab } from "./settings";
+import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
 
-interface MyPluginSettings {
+interface ExamplePluginSettings {
-	mySetting: string;
+    dateFormat: string
 }
-
+const DEFAULT_SETTINGS: Partial<ExamplePluginSettings> = {
-const DEFAULT_SETTINGS: MyPluginSettings = {
+    dateFormat: "YYYY-MM-DD"
-	mySetting: 'default'
 }
+export default class ExamplePlugin extends Plugin {
+    settings: ExamplePluginSettings;
+    view: ExampleView;
 
-export default class MyPlugin extends Plugin {
+    async onload() {
-	settings: MyPluginSettings;
+        await this.loadSettings();
+        this.addSettingTab(new ExampleSettingsTab(this.app, this));
+        this.registerView(
+            VIEW_TYPE_EXAMPLE,
+            (leaf) => (this.view = new ExampleView(leaf))
+          );
+        this.addRibbonIcon("dice", "Activate view", () => {  //activate view
+            this.activateView();
+        });
+    }
+    async loadSettings() {
+        this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData())
+    }
+    async saveSettings() {
+        await this.saveData(this.settings);
+    }
+    async onunload() {
+        await this.view.onClose();
 
-	async onload() {
+        this.app.workspace
-		console.log('loading plugin');
+            .getLeavesOfType(VIEW_TYPE_EXAMPLE)
+            .forEach((leaf) => leaf.detach());
+    }
+    async activateView() {
+        this.app.workspace.detachLeavesOfType(VIEW_TYPE_EXAMPLE);
     
-		await this.loadSettings();
+        await this.app.workspace.getRightLeaf(false).setViewState({
+          type: VIEW_TYPE_EXAMPLE,
+          active: true,
+        });
     
-		this.addRibbonIcon('dice', 'Sample Plugin', () => {
+        this.app.workspace.revealLeaf(
-			new Notice('This is a notice!');
+          this.app.workspace.getLeavesOfType(VIEW_TYPE_EXAMPLE)[0]
-		});
+        );
+      }
     
-		this.addStatusBarItem().setText('Status Bar Text');
-
-		this.addCommand({
-			id: 'open-sample-modal',
-			name: 'Open Sample Modal',
-			// callback: () => {
-			// 	console.log('Simple Callback');
-			// },
-			checkCallback: (checking: boolean) => {
-				let leaf = this.app.workspace.activeLeaf;
-				if (leaf) {
-					if (!checking) {
-						new SampleModal(this.app).open();
-					}
-					return true;
-				}
-				return false;
-			}
-		});
-
-		this.addSettingTab(new SampleSettingTab(this.app, this));
-
-		this.registerCodeMirror((cm: CodeMirror.Editor) => {
-			console.log('codemirror', cm);
-		});
-
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
-
-		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
-	}
-
-	onunload() {
-		console.log('unloading plugin');
-	}
-
-	async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
-
-	async saveSettings() {
-		await this.saveData(this.settings);
-	}
-}
-
-class SampleModal extends Modal {
-	constructor(app: App) {
-		super(app);
-	}
-
-	onOpen() {
-		let {contentEl} = this;
-		contentEl.setText('Woah!');
-	}
-
-	onClose() {
-		let {contentEl} = this;
-		contentEl.empty();
-	}
-}
-
-class SampleSettingTab extends PluginSettingTab {
-	plugin: MyPlugin;
-
-	constructor(app: App, plugin: MyPlugin) {
-		super(app, plugin);
-		this.plugin = plugin;
-	}
-
-	display(): void {
-		let {containerEl} = this;
-
-		containerEl.empty();
-
-		containerEl.createEl('h2', {text: 'Settings for my awesome plugin.'});
-
-		new Setting(containerEl)
-			.setName('Setting #1')
-			.setDesc('It\'s a secret')
-			.addText(text => text
-				.setPlaceholder('Enter your secret')
-				.setValue('')
-				.onChange(async (value) => {
-					console.log('Secret: ' + value);
-					this.plugin.settings.mySetting = value;
-					await this.plugin.saveSettings();
-				}));
-	}
 }

manifest.json

@@ -1,10 +1,10 @@
 {
-	"id": "obsidian-sample-plugin",
+	"id": "test-plugin",
-	"name": "Sample Plugin",
+	"name": "Test Plugin",
-	"version": "1.0.1",
+	"version": "0.0.1",
 	"minAppVersion": "0.9.12",
 	"description": "This is a sample plugin for Obsidian. This plugin demonstrates some of the capabilities of the Obsidian API.",
-	"author": "Obsidian",
+	"author": "Leoh",
-	"authorUrl": "https://obsidian.md/about",
+	"authorUrl": "",
 	"isDesktopOnly": false
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "obsidian-sample-plugin",
+  "name": "test-plugin",
   "version": "0.12.0",
   "description": "This is a sample plugin for Obsidian (https://obsidian.md)",
   "main": "main.js",

settings.ts

@@ -0,0 +1,30 @@
+import ExamplePlugin from "main";
+import { App, PluginSettingTab, Setting } from "obsidian";
+
+export class ExampleSettingsTab extends PluginSettingTab {
+    plugin: ExamplePlugin;
+
+    constructor(app: App, plugin: ExamplePlugin) {
+        super(app, plugin)
+        this.plugin = plugin
+    }
+
+    display(): void {
+        let { containerEl } = this;
+        containerEl.empty();
+        
+        new Setting(containerEl)
+            .setName("Date format")
+            .setDesc("Default date format")
+            .addText((text) => 
+            
+                text
+                    .setPlaceholder("MMMM dd, yyyy")
+                    .setValue(this.plugin.settings.dateFormat)
+                    .onChange(async (value) => {
+                        this.plugin.settings.dateFormat = value;
+                        await this.plugin.saveSettings();
+                    })
+            );
+    }
+}

styles.css

@@ -1,4 +1,2 @@
-/* Sets all the text color to red! */
+/* Empty. change later */
-body {
+
-    color: red;
-}

view.ts

@@ -0,0 +1,27 @@
+import { ItemView,WorkspaceLeaf } from "obsidian";
+
+export const VIEW_TYPE_EXAMPLE = "example-view"
+
+export class ExampleView extends ItemView {
+    constructor(leaf: WorkspaceLeaf) {
+        super(leaf)
+    }
+
+    getViewType() {
+        return VIEW_TYPE_EXAMPLE
+    }
+
+    getDisplayText() {
+        return "Example View"
+    }
+
+    async onOpen() {
+        const container = this.containerEl.children[1];
+        container.empty()
+        container.createEl("h4", {text: "Example View"});
+
+    }
+    async onClose(){
+        
+    }
+}