diff --git a/src/Commands.ts b/src/Commands.ts index fb38b7f..8bf273c 100644 --- a/src/Commands.ts +++ b/src/Commands.ts @@ -4,7 +4,7 @@ import { getFolderNote, createFolderNote, deleteFolderNote, turnIntoFolderNote, import { ExcludedFolder } from './ExcludeFolders/ExcludeFolder'; import { getFolderPathFromString, getFileExplorerActiveFolder } from './functions/utils'; import { addExcludedFolder, deleteExcludedFolder, getDetachedFolder, getExcludedFolder } from './ExcludeFolders/functions/folderFunctions'; -import { applyCSSClassesToFolder } from './functions/styleFunctions'; +import { updateCSSClassesForFolder } from './functions/styleFunctions'; @@ -406,7 +406,7 @@ export class Commands { this.plugin.settings.excludeFolders = this.plugin.settings.excludeFolders.filter( (folder) => (folder.path !== file.path) && folder.showFolderNote); this.plugin.saveSettings(false); - applyCSSClassesToFolder(file.path, this.plugin); + updateCSSClassesForFolder(file.path, this.plugin); }); }); } else { @@ -424,7 +424,7 @@ export class Commands { excludedFolder.hideInSettings = true; excludedFolder.showFolderNote = true; addExcludedFolder(this.plugin, excludedFolder, false); - applyCSSClassesToFolder(file.path, this.plugin); + updateCSSClassesForFolder(file.path, this.plugin); }); }); } diff --git a/src/events/MutationObserver.ts b/src/events/MutationObserver.ts index c2c71a3..5b7aea8 100644 --- a/src/events/MutationObserver.ts +++ b/src/events/MutationObserver.ts @@ -3,7 +3,7 @@ import FolderNotesPlugin from 'src/main'; import { getFolderNote } from 'src/functions/folderNoteFunctions'; import { handleViewHeaderClick } from './handleClick'; import { getExcludedFolder } from 'src/ExcludeFolders/functions/folderFunctions'; -import { applyCSSClassesToFolder } from 'src/functions/styleFunctions'; +import { updateCSSClassesForFolder } from 'src/functions/styleFunctions'; let fileExplorerMutationObserver: MutationObserver | null = null; @@ -114,7 +114,7 @@ async function setupFolderTitle(folderTitle: HTMLElement, plugin: FolderNotesPlu if (!folderPath) return; folderTitle.dataset.initialized = 'true'; - await applyCSSClassesToFolder(folderPath, plugin); + await updateCSSClassesForFolder(folderPath, plugin); if (plugin.settings.frontMatterTitle.enabled) { plugin.fmtpHandler?.fmptUpdateFolderName({ id: '', result: false, path: folderPath, pathOnly: false }, false); diff --git a/src/events/handleClick.ts b/src/events/handleClick.ts index 91c6617..c4f46f0 100644 --- a/src/events/handleClick.ts +++ b/src/events/handleClick.ts @@ -2,7 +2,7 @@ import { Keymap, Platform } from 'obsidian'; import FolderNotesPlugin from 'src/main'; import { openFolderNote, createFolderNote, getFolderNote } from 'src/functions/folderNoteFunctions'; import { getExcludedFolder } from 'src/ExcludeFolders/functions/folderFunctions'; -import { addCSSClassToTitleEL, removeCSSClassFromEL } from 'src/functions/styleFunctions'; +import { addCSSClassToFileExplorerEl, removeCSSClassFromFileExplorerEL } from 'src/functions/styleFunctions'; export async function handleViewHeaderClick(event: MouseEvent, plugin: FolderNotesPlugin) { event.stopImmediatePropagation(); @@ -38,8 +38,8 @@ export async function handleViewHeaderClick(event: MouseEvent, plugin: FolderNot } else if (event.altKey || Keymap.isModEvent(event) === 'tab') { if ((plugin.settings.altKey && event.altKey) || (plugin.settings.ctrlKey && Keymap.isModEvent(event) === 'tab')) { await createFolderNote(plugin, folderPath, true, undefined, true); - addCSSClassToTitleEL(folderPath, 'has-folder-note', plugin); - removeCSSClassFromEL(folderPath, 'has-not-folder-note', plugin); + addCSSClassToFileExplorerEl(folderPath, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folderPath, 'has-not-folder-note', plugin); return; } } diff --git a/src/events/handleCreate.ts b/src/events/handleCreate.ts index c1e6eff..bc130ee 100644 --- a/src/events/handleCreate.ts +++ b/src/events/handleCreate.ts @@ -2,7 +2,7 @@ import { TAbstractFile, TFolder, TFile } from 'obsidian'; import FolderNotesPlugin from 'src/main'; import { createFolderNote, getFolder, getFolderNote, turnIntoFolderNote } from 'src/functions/folderNoteFunctions'; import { getExcludedFolder } from 'src/ExcludeFolders/functions/folderFunctions'; -import { removeCSSClassFromEL, addCSSClassToTitleEL } from 'src/functions/styleFunctions'; +import { removeCSSClassFromFileExplorerEL, addCSSClassToFileExplorerEl } from 'src/functions/styleFunctions'; export async function handleCreate(file: TAbstractFile, plugin: FolderNotesPlugin) { if (!plugin.app.workspace.layoutReady) return; @@ -10,9 +10,9 @@ export async function handleCreate(file: TAbstractFile, plugin: FolderNotesPlugi const folder = file.parent; if (folder instanceof TFolder) { if (plugin.isEmptyFolderNoteFolder(folder)) { - addCSSClassToTitleEL(folder.path, 'only-has-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'only-has-folder-note', plugin); } else { - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } } @@ -32,7 +32,7 @@ async function handleFileCreation(file: TFile, plugin: FolderNotesPlugin) { turnIntoFolderNote(plugin, file, newFolder); } else if (folder instanceof TFolder) { if (folder.children.length >= 1) { - removeCSSClassFromEL(folder.path, 'fn-empty-folder', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'fn-empty-folder', plugin); } const detachedFolder = getExcludedFolder(plugin, folder.path, true); @@ -40,8 +40,8 @@ async function handleFileCreation(file: TFile, plugin: FolderNotesPlugin) { const folderNote = getFolderNote(plugin, folder.path); if (folderNote && folderNote.path === file.path) { - addCSSClassToTitleEL(folder.path, 'has-folder-note', plugin); - addCSSClassToTitleEL(file.path, 'is-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(file.path, 'is-folder-note', plugin); } else if (plugin.settings.autoCreateForFiles) { if (!file.parent) { return; } const newFolder = await plugin.app.fileManager.createNewFolder(file.parent); @@ -56,7 +56,7 @@ async function handleFolderCreation(folder: TFolder, plugin: FolderNotesPlugin) const attachmentFolderPath = plugin.app.vault.getConfig('attachmentFolderPath') as string; const cleanAttachmentFolderPath = attachmentFolderPath?.replace('./', '') || ''; const attachmentsAreInRootFolder = attachmentFolderPath === './' || attachmentFolderPath === ''; - addCSSClassToTitleEL(folder.path, 'fn-empty-folder', plugin); + addCSSClassToFileExplorerEl(folder.path, 'fn-empty-folder', plugin); if (!plugin.settings.autoCreateForAttachmentFolder) { if (!attachmentsAreInRootFolder && cleanAttachmentFolderPath === folder.name) return; @@ -71,5 +71,5 @@ async function handleFolderCreation(folder: TFolder, plugin: FolderNotesPlugin) if (folderNote) return; createFolderNote(plugin, folder.path, openFile, undefined, true); - addCSSClassToTitleEL(folder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'has-folder-note', plugin); } diff --git a/src/events/handleDelete.ts b/src/events/handleDelete.ts index 324c9d5..3a9799b 100644 --- a/src/events/handleDelete.ts +++ b/src/events/handleDelete.ts @@ -1,16 +1,16 @@ import { TAbstractFile, TFolder, TFile } from 'obsidian'; import FolderNotesPlugin from 'src/main'; import { getFolderNote, getFolder, deleteFolderNote } from 'src/functions/folderNoteFunctions'; -import { removeCSSClassFromEL, addCSSClassToTitleEL } from 'src/functions/styleFunctions'; +import { removeCSSClassFromFileExplorerEL, addCSSClassToFileExplorerEl } from 'src/functions/styleFunctions'; import { getFolderPathFromString } from 'src/functions/utils'; export function handleDelete(file: TAbstractFile, plugin: FolderNotesPlugin) { const folder = plugin.app.vault.getAbstractFileByPath(getFolderPathFromString(file.path)); if (folder instanceof TFolder) { if (plugin.isEmptyFolderNoteFolder(folder)) { - addCSSClassToTitleEL(folder.path, 'only-has-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'only-has-folder-note', plugin); } else { - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } } @@ -19,14 +19,14 @@ export function handleDelete(file: TAbstractFile, plugin: FolderNotesPlugin) { if (!folder) { return; } const folderNote = getFolderNote(plugin, folder.path); if (folderNote) { return; } - removeCSSClassFromEL(folder.path, 'has-folder-note', plugin); - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } if (!(file instanceof TFolder)) { return; } const folderNote = getFolderNote(plugin, file.path); if (!folderNote) { return; } - removeCSSClassFromEL(folderNote.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folderNote.path, 'is-folder-note', plugin); if (!plugin.settings.syncDelete) { return; } deleteFolderNote(plugin, folderNote, false); } diff --git a/src/events/handleRename.ts b/src/events/handleRename.ts index e0753df..8b3c91f 100644 --- a/src/events/handleRename.ts +++ b/src/events/handleRename.ts @@ -3,7 +3,7 @@ import FolderNotesPlugin from 'src/main'; import { extractFolderName, getFolderNote, getFolderNoteFolder } from '../functions/folderNoteFunctions'; import { getExcludedFolder, addExcludedFolder, updateExcludedFolder, deleteExcludedFolder, getDetachedFolder } from '../ExcludeFolders/functions/folderFunctions'; import { ExcludedFolder } from 'src/ExcludeFolders/ExcludeFolder'; -import { removeCSSClassFromEL, addCSSClassToTitleEL } from 'src/functions/styleFunctions'; +import { removeCSSClassFromFileExplorerEL, addCSSClassToFileExplorerEl } from 'src/functions/styleFunctions'; import { getFolderPathFromString, removeExtension, getFileNameFromPathString } from 'src/functions/utils'; export function handleRename(file: TAbstractFile, oldPath: string, plugin: FolderNotesPlugin) { @@ -12,17 +12,17 @@ export function handleRename(file: TAbstractFile, oldPath: string, plugin: Folde const isRename = (file.parent?.path === getFolderPathFromString(oldPath)); if (folder instanceof TFolder) { if (plugin.isEmptyFolderNoteFolder(folder)) { - addCSSClassToTitleEL(folder.path, 'only-has-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'only-has-folder-note', plugin); } else { - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } } if (oldFolder instanceof TFolder) { if (plugin.isEmptyFolderNoteFolder(oldFolder)) { - addCSSClassToTitleEL(oldFolder.path, 'only-has-folder-note', plugin); + addCSSClassToFileExplorerEl(oldFolder.path, 'only-has-folder-note', plugin); } else { - removeCSSClassFromEL(oldFolder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(oldFolder.path, 'only-has-folder-note', plugin); } } @@ -84,9 +84,9 @@ export async function handleFileMove(file: TFile, oldPath: string, plugin: Folde } else if (oldFolder && oldFolder.name === oldFileName && newFolder?.path !== oldFolder.path) { // the note has been moved somewhere and is no longer a folder note // cleanup css on the folder and note - removeCSSClassFromEL(oldFolder.path, 'has-folder-note', plugin); - removeCSSClassFromEL(file.path, 'is-folder-note', plugin); - removeCSSClassFromEL(oldPath, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(oldFolder.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(oldPath, 'is-folder-note', plugin); } } @@ -103,7 +103,7 @@ export async function handleFolderRename(file: TFolder, oldPath: string, plugin: const excludedFolder = getExcludedFolder(plugin, file.path, true); if (excludedFolder?.disableSync && !folderNote) { - return removeCSSClassFromEL(file.path, 'has-folder-note', plugin); + return removeCSSClassFromFileExplorerEL(file.path, 'has-folder-note', plugin); } if (!plugin.settings.syncFolderName) { return; } @@ -143,21 +143,21 @@ export async function fmptUpdateFileName(file: TFile, oldPath: string, plugin: F const folderNote = getFolderNote(plugin, oldPath, plugin.settings.storageLocation, file); if (!excludedFolder?.disableFolderNote && folderName === newFolder?.name && !detachedExcludedFolder) { - addCSSClassToTitleEL(file.path, 'is-folder-note', plugin); - addCSSClassToTitleEL(newFolder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(file.path, 'is-folder-note', plugin); + addCSSClassToFileExplorerEl(newFolder.path, 'has-folder-note', plugin); return; } else if (excludedFolder?.disableFolderNote || (folderName !== newFolder?.name)) { - removeCSSClassFromEL(file.path, 'is-folder-note', plugin); - removeCSSClassFromEL(newFolder?.path || '', 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(newFolder?.path || '', 'has-folder-note', plugin); } if (excludedFolder?.disableSync || !plugin.settings.syncFolderName) { return; } if (folderName === newFolder?.name) { - addCSSClassToTitleEL(file.path, 'is-folder-note', plugin); - removeCSSClassFromEL(oldFolder?.path, 'has-folder-note', plugin); - addCSSClassToTitleEL(newFolder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(file.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(oldFolder?.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(newFolder.path, 'has-folder-note', plugin); return; } @@ -175,12 +175,12 @@ export async function fmptUpdateFileName(file: TFile, oldPath: string, plugin: F async function renameFolderOnFileRename(file: TFile, oldPath: string, oldFolder: TAbstractFile, plugin: FolderNotesPlugin) { const newFolderName = extractFolderName(plugin.settings.folderNoteName, file.basename); if (!newFolderName) { - removeCSSClassFromEL(oldFolder.path, 'has-folder-note', plugin); - removeCSSClassFromEL(file.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(oldFolder.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file.path, 'is-folder-note', plugin); return; } else if (newFolderName === oldFolder.name) { - addCSSClassToTitleEL(oldFolder.path, 'has-folder-note', plugin); - addCSSClassToTitleEL(file.path, 'is-folder-note', plugin); + addCSSClassToFileExplorerEl(oldFolder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(file.path, 'is-folder-note', plugin); return; } diff --git a/src/functions/folderNoteFunctions.ts b/src/functions/folderNoteFunctions.ts index fe8eb9b..69b104d 100644 --- a/src/functions/folderNoteFunctions.ts +++ b/src/functions/folderNoteFunctions.ts @@ -7,7 +7,7 @@ import { addExcludedFolder, deleteExcludedFolder, getDetachedFolder, getExcluded import { ExcludedFolder } from '../ExcludeFolders/ExcludeFolder'; import { openExcalidrawView } from './excalidraw'; import { AskForExtensionModal } from 'src/modals/AskForExtension'; -import { getEl, addCSSClassToTitleEL, removeCSSClassFromEL } from 'src/functions/styleFunctions'; +import { getFileExplorerElement, addCSSClassToFileExplorerEl, removeCSSClassFromFileExplorerEL } from 'src/functions/styleFunctions'; import { getFolderNameFromPathString, getFolderPathFromString, removeExtension } from 'src/functions/utils'; const defaultExcalidrawTemplate = `--- @@ -60,7 +60,7 @@ export async function createFolderNote(plugin: FolderNotesPlugin, folderPath: st if (detachedFolder && folderNote?.extension !== extension && folderNote) { deleteExcludedFolder(plugin, detachedFolder); - removeCSSClassFromEL(folderNote?.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folderNote?.path, 'is-folder-note', plugin); const folder = plugin.app.vault.getAbstractFileByPath(folderPath) as TFolder; if (!folderNote || folderNote.basename !== fileName) return; let count = 1; @@ -128,7 +128,7 @@ export async function createFolderNote(plugin: FolderNotesPlugin, folderPath: st const folder = getFolder(plugin, folderNote); if (!folder) { return; } - plugin.activeFolderDom = getEl(folder.path, plugin); + plugin.activeFolderDom = getFileExplorerElement(folder.path, plugin); if (plugin.activeFolderDom) plugin.activeFolderDom.addClass('fn-is-active'); } await leaf.openFile(folderNote); @@ -144,8 +144,8 @@ export async function createFolderNote(plugin: FolderNotesPlugin, folderPath: st const folder = plugin.app.vault.getAbstractFileByPath(folderPath); if (!(folder instanceof TFolder)) return; - addCSSClassToTitleEL(path, 'is-folder-note', plugin, true); - addCSSClassToTitleEL(folder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(path, 'is-folder-note', plugin, true); + addCSSClassToFileExplorerEl(folder.path, 'has-folder-note', plugin); } export async function turnIntoFolderNote(plugin: FolderNotesPlugin, file: TFile, folder: TFolder, folderNote?: TFile | null | TAbstractFile, skipConfirmation?: boolean) { @@ -156,7 +156,7 @@ export async function turnIntoFolderNote(plugin: FolderNotesPlugin, file: TFile, if (plugin.settings.showRenameConfirmation && !skipConfirmation && !detachedExcludedFolder) { return new ExistingFolderNoteModal(plugin.app, plugin, file, folder, folderNote).open(); } - removeCSSClassFromEL(folderNote.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folderNote.path, 'is-folder-note', plugin); const [excludedFolder, excludedFolderExisted, disabledSync] = await tempDisableSync(plugin, folder); @@ -190,15 +190,15 @@ export async function turnIntoFolderNote(plugin: FolderNotesPlugin, file: TFile, } await plugin.app.fileManager.renameFile(file, path); - addCSSClassToTitleEL(path, 'is-folder-note', plugin, true); - addCSSClassToTitleEL(folder.path, 'has-folder-note', plugin); + addCSSClassToFileExplorerEl(path, 'is-folder-note', plugin, true); + addCSSClassToFileExplorerEl(folder.path, 'has-folder-note', plugin); if (plugin.activeFolderDom) { plugin.activeFolderDom.removeClass('fn-is-active'); plugin.activeFolderDom = null; } - plugin.activeFolderDom = getEl(folder.path, plugin); + plugin.activeFolderDom = getFileExplorerElement(folder.path, plugin); if (plugin.activeFolderDom) plugin.activeFolderDom.addClass('fn-is-active'); } @@ -265,7 +265,7 @@ export async function deleteFolderNote(plugin: FolderNotesPlugin, file: TFile, d (excludedFolder) => (excludedFolder.path !== folder.path) && excludedFolder.showFolderNote); plugin.saveSettings(false); - removeCSSClassFromEL(folder.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'has-folder-note', plugin); switch (plugin.settings.deleteFilesAction) { case 'trash': await plugin.app.vault.trash(file, true); diff --git a/src/functions/styleFunctions.ts b/src/functions/styleFunctions.ts index 7211e55..8e2e065 100644 --- a/src/functions/styleFunctions.ts +++ b/src/functions/styleFunctions.ts @@ -6,37 +6,40 @@ import { getFileExplorer } from './utils'; import { ExcludedFolder } from 'src/ExcludeFolders/ExcludeFolder'; import FolderOverviewPlugin from 'src/obsidian-folder-overview/src/main'; -export function updateAllFileStyles(forceReload = false, plugin: FolderNotesPlugin) { +/** + * @description Refreshes the CSS classes for all folder notes in the file explorer. + */ +export function refreshAllFolderStyles(forceReload = false, plugin: FolderNotesPlugin) { if (plugin.activeFileExplorer === getFileExplorer(plugin) && !forceReload) { return; } plugin.activeFileExplorer = getFileExplorer(plugin); plugin.app.vault.getAllLoadedFiles().forEach(async (file) => { if (!(file instanceof TFolder)) { return; } const folderNote = getFolderNote(plugin, file.path); if (!folderNote) { - removeCSSClassFromEL(file?.path, 'has-folder-note', plugin); - removeCSSClassFromEL(file?.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file?.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file?.path, 'only-has-folder-note', plugin); plugin.isEmptyFolderNoteFolder(file); return; } const excludedFolder = getExcludedFolder(plugin, file.path, true); - // cleanup after ourselves - // Incase settings have changed if (excludedFolder?.disableFolderNote) { - removeCSSClassFromEL(folderNote.path, 'is-folder-note', plugin); - removeCSSClassFromEL(file.path, 'has-folder-note', plugin); - removeCSSClassFromEL(file?.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folderNote.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(file?.path, 'only-has-folder-note', plugin); } else { if (!excludedFolder?.showFolderNote) { - addCSSClassToTitleEL(folderNote.path, 'is-folder-note', plugin); + addCSSClassToFileExplorerEl(folderNote.path, 'is-folder-note', plugin); } - addCSSClassesToFolder(file, plugin); + markFolderWithFolderNoteClasses(file, plugin); } }); } - -export async function applyCSSClassesToFolder(folderPath: string, plugin: FolderNotesPlugin) { +/** + * @description Updates the CSS classes for a specific folder in the file explorer. + */ +export async function updateCSSClassesForFolder(folderPath: string, plugin: FolderNotesPlugin) { const folder = plugin.app.vault.getAbstractFileByPath(folderPath); if (!folder || !(folder instanceof TFolder)) { return; } @@ -44,123 +47,127 @@ export async function applyCSSClassesToFolder(folderPath: string, plugin: Folder const detachedFolderNote = getDetachedFolder(plugin, folder.path); if (folder.children.length === 0) { - addCSSClassToTitleEL(folder.path, 'fn-empty-folder', plugin); + addCSSClassToFileExplorerEl(folder.path, 'fn-empty-folder', plugin); } if (!folderNote || detachedFolderNote) { - removeCSSClassFromEL(folder?.path, 'has-folder-note', plugin); - removeCSSClassFromEL(folder?.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder?.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder?.path, 'only-has-folder-note', plugin); return; } const excludedFolder = getExcludedFolder(plugin, folder.path, true); if (excludedFolder?.disableFolderNote) { - removeCSSClassFromEL(folderNote.path, 'is-folder-note', plugin); - removeCSSClassFromEL(folder.path, 'has-folder-note', plugin); - removeCSSClassFromEL(folder?.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folderNote.path, 'is-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder?.path, 'only-has-folder-note', plugin); } else { - addCSSClassesToFolder(folder, plugin); + console.log('updateCSSClassesForFolder', folder.path, 'has folder note'); + markFolderWithFolderNoteClasses(folder, plugin); if (excludedFolder?.showFolderNote) { - removeCSSClassFromFolderNote(folderNote, plugin); + unmarkFileAsFolderNote(folderNote, plugin); return; } if (plugin.isEmptyFolderNoteFolder(folder)) { - addCSSClassToTitleEL(folder.path, 'only-has-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'only-has-folder-note', plugin); } else { - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } } - addCSSClassesToBothFolderAndNote(folderNote, folder, plugin); + markFolderAndNoteWithClasses(folderNote, folder, plugin); } -export async function applyCSSClassesToFolderNote(filePath: string, plugin: FolderNotesPlugin) { +/** + * @description Updates the CSS classes for a folder note file in the file explorer and then also updates the folder it belongs to. + */ +export async function updateCSSClassesForFolderNote(filePath: string, plugin: FolderNotesPlugin) { const file = plugin.app.vault.getAbstractFileByPath(filePath); if (!file || !(file instanceof TFile)) { return; } const folder = getFolder(plugin, file); if (!folder || !(folder instanceof TFolder)) { return; } - applyCSSClassesToFolder(folder.path, plugin); - + updateCSSClassesForFolder(folder.path, plugin); } -export function addCSSClassesToBothFolderAndNote(file: TFile, folder: TFolder, plugin: FolderNotesPlugin) { - addCSSClassToFolderNote(file, plugin); - addCSSClassesToFolder(folder, plugin); +export function markFolderAndNoteWithClasses(file: TFile, folder: TFolder, plugin: FolderNotesPlugin) { + markFileAsFolderNote(file, plugin); + markFolderWithFolderNoteClasses(folder, plugin); } -export function removeCSSClassesFromBothFolderAndNote(folder: TFolder, file: TFile, plugin: FolderNotesPlugin) { - removeCSSClassFromFolderNote(file, plugin); - removeCSSClassesFromFolder(folder, plugin); +export function clearFolderAndNoteClasses(folder: TFolder, file: TFile, plugin: FolderNotesPlugin) { + unmarkFileAsFolderNote(file, plugin); + clearFolderNoteClassesFromFolder(folder, plugin); } -export function addCSSClassesToFolder(folder: TFolder, plugin: FolderNotesPlugin) { - addCSSClassToTitleEL(folder.path, 'has-folder-note', plugin); +export function markFolderWithFolderNoteClasses(folder: TFolder, plugin: FolderNotesPlugin) { + addCSSClassToFileExplorerEl(folder.path, 'has-folder-note', plugin); if (plugin.isEmptyFolderNoteFolder(folder)) { - addCSSClassToTitleEL(folder.path, 'only-has-folder-note', plugin); + addCSSClassToFileExplorerEl(folder.path, 'only-has-folder-note', plugin); } else { - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } } -export function addCSSClassToFolderNote(file: TFile, plugin: FolderNotesPlugin) { - addCSSClassToTitleEL(file.path, 'is-folder-note', plugin); +export function markFileAsFolderNote(file: TFile, plugin: FolderNotesPlugin) { + addCSSClassToFileExplorerEl(file.path, 'is-folder-note', plugin); } -export function removeCSSClassFromFolderNote(file: TFile, plugin: FolderNotesPlugin) { - removeCSSClassFromEL(file.path, 'is-folder-note', plugin); +export function unmarkFileAsFolderNote(file: TFile, plugin: FolderNotesPlugin) { + removeCSSClassFromFileExplorerEL(file.path, 'is-folder-note', plugin); } -export function removeCSSClassesFromFolder(folder: TFolder, plugin: FolderNotesPlugin) { - removeCSSClassFromEL(folder.path, 'has-folder-note', plugin); - removeCSSClassFromEL(folder.path, 'only-has-folder-note', plugin); +export function clearFolderNoteClassesFromFolder(folder: TFolder, plugin: FolderNotesPlugin) { + removeCSSClassFromFileExplorerEL(folder.path, 'has-folder-note', plugin); + removeCSSClassFromFileExplorerEL(folder.path, 'only-has-folder-note', plugin); } -export async function addCSSClassToTitleEL(path: string, cssClass: string, plugin: FolderNotesPlugin, waitForCreate = false, count = 0) { - const fileExplorerItem = getEl(path, plugin); +/** + * @param path Can be a folder or file path + * @returns nothing + */ +export async function addCSSClassToFileExplorerEl(path: string, cssClass: string, plugin: FolderNotesPlugin, waitForCreate = false, count = 0) { + const fileExplorerItem = getFileExplorerElement(path, plugin); if (!fileExplorerItem) { if (waitForCreate && count < 5) { - // sleep for a second for the file-explorer event to catch up - // this is annoying as in most scanarios our plugin recieves the event before file explorer - // If we could guarrantee load order it wouldn't be an issue but we can't - // realise this is racey and needs to be fixed. await new Promise((r) => setTimeout(r, 500)); - addCSSClassToTitleEL(path, cssClass, plugin, waitForCreate, count + 1); + addCSSClassToFileExplorerEl(path, cssClass, plugin, waitForCreate, count + 1); return; } return; } fileExplorerItem.addClass(cssClass); - const viewHeaderItems = document.querySelectorAll(`[data-path='${CSS.escape(path)}']`); - viewHeaderItems.forEach((item) => { + if (cssClass === 'only-has-folder-note') { + fileExplorerItem.parentElement?.parentElement?.addClass('fn-only-has-folder-note'); + } + document.querySelectorAll(`[data-path='${CSS.escape(path)}']`).forEach((item) => { item.addClass(cssClass); }); } -export function removeCSSClassFromEL(path: string | undefined, cssClass: string, plugin: FolderNotesPlugin) { +/** + * @param path Can be a folder or file path + * @param cssClass The CSS class to remove from the file explorer element + * @returns nothing + */ +export function removeCSSClassFromFileExplorerEL(path: string | undefined, cssClass: string, plugin: FolderNotesPlugin) { if (!path) return; - const fileExplorerItem = getEl(path, plugin); - const viewHeaderItems = document.querySelectorAll(`[data-path='${CSS.escape(path)}']`); - viewHeaderItems.forEach((item) => { + const fileExplorerItem = getFileExplorerElement(path, plugin); + document.querySelectorAll(`[data-path='${CSS.escape(path)}']`).forEach((item) => { item.removeClass(cssClass); }); if (!fileExplorerItem) { return; } fileExplorerItem.removeClass(cssClass); } -export function getEl(path: string, plugin: FolderNotesPlugin | FolderOverviewPlugin): HTMLElement | null { +export function getFileExplorerElement(path: string, plugin: FolderNotesPlugin | FolderOverviewPlugin): HTMLElement | null { const fileExplorer = getFileExplorer(plugin); - if (!fileExplorer) { return null; } - if (!fileExplorer.view) { return null; } - if (!fileExplorer.view.fileItems) { return null; } + if (!fileExplorer?.view?.fileItems) { return null; } const fileExplorerItem = fileExplorer.view.fileItems?.[path]; - if (!fileExplorerItem) { return null; } - if (fileExplorerItem.selfEl) return fileExplorerItem.selfEl; - return fileExplorerItem.titleEl; + return fileExplorerItem?.selfEl ?? fileExplorerItem?.titleEl ?? null; } - export function showFolderNoteInFileExplorer(path: string, plugin: FolderNotesPlugin) { const excludedFolder = new ExcludedFolder(path, plugin.settings.excludeFolders.length, undefined, plugin); excludedFolder.subFolders = false; @@ -172,12 +179,14 @@ export function showFolderNoteInFileExplorer(path: string, plugin: FolderNotesPl excludedFolder.hideInSettings = true; excludedFolder.showFolderNote = true; addExcludedFolder(plugin, excludedFolder, false); - applyCSSClassesToFolder(path, plugin); + addCSSClassToFileExplorerEl(path, 'show-folder-note-in-explorer', plugin); + updateCSSClassesForFolder(path, plugin); } export function hideFolderNoteInFileExplorer(path: string, plugin: FolderNotesPlugin) { plugin.settings.excludeFolders = plugin.settings.excludeFolders.filter( (folder) => (folder.path !== path) && folder.showFolderNote); plugin.saveSettings(false); - applyCSSClassesToFolder(path, plugin); + removeCSSClassFromFileExplorerEL(path, 'show-folder-note-in-explorer', plugin); + updateCSSClassesForFolder(path, plugin); } diff --git a/src/main.ts b/src/main.ts index 990387a..96b4b4f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -13,7 +13,7 @@ import { FolderOverview } from './obsidian-folder-overview/src/FolderOverview'; import { TabManager } from './events/TabManager'; import './functions/ListComponent'; import { handleDelete } from './events/handleDelete'; -import { addCSSClassToTitleEL, getEl, removeCSSClassFromEL, updateAllFileStyles } from './functions/styleFunctions'; +import { addCSSClassToFileExplorerEl, getFileExplorerElement, removeCSSClassFromFileExplorerEL, refreshAllFolderStyles } from './functions/styleFunctions'; import { getExcludedFolder } from './ExcludeFolders/functions/folderFunctions'; import { FileExplorerView, InternalPlugin } from 'obsidian-typings'; import { getFocusedItem } from './functions/utils'; @@ -123,7 +123,7 @@ export default class FolderNotesPlugin extends Plugin { const folderNote = getFolderNote(this, folder.path); if (!folderNote) { return; } if (folderNote.path !== openFile.path) { return; } - this.activeFolderDom = getEl(folder.path, this); + this.activeFolderDom = getFileExplorerElement(folder.path, this); if (this.activeFolderDom) this.activeFolderDom.addClass('fn-is-active'); })); @@ -267,8 +267,8 @@ export default class FolderNotesPlugin extends Plugin { if (!folderNote && (evt.altKey || Keymap.isModEvent(evt) === 'tab')) { if ((this.settings.altKey && evt.altKey) || (this.settings.ctrlKey && Keymap.isModEvent(evt) === 'tab')) { createFolderNote(this, folderPath, true, undefined, true); - addCSSClassToTitleEL(folderPath, 'has-folder-note', this); - removeCSSClassFromEL(folderPath, 'has-not-folder-note', this); + addCSSClassToFileExplorerEl(folderPath, 'has-folder-note', this); + removeCSSClassFromFileExplorerEL(folderPath, 'has-not-folder-note', this); return; } } @@ -345,7 +345,7 @@ export default class FolderNotesPlugin extends Plugin { const attachmentsAreInRootFolder = attachmentFolderPath === './' || attachmentFolderPath === ''; const threshold = this.settings.storageLocation === 'insideFolder' ? 1 : 0; if (folder.children.length === 0) { - addCSSClassToTitleEL(folder.path, 'fn-empty-folder', this); + addCSSClassToFileExplorerEl(folder.path, 'fn-empty-folder', this); } if (folder.children.length === threshold) { @@ -358,7 +358,7 @@ export default class FolderNotesPlugin extends Plugin { const attachmentFolder = this.app.vault.getAbstractFileByPath(folderPath); if (attachmentFolder instanceof TFolder && folder.children.length <= threshold + 1) { if (!folder.collapsed) { - getEl(folder.path, this)?.click(); + getFileExplorerElement(folder.path, this)?.click(); } } return folder.children.length <= threshold + 1; @@ -371,7 +371,7 @@ export default class FolderNotesPlugin extends Plugin { async changeFolderNameInExplorer(folder: TFolder, newName: string | null | undefined, waitForCreate = false, count = 0) { if (!newName) newName = folder.name; - let fileExplorerItem = getEl(folder.path, this); + let fileExplorerItem = getFileExplorerElement(folder.path, this); if (!fileExplorerItem) { if (waitForCreate && count < 5) { await new Promise((r) => setTimeout(r, 500)); @@ -462,7 +462,7 @@ export default class FolderNotesPlugin extends Plugin { await this.saveData(this.settings); // cleanup any css if we need too if ((!this.settingsOpened || reloadStyles === true) && reloadStyles !== false) { - updateAllFileStyles(true, this); + refreshAllFolderStyles(true, this); } } diff --git a/src/settings/GeneralSettings.ts b/src/settings/GeneralSettings.ts index a6a76fb..fd33180 100644 --- a/src/settings/GeneralSettings.ts +++ b/src/settings/GeneralSettings.ts @@ -5,7 +5,7 @@ import AddSupportedFileModal from '../modals/AddSupportedFileType'; import { FrontMatterTitlePluginHandler } from '../events/FrontMatterTitle'; import ConfirmationModal from './modals/CreateFnForEveryFolder'; import { TemplateSuggest } from '../suggesters/TemplateSuggester'; -import { updateAllFileStyles } from '../functions/styleFunctions'; +import { refreshAllFolderStyles } from '../functions/styleFunctions'; import BackupWarningModal from './modals/BackupWarning'; import RenameFolderNotesModal from './modals/RenameFns'; @@ -186,7 +186,7 @@ export async function renderGeneral(settingsTab: SettingsTab) { settingsTab.plugin.settings.storageLocation = value; await settingsTab.plugin.saveSettings(); settingsTab.display(); - updateAllFileStyles(undefined, settingsTab.plugin); + refreshAllFolderStyles(undefined, settingsTab.plugin); }) ) .addButton((button) => diff --git a/styles.css b/styles.css index 4d1c982..cff3b4e 100644 --- a/styles.css +++ b/styles.css @@ -322,4 +322,4 @@ body:not(.disable-folder-highlight) .tree-item-self.fn-is-active { .is-phone .fn-overview-folder-path .setting-item-control { display: block; } -} +} \ No newline at end of file