dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-09 15:09:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

observe topbar icons for in previews

Browse Source
This commit is contained in:
dragonwocky 2021-10-18 23:53:11 +11:00
parent d25d4f2f13
commit a9427f4520
1 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
repo/topbar-icons/client.mjs
View File

@ -10,48 +10,52 @@
export default async function ({ web, components }, db) { export default async function ({ web, components }, db) {
await web.whenReady(['.notion-topbar-action-buttons']); await web.whenReady(['.notion-topbar-action-buttons']);
if ((await db.get(['share'])) === true) { const observeButton = (selector, label = '') => {
const $share = document.querySelector('.notion-topbar-share-menu'); const updateButton = () => {
$share.innerHTML = await components.feather('share-2', { const $btns = document.querySelectorAll(selector);
style: 'width:16px;height:16px;color:var(--theme--icon);', $btns.forEach(($btn) => {
}); $btn.style.width = 'auto';
} $btn.style.fontSize = '14px';
$btn.style.lineHeight = '1.2';
const styleTextButton = ($btn) => { $btn.style.paddingLeft = '8px';
$btn.style.width = 'auto'; $btn.style.paddingRight = '8px';
$btn.style.fontSize = '14px'; const innerHTML = label || $btn.ariaLabel;
$btn.style.lineHeight = '1.2'; if ($btn.innerHTML !== innerHTML) $btn.innerHTML = innerHTML;
$btn.style.paddingLeft = '8px'; });
$btn.style.paddingRight = '8px'; };
web.addDocumentObserver(() => {
updateButton();
}, [selector]);
updateButton();
}; };
if ((await db.get(['share'])) === true) {
const selector = '.notion-topbar-share-menu',
label = await components.feather('share-2', {
style: 'width:16px;height:16px;color:var(--theme--icon);',
});
observeButton(selector, label);
}
if ((await db.get(['comments'])) === false) { if ((await db.get(['comments'])) === false) {
const $comments = document.querySelector('.notion-topbar-comments-button'); const selector = '.notion-topbar-comments-button';
styleTextButton($comments); observeButton(selector);
$comments.innerHTML = 'Comments';
} }
if ((await db.get(['updates'])) === false) { if ((await db.get(['updates'])) === false) {
const $updates = document.querySelector('.notion-topbar-updates-button'); const selector =
styleTextButton($updates); '.notion-topbar-updates-button, .notion-topbar-share-menu ~ [aria-label="Updates"]';
$updates.innerHTML = 'Updates'; observeButton(selector);
} }
if ((await db.get(['favorite'])) === false) { if ((await db.get(['favorite'])) === false) {
const $favorite = document.querySelector( const selector = '.notion-topbar-share-menu ~ [aria-label^="Fav"]';
'.notion-topbar-updates-button + [aria-label^="Fav"]' observeButton(selector);
);
styleTextButton($favorite);
$favorite.innerHTML = $favorite.ariaLabel;
$favorite.addEventListener('click', async () => {
await new Promise((res, rej) => requestAnimationFrame(res));
$favorite.innerHTML = $favorite.ariaLabel;
});
} }
if ((await db.get(['more'])) === false) { if ((await db.get(['more'])) === false) {
const $more = document.querySelector('.notion-topbar-more-button'); const selector = '.notion-topbar-more-button',
styleTextButton($more); label = 'More';
$more.innerHTML = 'More'; observeButton(selector, label);
} }
} }