mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-11 15:59:03 +00:00
96 lines
2.9 KiB
JavaScript
96 lines
2.9 KiB
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
function Frame(props) {
|
|
const { html, extendProps } = globalThis.__enhancerApi;
|
|
extendProps(props, {
|
|
class: `rounded-[5px] w-[1150px] h-[calc(100vh-100px)]
|
|
max-w-[calc(100vw-100px)] max-h-[715px] overflow-hidden
|
|
bg-[color:var(--theme--bg-primary)] drop-shadow-xl
|
|
group-open:(pointer-events-auto opacity-100 scale-100)
|
|
transition opacity-0 scale-95`,
|
|
});
|
|
return html`<iframe ...${props}></iframe>`;
|
|
}
|
|
|
|
function Modal(props, ...children) {
|
|
const { html, extendProps, addKeyListener } = globalThis.__enhancerApi;
|
|
extendProps(props, {
|
|
class: `notion-enhancer--menu-modal group
|
|
z-[999] fixed inset-0 w-screen h-screen
|
|
transition pointer-events-none opacity-0
|
|
open:(pointer-events-auto opacity-100)`,
|
|
});
|
|
const $modal = html`<div ...${props}>
|
|
<div
|
|
class="fixed inset-0 bg-[color:var(--theme--bg-overlay)]"
|
|
onclick=${() => $modal.close()}
|
|
></div>
|
|
<div
|
|
class="fixed inset-0 flex w-screen h-screen
|
|
items-center justify-center pointer-events-none"
|
|
>
|
|
${children}
|
|
</div>
|
|
</div>`;
|
|
$modal.open = () => {
|
|
$modal.setAttribute("open", "");
|
|
$modal.onopen?.();
|
|
};
|
|
$modal.close = () => {
|
|
$modal.onbeforeclose?.();
|
|
$modal.removeAttribute("open");
|
|
$modal.style.pointerEvents = "auto";
|
|
setTimeout(() => {
|
|
$modal.style.pointerEvents = "";
|
|
$modal.onclose?.();
|
|
}, 200);
|
|
};
|
|
addKeyListener("Escape", () => {
|
|
if (document.activeElement?.nodeName === "INPUT") return;
|
|
$modal.close();
|
|
});
|
|
return $modal;
|
|
}
|
|
|
|
function Button(
|
|
{ icon, notifications, themeOverridesLoaded, ...props },
|
|
...children
|
|
) {
|
|
const { html, extendProps } = globalThis.__enhancerApi;
|
|
extendProps(props, {
|
|
tabindex: 0,
|
|
role: "button",
|
|
class: `notion-enhancer--menu-button
|
|
flex select-none cursor-pointer rounded-[3px]
|
|
text-[14px] my-px mx-[4px] py-[2px] px-[10px]
|
|
transition hover:bg-[color:var(--theme--bg-hover)]`,
|
|
});
|
|
return html`<div ...${props}>
|
|
<div class="flex items-center justify-center w-[22px] h-[22px] mr-[8px]">
|
|
<i class="i-${icon}"></i>
|
|
</div>
|
|
<div>${children}</div>
|
|
|
|
<div class="ml-auto my-auto${notifications > 0 ? "" : " hidden"}">
|
|
<!-- accents are squashed into one variable for theming:
|
|
use rgb to match notion if overrides not loaded -->
|
|
<div
|
|
class="flex justify-center w-[16px] h-[16px] font-semibold
|
|
text-([10px] [color:var(--theme--accent-secondary\\_contrast)])
|
|
bg-[color:var(--theme--accent-secondary)] rounded-[3px] mb-[2px]
|
|
dark:bg-[color:${themeOverridesLoaded
|
|
? "var(--theme--accent-secondary)"
|
|
: "rgb(180,65,60)"}]"
|
|
>
|
|
<span class="ml-[-0.5px]">${notifications}</span>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
export { Frame, Modal, Button };
|