Change the system to not use a stylesheet at all and work based on inline styling

src/commands/toggleVisibility.ts

@@ -1,5 +1,4 @@
 import FileHider from "../main";
-import { findStyleSheet } from "../utils";
 
 // The command used to toggle the visibility.
 export class VisibilityToggleCommand {
@@ -8,9 +7,6 @@ export class VisibilityToggleCommand {
 			id: 'oa-fh-toggle-visibility',
 			name: 'Toggle Visibility',
 			callback: () => {
-				if (!plugin.style) {
-					plugin.style = findStyleSheet();
-				};
 				plugin.toggleVisibility();
 			}
 		});

src/main.ts

@@ -1,70 +1,61 @@
 import { ManageHiddenDirectories } from './settings/manageHiddenFolders';
 import { VisibilityToggleCommand } from './commands/toggleVisibility';
 import { VisibilityToggleSetting } from './settings/hiddenToggle';
-import { App, Plugin, PluginSettingTab, TFolder } from 'obsidian';
+import { App, Notice, Plugin, PluginSettingTab, TFolder } from 'obsidian';
 import { ManageHiddenFiles } from './settings/manageHiddenFiles';
-import { createStyleLine, findStyleSheet } from './utils';
+import { changePathVisibility } from './utils';
 
 interface FileHiderSettings {
 	hidden: boolean;
-	hiddenFiles: string[];
+	hiddenList: string[];
-	hiddenFolders: string[];
 };
 
 
 export default class FileHider extends Plugin {
 	settings: FileHiderSettings = {
 		hidden: true,
-		hiddenFiles: [],
+		hiddenList: [],
-		hiddenFolders: [],
 	};
 
 	style: CSSStyleSheet|null = null;
 
-	hasRibbon: boolean = false;
-
 	async onload() {
 		await this.loadSettings();
 
 		this.registerEvent(
 			this.app.workspace.on(`file-menu`, (menu, file) => {
-				if (!this.style) {
-					this.style = findStyleSheet();
-				};
 				if (file instanceof TFolder) {
 					menu.addItem((i) => {
-						if (this.settings.hiddenFolders.includes(file.path)) {
+						if (this.settings.hiddenList.includes(file.path)) {
 							i.setTitle(`Unhide Folder`)
 							.setIcon(`eye`)
 							.onClick(() => {
-								this.unhideFolder(file.path);
+								this.unhidePath(file.path);
 							});
 						} else {
 							i.setTitle(`Hide Folder`)
 							.setIcon(`eye-off`)
 							.onClick(() => {
-								let rule = createStyleLine(`folder`, file.path);
+								changePathVisibility(file.path, this.settings.hidden);
-								this.style.insertRule(rule);
+								this.settings.hiddenList.push(file.path);
-								this.settings.hiddenFolders.push(file.path);
 								this.saveSettings();
 							});
 						};
 					});
 				} else {
 					menu.addItem((i) => {
-						if (this.settings.hiddenFiles.includes(file.path)) {
+						if (this.settings.hiddenList.includes(file.path)) {
 							i.setTitle(`Unhide File`)
 							.setIcon(`eye`)
 							.onClick((e) => {
-								this.unhideFile(file.path);
+								this.unhidePath(file.path);
 							});
 						} else {
 							i.setTitle(`Hide File`)
 							.setIcon(`eye-off`)
 							.onClick((e) => {
-								let rule = createStyleLine(`file`, file.path);
+								changePathVisibility(file.path, this.settings.hidden);
-								this.style.insertRule(rule);
+								this.settings.hiddenList.push(file.path);
-								this.settings.hiddenFiles.push(file.path);
 								this.saveSettings();
 							});
 						};
@@ -73,8 +64,13 @@ export default class FileHider extends Plugin {
 			})
 		);
 
+		this.app.workspace.onLayoutReady(() => {
+			for (const path of this.settings.hiddenList) {
+				changePathVisibility(path, this.settings.hidden);
+			};
+		});
+
 		new VisibilityToggleCommand(this);
-		this.initialLoadStyle();
 		this.addSettingTab(new FileHiderSettingsTab(this.app, this));
 	}
 
@@ -82,27 +78,6 @@ export default class FileHider extends Plugin {
 		this.saveSettings();
 	};
 
-	/*
-	This is the method that handles re-hiding files when Obsidian starts, or
-	when the plugin is reloaded after being unloaded/disabled.
-	*/
-	async initialLoadStyle() {
-		console.log(`attempting to get the stylesheet`)
-		this.style = findStyleSheet();
-		if (this.style) {
-			for (var file of this.settings.hiddenFiles) {
-				let r = createStyleLine(`file`, file);
-				this.style.insertRule(r);
-			};
-			for (var folder of this.settings.hiddenFolders) {
-				let r = createStyleLine(`folder`, folder);
-				this.style.insertRule(r);
-			};
-			return
-		};
-		setTimeout(() => this.initialLoadStyle(), 1_000);
-	};
-
 	/*
 	Loads the config settings, with defaults created where needed.
 	*/
@@ -119,44 +94,19 @@ export default class FileHider extends Plugin {
 	Enables/Disables the file visibility based. (gets the stylesheet if needed)
 	*/
 	toggleVisibility() {
-		if (!this.style) {
-			this.style = findStyleSheet();
-		};
-		this.style.disabled = this.settings.hidden;
 		this.settings.hidden = !this.settings.hidden;
-		this.saveSettings();
+		for (const path of this.settings.hiddenList) {
-	};
+			changePathVisibility(path, this.settings.hidden);
-
-	unhideFolder(folder: string) {
-		let i = this.settings.hiddenFolders.indexOf(folder);
-		this.settings.hiddenFolders.splice(i, 1);
-
-		// Find and remove the CSS style from the system
-		for (var j in this.style.cssRules) {
-			let rule = this.style.cssRules[j];
-			if (rule.cssText == createStyleLine(`folder`, folder)) {
-				this.style.deleteRule(parseInt(j));
-			};
 		};
 		this.saveSettings();
 	};
 
-	unhideFile(file: string) {
+	unhidePath(path: string) {
-		let i = this.settings.hiddenFiles.indexOf(file);
+		let i = this.settings.hiddenList.indexOf(path);
-		this.settings.hiddenFiles.splice(i, 1);
+		changePathVisibility(path, false);
-
+		this.settings.hiddenList.splice(i, 1);
-		// Find and remove the CSS style from the system
-		for (var j in this.style.cssRules) {
-			try { parseInt(j) } catch (e) { console.log(`skipping`, j); continue; };
-
-			let rule = this.style.cssRules[j];
-			if (rule.cssText == createStyleLine(`file`, file)) {
-				this.style.deleteRule(parseInt(j));
-				break;
-			};
-		};
 		this.saveSettings();
-	}
+	};
 };
 
 

src/utils.ts

@@ -1,32 +1,12 @@
-import { Notice } from "obsidian";
+export function changePathVisibility(path: string, hide: boolean) {
-
+	let n = document.querySelector(`[data-path="${path}"]`);
-/**
+	if (!n) {
- * Creates a CSS rule that is used to hide the file or folder from the file
+		return;
- * explorer when it is enabled.
+	};
- *
+	let p = n.parentElement
- * @param type The type of file it is
+	if (hide) {
- * @param path The full filepath of the file/folder from the root of the vault
+		p.style.display = `none`
- * @returns The CSS string that is used to target the file or folder
+	} else {
- */
+		p.style.display = ``;
-export function createStyleLine(type: string, path: string) {
-	return `.nav-${type} > [data-path="${path}"] { display: none; }`;
-};
-
-
-/**
- * Locates the File Hider stylesheet within Obsidian to allow us to modify it
- * dynamically, for enabling and disabling it in order to show/hide the files
- * and directories in the file explorer
- *
- * @returns The stylesheet if it was found
- */
-export function findStyleSheet() {
-	for (var i in document.styleSheets) {
-		let style = document.styleSheets[i];
-		//@ts-ignore
-		let content = style?.ownerNode?.innerText;
-		if (content && content.startsWith(`/* FILE HIDER */`)) {
-			return style;
-		};
 	};
 };