Skip to content

Commit 235ec0e

Browse files
oscard0mhariombalhara
oscard0m
and
hariombalhara
authored
improve typing by removing as html element (#7212)
* refactor(embeds): use generic HTMLIFrameElement instead of 'as HTMLIFrameElement' * refactor(embeds): improve types for floatingButton logic * Fix floating button popup not working --------- Co-authored-by: Hariom Balhara <[email protected]>
1 parent ea73870 commit 235ec0e

File tree

7 files changed

+46
-34
lines changed

7 files changed

+46
-34
lines changed

‎packages/embeds/embed-core/playwright/lib/testUtils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Page, Frame, test, expect } from "@playwright/test";
1+
import type { Page, Frame } from "@playwright/test";
2+
import { test, expect } from "@playwright/test";
23

34
import prisma from "@calcom/prisma";
45

@@ -38,7 +39,7 @@ export const getEmbedIframe = async ({ page, pathname }: { page: Page; pathname:
3839
const iframeReady = await page.evaluate(() => {
3940
return new Promise((resolve) => {
4041
const interval = setInterval(() => {
41-
const iframe = document.querySelector(".cal-embed") as HTMLIFrameElement | null;
42+
const iframe = document.querySelector<HTMLIFrameElement>(".cal-embed");
4243
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
4344
// @ts-ignore
4445
if (iframe && iframe.contentWindow && window.iframeReady) {

‎packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,31 @@ export class FloatingButton extends HTMLElement {
2222

2323
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
2424
if (name === "data-button-text") {
25-
const buttonEl = this.shadowRoot?.querySelector("#button");
25+
const buttonEl = this.shadowRoot?.querySelector<HTMLElement>("#button");
2626
if (!buttonEl) {
2727
throw new Error("Button not found");
2828
}
2929
buttonEl.innerHTML = newValue;
3030
} else if (name === "data-hide-button-icon") {
31-
const buttonIconEl = this.shadowRoot?.querySelector("#button-icon") as HTMLElement;
31+
const buttonIconEl = this.shadowRoot?.querySelector<HTMLElement>("#button-icon");
3232
if (!buttonIconEl) {
3333
throw new Error("Button not found");
3434
}
3535
buttonIconEl.style.display = newValue == "true" ? "none" : "block";
3636
} else if (name === "data-button-position") {
37-
const buttonEl = this.shadowRoot?.querySelector("button") as HTMLElement;
37+
const buttonEl = this.shadowRoot?.querySelector<HTMLElement>("button");
3838
if (!buttonEl) {
3939
throw new Error("Button not found");
4040
}
4141
buttonEl.className = FloatingButton.updatedClassString(newValue, buttonEl.className);
4242
} else if (name === "data-button-color") {
43-
const buttonEl = this.shadowRoot?.querySelector("button") as HTMLElement;
43+
const buttonEl = this.shadowRoot?.querySelector<HTMLElement>("button");
4444
if (!buttonEl) {
4545
throw new Error("Button not found");
4646
}
4747
buttonEl.style.backgroundColor = newValue;
4848
} else if (name === "data-button-text-color") {
49-
const buttonEl = this.shadowRoot?.querySelector("button") as HTMLElement;
49+
const buttonEl = this.shadowRoot?.querySelector<HTMLElement>("button");
5050
if (!buttonEl) {
5151
throw new Error("Button not found");
5252
}

‎packages/embeds/embed-core/src/Inline/inline.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ export class Inline extends HTMLElement {
1111
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
1212
if (name === "loading") {
1313
if (newValue == "done") {
14-
(this.shadowRoot!.querySelector(".loader")! as HTMLElement).style.display = "none";
14+
this.shadowRoot!.querySelector<HTMLElement>(".loader")!.style.display = "none";
1515
} else if (newValue === "failed") {
16-
(this.shadowRoot!.querySelector(".loader")! as HTMLElement).style.display = "none";
17-
(this.shadowRoot!.querySelector("#error")! as HTMLElement).style.display = "block";
18-
(this.shadowRoot!.querySelector("slot")! as HTMLElement).style.visibility = "hidden";
16+
this.shadowRoot!.querySelector<HTMLElement>(".loader")!.style.display = "none";
17+
this.shadowRoot!.querySelector<HTMLElement>("#error")!.style.display = "block";
18+
this.shadowRoot!.querySelector<HTMLElement>("slot")!.style.visibility = "hidden";
1919
const errorString = getErrorString(this.dataset.errorCode);
20-
(this.shadowRoot!.querySelector("#error")! as HTMLElement).innerText = errorString;
20+
this.shadowRoot!.querySelector<HTMLElement>("#error")!.innerText = errorString;
2121
}
2222
}
2323
}

‎packages/embeds/embed-core/src/ModalBox/ModalBox.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export class ModalBox extends HTMLElement {
7676

7777
connectedCallback() {
7878
this.assertHasShadowRoot();
79-
const closeEl = this.shadowRoot.querySelector(".close") as HTMLElement;
79+
const closeEl = this.shadowRoot.querySelector<HTMLElement>(".close");
8080
document.addEventListener(
8181
"keydown",
8282
(e) => {
@@ -92,9 +92,11 @@ export class ModalBox extends HTMLElement {
9292
this.close();
9393
});
9494

95-
closeEl.onclick = () => {
96-
this.close();
97-
};
95+
if (closeEl) {
96+
closeEl.onclick = () => {
97+
this.close();
98+
};
99+
}
98100
}
99101

100102
constructor() {

‎packages/embeds/embed-core/src/embed-iframe.ts‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -330,12 +330,16 @@ function keepParentInformedAboutDimensionChanges() {
330330
// Use the dimensions of main element as in most places there is max-width restriction on it and we just want to show the main content.
331331
// It avoids the unwanted padding outside main tag.
332332
const mainElement =
333-
(document.getElementsByClassName("main")[0] as HTMLElement) ||
333+
document.getElementsByClassName("main")[0] ||
334334
document.getElementsByTagName("main")[0] ||
335335
document.documentElement;
336336
const documentScrollHeight = document.documentElement.scrollHeight;
337337
const documentScrollWidth = document.documentElement.scrollWidth;
338338

339+
if (!(mainElement instanceof HTMLElement)) {
340+
throw new Error("Main element should be an HTMLElement");
341+
}
342+
339343
const contentHeight = mainElement.offsetHeight;
340344
const contentWidth = mainElement.offsetWidth;
341345

@@ -415,14 +419,14 @@ if (isBrowser) {
415419
});
416420

417421
document.addEventListener("click", (e) => {
418-
if (!e.target) {
422+
if (!e.target || !(e.target instanceof Node)) {
419423
return;
420424
}
421425
const mainElement =
422-
(document.getElementsByClassName("main")[0] as HTMLElement) ||
426+
document.getElementsByClassName("main")[0] ||
423427
document.getElementsByTagName("main")[0] ||
424428
document.documentElement;
425-
if ((e.target as HTMLElement).contains(mainElement)) {
429+
if (e.target.contains(mainElement)) {
426430
sdkActionManager?.fire("__closeIframe", {});
427431
}
428432
});

‎packages/embeds/embed-core/src/embed.ts‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -305,27 +305,32 @@ export class Cal {
305305
// },
306306
// },
307307
// });
308-
let attributesString = "";
309-
let existingEl = null;
308+
let existingEl: HTMLElement | null = null;
309+
310310
if (attributes?.id) {
311-
attributesString += ` id="${attributes.id}"`;
312311
existingEl = document.getElementById(attributes.id);
313312
}
314-
let el = existingEl;
313+
let el: HTMLElement;
315314
if (!existingEl) {
316-
const template = document.createElement("template");
317-
template.innerHTML = `<cal-floating-button ${attributesString} data-cal-namespace="${this.namespace}" data-cal-link="${calLink}"></cal-floating-button>`;
318-
el = template.content.children[0] as HTMLElement;
319-
document.body.appendChild(template.content);
315+
el = document.createElement("cal-floating-button");
316+
el.dataset.calLink = calLink;
317+
el.dataset.calNamespace = this.namespace;
318+
if (attributes?.id) {
319+
el.id = attributes.id;
320+
}
321+
322+
document.body.appendChild(el);
323+
} else {
324+
el = existingEl;
320325
}
321326

322327
if (buttonText) {
323-
el!.setAttribute("data-button-text", buttonText);
328+
el.setAttribute("data-button-text", buttonText);
324329
}
325-
el!.setAttribute("data-hide-button-icon", "" + hideButtonIcon);
326-
el!.setAttribute("data-button-position", "" + buttonPosition);
327-
el!.setAttribute("data-button-color", "" + buttonColor);
328-
el!.setAttribute("data-button-text-color", "" + buttonTextColor);
330+
el.setAttribute("data-hide-button-icon", "" + hideButtonIcon);
331+
el.setAttribute("data-button-position", "" + buttonPosition);
332+
el.setAttribute("data-button-color", "" + buttonColor);
333+
el.setAttribute("data-button-text-color", "" + buttonTextColor);
329334
}
330335

331336
modal({ calLink, config = {}, uid }: { calLink: string; config?: Record<string, string>; uid: number }) {

‎packages/embeds/embed-core/src/preview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ previewWindow.addEventListener("message", (e) => {
7777
globalCal(data.instruction.name, data.instruction.arg);
7878
}
7979
if (data.type == "inlineEmbedDimensionUpdate") {
80-
const inlineEl = document.querySelector("#my-embed") as HTMLElement;
80+
const inlineEl = document.querySelector<HTMLElement>("#my-embed");
8181
if (inlineEl) {
8282
inlineEl.style.width = data.data.width;
8383
inlineEl.style.height = data.data.height;

0 commit comments

Comments
 (0)