auto update css

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.0.7
+- [updated] No longer needing to force refresh css, it's automatically updated.
+
 ## 0.0.6
 - [fix] bug: focus quit every time when input text is changed (`this.display()` issue)
 

main.ts

@@ -15,21 +15,43 @@ const DEFAULT_SETTINGS: MetadataIconSettings = {
 
 export default class MetadataIcon extends Plugin {
 	settings: MetadataIconSettings;
+	styleTag: HTMLStyleElement;
+
+	debounceUpdateCSS = debounce(this.updateCSS, 1000, true);
+
 
 	async onload() {
 		await this.loadSettings();
 		this.addSettingTab(new MetadataHiderSettingTab(this.app, this));
+
+		this.updateCSS();
+	}
+
+	onunload() {
+	}
+
+	updateCSS() {
+		this.styleTag = document.createElement('style');
+		this.styleTag.id = 'css-metadata-icon';
+		console.log(document.getElementsByTagName('head'))
+		let headElement: HTMLElement = document.getElementsByTagName('head')[0];
+		const existingStyleTag = headElement.querySelector('#css-metadata-icon') as HTMLStyleElement | null;
+
+		if (existingStyleTag) {
+			existingStyleTag.parentNode?.removeChild(existingStyleTag);
+		}
+
+		headElement.appendChild(this.styleTag);
+		this.styleTag.innerText = genSnippetCSS(this);
 	}
 
-	onunload() { }
 
 	async loadSettings() {
 		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
 	}
 
 	async saveSettings() {
 		await this.saveData(this.settings);
-		await genSnippetCSS(this);
 	}
 }
 
@@ -54,16 +76,11 @@ function genEntryCSS(s: IconAttrSetting): string {
 		`}`,
 		``,
 	]
-	return body.join('\n');
+	return body.join(' ');
 }
 
-async function genSnippetCSS(plugin: MetadataIcon) {
+function genSnippetCSS(plugin: MetadataIcon): string {
 	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;",
@@ -76,13 +93,7 @@ async function genSnippetCSS(plugin: MetadataIcon) {
 		content.push(genEntryCSS(iconSetting));
 	})
 
-	const vault = plugin.app.vault;
-	const path = `${plugin.manifest.dir}/styles.css`;
-	if (await vault.adapter.exists(path)) { await vault.adapter.remove(path) }
-	await plugin.app.vault.create(path, content.join('\n'));
-
-	// Ensure Style Settings reads changes
-	plugin.app.workspace.trigger("parse-style-settings");
+	return content.join(' ');
 }
 
 
@@ -93,13 +104,6 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 	constructor(app: App, plugin: MetadataIcon) {
 		super(app, plugin);
 		this.plugin = plugin;
-		this.debouncedGenerate = debounce(this.generateSnippet, 1000, true);
-		// Generate CSS immediately rather than 1 second - feels laggy
-		this.generateSnippet();
-	}
-
-	async generateSnippet() {
-		await genSnippetCSS(this.plugin);
 	}
 
 	getLang(): string {
@@ -149,15 +153,17 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 					.onChange(async (newValue) => {
 						this.plugin.settings.IconAttrList[index].entry = newValue;
 						await this.plugin.saveSettings();
+						this.plugin.debounceUpdateCSS();
 					});
 			})
 			s.addSearch((cb) => {
 				cb.setPlaceholder({ en: "image url", zh: "图标链接", "zh-TW": "圖示鏈接", }[lang] as string)
 					.setValue(iconSetting.image)
 					.onChange(async (newValue) => {
+						img.setAttribute("src", newValue);
 						this.plugin.settings.IconAttrList[index].image = newValue;
 						await this.plugin.saveSettings();
-						img.setAttribute("src", iconSetting.image);
+						this.plugin.debounceUpdateCSS();
 					});
 			});
 			s.addExtraButton((cb) => {
@@ -167,26 +173,9 @@ class MetadataHiderSettingTab extends PluginSettingTab {
 						this.plugin.settings.IconAttrList.splice(index, 1);
 						await this.plugin.saveSettings();
 						this.display();
+						this.plugin.debounceUpdateCSS();
 					});
 			});
 		});
-
-		new Setting(containerEl)
-			.setName({ en: "Force Refresh CSS", zh: "强制刷新插件CSS样式", "zh-TW": "強制刷新插件CSS樣式" }[lang] as string)
-			.setDesc({
-				en: `Note: The "icon preview" in the setting tab is automatically loaded, which is not related to this button.`,
-				zh: `注意：设置选项卡中的“图标预览”是自动加载的，与此按钮无关。`,
-				"zh-TW": `注意：設定選單中的「圖示預覽」是自動載入的，與此按鈕無關。`
-			}[lang] as string)
-			.addButton((button: ButtonComponent) => {
-				button
-					.setButtonText({ en: "Refresh", zh: "刷新", "zh-TW": "刷新" }[lang] as string)
-					.setCta().onClick(async () => {
-						// @ts-ignore
-						const plugins = this.plugin.app.plugins;
-						await plugins.disablePlugin(this.plugin.manifest.id);
-						await plugins.enablePlugin(this.plugin.manifest.id);
-					});
-			})
 	}
 }

manifest.json

@@ -1,11 +1,11 @@
 {
 	"id": "metadata-icon",
 	"name": "Metadata Icon",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"minAppVersion": "0.15.0",
 	"description": "Change metadata entry icon",
 	"author": "Benature",
 	"authorUrl": "https://github.com/Benature",
 	"fundingUrl": "https://www.buymeacoffee.com/benature",
 	"isDesktopOnly": false
-}
+}