feat: add functionality for setting icon in title inline or above (#286)

FlorianWoelki · May 1, 2024 · a6e7b71 · a6e7b71
1 parent db80941
commit a6e7b71
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 28 deletions.
diff --git a/src/lib/icon-title.ts b/src/lib/icon-title.ts
@@ -2,6 +2,7 @@ import IconFolderPlugin from '@app/main';
 import config from '@app/config';
 import emoji from '@app/emoji';
 import svg from './util/svg';
+import { IconInTitlePosition } from '@app/settings/data';
 
 const getTitleIcon = (leaf: HTMLElement): HTMLElement | null => {
   return leaf.querySelector(`.${config.TITLE_ICON_CLASS}`);
@@ -31,7 +32,7 @@ const add = (
     titleIcon = document.createElement('div');
   }
 
-  titleIcon.style.display = 'block';
+  titleIcon.style.removeProperty('display');
   titleIcon.classList.add(config.TITLE_ICON_CLASS);
   // Checks if the passed element is an emoji.
   if (emoji.isEmoji(svgElement) && options.fontSize) {
@@ -45,7 +46,15 @@ const add = (
   }
   titleIcon.innerHTML = svgElement;
   if (!hadTitleIcon) {
-    inlineTitleEl.parentElement.prepend(titleIcon);
+    if (
+      plugin.getSettings().iconInTitlePosition === IconInTitlePosition.Above
+    ) {
+      inlineTitleEl.parentElement.prepend(titleIcon);
+    } else if (
+      plugin.getSettings().iconInTitlePosition === IconInTitlePosition.Inline
+    ) {
+      inlineTitleEl.prepend(titleIcon);
+    }
   }
 };
 

diff --git a/src/settings/ui/toggleIconInTitle.ts b/src/settings/ui/toggleIconInTitle.ts
@@ -6,15 +6,55 @@ import titleIcon from '@lib/icon-title';
 import { InlineTitleView } from '@app/@types/obsidian';
 import { IconInTitlePosition } from '@app/settings/data';
 
+interface UpdateLeavesOptions {
+  /**
+   * Decides whether to enable or disable the icon in the title.
+   */
+  enabled: boolean;
+  /**
+   * If true, removes the icon of the title before re-adding it.
+   * Enabling this option is useful when the icon position is updated and therefore
+   * the DOM needs to be updated.
+   * @default false
+   */
+  removeBeforeReAdd?: boolean;
+}
+
 export default class ToggleIconInTitle extends IconFolderSetting {
   private dropdown: DropdownComponent;
 
+  private updateLeaves(options: UpdateLeavesOptions): void {
+    this.plugin.app.workspace.getLeavesOfType('markdown').forEach((leaf) => {
+      const view = leaf.view as InlineTitleView;
+      if (view instanceof MarkdownView) {
+        const foundIcon = icon.getIconByPath(this.plugin, view.file.path);
+
+        if (foundIcon && options.enabled) {
+          if (options.removeBeforeReAdd) {
+            // Remove the icon before re-adding it. This is needed to update the DOM because
+            // the icon node will be inserted in the beginning inline title node.
+            titleIcon.remove(view.contentEl);
+          }
+
+          const content =
+            typeof foundIcon === 'string' ? foundIcon : foundIcon.svgElement;
+          titleIcon.add(this.plugin, view.inlineTitleEl, content, {
+            fontSize: calculateInlineTitleSize(),
+          });
+        } else {
+          titleIcon.remove(view.contentEl);
+        }
+      }
+    });
+  }
+
   public display(): void {
     new Setting(this.containerEl)
       .setName('Toggle icon in title')
       .setDesc('Toggles the visibility of an icon above the title of a file.')
       .addDropdown((dropdown) => {
         this.dropdown = dropdown;
+        dropdown.setDisabled(!this.plugin.getSettings().iconInTitleEnabled);
         dropdown.addOptions({
           above: 'Above title',
           inline: 'Next to title',
@@ -24,6 +64,7 @@ export default class ToggleIconInTitle extends IconFolderSetting {
           this.plugin.getSettings().iconInTitlePosition =
             value as IconInTitlePosition;
           await this.plugin.saveIconFolderData();
+          this.updateLeaves({ enabled: true, removeBeforeReAdd: true });
         });
       })
       .addToggle((toggle) => {
@@ -36,31 +77,7 @@ export default class ToggleIconInTitle extends IconFolderSetting {
 
             this.plugin.getSettings().iconInTitleEnabled = enabled;
             await this.plugin.saveIconFolderData();
-
-            // Updates the already opened files.
-            this.plugin.app.workspace
-              .getLeavesOfType('markdown')
-              .forEach((leaf) => {
-                const view = leaf.view as InlineTitleView;
-                if (view instanceof MarkdownView) {
-                  const foundIcon = icon.getIconByPath(
-                    this.plugin,
-                    view.file.path,
-                  );
-
-                  if (foundIcon && enabled) {
-                    const content =
-                      typeof foundIcon === 'string'
-                        ? foundIcon
-                        : foundIcon.svgElement;
-                    titleIcon.add(this.plugin, view.inlineTitleEl, content, {
-                      fontSize: calculateInlineTitleSize(),
-                    });
-                  } else {
-                    titleIcon.hide(view.contentEl);
-                  }
-                }
-              });
+            this.updateLeaves({ enabled });
           });
       });
   }

diff --git a/src/styles.css b/src/styles.css
@@ -1,7 +1,9 @@
 .iconize-title-icon {
+  display: inline-block;
   max-width: var(--max-width);
   width: var(--line-width);
-  margin-inline: var(--content-margin) !important;
+  margin-right: var(--size-4-2);
+  transform: translateY(13%);
 }
 
 .iconize-icon-in-link {