116 lines
No EOL
4.3 KiB
TypeScript
116 lines
No EOL
4.3 KiB
TypeScript
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) {
|
|
util.authorizedFetch(
|
|
"GET",
|
|
`/api/adapters/${this._adapter}/fetch?entity_type=author&entity_id=${this._msg.author}`,
|
|
null);
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
} |