From ea30d012965aae796e1f2badf0eec06ad1254eb1 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Wed, 29 Sep 2021 11:55:03 +1000 Subject: [PATCH] menu breakpoints + reload notif + profile db in registry api --- extension/api/env.mjs | 2 +- extension/api/registry.mjs | 22 +++++----- .../menu.js | 2 +- .../menu.mjs | 40 ++++++++++++++----- extension/worker.js | 6 +-- 5 files changed, 47 insertions(+), 25 deletions(-) diff --git a/extension/api/env.mjs b/extension/api/env.mjs index 2d5dbe4..43297fc 100644 --- a/extension/api/env.mjs +++ b/extension/api/env.mjs @@ -37,7 +37,7 @@ export const openEnhancerMenu = () => export const focusNotion = () => chrome.runtime.sendMessage({ action: 'focusNotion' }); /** reload all notion and enhancer menu tabs to apply changes */ -export const reloadTabs = () => chrome.runtime.sendMessage({ action: 'reloadTabs' }); +export const reload = () => chrome.runtime.sendMessage({ action: 'reload' }); /** a notification displayed when the menu is opened for the first time */ export const welcomeNotification = { diff --git a/extension/api/registry.mjs b/extension/api/registry.mjs index 872affc..2a6215a 100644 --- a/extension/api/registry.mjs +++ b/extension/api/registry.mjs @@ -28,6 +28,12 @@ export const core = [ /** all available configuration types */ export const optionTypes = ['toggle', 'select', 'text', 'number', 'color', 'file']; +/** the root database for the current profile */ +export const profile = storage.db([ + 'profiles', + await storage.get(['currentprofile'], 'default'), +]); + /** * internally used to validate mod.json files and provide helpful errors * @private @@ -276,10 +282,7 @@ export const enabled = async (id) => { const mod = await get(id); if (!mod.environments.includes(env.name)) return false; if (core.includes(id)) return true; - return await storage.get( - ['profiles', await storage.get(['currentprofile'], 'default'), '_mods', id], - false - ); + return await profile.get(['_mods', id], false); }; /** @@ -312,13 +315,14 @@ export const optionDefault = async (id, key) => { */ export const db = async (id) => { return storage.db( - ['profiles', await storage.get(['currentprofile'], 'default'), id], + [id], async (path, fallback = undefined) => { - if (path.length === 4) { + if (path.length === 2) { // profiles -> profile -> mod -> option - fallback = (await optionDefault(id, path[3])) ?? fallback; + fallback = (await optionDefault(id, path[1])) ?? fallback; } - return storage.get(path, fallback); - } + return profile.get(path, fallback); + }, + profile.set ); }; diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js index 4de605a..d717714 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js @@ -265,7 +265,7 @@ const actionButtons = { reload tabs to apply changes `); - $reload.addEventListener('click', env.reloadTabs); + $reload.addEventListener('click', env.reload); $fragment.querySelector('.action--buttons').append($reload); await new Promise((res, rej) => requestAnimationFrame(res)); $reload.dataset.triggered = true; diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs index 149ab3a..4f6bd32 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs @@ -75,8 +75,13 @@ setup({ 'red': mapColorVariables('red'), }, extend: { + width: { + 'full-96': 'calc(100% - 24rem)', + }, maxHeight: { 'full-16': 'calc(100% - 4rem)', + 'full-32': 'calc(100% - 8rem)', + 'full-48': 'calc(100% - 12rem)', }, }, }, @@ -87,8 +92,7 @@ setup({ import * as api from '../../api/_.mjs'; import { render } from '../../api/web.mjs'; const { env, fmt, fs, registry, storage, web } = api, - db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'), - profile = await storage.get(['currentprofile'], 'default'); + db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'); web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion); @@ -141,6 +145,17 @@ const notifications = { if (['Enter', ' '].includes(event.key)) resolve(); }); web.render(notifications.$container, $notification); + return $notification; + }, + _changes: false, + changes() { + if (this._changes) return; + this._changes = true; + const $notification = this.add({ + icon: 'refresh-cw', + message: 'Reload to apply changes.', + }); + $notification.addEventListener('click', env.reload); }, }; render(document.body, notifications.$container); @@ -168,22 +183,24 @@ if (errors.length) { // mod config const $container = web.html`
`, - $nav = web.html``, - $main = web.html`
abc
`, + $nav = web.html``, + $main = web.html`
abc
`, // $footer = web.html``, $sidebar = web.html`
`; -const $notion = web.html`

+const notionNavStyle = tw`flex items-center font-semibold text-xl cursor-pointer select-none mr-4 + ml-4 sm:mb-4 md:w-full lg:(w-auto ml-0 mb-0)`, + $notion = web.html`

${(await fs.getText('icon/colour.svg')).replace( /width="\d+" height="\d+"/, - `class="${tw`h-6 w-6 mr-3`}"` + `class="${tw`h-12 w-12 mr-5 sm:(h-6 w-6 mr-3)`}"` )} notion-enhancer

`; $notion.children[0].addEventListener('click', env.focusNotion); -const navItemStyle = tw`px-3 py-2 rounded-md text-sm font-medium bg-interactive hover:bg-interactive-hover`, - selectedNavItemStyle = tw`px-3 py-2 rounded-md text-sm font-medium ring-1 ring-notion-divider bg-notion-secondary`; +const navItemStyle = tw`ml-4 px-3 py-2 rounded-md text-sm font-medium bg-interactive hover:bg-interactive-hover`, + selectedNavItemStyle = tw`ml-4 px-3 py-2 rounded-md text-sm font-medium ring-1 ring-notion-divider bg-notion-secondary`; const $coreNavItem = web.html`core`, $extensionsNavItem = web.html`extensions`, @@ -195,7 +212,7 @@ web.render( web.render( $container, web.render( - web.html`
`, + web.html`
`, web.render( $nav, $notion, @@ -285,12 +302,13 @@ components.mod = async (mod) => { customCheckStyle: 'ml-auto', }); $toggle.addEventListener('change', (event) => { - storage.set(['profiles', profile, '_mods', mod.id], event.target.checked); + registry.profile.set(['_mods', mod.id], event.target.checked); + notifications.changes(); }); const style = tw`relative h-full w-full flex flex-col overflow-hidden rounded-lg shadow-lg bg-notion-secondary border border-notion-divider`; return web.render( - web.html`
`, + web.html`
`, web.render( web.html`
`, mod.preview diff --git a/extension/worker.js b/extension/worker.js index 4268151..b9ead42 100644 --- a/extension/worker.js +++ b/extension/worker.js @@ -30,7 +30,7 @@ function focusNotion() { ); } -function reloadTabs() { +function reload() { chrome.tabs.query({ url: 'https://*.notion.so/*' }, (tabs) => { (tabs || []).forEach((tab) => chrome.tabs.reload(tab.id)); }); @@ -51,8 +51,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { case 'focusNotion': focusNotion(); break; - case 'reloadTabs': - reloadTabs(); + case 'reload': + reload(); break; } return true;