2020-08-11 22:32:55 +02:00
|
|
|
export class HtmlUtils {
|
|
|
|
public static getElementByIdOrFail<T extends HTMLElement>(id: string): T {
|
|
|
|
const elem = document.getElementById(id);
|
2021-01-27 18:33:40 +01:00
|
|
|
if (HtmlUtils.isHtmlElement<T>(elem)) {
|
2021-07-16 11:22:36 +02:00
|
|
|
return elem;
|
2020-08-11 22:32:55 +02:00
|
|
|
}
|
2021-07-16 11:22:36 +02:00
|
|
|
throw new Error("Cannot find HTML element with id '" + id + "'");
|
2020-08-11 22:32:55 +02:00
|
|
|
}
|
2020-09-16 18:38:50 +02:00
|
|
|
|
2022-01-05 10:27:40 +01:00
|
|
|
public static getElementById<T extends HTMLElement>(id: string): T | undefined {
|
|
|
|
const elem = document.getElementById(id);
|
|
|
|
return HtmlUtils.isHtmlElement<T>(elem) ? elem : undefined;
|
|
|
|
}
|
|
|
|
|
2021-01-27 12:38:57 +01:00
|
|
|
public static querySelectorOrFail<T extends HTMLElement>(selector: string): T {
|
2021-01-28 21:07:17 +01:00
|
|
|
const elem = document.querySelector<T>(selector);
|
|
|
|
if (HtmlUtils.isHtmlElement<T>(elem)) {
|
|
|
|
return elem;
|
2021-01-27 12:38:57 +01:00
|
|
|
}
|
2021-07-16 11:22:36 +02:00
|
|
|
throw new Error("Cannot find HTML element with selector '" + selector + "'");
|
2021-01-27 12:38:57 +01:00
|
|
|
}
|
|
|
|
|
2020-09-16 18:38:50 +02:00
|
|
|
public static removeElementByIdOrFail<T extends HTMLElement>(id: string): T {
|
|
|
|
const elem = document.getElementById(id);
|
2021-01-27 18:33:40 +01:00
|
|
|
if (HtmlUtils.isHtmlElement<T>(elem)) {
|
|
|
|
elem.remove();
|
2021-01-28 15:31:09 +01:00
|
|
|
return elem;
|
2020-09-16 18:38:50 +02:00
|
|
|
}
|
2021-07-16 11:22:36 +02:00
|
|
|
throw new Error("Cannot find HTML element with id '" + id + "'");
|
2020-09-16 18:38:50 +02:00
|
|
|
}
|
2021-01-22 15:01:10 +01:00
|
|
|
|
2021-03-09 16:21:14 +01:00
|
|
|
public static escapeHtml(html: string): string {
|
2021-08-23 10:20:48 +02:00
|
|
|
const text = document.createTextNode(html);
|
|
|
|
const p = document.createElement("p");
|
|
|
|
p.appendChild(text);
|
|
|
|
return p.innerHTML;
|
2021-02-11 18:03:14 +01:00
|
|
|
}
|
|
|
|
|
2021-07-27 14:28:35 +02:00
|
|
|
public static urlify(text: string, style: string = ""): string {
|
2021-01-22 15:01:10 +01:00
|
|
|
const urlRegex = /(https?:\/\/[^\s]+)/g;
|
2021-02-11 18:03:14 +01:00
|
|
|
text = HtmlUtils.escapeHtml(text);
|
|
|
|
return text.replace(urlRegex, (url: string) => {
|
2022-01-27 19:02:54 +01:00
|
|
|
url = HtmlUtils.htmlDecode(url);
|
2021-07-16 11:22:36 +02:00
|
|
|
const link = document.createElement("a");
|
2021-06-04 10:07:12 +02:00
|
|
|
link.href = url;
|
|
|
|
link.target = "_blank";
|
|
|
|
const text = document.createTextNode(url);
|
|
|
|
link.appendChild(text);
|
2021-07-27 14:28:35 +02:00
|
|
|
link.setAttribute("style", style);
|
2021-06-04 10:07:12 +02:00
|
|
|
return link.outerHTML;
|
2021-02-11 14:49:32 +01:00
|
|
|
});
|
2021-01-22 15:01:10 +01:00
|
|
|
}
|
2021-01-27 18:33:40 +01:00
|
|
|
|
2022-01-27 19:02:54 +01:00
|
|
|
private static htmlDecode(input: string): string {
|
|
|
|
const doc = new DOMParser().parseFromString(input, "text/html");
|
|
|
|
const text = doc.documentElement.textContent;
|
|
|
|
if (text === null) {
|
|
|
|
throw new Error("Unexpected non parseable string");
|
|
|
|
}
|
|
|
|
return text;
|
|
|
|
}
|
|
|
|
|
2021-07-27 14:28:35 +02:00
|
|
|
public static isClickedInside(event: MouseEvent, target: HTMLElement): boolean {
|
|
|
|
return !!event.composedPath().find((et) => et === target);
|
|
|
|
}
|
|
|
|
|
|
|
|
public static isClickedOutside(event: MouseEvent, target: HTMLElement): boolean {
|
|
|
|
return !this.isClickedInside(event, target);
|
|
|
|
}
|
|
|
|
|
2021-01-27 18:33:40 +01:00
|
|
|
private static isHtmlElement<T extends HTMLElement>(elem: HTMLElement | null): elem is T {
|
2021-01-28 15:31:09 +01:00
|
|
|
return elem !== null;
|
2021-01-27 18:33:40 +01:00
|
|
|
}
|
2020-08-11 22:32:55 +02:00
|
|
|
}
|