import util from "./util" import { Message, Author } from "./message" import { AdapterState } from "./adapter" export class ThreadSummaryElement extends HTMLElement { static observedAttributes = [ "data-msg", "data-len", "data-author", "data-created", "data-latest", "data-new" ]; private _len: number = 0;; private _msg: Message | null = null;; private _author: Author | null = null; private _adapter: string = ""; private _created: number = 0; private _latest: number = 0; private _new: boolean = false; constructor() { super(); this.innerHTML = "
" // adapter shouldn't change, just set it here this._adapter = this.getAttribute("data-adapter") ?? ""; this.addEventListener("click", this.viewThread(this), false); } connectedCallback() { } attributeChangedCallback(attr: string, prev: string, next: string) { const datastore = AdapterState._instance.data.get(this._adapter); if (!datastore) { return; } let metadataChanged = false; switch (attr) { case "data-msg": if (next && next != prev) { this._msg = datastore.messages.get(next) || null; if (this._msg) { // TODO: use attachment alttext or fallback text if no msg content // TODO: handle boosts, quotes properly const threadText = this.querySelector(".thread_text"); if (threadText) { threadText.innerHTML = this._msg.content; } this.setAttribute("data-author", this._msg.author); } } break; case "data-author": if (next) { let authorData= datastore.profileCache.get(next); if (!authorData) { util.authorizedFetch( "GET", `/api/adapters/${this._adapter}/fetch?entity_type=author&entity_id=${next}`, null); this._author = {id: next}; const threadAuthor = this.querySelector(".thread_author"); if (threadAuthor) { threadAuthor.innerHTML = `${this._author.id}`; } } else { this._author = authorData; const threadAuthor = this.querySelector(".thread_author"); if (threadAuthor) { threadAuthor.innerHTML = `${this._author.id} ${this._author.id}` } } } break; case "data-len": this._len = parseInt(next); metadataChanged = true; break; case "data-latest": this._latest = parseInt(next); metadataChanged = true; break; case "data-new": this._new = next ? true : false; metadataChanged = true; break; } if (metadataChanged) { const threadMeta = this.querySelector(".thread_metadata"); if (threadMeta) { threadMeta.innerHTML = `${this._new ? "!" : ""}[${this._len}] created: ${new Date(this._created)}, updated: ${new Date(this._latest)}`; } } } viewThread(self: ThreadSummaryElement) { return () => { const a = util.$(`adapter_${self._adapter}`); if (a && self._msg) { a.setAttribute("data-view", "thread"); a.setAttribute("data-viewing", self._msg.id); } } } }