export class HtmlUtils {
public static getElementByIdOrFail(id: string): T {
const elem = document.getElementById(id);
if (HtmlUtils.isHtmlElement(elem)) {
return elem;
}
throw new Error("Cannot find HTML element with id '" + id + "'");
}
public static querySelectorOrFail(selector: string): T {
const elem = document.querySelector(selector);
if (HtmlUtils.isHtmlElement(elem)) {
return elem;
}
throw new Error("Cannot find HTML element with selector '" + selector + "'");
}
public static removeElementByIdOrFail(id: string): T {
const elem = document.getElementById(id);
if (HtmlUtils.isHtmlElement(elem)) {
elem.remove();
return elem;
}
throw new Error("Cannot find HTML element with id '" + id + "'");
}
public static escapeHtml(html: string): string {
const text = document.createTextNode(html.replace(/(\r\n|\r|\n)/g, "
"));
const p = document.createElement("p");
p.appendChild(text);
return p.innerHTML;
}
public static urlify(text: string, style: string = ""): string {
const urlRegex = /(https?:\/\/[^\s]+)/g;
text = HtmlUtils.escapeHtml(text);
return text.replace(urlRegex, (url: string) => {
const link = document.createElement("a");
link.href = url;
link.target = "_blank";
const text = document.createTextNode(url);
link.appendChild(text);
link.setAttribute("style", style);
return link.outerHTML;
});
}
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);
}
private static isHtmlElement(elem: HTMLElement | null): elem is T {
return elem !== null;
}
}