62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
export default function EmbedInitIframe() {
|
|
if (typeof window === "undefined" || window.isEmbed) {
|
|
return;
|
|
}
|
|
|
|
const calEmbedMode = typeof new URL(document.URL).searchParams.get("embed") === "string";
|
|
|
|
/* Iframe Name */
|
|
window.name.includes("cal-embed");
|
|
|
|
window.isEmbed = () => {
|
|
// Once an embed mode always an embed mode
|
|
return calEmbedMode;
|
|
};
|
|
|
|
window.resetEmbedStatus = () => {
|
|
try {
|
|
// eslint-disable-next-line @calcom/eslint/avoid-web-storage
|
|
window.sessionStorage.removeItem("calEmbedMode");
|
|
} catch (e) {}
|
|
};
|
|
|
|
window.getEmbedTheme = () => {
|
|
const url = new URL(document.URL);
|
|
return url.searchParams.get("theme") as "light" | "dark" | null;
|
|
};
|
|
|
|
window.getEmbedNamespace = () => {
|
|
const url = new URL(document.URL);
|
|
const namespace = url.searchParams.get("embed");
|
|
return namespace;
|
|
};
|
|
|
|
window.CalEmbed = window.CalEmbed || {};
|
|
|
|
window.CalEmbed.applyCssVars = (cssVarsPerTheme) => {
|
|
const cssVarsStyle = [];
|
|
if (cssVarsPerTheme) {
|
|
for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
|
|
cssVarsStyle.push(`.${themeName} {`);
|
|
for (const [cssVarName, value] of Object.entries(cssVars)) {
|
|
// The styles are applied inline on .light/.dark elements by the codebase(useCalcomTheme). So, to make sure embed styles take precedence, we add !important
|
|
cssVarsStyle.push(`--${cssVarName}: ${value} !important;`);
|
|
}
|
|
cssVarsStyle.push(`}`);
|
|
}
|
|
}
|
|
|
|
const existingStyleEl = document.head.querySelector("#embed-css-vars") as HTMLStyleElement;
|
|
if (existingStyleEl) {
|
|
console.warn("Existing embed CSS Vars are being reset");
|
|
existingStyleEl.innerText = cssVarsStyle.join("\n");
|
|
return;
|
|
}
|
|
|
|
const style = document.createElement("style");
|
|
style.id = "embed-css-vars";
|
|
style.innerText = cssVarsStyle.join("\n");
|
|
document.head.appendChild(style);
|
|
};
|
|
}
|