tildefriends/apps/ssb/tf-user.js

52 lines
1.3 KiB
JavaScript
Raw Normal View History

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;
2024-02-24 11:09:34 -05:00
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>`;
}
}
2024-02-24 11:09:34 -05:00
customElements.define('tf-user', TfUserElement);