|
// retoor <retoor@molodetz.nl>
|
|
|
|
import { Avatar } from "./Avatar.js";
|
|
|
|
const ROSTER_TOPIC = "public.presence.roster";
|
|
|
|
export class OnlineUsers {
|
|
constructor(pubsub) {
|
|
this.list = document.querySelector("[data-online-users-list]");
|
|
if (!this.list) return;
|
|
this.countEl = document.querySelector("[data-online-count]");
|
|
this.emptyText = this.list.dataset.emptyText || "No one online right now";
|
|
if (pubsub) {
|
|
pubsub.subscribe(ROSTER_TOPIC, (data) => this.render(data));
|
|
}
|
|
}
|
|
|
|
render(roster) {
|
|
if (!roster || !Array.isArray(roster.users)) return;
|
|
if (this.countEl) {
|
|
this.countEl.textContent = roster.count != null ? roster.count : roster.users.length;
|
|
}
|
|
this.list.textContent = "";
|
|
if (!roster.users.length) {
|
|
const empty = document.createElement("span");
|
|
empty.className = "online-empty";
|
|
empty.textContent = this.emptyText;
|
|
this.list.appendChild(empty);
|
|
return;
|
|
}
|
|
for (const user of roster.users) {
|
|
this.list.appendChild(this.buildItem(user));
|
|
}
|
|
}
|
|
|
|
buildItem(user) {
|
|
const link = document.createElement("a");
|
|
link.href = "/profile/" + user.username;
|
|
link.className = "online-user";
|
|
link.title = user.username;
|
|
link.appendChild(Avatar.badgeElement(user));
|
|
return link;
|
|
}
|
|
}
|