Spaces:
Running
Running
File size: 4,000 Bytes
583c1c7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
import { $el } from "rgthree/common/utils_dom.js";
const CSS_STYLE_SHEETS = new Map<string, string>();
const HTML_TEMPLATE_FILES = new Map<string, string>();
/**
* Fetches the stylesheet for the component, matched by the element name (minus the "rgthree-"
* prefix).
*/
async function getStyleSheet(name: string) {
if (!CSS_STYLE_SHEETS.has(name)) {
try {
const response = await fetch(
`rgthree/common/components/${name.replace("rgthree-", "").replace(/\-/g, "_")}.css`,
);
const text = await response.text();
CSS_STYLE_SHEETS.set(name, text);
} catch (e) {
alert("Error loading rgthree custom component css.");
}
}
return CSS_STYLE_SHEETS.get(name)!;
}
/**
* Fetches the stylesheet for the component, matched by the element name (minus the "rgthree-"
* prefix).
*/
async function getTemplateMarkup(name: string) {
if (!HTML_TEMPLATE_FILES.has(name)) {
try {
const response = await fetch(
`rgthree/common/components/${name.replace("rgthree-", "").replace(/\-/g, "_")}.html`,
);
const text = await response.text();
HTML_TEMPLATE_FILES.set(name, text);
} catch (e) {
// alert("Error loading rgthree custom component markup.");
}
}
return HTML_TEMPLATE_FILES.get(name)!;
}
/**
* A base custom element.
*/
export abstract class RgthreeCustomElement extends HTMLElement {
static NAME = "rgthree-override";
static create<T extends RgthreeCustomElement>(): T {
if (this.name === "rgthree-override") {
throw new Error("Must override component NAME");
}
if (!customElements.get(this.name)) {
customElements.define(this.NAME, this as unknown as CustomElementConstructor);
}
return document.createElement(this.NAME) as T;
}
protected connected: boolean = false;
protected shadow!: ShadowRoot;
protected readonly templates = new Map<string, HTMLTemplateElement>();
onFirstConnected(): void {
// Optionally overridden.
};
onReconnected(): void {
// Optionally overridden.
};
onConnected(): void {
// Optionally overridden.
};
onDisconnected(): void {
// Optionally overridden.
};
async connectedCallback() {
const elementName = (this.constructor as any).NAME as string;
const wasConnected = this.connected;
if (!wasConnected) {
this.connected = true;
}
if (!this.shadow) {
const [stylesheet, markup] = await Promise.all([
getStyleSheet(elementName),
getTemplateMarkup(elementName),
]);
if (markup) {
const temp = $el('div')
const templatesMarkup = markup.match(/<template[^]*?<\/template>/gm) || [];
for(const markup of templatesMarkup) {
temp.innerHTML = markup;
const template = temp.children[0];
if (!(template instanceof HTMLTemplateElement)) {
throw new Error('Not a template element.');
}
const id = template.getAttribute('id');
if (!id) {
throw new Error('Not template id.');
}
this.templates.set(id, template);
}
}
this.shadow = this.attachShadow({mode: "open"});
const sheet = new CSSStyleSheet();
sheet.replaceSync(stylesheet);
this.shadow.adoptedStyleSheets = [sheet];
let template;
if (this.templates.has(elementName)) {
template = this.templates.get(elementName);
} else if (this.templates.has(elementName.replace('rgthree-', ''))) {
template = this.templates.get(elementName.replace('rgthree-', ''))
}
if (template) {
this.shadow.appendChild(template.content.cloneNode(true));
}
this.onFirstConnected();
} else {
this.onReconnected();
}
this.onConnected();
}
disconnectedCallback() {
this.connected = false;
this.onDisconnected()
}
}
|