From 5860a4340e09ed27b362a2df5273f0211a8cd04d Mon Sep 17 00:00:00 2001 From: yoyurec Date: Thu, 13 Oct 2022 21:41:00 +0300 Subject: [PATCH] feat(page link): add coloring support via props --- README.md | 5 ++ src/awesomeLinks.ts | 6 +- src/modules/pageIcons/pageIcons.ts | 19 ++++-- src/modules/pageIcons/queries.ts | 95 +++++++++++++------------- src/modules/sidebarIcon/sidebarIcon.ts | 11 +-- src/modules/titleIcon/titleIcon.ts | 13 +++- 6 files changed, 86 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index a0ea066..152b963 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ * Inherit icons for cases when the prop is an alias * Inherit icons from hierarchy root item or it's props * Show inherited page icons on content links, sidebar, page title & tabs +* Page links color (with same inherit feature) * Page icons`icon::`extended from Emoji to hundreds icons set via Nerd fonts support 🡖 * Custom **Journal icons** 🡖 @@ -63,6 +64,10 @@ To disable icon for custom links - start link text with space: ![](https://github.com/yoyurec/logseq-awesome-links/raw/main/screenshots/page-icons.png) +### 🎨 Page colors + +To customize link color, add property (top page, to inherited page) `color::` with HEX value without hash `#` to not make it a tag!) + ### ✨ Custom page icons 3600+ icons combined from popular sets (Font Awesome, Material Design, SetiUI, etc...)! diff --git a/src/awesomeLinks.ts b/src/awesomeLinks.ts index 6bb7db7..d9fa02b 100644 --- a/src/awesomeLinks.ts +++ b/src/awesomeLinks.ts @@ -30,11 +30,13 @@ const runStuff = async () => { journalIconsLoad(); sidebarIconsLoad(); nerdFontLoad(); + body.classList.add('is-awesomeLinks'); + }, 1000) + setTimeout(() => { if (globalContext.pluginConfig?.featureFaviconsEnabled || globalContext.pluginConfig?.featurePageIconsEnabled) { runLinksObserver(); } - body.classList.add('is-awesomeLinks'); - }, 1000) + }, 3000) } const stopStuff = () => { pageIconsUnload(); diff --git a/src/modules/pageIcons/pageIcons.ts b/src/modules/pageIcons/pageIcons.ts index ff4733b..eaf251d 100644 --- a/src/modules/pageIcons/pageIcons.ts +++ b/src/modules/pageIcons/pageIcons.ts @@ -3,7 +3,7 @@ import { doc, body, setTitleIcon, removeTitleIcon, stopLinksObserver, - searchIcon + searchProps } from '../internal'; import './pageIcons.css'; @@ -13,8 +13,6 @@ export const setPageIcons = async (linkList?: NodeListOf) => linkList = doc.querySelectorAll(globalContext.pageLinksSelector); } for (let i = 0; i < linkList.length; i++) { - let pageIcon = ''; - let pageTitle = ''; const linkItem = linkList[i]; const oldPageIcon = linkItem.querySelector('.page-icon.awLinks-page-icon'); if (oldPageIcon) { @@ -24,13 +22,20 @@ export const setPageIcons = async (linkList?: NodeListOf) => if (linkText && linkText.startsWith(' ')) { continue; } - pageTitle = linkItem.getAttribute('data-ref') || ''; + const pageTitle = linkItem.getAttribute('data-ref') || ''; if (!pageTitle) { continue; } - pageIcon = await searchIcon(pageTitle); - if (pageIcon) { - linkItem.insertAdjacentHTML('afterbegin', `${pageIcon}`); + const pageProps = await searchProps(pageTitle); + if (pageProps) { + const pageIcon = pageProps['icon']; + if (pageIcon) { + linkItem.insertAdjacentHTML('afterbegin', `${pageIcon}`); + const pageColor = pageProps['color']; + if (pageColor) { + linkItem.style.color = `#${pageColor}`; + } + } } } body.classList.add('is-awesomeLinks-int'); diff --git a/src/modules/pageIcons/queries.ts b/src/modules/pageIcons/queries.ts index 4ba6c92..4cb2165 100644 --- a/src/modules/pageIcons/queries.ts +++ b/src/modules/pageIcons/queries.ts @@ -1,16 +1,19 @@ import '@logseq/libs'; import { globalContext } from '../internal'; -export const getPageIcon = async (title: string) => { - let pageIcon = ''; +interface propsObject { + [key: string]: string; +} + +export const getPageProps = async (title: string): Promise => { + let pageProps: propsObject = {}; title = title.toLowerCase(); const iconQuery = ` [ - :find ?icon + :find ?props :where [?id :block/name "${title}"] - [?id :block/properties ?prop] - [(get ?prop :icon) ?icon] + [?id :block/properties ?props] ] `; const journalQuery = ` @@ -25,14 +28,14 @@ export const getPageIcon = async (title: string) => { if (isJournal.length && isJournal[0][0] && globalContext.pluginConfig?.featureJournalIcon) { return globalContext.pluginConfig?.featureJournalIcon; } - const pageIconArr = await logseq.DB.datascriptQuery(iconQuery); - if (pageIconArr.length) { - pageIcon = pageIconArr[0]; + const queryResultArr = await logseq.DB.datascriptQuery(iconQuery); + if (queryResultArr.length) { + pageProps = queryResultArr[0][0]; } - return pageIcon; + return pageProps; } -export const getInheritedPropsTitle = async (title: string, prop: string) => { +export const getInheritedPropsTitle = async (title: string, prop: string): Promise => { title = title.toLowerCase(); let inheritedPageTitle = ''; const inheritedTitleQuery = ` @@ -51,7 +54,7 @@ export const getInheritedPropsTitle = async (title: string, prop: string) => { return inheritedPageTitle; } -export const getAliasedPageTitle = async (title: string) => { +export const getAliasedPageTitle = async (title: string): Promise => { title = title.toLowerCase(); let aliasedPageTitle = ''; const inheritedAliasQuery = ` @@ -70,71 +73,69 @@ export const getAliasedPageTitle = async (title: string) => { return aliasedPageTitle; } -export const searchIcon = async (pageTitle: string): Promise => { +export const searchProps = async (pageTitle: string): Promise => { // get from page - let pageIcon = await getPageIcon(pageTitle); - if (!pageIcon) { + let pageProps = await getPageProps(pageTitle); + let resultedPageProps = { ...pageProps }; + if (!pageProps['icon']) { // get from aliased page - pageIcon = await getAliasedPageIcon(pageTitle); - if (!pageIcon && globalContext.pluginConfig?.featureInheritPageIcons) { + pageProps = await getAliasedPageProps(pageTitle); + resultedPageProps = { ...pageProps, ...resultedPageProps }; + if (!pageProps['icon'] && globalContext.pluginConfig?.featureInheritPageIcons) { // inherited from page props, when props linked to page - pageIcon = await getInheritedPropsIcon(pageTitle); - if (!pageIcon) { + pageProps = await getInheritedPropsProps(pageTitle); + resultedPageProps = { ...pageProps, ...resultedPageProps }; + if (!pageProps['icon']) { // inherited from aliased page props, when props linked to page - pageIcon = await getAliasedPropsIcon(pageTitle); - if (!pageIcon && pageTitle.includes('/')) { + pageProps = await getAliasedPropsProps(pageTitle); + resultedPageProps = { ...pageProps, ...resultedPageProps }; + if (!pageProps['icon'] && pageTitle.includes('/')) { // inherit from hierarchy root - pageIcon = await getHierarchyPageIcon(pageTitle); + pageProps = await getHierarchyPageProps(pageTitle); + resultedPageProps = { ...pageProps, ...resultedPageProps }; } } - // if (!pageIcon) { - // // inherited from page props, when props linked to aliased - // const aliasedPageTitle = await getAliasedPageTitle(inheritedPropsTitle); - // if (aliasedPageTitle) { - // pageIcon = await getPageIcon(aliasedPageTitle); - // } - // } } } - return pageIcon; + return resultedPageProps; } -export const getHierarchyPageIcon = async (pageTitle: string): Promise => { - let pageIcon = ''; +export const getHierarchyPageProps = async (pageTitle: string): Promise => { + let pageProps: propsObject = {}; pageTitle = pageTitle.split('/')[0]; - pageIcon = await getPageIcon(pageTitle); - if (!pageIcon) { - pageIcon = await getInheritedPropsIcon(pageTitle); + pageProps = await getPageProps(pageTitle); + if (!pageProps['icon']) { + pageProps = await getInheritedPropsProps(pageTitle); } - return pageIcon; + return pageProps; } -export const getAliasedPageIcon = async (pageTitle: string): Promise => { - let pageIcon = ''; +export const getAliasedPageProps = async (pageTitle: string): Promise => { + let pageProps: propsObject = {}; const aliasedPageTitle = await getAliasedPageTitle(pageTitle); if (aliasedPageTitle) { - pageIcon = await getPageIcon(aliasedPageTitle); + pageProps = await getPageProps(aliasedPageTitle); } - return pageIcon; + return pageProps; } -export const getInheritedPropsIcon = async (pageTitle: string): Promise => { - let pageIcon = ''; +export const getInheritedPropsProps = async (pageTitle: string): Promise => { + let pageProps: propsObject = {}; const inheritedPropsTitle = await getInheritedPropsTitle(pageTitle, globalContext.pluginConfig?.featureInheritPageIcons); if (inheritedPropsTitle) { - pageIcon = await getPageIcon(inheritedPropsTitle); + pageProps = await getPageProps(inheritedPropsTitle); } - return pageIcon; + return pageProps; } -export const getAliasedPropsIcon = async (pageTitle: string): Promise => { - let pageIcon = ''; +export const getAliasedPropsProps = async (pageTitle: string): Promise => { + let pageProps: propsObject = {}; const aliasedPageTitle = await getAliasedPageTitle(pageTitle); if (aliasedPageTitle) { const inheritedPageTitle = await getInheritedPropsTitle(aliasedPageTitle, globalContext.pluginConfig?.featureInheritPageIcons); if (inheritedPageTitle) { - pageIcon = await getPageIcon(inheritedPageTitle); + pageProps = await getPageProps(inheritedPageTitle); } } - return pageIcon; + return pageProps; } diff --git a/src/modules/sidebarIcon/sidebarIcon.ts b/src/modules/sidebarIcon/sidebarIcon.ts index 5542cd8..7e6ec58 100644 --- a/src/modules/sidebarIcon/sidebarIcon.ts +++ b/src/modules/sidebarIcon/sidebarIcon.ts @@ -1,6 +1,6 @@ import { doc, - searchIcon + searchProps } from '../internal'; import './sidebarIcon.css'; @@ -19,9 +19,12 @@ export const setSidebarIcons = async (sidebarLinksList?: NodeListOf${pageIcon}`); + const pageProps = await searchProps(pageTitle); + if (pageProps) { + const pageIcon = pageProps['icon']; + if (pageIcon) { + sidebarLinkItem.insertAdjacentHTML('afterbegin', `${pageIcon}`); + } } } } diff --git a/src/modules/titleIcon/titleIcon.ts b/src/modules/titleIcon/titleIcon.ts index ab8232c..d3020ed 100644 --- a/src/modules/titleIcon/titleIcon.ts +++ b/src/modules/titleIcon/titleIcon.ts @@ -1,6 +1,6 @@ import { doc, - getHierarchyPageIcon, getInheritedPropsIcon + getHierarchyPageProps, getInheritedPropsProps } from '../internal'; import './titleIcon.css'; @@ -9,13 +9,20 @@ export const setTitleIcon = async (pageTitleEl?: Element | null) => { if (!pageTitleEl) { pageTitleEl = doc.querySelector('.ls-page-title'); } + let titleIcon = ''; if (pageTitleEl && !pageTitleEl.querySelector('.page-icon')) { const pageName = pageTitleEl.textContent; if (pageName) { - let titleIcon = await getInheritedPropsIcon(pageName); + let titleProps = await getInheritedPropsProps(pageName); + if (titleProps) { + titleIcon = titleProps['icon']; + } if (!titleIcon && pageName.includes('/')) { // inherit from hierarchy root - titleIcon = await getHierarchyPageIcon(pageName); + titleProps = await getHierarchyPageProps(pageName); + if (titleProps) { + titleIcon = titleProps['icon']; + } } if (titleIcon) { pageTitleEl.insertAdjacentHTML('afterbegin', `${titleIcon}`);