diff --git a/src/commands/toggleVisibility.ts b/src/commands/toggleVisibility.ts index 7c8b242..86d45ac 100644 --- a/src/commands/toggleVisibility.ts +++ b/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(); } }); diff --git a/src/main.ts b/src/main.ts index 18256e4..0be2aa5 100644 --- a/src/main.ts +++ b/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[]; - hiddenFolders: string[]; + hiddenList: string[]; }; export default class FileHider extends Plugin { settings: FileHiderSettings = { hidden: true, - hiddenFiles: [], - hiddenFolders: [], + hiddenList: [], }; 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); - this.style.insertRule(rule); - this.settings.hiddenFolders.push(file.path); + changePathVisibility(file.path, this.settings.hidden); + this.settings.hiddenList.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); - this.style.insertRule(rule); - this.settings.hiddenFiles.push(file.path); + changePathVisibility(file.path, this.settings.hidden); + this.settings.hiddenList.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(); - }; - - 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)); - }; + for (const path of this.settings.hiddenList) { + changePathVisibility(path, this.settings.hidden); }; this.saveSettings(); }; - unhideFile(file: string) { - let i = this.settings.hiddenFiles.indexOf(file); - this.settings.hiddenFiles.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; - }; - }; + unhidePath(path: string) { + let i = this.settings.hiddenList.indexOf(path); + changePathVisibility(path, false); + this.settings.hiddenList.splice(i, 1); this.saveSettings(); - } + }; }; diff --git a/src/utils.ts b/src/utils.ts index 46f24be..932d382 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,32 +1,12 @@ -import { Notice } from "obsidian"; - -/** - * Creates a CSS rule that is used to hide the file or folder from the file - * explorer when it is enabled. - * - * @param type The type of file it is - * @param path The full filepath of the file/folder from the root of the vault - * @returns The CSS string that is used to target the file or folder - */ -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; - }; +export function changePathVisibility(path: string, hide: boolean) { + let n = document.querySelector(`[data-path="${path}"]`); + if (!n) { + return; + }; + let p = n.parentElement + if (hide) { + p.style.display = `none` + } else { + p.style.display = ``; }; }; \ No newline at end of file