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

fix(menu): close select popups w/ esc, toggle menu w/ hotkeys while menu focused

Browse Source
This commit is contained in:
dragonwocky 2023-01-15 15:57:15 +11:00
parent e681d462d3
commit 570a6f26ab
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
3 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/client.mjs
View File

@ -54,6 +54,7 @@ export default async (api, db) => {
_notionTheme = notionTheme;
const msg = {
namespace: "notion-enhancer",
hotkey: openMenuHotkey,
theme: notionTheme,
icon: menuButtonIconStyle,
};
@ -129,6 +130,11 @@ export default async (api, db) => {
document.querySelector(notionSidebar)?.append($menuButton);
window.addEventListener("focus", () => updateTheme(true));
window.addEventListener("message", (event) => {
if (event.data?.namespace !== "notion-enhancer") return;
if (event.data?.action === "close-menu") closeMenu();
if (event.data?.action === "open-menu") openMenu();
});
addMutationListener("body", () => {
if ($menuModal?.hasAttribute("open")) updateTheme();
});

7
src/core/menu/components.mjs
View File

@ -492,6 +492,7 @@ function Select({ values, _get, _set, ...props }) {
$select.onclick = (event) => {
onclick?.(event);
$popup.setAttribute("open", true);
setState({ popupOpen: true });
};
useState(["rerender"], () => {
_get?.().then((value) => {
@ -503,10 +504,16 @@ function Select({ values, _get, _set, ...props }) {
setTimeout(() => {
$select.style.width = "";
$select.style.background = "";
setState({ popupOpen: false });
}, 200);
} else $select.innerText = value;
});
});
document.addEventListener("click", (event) => {
if (!$popup.hasAttribute("open")) return;
if ($popup.contains(event.target) || event.target === $select) return;
_set?.($select.innerText);
});
return html`<div class="notion-enhancer--menu-select relative">
${$select}${$popup}

22
src/core/menu/menu.mjs
View File

@ -165,13 +165,33 @@ const render = async () => {
window.addEventListener("focus", () => setState({ rerender: true }));
window.addEventListener("message", (event) => {
if (event.data?.namespace !== "notion-enhancer") return;
const [theme, icon] = getState(["theme", "icon"]);
const [hotkey, theme, icon] = getState(["hotkey", "theme", "icon"]);
setState({
rerender: true,
hotkey: event.data?.hotkey ?? hotkey,
theme: event.data?.theme ?? theme,
icon: event.data?.icon ?? icon,
});
});
useState(["hotkey"], ([hotkey]) => {
const { addKeyListener } = globalThis.__enhancerApi ?? {},
[hotkeyRegistered] = getState(["hotkeyRegistered"]);
if (!hotkey || !addKeyListener || hotkeyRegistered) return;
setState({ hotkeyRegistered: true });
addKeyListener(hotkey, (event) => {
event.preventDefault();
const msg = { namespace: "notion-enhancer", action: "open-menu" };
parent?.postMessage(msg, "*");
});
addKeyListener("Escape", () => {
const [popupOpen] = getState(["popupOpen"]);
if (!popupOpen) {
const msg = { namespace: "notion-enhancer", action: "close-menu" };
parent?.postMessage(msg, "*");
} else setState({ rerender: true });
});
});
useState(["theme"], ([theme]) => {
if (theme === "dark") document.body.classList.add("dark");
if (theme === "light") document.body.classList.remove("dark");