48 lines
983 B
TypeScript
48 lines
983 B
TypeScript
|
import Diff from "scripts/Diff"
|
||
|
|
||
|
export default class SVGIcon extends HTMLElement {
|
||
|
static cache = new Map<string, Promise<string>>()
|
||
|
|
||
|
static get observedAttributes() {
|
||
|
return ["name"]
|
||
|
}
|
||
|
|
||
|
attributeChangedCallback(attrName) {
|
||
|
if(attrName === "name") {
|
||
|
this.render()
|
||
|
}
|
||
|
}
|
||
|
|
||
|
async render() {
|
||
|
let cache = SVGIcon.cache[this.name]
|
||
|
|
||
|
if(cache) {
|
||
|
let text = await cache
|
||
|
Diff.mutations.queue(() => this.innerHTML = text)
|
||
|
return
|
||
|
}
|
||
|
|
||
|
SVGIcon.cache[this.name] = new Promise(async (resolve, reject) => {
|
||
|
let url = `//media.notify.moe/images/icons/${this.name}.svg`
|
||
|
let response = await fetch(url)
|
||
|
|
||
|
if(!response.ok) {
|
||
|
console.warn(`Failed loading SVG icon: ${url}`)
|
||
|
reject(response.statusText)
|
||
|
return
|
||
|
}
|
||
|
|
||
|
let text = await response.text()
|
||
|
Diff.mutations.queue(() => this.innerHTML = text)
|
||
|
resolve(text)
|
||
|
})
|
||
|
}
|
||
|
|
||
|
get name() {
|
||
|
return this.getAttribute("name") || ""
|
||
|
}
|
||
|
|
||
|
set name(value: string) {
|
||
|
this.setAttribute("name", value)
|
||
|
}
|
||
|
}
|