diff --git a/mods/topbar-icons/icons/favorite_off.svg b/mods/topbar-icons/icons/favorite_off.svg new file mode 100644 index 0000000..713f7dd --- /dev/null +++ b/mods/topbar-icons/icons/favorite_off.svg @@ -0,0 +1,5 @@ + + + diff --git a/mods/topbar-icons/icons/favorite_on.svg b/mods/topbar-icons/icons/favorite_on.svg new file mode 100644 index 0000000..721e0e1 --- /dev/null +++ b/mods/topbar-icons/icons/favorite_on.svg @@ -0,0 +1,3 @@ + + + diff --git a/mods/topbar-icons/icons/share.svg b/mods/topbar-icons/icons/share.svg new file mode 100644 index 0000000..384df7c --- /dev/null +++ b/mods/topbar-icons/icons/share.svg @@ -0,0 +1,6 @@ + + + diff --git a/mods/topbar-icons/icons/updates_off.svg b/mods/topbar-icons/icons/updates_off.svg new file mode 100644 index 0000000..67c3ed9 --- /dev/null +++ b/mods/topbar-icons/icons/updates_off.svg @@ -0,0 +1,3 @@ + + + diff --git a/mods/topbar-icons/icons/updates_on.svg b/mods/topbar-icons/icons/updates_on.svg new file mode 100644 index 0000000..70bed27 --- /dev/null +++ b/mods/topbar-icons/icons/updates_on.svg @@ -0,0 +1,3 @@ + + + diff --git a/mods/topbar-icons/mod.js b/mods/topbar-icons/mod.js new file mode 100644 index 0000000..237129d --- /dev/null +++ b/mods/topbar-icons/mod.js @@ -0,0 +1,122 @@ +/* + * topbar icons + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +'use strict'; + +const { createElement } = require('../../pkg/helpers.js'), + path = require('path'), + fs = require('fs-extra'); + +module.exports = { + id: 'e0700ce3-a9ae-45f5-92e5-610ded0e348d', + tags: ['extension'], + name: 'topbar icons', + desc: + 'replaces the topbar buttons with icons.', + options: [ + { + key: 'share', + label: 'share', + type: 'toggle', + value: true, + }, + { + key: 'updates', + label: 'updates', + type: 'toggle', + value: true, + }, + { + key: 'favorite', + label: 'favorite', + type: 'toggle', + value: true, + }, + ], + version: '1.0.0', + author: 'CloudHill', + hacks: { + 'renderer/preload.js'(store, __exports) { + const icons = { + selected: [ + ...(store().updates ? ['updates'] : []), + ...(store().favorite ? ['favorite'] : []), + ], + share: fs.readFile(path.resolve(`${__dirname}/icons/share.svg`)), + updates: { + on: fs.readFile(path.resolve(`${__dirname}/icons/updates_on.svg`)), + off: fs.readFile(path.resolve(`${__dirname}/icons/updates_off.svg`)), + }, + favorite: { + on: fs.readFile(path.resolve(`${__dirname}/icons/favorite_on.svg`)), + off: fs.readFile(path.resolve(`${__dirname}/icons/favorite_off.svg`)), + }, + }; + + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + const attempt_interval = setInterval(enhance, 500); + function enhance() { + if (!document.querySelector('.notion-topbar-actions')) return; + clearInterval(attempt_interval); + + setIcons(document.querySelector('.notion-topbar-actions')); + + let queue = []; + const observer = new MutationObserver((list, observer) => { + if (!queue.length) requestAnimationFrame(() => process(queue)); + queue.push(...list); + }); + observer.observe(document.body, { + childList: true, + subtree: true, + }); + + function process(list) { + queue = []; + for (let { addedNodes } of list) { + if ( + addedNodes[0] && + addedNodes[0].className === 'notion-page-content' && + document.querySelector('.notion-peek-renderer') + ) { + const $topbarButtons = document.querySelector( + '.notion-peek-renderer .notion-topbar-share-menu' + ).parentElement; + + if ($topbarButtons.className == 'notion-topbar-actions') return; + $topbarButtons.className = 'notion-topbar-actions'; + setIcons($topbarButtons); + } + } + } + + async function setIcons(buttons) { + const buttonList = buttons.children; + if (store().share) { + buttonList[0].classList.add('notion-topbar-icon'); + buttonList[0].innerHTML = await icons.share; + } + const elements = { + updates: buttonList[1], + favorite: buttonList[2], + }; + for (let btn of icons.selected) { + elements[btn].classList.add('notion-topbar-icon') + elements[btn].prepend( + createElement( + `
${(await icons[btn].off).toString()} + ${(await icons[btn].on).toString()}
` + ) + ); + } + } + } + }); + }, + }, +}; diff --git a/mods/topbar-icons/styles.css b/mods/topbar-icons/styles.css new file mode 100644 index 0000000..3559111 --- /dev/null +++ b/mods/topbar-icons/styles.css @@ -0,0 +1,28 @@ +/* + * topbar icons + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +.notion-topbar-icon { + width: 32px; + padding: 0 7px !important; +} + +.notion-topbar-icon:not(:first-child) > *:not(div) { + display: none !important; +} + +.notion-topbar-icon > div, +.notion-topbar-icon svg { + width: 18px; + height: 18px; +} + +.notion-topbar-icon[style*="padding-left: 8px"] > div > :last-child { + display: none; +} +.notion-topbar-icon[style*="padding-left: 6px"] > div > :first-child { + display: none; +}