@panoramax/web-viewer/src/components/ui/widgets/PictureLegendActions.js

Panoramax web viewer for geolocated pictures

import { LitElement, html, nothing, css } from "lit";
import { fa, onceParentAvailable } from "../../../utils/widgets";
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
import { noprint } from "../../styles";

/**
 * Picture Legend Actions is a menu showing up complementary actions for picture legend.
 * @class Panoramax.components.ui.widgets.PictureLegendActions
 * @element pnx-picture-legend-actions
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-picture-legend-actions _parent=${viewer} />
 * ```
 */
export default class PictureLegendActions extends LitElement {
	/** @private */
	static styles = [ noprint, css`
		pnx-togglable-group::part(menu) {
			border-radius: 5px;
			min-width: unset;
		}
	`];

	/**
	 * Component properties.
	 * @memberof Panoramax.components.ui.widgets.PictureLegendActions#
	 * @type {Object}
	 * @property {boolean} [full=false] Show advanced actions
	 */
	static properties = {
		full: { type: Boolean },
		_meta: { state: true },
	};

	constructor() {
		super();
		this.full = false;
	}

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

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

	/** @private */
	_onPrint() {
		this._closeGroup();
		window.print();
	}

	/** @private */
	_closeGroup() {
		this.renderRoot.querySelector("#pic-legend-headline-menu").close();
	}

	/** @private */
	render() {
		return html`<pnx-togglable-group padded="false" id="pic-legend-headline-menu" ._parent=${this._parent}>
			<pnx-button slot="button" kind="inline">${fa(faEllipsisV)}</pnx-button>
			<pnx-list-group class="pnx-print-hidden" @click=${this._closeMenu}>
				${this._meta ? html`<pnx-copy-button ._t=${this._parent?._t} text=${this._meta.id} unstyled>
					${this._parent?._t.pnx.metadata_general_copy_picid}
				</pnx-copy-button>` : nothing}

				<a
					download
					target="_blank"
					href=${this._meta?.panorama?.hdUrl}
					@click=${this._closeGroup}
				>${this._parent?._t.pnx.share_image}</a>

				${this._parent.isWidthSmall() ? nothing : html`<button @click=${this._onPrint}>
					${this._parent?._t.pnx.share_print}
				</button>`}

				${this._parent?.api?.getRSSURL() && html`
					<a
						target="_blank"
						href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
						title=${this._parent?._t.pnx.share_rss_title}
						@click=${this._closeGroup}
					>
						${this._parent?._t.pnx.share_rss}
					</a>
				`}
			</pnx-list-group>
		</pnx-togglable-group>`;
	}
}

customElements.define("pnx-picture-legend-actions", PictureLegendActions);