underbbs/ts/thread-summary-element.ts

import util from "./util"
import { Message, Author } from "./message"
var _ = util._
var $ = util.$

export class ThreadSummaryElement extends HTMLElement {
  static observedAttributes = [ "data-len", "data-msg", "data-author", "data-latest", "data-created", "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.id != msgId) || !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>`;
        }
      
      
        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) {
              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 = new Date(this.getAttribute("data-latest") ?? 0);
    const created = new Date(this.getAttribute("data-created")?? 0);
    const newness = this.getAttribute("data-new") ? true : false;
    
    let metadataChanged = false;
    
    if (l != this._len) {
      metadataChanged = true;
      this._len = l;
    }
    if (latest != this._latest) {
      metadataChanged = true;
      this._latest = latest;
    }
    if (created != this._created) {
      metadataChanged = true;
      this._created = created;
    }
    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);
      }
    }
  }
}