forked from cory/tildefriends
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
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 image = html`<span
|
|
class="w3-theme-light w3-circle"
|
|
style="display: inline-block; width: 2em; height: 2em; text-align: center; line-height: 2em"
|
|
>?</span
|
|
>`;
|
|
let name = this.users?.[this.id]?.name;
|
|
name =
|
|
name !== undefined
|
|
? html`<a target="_top" href=${'#' + this.id}>${name}</a>`
|
|
: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
|
|
|
|
if (this.users[this.id]) {
|
|
let image_link = this.users[this.id].image;
|
|
image_link =
|
|
typeof image_link == 'string' ? image_link : image_link?.link;
|
|
if (image_link !== undefined) {
|
|
image = html`<img
|
|
class="w3-circle"
|
|
style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover"
|
|
src="/${image_link}/view"
|
|
/>`;
|
|
}
|
|
}
|
|
return html` <div style="display: inline-block; font-weight: bold">
|
|
${image} ${name}
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-user', TfUserElement);
|