mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-10 15:39:01 +00:00
fix(menu): close select popups w/ esc, toggle menu w/ hotkeys while menu focused
This commit is contained in:
parent
e681d462d3
commit
570a6f26ab
@ -54,6 +54,7 @@ export default async (api, db) => {
|
|||||||
_notionTheme = notionTheme;
|
_notionTheme = notionTheme;
|
||||||
const msg = {
|
const msg = {
|
||||||
namespace: "notion-enhancer",
|
namespace: "notion-enhancer",
|
||||||
|
hotkey: openMenuHotkey,
|
||||||
theme: notionTheme,
|
theme: notionTheme,
|
||||||
icon: menuButtonIconStyle,
|
icon: menuButtonIconStyle,
|
||||||
};
|
};
|
||||||
@ -129,6 +130,11 @@ export default async (api, db) => {
|
|||||||
document.querySelector(notionSidebar)?.append($menuButton);
|
document.querySelector(notionSidebar)?.append($menuButton);
|
||||||
|
|
||||||
window.addEventListener("focus", () => updateTheme(true));
|
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", () => {
|
addMutationListener("body", () => {
|
||||||
if ($menuModal?.hasAttribute("open")) updateTheme();
|
if ($menuModal?.hasAttribute("open")) updateTheme();
|
||||||
});
|
});
|
||||||
|
@ -492,6 +492,7 @@ function Select({ values, _get, _set, ...props }) {
|
|||||||
$select.onclick = (event) => {
|
$select.onclick = (event) => {
|
||||||
onclick?.(event);
|
onclick?.(event);
|
||||||
$popup.setAttribute("open", true);
|
$popup.setAttribute("open", true);
|
||||||
|
setState({ popupOpen: true });
|
||||||
};
|
};
|
||||||
useState(["rerender"], () => {
|
useState(["rerender"], () => {
|
||||||
_get?.().then((value) => {
|
_get?.().then((value) => {
|
||||||
@ -503,10 +504,16 @@ function Select({ values, _get, _set, ...props }) {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$select.style.width = "";
|
$select.style.width = "";
|
||||||
$select.style.background = "";
|
$select.style.background = "";
|
||||||
|
setState({ popupOpen: false });
|
||||||
}, 200);
|
}, 200);
|
||||||
} else $select.innerText = value;
|
} 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">
|
return html`<div class="notion-enhancer--menu-select relative">
|
||||||
${$select}${$popup}
|
${$select}${$popup}
|
||||||
|
@ -165,13 +165,33 @@ const render = async () => {
|
|||||||
window.addEventListener("focus", () => setState({ rerender: true }));
|
window.addEventListener("focus", () => setState({ rerender: true }));
|
||||||
window.addEventListener("message", (event) => {
|
window.addEventListener("message", (event) => {
|
||||||
if (event.data?.namespace !== "notion-enhancer") return;
|
if (event.data?.namespace !== "notion-enhancer") return;
|
||||||
const [theme, icon] = getState(["theme", "icon"]);
|
const [hotkey, theme, icon] = getState(["hotkey", "theme", "icon"]);
|
||||||
setState({
|
setState({
|
||||||
rerender: true,
|
rerender: true,
|
||||||
|
hotkey: event.data?.hotkey ?? hotkey,
|
||||||
theme: event.data?.theme ?? theme,
|
theme: event.data?.theme ?? theme,
|
||||||
icon: event.data?.icon ?? icon,
|
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]) => {
|
useState(["theme"], ([theme]) => {
|
||||||
if (theme === "dark") document.body.classList.add("dark");
|
if (theme === "dark") document.body.classList.add("dark");
|
||||||
if (theme === "light") document.body.classList.remove("dark");
|
if (theme === "light") document.body.classList.remove("dark");
|
||||||
|
Loading…
Reference in New Issue
Block a user