From ca9b1556873ebc2c21c09897f784887c9af16173 Mon Sep 17 00:00:00 2001 From: yoyurec Date: Wed, 5 Oct 2022 22:20:12 +0300 Subject: [PATCH] feat(settings): nerd font feature toggeler --- src/css/awesomeLinks.css | 44 +----------------------------------- src/css/nerdFont.css | 40 +++++++++++++++++++++++++++++++++ src/js/awesomeLinks.ts | 27 +++++++--------------- src/js/modules/internal.ts | 1 + src/js/modules/nerdFont.ts | 46 ++++++++++++++++++++++++++++++++++++++ src/js/modules/settings.ts | 9 +++++++- 6 files changed, 104 insertions(+), 63 deletions(-) create mode 100644 src/css/nerdFont.css create mode 100644 src/js/modules/nerdFont.ts diff --git a/src/css/awesomeLinks.css b/src/css/awesomeLinks.css index e2a4533..05b664b 100644 --- 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; -} \ No newline at end of file +} diff --git a/src/css/nerdFont.css b/src/css/nerdFont.css new file mode 100644 index 0000000..61cab87 --- /dev/null +++ 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 +*/ \ No newline at end of file diff --git a/src/js/awesomeLinks.ts b/src/js/awesomeLinks.ts index 64478df..6500af9 100644 --- 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', ``) } - const tabsPluginIframe = doc.getElementById('logseq-tabs_iframe') as HTMLIFrameElement; - if (tabsPluginIframe) { - tabsPluginIframe.contentDocument?.head.insertAdjacentHTML( - 'beforeend', - `` - ); - } }, 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 index 084aeef..f297f02 100644 --- 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 new file mode 100644 index 0000000..3b2f364 --- /dev/null +++ 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', + `` + ); + } + 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 index 87b4290..bb9c84b 100644 --- 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, } ];