tildefriends/apps/ssb/tf-reactions-modal.js

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; z-index: 10"
					@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}
									>&times;</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);