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

feat(panel): disable panel if no views available

Browse Source
This commit is contained in:
dragonwocky 2023-08-16 00:22:20 +10:00
parent 463607c6d2
commit 319db04403
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
2 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/core/client.mjs
View File

@ -123,7 +123,7 @@ const insertPanel = async (api, db) => {
const notionFrame = ".notion-frame", const notionFrame = ".notion-frame",
notionTopbarBtn = ".notion-topbar-more-button", notionTopbarBtn = ".notion-topbar-more-button",
togglePanelHotkey = await db.get("togglePanelHotkey"), togglePanelHotkey = await db.get("togglePanelHotkey"),
{ html, setState, addPanelView } = api; { html, setState } = api;
const $panel = html`<${Panel} const $panel = html`<${Panel}
...${Object.assign( ...${Object.assign(
@ -162,6 +162,9 @@ const insertPanel = async (api, db) => {
if (panelOpen) $panelTopbarBtn.setAttribute("data-active", true); if (panelOpen) $panelTopbarBtn.setAttribute("data-active", true);
else $panelTopbarBtn.removeAttribute("data-active"); else $panelTopbarBtn.removeAttribute("data-active");
}); });
api.useState(["panelViews"], ([panelViews = []]) => {
$panelTopbarBtn.style.display = panelViews.length ? "" : "none";
});
appendToDom(); appendToDom();
api.addKeyListener(togglePanelHotkey, (event) => { api.addKeyListener(togglePanelHotkey, (event) => {

11
src/core/islands/Panel.mjs
View File

@ -58,7 +58,7 @@ function Switcher({ _get, _set, minWidth, maxWidth }) {
_set?.(view); _set?.(view);
setState({ activePanelView: view }); setState({ activePanelView: view });
}; };
useState(["panelViews"], ([panelViews]) => { useState(["panelViews"], ([panelViews = []]) => {
const values = panelViews.map(([{ title, $icon }]) => { const values = panelViews.map(([{ title, $icon }]) => {
// panel switcher internally uses the select island, // panel switcher internally uses the select island,
// which expects an option value rather than a title // which expects an option value rather than a title
@ -100,6 +100,7 @@ function Panel({
.notion-frame { .notion-frame {
flex-direction: row !important; flex-direction: row !important;
} }
/* prevent page load skeletons overlapping with panel */
.notion-frame [role="progressbar"] { .notion-frame [role="progressbar"] {
padding-right: var(--panel--width); padding-right: var(--panel--width);
} }
@ -212,6 +213,7 @@ function Panel({
repositionHelp(width); repositionHelp(width);
}; };
$panel.open = () => { $panel.open = () => {
if (!panelViews.length) return;
$panel.setAttribute("open", true); $panel.setAttribute("open", true);
$panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 0)); $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = 0));
setState({ panelOpen: true }); setState({ panelOpen: true });
@ -227,14 +229,15 @@ function Panel({
$panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = -1)); $panel.querySelectorAll("[tabindex]").forEach(($el) => ($el.tabIndex = -1));
$panel.resize(); $panel.resize();
setState({ panelOpen: false }); setState({ panelOpen: false });
_setOpen(false); if (panelViews.length) _setOpen(false);
setTimeout(() => { setTimeout(() => {
$panel.style.pointerEvents = ""; $panel.style.pointerEvents = "";
$panel.onclose?.(); $panel.onclose?.();
}, transitionDuration); }, transitionDuration);
}; };
_getOpen().then((open) => { useState(["panelViews"], async ([panelViews = []]) => {
if (open) $panel.open(); if (panelViews.length && (await _getOpen())) $panel.open();
else $panel.close();
}); });
return $panel; return $panel;
} }