ts/thread-summary-element.ts (raw)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import util from "./util" import { Message, Author } from "./message" var _ = util._ var $ = util.$ export class ThreadSummaryElement extends HTMLElement { static observedAttributes = [ "data-len", "data-author", "data-latest", "data-new" ]; private _len: number = 0;; private _msg: Message | null = null;; private _author: Author | null = null; private _adapter: string = ""; private _created: Date = new Date(); private _latest: Date = new Date(); private _new: boolean = false; constructor() { super(); } connectedCallback() { this.innerHTML = "<div class='thread_summary'><div class='thread_author'></div><div class='thread_text'></div><div class='thread_metadata'></div></div>" // adapter shouldn't change, just set it here this._adapter = this.getAttribute("data-adapter") ?? ""; this.attributeChangedCallback(); if (this._msg) { this.addEventListener("click", this.viewThread(this), false); } } attributeChangedCallback() { const datastore = _("datastore")[this._adapter]; const msgId = this.getAttribute("data-msg"); if (msgId && datastore && !this._msg) { this._msg = datastore.messages.get(msgId); if (this._msg) { const threadText = this.querySelector(".thread_text"); if (threadText) { threadText.innerHTML = this._msg.content; } let author = datastore.profileCache.get(this._msg.author); if (!author) { // request it! } this._author = author || <Author>{ id: this._msg.author }; const threadAuthor = this.querySelector(".thread_author"); if (threadAuthor && this._author) { threadAuthor.innerHTML = this._author.profilePic ? `<img src="${this._author.profilePic}" alt="${this._author.id}"/> <a id="thread_${this._adapter}_${this._msg.id}_${this._author.id}" href="#author?id=${this._author.id}">${this._author.id}</a>` : `<a id="thread_${this._adapter}_${this._msg.id}_${this._author.id}" href="#author?id=${this._author.id}">${this._author.id}</a>`; } } } // update author if it's passed in the attribute const authorId = this.getAttribute("data-author"); if (authorId) { let author = datastore?.profileCache?.get(this._msg?.author); if (author) { this._author = author; const threadAuthor = this.querySelector(".thread_author"); if (threadAuthor && this._author && this._msg) { threadAuthor.innerHTML = this._author.profilePic ? `<img src="${this._author.profilePic}" alt="${this._author.id}"/> <a id="thread_${this._adapter}_${this._msg.id}_${this._author.id}" href="#author?id=${this._author.id}>${this._author.id}</a>` : `<a id="thread_${this._adapter}_${this._msg.id}_${this._author.id}" href="#author?id=${author.id}>${this._author.id}</a>` ; } } } const l = parseInt(this.getAttribute("data-len") ?? "0"); const latest = this.getAttribute("data-latest") ; const created = this.getAttribute("data-created"); const newness = this.getAttribute("data-new") ? true : false; let metadataChanged = false; if (l && l != this._len) { metadataChanged = true; this._len = l; } if (created && new Date(created) != this._created) { metadataChanged = true; this._created = new Date(created); this._latest = this._created; } if (latest && new Date(latest) != this._latest) { metadataChanged = true; this._latest = new Date(latest); } if (newness != this._new) { metadataChanged = true; this._new = newness; } if (metadataChanged) { const threadMeta = this.querySelector(".thread_metadata"); if (threadMeta) { threadMeta.innerHTML = `<span>${this._new ? "!" : ""}[${this._len}] created: ${this._created}, updated: ${this._latest}</span>`; } } } viewThread(self: ThreadSummaryElement) { return () => { const a = $(`adapter_${self._adapter}`); if (a && self._msg) { a.setAttribute("data-view", "thread"); a.setAttribute("data-viewing", self._msg.id); } } } } |