36 lines
964 B
JavaScript
36 lines
964 B
JavaScript
|
// retoor <retoor@molodetz.nl>
|
||
|
|
import { Component } from "./Component.js";
|
||
|
|
|
||
|
|
export class Avatar extends Component {
|
||
|
|
static tag = "dp-avatar";
|
||
|
|
static observedAttributes = ["seed", "uid", "size", "online"];
|
||
|
|
|
||
|
|
setup() {
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
|
||
|
|
attributeChangedCallback() {
|
||
|
|
if (this.dataset.ready) {
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const uid = this.getAttribute("uid") || "";
|
||
|
|
const size = Number(this.getAttribute("size") || 32);
|
||
|
|
this.replaceChildren();
|
||
|
|
const img = document.createElement("img");
|
||
|
|
img.className = "avatar";
|
||
|
|
img.alt = "";
|
||
|
|
img.width = size;
|
||
|
|
img.height = size;
|
||
|
|
const seed = this.getAttribute("seed") || uid;
|
||
|
|
img.src = `/avatar/svg/${encodeURIComponent(seed)}?size=${size}`;
|
||
|
|
const dot = document.createElement("span");
|
||
|
|
dot.className = "presence-dot";
|
||
|
|
dot.dataset.presenceUid = uid;
|
||
|
|
dot.classList.toggle("online", this.hasAttribute("online"));
|
||
|
|
this.append(img, dot);
|
||
|
|
}
|
||
|
|
}
|