|
// retoor <retoor@molodetz.nl>
|
|
|
|
export class Avatar {
|
|
static imgElement(username, size = 24) {
|
|
const img = document.createElement("img");
|
|
img.src = `/avatar/multiavatar/${encodeURIComponent(username)}?size=${size}`;
|
|
img.className = "avatar-img";
|
|
img.style.width = `${size}px`;
|
|
img.style.height = `${size}px`;
|
|
img.style.borderRadius = "50%";
|
|
img.alt = `${username} avatar`;
|
|
img.loading = "lazy";
|
|
return img;
|
|
}
|
|
|
|
static badgeElement(user, size = 32, sizeClass = "sm") {
|
|
const badge = document.createElement("span");
|
|
badge.className = "avatar-badge";
|
|
const username = user.username || "";
|
|
const img = document.createElement("img");
|
|
img.src = `/avatar/multiavatar/${encodeURIComponent(user.avatar_seed || username)}?size=${size}`;
|
|
img.className = `avatar-img avatar-${sizeClass}`;
|
|
img.alt = username;
|
|
img.loading = "lazy";
|
|
badge.appendChild(img);
|
|
badge.appendChild(Avatar.presenceDot(user));
|
|
if (user.award_prominent && user.last_award_slug) {
|
|
const award = document.createElement("img");
|
|
award.className = "award-badge";
|
|
award.src = `/awards/${encodeURIComponent(user.last_award_slug)}/64`;
|
|
award.alt = "Latest award";
|
|
award.loading = "lazy";
|
|
badge.appendChild(award);
|
|
}
|
|
return badge;
|
|
}
|
|
|
|
static presenceDot(user) {
|
|
const dot = document.createElement("span");
|
|
dot.className = "presence-dot";
|
|
dot.setAttribute("data-presence-uid", user.uid || "");
|
|
dot.setAttribute("data-presence-last-seen", user.last_seen || "");
|
|
dot.setAttribute("aria-hidden", "true");
|
|
return dot;
|
|
}
|
|
}
|
|
|
|
window.Avatar = Avatar;
|