forked from cory/tildefriends
37 lines
1018 B
JavaScript
37 lines
1018 B
JavaScript
|
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
|
||
|
|
import * as tfrpc from '/static/tfrpc.js';
|
||
|
|
import * as tfutils from './tf-utils.js';
|
||
|
|
import {styles} from './tf-styles.js';
|
||
|
|
|
||
|
|
class TfProfileElement extends LitElement {
|
||
|
|
static get properties() {
|
||
|
|
return {
|
||
|
|
id: {type: String},
|
||
|
|
users: {type: Object},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
static styles = styles;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
let self = this;
|
||
|
|
this.id = null;
|
||
|
|
this.users = {};
|
||
|
|
}
|
||
|
|
|
||
|
|
render_raw() {
|
||
|
|
return html`<div style="white-space: pre-wrap">${JSON.stringify(this.message, null, 2)}</div>`
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
let profile = this.users[this.id] || {};
|
||
|
|
return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
|
||
|
|
<tf-user id=${this.id} .users=${this.users}></tf-user>
|
||
|
|
<div><img src=${'/' + profile.image + '/view'} style="width: 256px; height: auto"></img></div>
|
||
|
|
<div>${unsafeHTML(tfutils.markdown(profile.description))}</div>
|
||
|
|
</div>`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('tf-profile', TfProfileElement);
|