69 lines
1.3 KiB
TypeScript

import Diff from "scripts/Diff"
export default class SVGIcon extends HTMLElement {
static cache = new Map<string, Promise<Node>>()
static get observedAttributes() {
return ["name"]
}
attributeChangedCallback(attrName) {
if(attrName === "name") {
this.render()
}
}
async render() {
const cache = SVGIcon.cache.get(this.name)
if(cache) {
const svg = await cache
Diff.mutations.queue(() => {
// Remove all existing child nodes
while(this.firstChild) {
this.removeChild(this.firstChild)
}
// Append a clone of the cached SVG node
this.appendChild(svg.cloneNode(true))
})
return
}
SVGIcon.cache.set(this.name, new Promise(async (resolve, reject) => {
const url = `//media.notify.moe/images/icons/${this.name}.svg`
const response = await fetch(url)
if(!response.ok) {
console.warn(`Failed loading SVG icon: ${url}`)
reject(response.statusText)
return
}
const text = await response.text()
Diff.mutations.queue(() => {
this.innerHTML = text
const svg = this.firstChild
if(!svg) {
console.warn("Invalid SVG icon:", svg)
return
}
resolve(svg)
})
}))
}
get name() {
return this.getAttribute("name") || ""
}
set name(value: string) {
this.setAttribute("name", value)
}
}