82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
|
import { Author } from "./message"
|
||
|
|
import util from "./util"
|
||
|
|
import { BatchTimer } from "./batch-timer"
|
||
|
|
import { AdapterState } from "./adapter"
|
||
|
|
|
||
|
|
export class ProfileElement extends HTMLElement {
|
||
|
|
static observedAttributes = [ "data-latest", "data-adapter", "data-target" ]
|
||
|
|
|
||
|
|
private _id: string | null = null;
|
||
|
|
private _adapter: string = "";
|
||
|
|
|
||
|
|
private _author: Author | null = null;
|
||
|
|
|
||
|
|
private _authorTimer: BatchTimer | null = null;
|
||
|
|
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.innerHTML = "<div class='author_pfp'></div><div class='author_id'></div><div class='author_name'></div><div class='author_description'></div>"
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
this._id = this.getAttribute("data-target");
|
||
|
|
this._adapter = this.getAttribute("data-adapter") ?? "";
|
||
|
|
const gateway = this.getAttribute("data-gateway") ?? "";
|
||
|
|
this._authorTimer = new BatchTimer((ids: string[])=>{
|
||
|
|
let url = `${gateway}/api/adapters/${this._adapter}/fetch?entity_type=author`;
|
||
|
|
for (let id of ids) {
|
||
|
|
url += `&entity_id=${id}`;
|
||
|
|
}
|
||
|
|
util.authorizedFetch("GET", url, null)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
attributeChangedCallback(attr: string, prev: string, next: string) {
|
||
|
|
|
||
|
|
switch (attr) {
|
||
|
|
case "data-target":
|
||
|
|
if (!next) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this._id = next;
|
||
|
|
if (this._authorTimer) {
|
||
|
|
|
||
|
|
this._authorTimer.queue(next, 100);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case "data-latest":
|
||
|
|
let datastore = AdapterState._instance.data.get(this._adapter);
|
||
|
|
if (!datastore) {
|
||
|
|
console.log("no data yet, wait for some to come in maybe...");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._author = datastore.profileCache.get(next) ?? null;
|
||
|
|
console.log(this._author);
|
||
|
|
if (this._author == null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this._author.id == next) {
|
||
|
|
let pfp = this.querySelector(".author_pfp");
|
||
|
|
let handle = this.querySelector(".author_id");
|
||
|
|
let prefName = this.querySelector(".author_name");
|
||
|
|
let bio = this.querySelector(".author_description");
|
||
|
|
|
||
|
|
if (pfp) {
|
||
|
|
pfp.innerHTML = `<img src="${this._author.profilePic}">`
|
||
|
|
}
|
||
|
|
if (handle) {
|
||
|
|
handle.innerHTML = `<a href="${this._author.uri}">${this._author.id}</a>`;
|
||
|
|
}
|
||
|
|
if (prefName) {
|
||
|
|
prefName.innerHTML = this._author.name;
|
||
|
|
}
|
||
|
|
if (bio) {
|
||
|
|
bio.innerHTML = this._author.profileData;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|