import {LitElement, html, unsafeHTML} from './lit-all.min.js'; import {styles} from './tf-styles.js'; class TfReactionsModalElement extends LitElement { static get properties() { return { users: {type: Object}, votes: {type: Array}, }; } static styles = styles; constructor() { super(); this.votes = []; this.users = {}; } clear() { this.votes = []; } render() { let self = this; return this.votes?.length ? html` <div class="w3-modal w3-animate-opacity" style="display: block; box-sizing: border-box" @click=${this.clear} > <div class="w3-modal-content w3-card-4 w3-theme-d1" onclick="event.stopPropagation()" > <div class="w3-container w3-padding"> <header class="w3-container"> <h2>Reactions</h2> <span class="w3-button w3-display-topright" @click=${this.clear} >×</span > </header> <ul class="w3-theme-dark w3-container w3-ul"> ${this.votes.map( (x) => html` <li class="w3-bar"> <span class="w3-bar-item" >${x?.content?.vote?.expression}</span > <tf-user class="w3-bar-item" id=${x.author} .users=${this.users} ></tf-user> <span class="w3-bar-item w3-right" >${new Date(x?.timestamp).toLocaleString()}</span > </li> ` )} </ul> <footer class="w3-container w3-padding"> <button class="w3-button" @click=${this.clear}>Close</button> </footer> </div> </div> </div>` : undefined; } } customElements.define('tf-reactions-modal', TfReactionsModalElement);