@panoramax/web-viewer/src/components/menus/MiniPictureLegend.js

Panoramax web viewer for geolocated pictures

import { LitElement, nothing, css, html } from "lit";
import { onceParentAvailable } from "../../utils/widgets";
import { panel } from "../styles";

/**
 * Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
 * @class Panoramax.components.menus.MiniPictureLegend
 * @element pnx-mini-picture-legend
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-mini-picture-legend ._parent=${viewer} />
 * ```
 */
export default class MiniPictureLegend extends LitElement {
	/** @private */
	static styles = [panel, css`
		.pnx-panel {
			bottom: 0;
			right: 0;
			width: unset;
			min-width: unset;
			border-radius: 10px;
			border-top-right-radius: 0;
			border-bottom-left-radius: 0;
			border-right: none;
			border-bottom: none;
			padding: 2px 5px;
			font-size: 0.7em;
		}
	`];

	/** @private */
	static properties = {
		_caption: {state: true},
	};

	/** @private */
	connectedCallback() {
		super.connectedCallback();

		onceParentAvailable(this)
			.then(() => this._parent.onceReady())
			.then(() => {
				this._onPicChange(this._parent.psv.getPictureMetadata());
				this._parent.psv.addEventListener("picture-loaded", () => {
					this._onPicChange(this._parent.psv.getPictureMetadata());
				});
				this._parent.psv.addEventListener("sequence-stopped", () => {
					this._onPicChange(this._parent.psv.getPictureMetadata());
				});
			});
	}

	/** @private */
	_onPicChange(picMeta) {
		this._caption = picMeta?.caption;
	}

	/** @private */
	render() {
		/* eslint-disable indent */
		return this._caption?.date ?
			html`<div class="pnx-panel">${
				this._caption.date.toLocaleDateString(
					this._parent?.lang || window.navigator.language,
					{ year: "numeric", month: "long", day: "numeric" }
				)
			}</div>`
			: nothing;
	}
}

customElements.define("pnx-mini-picture-legend", MiniPictureLegend);