74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import m, { Children } from "mithril";
|
|
|
|
type OverlayCallback = () => Children;
|
|
type CloseCallback = () => boolean;
|
|
|
|
let overlayCallback: OverlayCallback = null;
|
|
let closeCallback: CloseCallback = null;
|
|
|
|
export function open(
|
|
callback: OverlayCallback,
|
|
closeCb: CloseCallback = null,
|
|
): void {
|
|
overlayCallback = callback;
|
|
closeCallback = closeCb;
|
|
}
|
|
|
|
export function close(callback: OverlayCallback, force = true): boolean {
|
|
if (callback === overlayCallback) {
|
|
if (!force && closeCallback && !closeCallback()) return false;
|
|
overlayCallback = null;
|
|
closeCallback = null;
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
export function render(): Children {
|
|
if (overlayCallback) {
|
|
return m(
|
|
".overlay-wrapper",
|
|
{
|
|
tabindex: 0,
|
|
onclick: () => {
|
|
close(overlayCallback, false);
|
|
},
|
|
style: "opacity: 0",
|
|
oncreate: (vnode) => {
|
|
(vnode.dom as HTMLDivElement).focus();
|
|
(vnode.dom as HTMLDivElement).style.opacity = "1";
|
|
},
|
|
onbeforeremove: (vnode) => {
|
|
(vnode.dom as HTMLDivElement).style.opacity = "0";
|
|
return new Promise<void>((resolve) => {
|
|
setTimeout(() => {
|
|
resolve();
|
|
}, 500);
|
|
});
|
|
},
|
|
},
|
|
m(
|
|
".overlay",
|
|
{
|
|
onclick: (e) => {
|
|
e.stopPropagation();
|
|
},
|
|
},
|
|
overlayCallback(),
|
|
),
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (overlayCallback && e.key === "Escape" && close(overlayCallback, false))
|
|
m.redraw();
|
|
});
|
|
|
|
window.addEventListener("popstate", () => {
|
|
if (close(overlayCallback, false)) m.redraw();
|
|
});
|