72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
|
import { CalWindow } from "@calcom/embed-snippet";
|
||
|
|
|
||
|
|
import loaderCss from "../loader.css";
|
||
|
|
import modalBoxHtml from "./ModalBoxHtml";
|
||
|
|
|
||
|
|
export class ModalBox extends HTMLElement {
|
||
|
|
static htmlOverflow: string;
|
||
|
|
//@ts-ignore
|
||
|
|
static get observedAttributes() {
|
||
|
|
return ["state"];
|
||
|
|
}
|
||
|
|
|
||
|
|
show(show: boolean) {
|
||
|
|
// We can't make it display none as that takes iframe width and height calculations to 0
|
||
|
|
(this.shadowRoot!.host as unknown as any).style.visibility = show ? "visible" : "hidden";
|
||
|
|
if (!show) {
|
||
|
|
document.body.style.overflow = ModalBox.htmlOverflow;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
close() {
|
||
|
|
this.show(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
|
||
|
|
if (name !== "state") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (newValue == "loaded") {
|
||
|
|
(this.shadowRoot!.querySelector("#loader")! as HTMLElement).style.display = "none";
|
||
|
|
} else if (newValue === "started") {
|
||
|
|
this.show(true);
|
||
|
|
} else if (newValue == "closed") {
|
||
|
|
this.show(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
const closeEl = this.shadowRoot!.querySelector(".close") as HTMLElement;
|
||
|
|
document.addEventListener(
|
||
|
|
"keydown",
|
||
|
|
(e) => {
|
||
|
|
if (e.key === "Escape") {
|
||
|
|
this.close();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
once: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
this.shadowRoot!.host.addEventListener("click", (e) => {
|
||
|
|
this.close();
|
||
|
|
});
|
||
|
|
|
||
|
|
closeEl.onclick = () => {
|
||
|
|
this.close();
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
const modalHtml = `<style>${
|
||
|
|
(window as CalWindow).Cal!.__css
|
||
|
|
}</style><style>${loaderCss}</style>${modalBoxHtml}`;
|
||
|
|
this.attachShadow({ mode: "open" });
|
||
|
|
ModalBox.htmlOverflow = document.body.style.overflow;
|
||
|
|
document.body.style.overflow = "hidden";
|
||
|
|
this.shadowRoot!.innerHTML = modalHtml;
|
||
|
|
}
|
||
|
|
}
|