feat(settings): nerd font feature toggeler

yoyurec · Oct 5, 2022 · ca9b155 · ca9b155
1 parent a6ce775
commit ca9b155
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 63 deletions.
diff --git a/src/css/awesomeLinks.css b/src/css/awesomeLinks.css
@@ -1,16 +1,3 @@
-:root {
-    --icon-font: 'Fira Code Nerd Font', 'Fira Code', 'Fira Sans';
-}
-
-@font-face {
-    font-family: "Fira Code Nerd Font";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('/fonts/fira-code-nerd-regular.ttf') format('truetype');
-}
-
-
 /*
   >>> BEGIN: External links
 */
@@ -75,35 +62,6 @@ body:not(.is-banner-active).is-awesomeLinks-journal .is-journals h1.title::befor
 */
 
 
-/*
-  >>> BEGIN: Nerd icons
-*/
-.desc-item[data-key="featureJournalIcon"] .form-input,
-.page-icon,
-.is-icon-active .page>.relative>.flex-row>.flex-1::before {
-    font-family: var(--icon-font);
-}
-/*
-<<<< END: Nerd icons
-*/
-
-
-/*
->>> BEGIN: Props
-*/
-.pre-block > .flex-row .editor-wrapper textarea,
-.page-properties,
-.block-properties {
-    font-family: var(--icon-font);
-    font-size: 0.9rem;
-    letter-spacing: -1px;
-    word-spacing: -1px;
-}
-/*
-<<<< END: Props
-*/
-
-
 /*
 >>> BEGIN: Settings
 */
@@ -126,4 +84,4 @@ body:not(.is-banner-active).is-awesomeLinks-journal .is-journals h1.title::befor
 }
 .desc-item[data-key="promoAwesomeStyler"] .form-checkbox {
     display: none;
-}
+}
diff --git a/src/css/nerdFont.css b/src/css/nerdFont.css
@@ -0,0 +1,40 @@
+:root {
+    --icon-font: 'Fira Code Nerd Font', 'Fira Code', 'Fira Sans';
+}
+
+@font-face {
+    font-family: "Fira Code Nerd Font";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/fonts/fira-code-nerd-regular.ttf') format('truetype');
+}
+
+
+/*
+  >>> BEGIN: Nerd icons
+*/
+.desc-item[data-key="featureJournalIcon"] .form-input,
+.page-icon,
+.is-icon-active .page>.relative>.flex-row>.flex-1::before {
+    font-family: var(--icon-font);
+}
+/*
+<<<< END: Nerd icons
+*/
+
+
+/*
+>>> BEGIN: Props
+*/
+.pre-block > .flex-row .editor-wrapper textarea,
+.page-properties,
+.block-properties {
+    font-family: var(--icon-font);
+    font-size: 0.9rem;
+    letter-spacing: -1px;
+    word-spacing: -1px;
+}
+/*
+<<<< END: Props
+*/
diff --git a/src/js/awesomeLinks.ts b/src/js/awesomeLinks.ts
@@ -4,10 +4,11 @@ import { LSPluginBaseInfo } from '@logseq/libs/dist/LSPlugin.user';
 import { settingsConfig } from './modules/settings'
 
 import globalContext from './modules/globals';
-import { doc, body, getDOMContainers as setDOMContainers } from './modules/DOMContainers';
+import { doc, body, getDOMContainers } from './modules/DOMContainers';
 import { objectDiff } from './modules/utils';
 
 import { pageIconsLoad, pageIconsUnload, toggleIconsFeature } from './modules/internal';
+import { nerdFontLoad, nerdFontUnload, toggleNerdFonFeature } from './modules/internal';
 import { faviconsLoad, faviconsUnload, toggleFaviconsFeature } from './modules/internal';
 import { journalIconsLoad, journalIconsUnload, toggleJournalIconFeature } from './modules/internal';
 import { stopLinksObserver, runLinksObserver, initLinksObserver } from './modules/internal';
