import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; import {styles} from './tf-styles.js'; class TfUserElement extends LitElement { static get properties() { return { id: {type: String}, users: {type: Object}, }; } static styles = styles; constructor() { super(); this.id = null; this.users = {}; } render() { let user = this.users[this.id]; let shape = !user || user.follow_depth >= 2 ? 'w3-circle' : 'w3-round'; let image = html`<span class=${'w3-theme-l4 ' + shape} style="display: inline-block; width: 2em; height: 2em; text-align: center; line-height: 2em" >?</span >`; let name = this.users?.[this.id]?.name; name = html`<a target="_top" href=${'#' + this.id} >${name !== undefined ? name : this.id}</a >`; if (user) { let image_link = user.image; image_link = typeof image_link == 'string' ? image_link : image_link?.link; if (image_link !== undefined) { image = html`<img class=${'w3-theme-l4 ' + shape} style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover" src="/${image_link}/view" />`; } } return html` <div style="display: inline-block; vertical-align: middle; font-weight: bold; text-wrap: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis" > ${image} ${name} </div>`; } } customElements.define('tf-user', TfUserElement);