Link to other files and update readme

mProjectsCode · mProjectsCode · commit e96db5abeda9 · 2022-06-08T20:03:45.000+02:00
diff --git a/README.md b/README.md
@@ -1,73 +1,37 @@
-# Obsidian Sample Plugin
+# Obsidian Meta Bind Plugin
+This plugin can create input fields inside your notes and bind them to metadata fields.
 
-This is a sample plugin for Obsidian (https://obsidian.md).
+### How to use
+To create an input field you have to write an inline code block starting with `INPUT`. Then in square brackets the type of input field and what metadata field to bind to.
 
-This project uses Typescript to provide type checking and documentation.
-The repo depends on the latest plugin API (obsidian.d.ts) in Typescript Definition format, which contains TSDoc comments describing what it does.
+Examples:
+- `INPUT[toggle]` will create an unbound toggle
+- `INPUT[slider:rating]` will create a slider bound to the metadata field `rating` of this note
+- `INPUT[text:taks#completedOn]` will create a text input bound to the metadata field `completedOn` of the note with the name `task`
 
-**Note:** The Obsidian API is still in early alpha and is subject to change at any time!
+Be aware that the plugin might do unwanted things when you have multiple files with the same name in your vault.
 
-This sample plugin demonstrates some of the basic functionality the plugin API can do.
-- Changes the default font color to red using `styles.css`.
-- Adds a ribbon icon, which shows a Notice when clicked.
-- Adds a command "Open Sample Modal" which opens a Modal.
-- Adds a plugin setting tab to the settings page.
-- Registers a global click event and output 'click' to the console.
-- Registers a global interval which logs 'setInterval' to the console.
+### How to install
+Currently, there is no release. When there is one, follow the steps below.
 
-## First time developing plugins?
+You must manually download the zip archive from the latest release here on GitHub.  
+After downloading, extract the archive into the `.obsidian/plugins` folder in your vault.
 
-Quick starting guide for new plugin devs:
+The folder structure should look like this:
+```  
+[path to your vault]  
+|_ .obsidian  
+   |_ plugins  
+      |_ obsidian-meta-bind-plugin  
+         |_ main.js  
+         |_ manifest.json  
+         |_ styles.css  
+```
 
-- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with.
-- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
-- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
-- Install NodeJS, then run `npm i` in the command line under your repo folder.
-- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
-- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
-- Reload Obsidian to load the new version of your plugin.
-- Enable plugin in settings window.
-- For updates to the Obsidian API run `npm update` in the command line under your repo folder.
+### Problems, unexpected behavior or improvement suggestions?
+You are more than welcome to open an issue on [GitHub](https://github.com/mProjectsCode/obsidian-meta-bind-plugin/issues).
 
-## Releasing new releases
+### Contributions
+Thank you for wanting to contribute to this project.
 
-- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
-- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
-- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
-- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release.
-- Publish the release.
-
-> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`.
-> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json`
-
-## Adding your plugin to the community plugin list
-
-- Check https://github.com/obsidianmd/obsidian-releases/blob/master/plugin-review.md
-- Publish an initial version.
-- Make sure you have a `README.md` file in the root of your repo.
-- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.
-
-## How to use
-
-- Clone this repo.
-- `npm i` or `yarn` to install dependencies
-- `npm run dev` to start compilation in watch mode.
-
-## Manually installing the plugin
-
-- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.
-
-## Improve code quality with eslint (optional)
-- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. 
-- To use eslint with this project, make sure to install eslint from terminal:
-  - `npm install -g eslint`
-- To use eslint to analyze this project use this command:
-  - `eslint main.ts`
-  - eslint will then create a report with suggestions for code improvement by file and line number.
-- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder:
-  - `eslint .\src\`
-
-
-## API Documentation
-
-See https://github.com/obsidianmd/obsidian-api
+Contributions are always welcome. If you have an idea, feel free to open a feature request under the issue tab or even create a pull request.
diff --git a/src/InputField.ts b/src/InputField.ts
@@ -1,54 +1,94 @@
-import {MarkdownRenderChild, SliderComponent, TextComponent, ToggleComponent} from 'obsidian';
+import {MarkdownRenderChild, SliderComponent, TextComponent, TFile, ToggleComponent} from 'obsidian';
 import MetaBindPlugin from './main';
 
 export class InputField extends MarkdownRenderChild {
-	text: string;
-	fieldName: string;
-	type: string;
 	plugin: MetaBindPlugin;
 	metaData: any;
-	filePath: string;
+	error: string;
 
-	constructor(containerEl: HTMLElement, text: string, plugin: MetaBindPlugin, metaData: any, filePath: string) {
+	declaration: string;
+	inputFieldType: string;
+	isBound: boolean;
+	boundMetadataField: string;
+	file: TFile;
+
+	constructor(containerEl: HTMLElement, fullDeclaration: string, plugin: MetaBindPlugin, filePath: string) {
 		super(containerEl);
 
+		//console.log(this, 2)
+
+		this.error = '';
+
 		const regExp = new RegExp(/\[.*?\]/);
-		let a = regExp.exec(text)[0];
-		a = a.replace('[', '').replace(']', '');
+		let declaration = regExp.exec(fullDeclaration)[0];
+		declaration = declaration.replace('[', '').replace(']', '');
 
-		let aParts = a.split(':');
+		let declarationParts: string[] = declaration.split(':');
+		let boundTo: string = declarationParts[1] ?? '';
+		this.isBound = !!boundTo;
+		if (this.isBound) {
+			let boundToParts = boundTo.split('#');
+			if (boundToParts.length === 1) { // same file
+				this.boundMetadataField = boundTo;
+				this.file = plugin.getFileByName(filePath);
+			} else if (boundToParts.length === 2) {
+				this.boundMetadataField = boundToParts[1];
+				this.file = plugin.getFileByName(boundToParts[0]);
+			} else {
+				this.error = 'invalid binding';
+			}
 
-		this.text = text;
-		this.type = aParts[0].toLowerCase();
-		this.fieldName = aParts[1] ?? '';
+			this.metaData = plugin.getMetaDataForFile(this.file);
+		}
+
+		this.declaration = fullDeclaration;
+		this.inputFieldType = declarationParts[0].toLowerCase();
 		this.plugin = plugin;
-		this.metaData = metaData;
-		this.filePath = filePath;
+
+		// console.log(this, 3)
+	}
+
+	async updateMetaData(value: any) {
+		if (this.isBound) {
+			await this.plugin.updateMetaData(this.boundMetadataField, value, this.file);
+		}
+	}
+
+	getInitialValue() {
+		if (this.isBound) {
+			return this.metaData[this.boundMetadataField];
+		}
 	}
 
 	onload() {
-		console.log(this);
+		//console.log(this, 1)
 
 		const container = this.containerEl.createDiv();
 		container.addClass('meta-bind-plugin-input-wrapper');
 
-		if (this.type === 'toggle') {
+		if (this.error) {
+			container.innerText = ` \`Error ${this.error}\``;
+			this.containerEl.replaceWith(container);
+			return;
+		}
+
+		if (this.inputFieldType === 'toggle') {
 			const newEl = new ToggleComponent(container);
-			newEl.setValue(this.metaData[this.fieldName]);
+			newEl.setValue(this.getInitialValue());
 			newEl.onChange(async (value) => {
-				await this.plugin.updateMetaData(this.fieldName, value, this.filePath);
+				await this.updateMetaData(value);
 			});
-		} else if (this.type === 'slider') {
+		} else if (this.inputFieldType === 'slider') {
 			const newEl = new SliderComponent(container);
-			newEl.setValue(this.metaData[this.fieldName]);
+			newEl.setValue(this.getInitialValue());
 			newEl.onChange(async (value) => {
-				await this.plugin.updateMetaData(this.fieldName, value, this.filePath);
+				await this.updateMetaData(value);
 			});
-		} else if (this.type === 'text') {
+		} else if (this.inputFieldType === 'text') {
 			const newEl = new TextComponent(container);
-			newEl.setValue(this.metaData[this.fieldName]);
+			newEl.setValue(this.getInitialValue());
 			newEl.onChange(async (value) => {
-				await this.plugin.updateMetaData(this.fieldName, value, this.filePath);
+				await this.updateMetaData(value);
 			});
 		}
 
diff --git a/src/Utils.ts b/src/Utils.ts
@@ -0,0 +1,16 @@
+export function getFileName(path: string) {
+	return path.split('/').at(-1);
+}
+
+export function removeFileEnding(fileName: string) {
+	const fileNameParts = fileName.split('.');
+	if (fileNameParts.length === 1) {
+		return fileName;
+	} else {
+		let newFileName = fileNameParts[0];
+		for (let i = 1; i < fileNameParts.length - 1; i++) {
+			newFileName += '.' + fileNameParts[i];
+		}
+		return newFileName;
+	}
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,7 @@
-import {FrontMatterCache, Plugin, stringifyYaml, TFile} from 'obsidian';
+import {Notice, Plugin, stringifyYaml, TFile} from 'obsidian';
 import {DEFAULT_SETTINGS, MetaBindPluginSettings, MetaBindSettingTab} from './settings/Settings';
 import {InputField} from './InputField';
+import {getFileName, removeFileEnding} from './Utils';
 
 export default class MetaBindPlugin extends Plugin {
 	settings: MetaBindPluginSettings;
@@ -12,8 +13,6 @@ export default class MetaBindPlugin extends Plugin {
 		const ribbonIconEl = this.addRibbonIcon('dice', 'Sample Plugin', (evt: MouseEvent) => {
 
 		});
-		// Perform additional things with the ribbon
-		ribbonIconEl.addClass('my-plugin-ribbon-class');
 
 
 		this.registerMarkdownPostProcessor((element, context) => {
@@ -22,13 +21,16 @@ export default class MetaBindPlugin extends Plugin {
 				const codeblock = codeblocks.item(index);
 				const text = codeblock.innerText;
 				const isEmoji = text.startsWith('INPUT[') && text.endsWith(']');
-				console.log(context.sourcePath);
+				// console.log(context.sourcePath);
 				if (isEmoji) {
-					context.addChild(new InputField(codeblock, text, this, context.frontmatter, context.sourcePath));
+					context.addChild(new InputField(codeblock, text, this, context.sourcePath));
 				}
 			}
 		});
 
+		this.registerEvent(this.app.vault.on('modify', () => {
+			// console.log('file modified')
+		}));
 
 		this.addSettingTab(new MetaBindSettingTab(this.app, this));
 	}
@@ -37,20 +39,58 @@ export default class MetaBindPlugin extends Plugin {
 
 	}
 
-	async updateMetaData(key: string, value: any, filePath: string) {
-		const file = await this.app.vault.getAbstractFileByPath(filePath) as TFile;
+	async updateMetaData(key: string, value: any, file: TFile) {
+		if (!file) {
+			console.log('file not found');
+			return;
+		}
+
 		let fileContent: string = await this.app.vault.read(file);
 		const regExp = new RegExp('^(---)\\n[\\s\\S]*\\n---');
 		fileContent = fileContent.replace(regExp, '');
 
-		let metadata: FrontMatterCache = this.app.metadataCache.getFileCache(file).frontmatter;
-		delete metadata.position;
+		let metadata: any = this.getMetaDataForFile(file);
+		if (!metadata) {
+			return;
+		}
+
 		metadata[key] = value;
 
 		fileContent = `---\n${stringifyYaml(metadata)}---` + fileContent;
 		await this.app.vault.modify(file, fileContent);
 	}
 
+	getFileByName(name: string): TFile {
+		// console.log(getFileName(removeFileEnding(name)))
+		const files = this.app.vault.getFiles();
+		for (const file of files) {
+			// console.log(getFileName(removeFileEnding(file.name)));
+			if (getFileName(removeFileEnding(file.name)) === getFileName(removeFileEnding(name))) {
+				return file;
+			}
+		}
+
+		return null;
+	}
+
+	getMetaDataForFile(file: TFile): any {
+		let metadata: any;
+		try {
+			metadata = this.app.metadataCache.getFileCache(file).frontmatter;
+		} catch (e) {
+			new Notice('Waring: ' + e.toString());
+			return;
+		}
+
+		if (metadata) {
+			delete metadata.position;
+		} else {
+			metadata = {};
+		}
+
+		return metadata;
+	}
+
 	async loadSettings() {
 		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
 	}