@@ -19,32 +20,16 @@ const registerPlugin = async () => {
         if (doc.head) {
             doc.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" id="css-awesomeLinks" href="lsp://logseq.io/${globalContext.pluginID}/dist/assets/awesomeLinks.css">`)
         }
-        const tabsPluginIframe = doc.getElementById('logseq-tabs_iframe') as HTMLIFrameElement;
-        if (tabsPluginIframe) {
-            tabsPluginIframe.contentDocument?.head.insertAdjacentHTML(
-                'beforeend',
-                `<style>
-                    @font-face {
-                        font-family: "Fira Code Nerd Font";
-                        font-style: normal;
-                        font-weight: 400;
-                        src: url('lsp://logseq.io/${globalContext.pluginID}/dist/fonts/fira-code-nerd-regular.ttf') format('truetype');
-                    }
-                    .logseq-tab .text-xs {
-                        font-family: "Fira Code Nerd Font";
-                    }
-                </style>`
-            );
-        }
     }, 500);
 }
 
 // Main logic runners
 const runStuff = async () => {
     initLinksObserver();
-    setDOMContainers();
+    getDOMContainers();
     setTimeout(() => {
         pageIconsLoad();
+        nerdFontLoad();
         faviconsLoad();
         journalIconsLoad();
         if (globalContext.pluginConfig?.featureFaviconsEnabled || globalContext.pluginConfig?.featurePageIconsEnabled) {
@@ -55,6 +40,7 @@ const runStuff = async () => {
 }
 const stopStuff = () => {
     pageIconsUnload();
+    nerdFontUnload();
     faviconsUnload();
     journalIconsUnload();
     stopLinksObserver();
@@ -88,6 +74,9 @@ const onSettingsChangedCallback = (settings: LSPluginBaseInfo['settings'], oldSe
     if (settingsDiff.includes('featureJournalIcon')) {
         toggleJournalIconFeature();
     }
+    if (settingsDiff.includes('featureNerdFontEnabled')) {
+        toggleNerdFonFeature();
+    }
 }
 
 // Plugin unloaded

diff --git a/src/js/modules/internal.ts b/src/js/modules/internal.ts
@@ -1,6 +1,7 @@
 export * from './linksObserver';
 
 export * from './pageIcons';
+export * from './nerdFont';
 export * from './journalIcons';
 export * from './favIcons';
 export * from './titleIcon';
diff --git a/src/js/modules/nerdFont.ts b/src/js/modules/nerdFont.ts
@@ -0,0 +1,46 @@
+import globalContext from './globals';
+import { doc } from './DOMContainers';
+
+import nerdFontsStyles from '../../css/nerdFont.css?inline';
+
+export const toggleNerdFonFeature = () => {
+    if (globalContext.pluginConfig?.featureNerdFontEnabled) {
+        nerdFontLoad();
+    } else {
+        nerdFontUnload();
+    }
+}
+
+export const nerdFontLoad = () => {
+    if (!globalContext.pluginConfig?.featureNerdFontEnabled) {
+        return;
+    }
+    setTimeout(() => {
+        const tabsPluginIframe = doc.getElementById('logseq-tabs_iframe') as HTMLIFrameElement;
+        if (tabsPluginIframe) {
+            tabsPluginIframe.contentDocument?.head.insertAdjacentHTML(
+                'beforeend',
+                `<style id="awesomeLinks">
+                    @font-face {
+                        font-family: "Fira Code Nerd Font";
+                        font-style: normal;
+                        font-weight: 400;
+                        src: url('lsp://logseq.io/${globalContext.pluginID}/dist/fonts/fira-code-nerd-regular.ttf') format('truetype');
+                    }
+                    .logseq-tab .text-xs {
+                        font-family: "Fira Code Nerd Font";
+                    }
+                </style>`
+            );
+        }
+        logseq.provideStyle({ key: 'awLi-nerd-font-css', style: nerdFontsStyles });
+    }, 1000)
+}
+
+export const nerdFontUnload = () => {
+    const tabsPluginIframe = doc.getElementById('logseq-tabs_iframe') as HTMLIFrameElement;
+    if (tabsPluginIframe) {
+        tabsPluginIframe.contentDocument?.getElementById('awesomeLinks')?.remove();
+    }
+    doc.head.querySelector(`style[data-injected-style="awLi-nerd-font-css-${globalContext.pluginID}"]`)?.remove();
+}
diff --git a/src/js/modules/settings.ts b/src/js/modules/settings.ts
@@ -32,8 +32,15 @@ export const settingsConfig: SettingSchemaDesc[] = [
     {
         key: 'featureJournalIcon',
         title: '',
-        description: 'Journal item icon: emoji or Nerd icon (https://www.nerdfonts.com/cheat-sheet). Delete value to disable feature',
+        description: 'Journal item icon: emoji or Nerd icon. Delete value to disable feature',
         type: 'string',
         default: '',
+    },
+    {
+        key: 'featureNerdFontEnabled',
+        title: '',
+        description: 'Enable Nerd font with tons of icons (https://www.nerdfonts.com/cheat-sheet)',
+        type: 'boolean',
+        default: true,
     }
 ];