[feature] support local image file: relative to Obsidian vault or abs…

…olute path.
Benature · Mar 14, 2024 · c164483 · c164483
1 parent 0ff0d43
commit c164483
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.0.10
+
+- [feature] support local image file: relative to Obsidian vault or absolute path.
+
 ## 0.0.9
 - [feature] custom css: `top`, `left`, `opacity`
 

diff --git a/main.ts b/main.ts
@@ -24,11 +24,15 @@ const DEFAULT_SETTINGS: MetadataIconSettings = {
 
 export default class MetadataIcon extends Plugin {
 	settings: MetadataIconSettings;
+	resourceBase: string;
 
 	async onload() {
+		let resourcePath = this.app.vault.adapter.getResourcePath("");
+		this.resourceBase = resourcePath.match(/(app:\/\/\w*?)\//)?.[1] as string;
+
 		await this.loadSettings();
 		this.addSettingTab(new MetadataHiderSettingTab(this.app, this));
-		await genSnippetCSS(this);
+		await this.genSnippetCSS(this);
 	}
 
 	onunload() { }
@@ -40,68 +44,82 @@ export default class MetadataIcon extends Plugin {
 	async saveSettings() {
 		await this.saveData(this.settings);
 	}
-}
 
-function genEntryCSS(s: IconAttrSetting, c: cssAfterConfiguration): string {
-	const selector = `data-property-key="${s.entry}"`;
-
-	let body: string[] = [
-		`.metadata-property[${selector}] .metadata-property-key::after {`,
-		`	content: "";`,
-		`	background-image: url("${s.image}");`,
-		`	background-size: 20px;`,
-		`	width: 20px;`,
-		`	height: 20px;`,
-		`	position: absolute;`,
-		`	left: ${c.left};`,
-		`	top: ${c.top};`,
-		`	z-index: -100;`,
-		`	opacity: ${c.opacity};`,
-		`	background-repeat: no-repeat;`,
-		`}`,
-		`.metadata-property[${selector}] svg {`,
-		`	visibility: hidden;`,
-		`}`,
-		``,
-	]
-	return body.join('\n');
-}
+	getResourcePath(path: string): string {
+		if (/https?:\/\//.test(path)) {
+			return path;
+		}
+		const adapter = this.app.vault.adapter;
+
+		if (path.startsWith("/")) {
+			return this.resourceBase + path;
+		} else {
+			return adapter.getResourcePath(path);
+		}
+	}
+
+	genEntryCSS(s: IconAttrSetting, c: cssAfterConfiguration): string {
+		const selector = `data-property-key="${s.entry}"`;
+		const url = this.getResourcePath(s.image);
+		let body: string[] = [
+			`.metadata-property[${selector}] .metadata-property-key::after {`,
+			`	content: "";`,
+			`	background-image: url("${url}");`,
+			`	background-size: 20px;`,
+			`	width: 20px;`,
+			`	height: 20px;`,
+			`	position: absolute;`,
+			`	left: ${c.left};`,
+			`	top: ${c.top};`,
+			`	z-index: -100;`,
+			`	opacity: ${c.opacity};`,
+			`	background-repeat: no-repeat;`,
+			`}`,
+			`.metadata-property[${selector}] svg {`,
+			`	visibility: hidden;`,
+			`}`,
+			``,
+		]
+		return body.join('\n');
+	}
 
-async function genSnippetCSS(plugin: MetadataIcon) {
-	const content: string[] = [
-		"/* * WARNING: This file will be overwritten by plugin `Metadata Icon`.",
-		"   * DO NOT EDIT THIS FILE DIRECTLY!!!",
-		"   * Do not edit this file directly!!!",
-		"*/",
-		"",
-		".setting-item-description:has(.metadata-icon-preview) {",
-		"	display: flex;",
-		"	align-items: center;",
-		"	justify-content: space-around;",
-		"}",
-		"",
-	];
-
-	plugin.settings.IconAttrList.forEach((iconSetting, index) => {
-		content.push(genEntryCSS(iconSetting, plugin.settings.cssAfterConfig));
-	})
-
-
-	const vault = plugin.app.vault;
-	const ob_config_path = vault.configDir;
-	const snippets_path = ob_config_path + "/snippets";
-	const css_filename = "metadata-icon-auto-gen"
-	const path = `${snippets_path}/${css_filename}.css`;
-	if (!(await vault.adapter.exists(snippets_path))) { await vault.adapter.mkdir(snippets_path); }
-	if (await vault.adapter.exists(path)) { await vault.adapter.remove(path) }
-	await plugin.app.vault.create(path, content.join('\n'));
-	// Activate snippet
-	// @ts-ignore
-	const customCss = plugin.app.customCss;
-	customCss.enabledSnippets.add(css_filename);
-	customCss.requestLoadSnippets();
+	async genSnippetCSS(plugin: MetadataIcon) {
+		const content: string[] = [
+			"/* * WARNING: This file will be overwritten by plugin `Metadata Icon`.",
+			"   * DO NOT EDIT THIS FILE DIRECTLY!!!",
+			"   * Do not edit this file directly!!!",
+			"*/",
+			"",
+			".setting-item-description:has(.metadata-icon-preview) {",
+			"	display: flex;",
+			"	align-items: center;",
+			"	justify-content: space-around;",
+			"}",
+			"",
+		];
+
+		plugin.settings.IconAttrList.forEach((iconSetting, index) => {
+			content.push(this.genEntryCSS(iconSetting, plugin.settings.cssAfterConfig));
+		})
+
+
+		const vault = plugin.app.vault;
+		const ob_config_path = vault.configDir;
+		const snippets_path = ob_config_path + "/snippets";
+		const css_filename = "metadata-icon-auto-gen"
+		const path = `${snippets_path}/${css_filename}.css`;
+		if (!(await vault.adapter.exists(snippets_path))) { await vault.adapter.mkdir(snippets_path); }
+		if (await vault.adapter.exists(path)) { await vault.adapter.remove(path) }
+		await plugin.app.vault.create(path, content.join('\n'));
+		// Activate snippet
+		// @ts-ignore
+		const customCss = plugin.app.customCss;
+		customCss.enabledSnippets.add(css_filename);
+		customCss.requestLoadSnippets();
+	}
 }
 
+
 class MetadataHiderSettingTab extends PluginSettingTab {
 	plugin: MetadataIcon;
 	debouncedGenerate: Function;
@@ -113,12 +131,11 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 	}
 
 	async generateSnippet() {
-		await genSnippetCSS(this.plugin);
+		await this.plugin.genSnippetCSS(this.plugin);
 	}
 
 	display(): void {
 		const { containerEl } = this;
-
 		const t = Locals.get();
 
 		containerEl.empty();
@@ -143,7 +160,8 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 			let span = s.descEl.createEl("span", { text: t.settingAddIconDescElSpan });
 			span.setAttribute("style", `margin-right: 2px; `);
 			let img = s.descEl.createEl("img", { cls: "metadata-icon-preview" });
-			img.setAttribute("src", iconSetting.image);
+			img.setAttribute("src", this.plugin.getResourcePath(iconSetting.image));
+
 			img.setAttribute("width", `20px`);
 			img.setAttribute("style", `background-color: transparent;`);
 			s.addText((cb) => {

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "metadata-icon",
 	"name": "Metadata Icon",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"minAppVersion": "0.15.0",
 	"description": "Change metadata entry icon",
 	"author": "Benature",
@@ -12,4 +12,4 @@
 		"微信/支付宝": "https://s2.loli.net/2024/01/30/jQ9fTSyBxvXRoOM.png"
 	},
 	"isDesktopOnly": false
-}
+}