Spaces:
Running
on
L40S
Running
on
L40S
File size: 3,697 Bytes
4450790 |
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 |
import { $el } from "../../common/utils_dom.js";
const CSS_STYLE_SHEETS = new Map();
const HTML_TEMPLATE_FILES = new Map();
async function getStyleSheet(name) {
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);
}
async function getTemplateMarkup(name) {
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) {
}
}
return HTML_TEMPLATE_FILES.get(name);
}
export class RgthreeCustomElement extends HTMLElement {
constructor() {
super(...arguments);
this.connected = false;
this.templates = new Map();
}
static create() {
if (this.name === "rgthree-override") {
throw new Error("Must override component NAME");
}
if (!customElements.get(this.name)) {
customElements.define(this.NAME, this);
}
return document.createElement(this.NAME);
}
onFirstConnected() {
}
;
onReconnected() {
}
;
onConnected() {
}
;
onDisconnected() {
}
;
async connectedCallback() {
const elementName = this.constructor.NAME;
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();
}
}
RgthreeCustomElement.NAME = "rgthree-override";
|