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

Panoramax web viewer for geolocated pictures

import { LitElement, html, css, nothing } from "lit";
import { panel } from "../../styles";
import { fa, onceParentAvailable } from "../../../utils/widgets";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
import PanoramaxImg from "../../../img/panoramax.svg";
import { classMap } from "lit/directives/class-map.js";
import { PanoramaxWebsiteURL } from "../../../utils/services";

/**
 * Legend widget, handling switch between map and photo components.
 * Also displays a default "About Panoramax" message.
 * @class Panoramax.components.ui.widgets.Legend
 * @element pnx-widget-legend
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
 * @example
 * ```html
 * <!-- Default legend -->
 * <pnx-widget-legend
 *   _parent=${viewer}
 *   focus="map"
 *   picture="PICTURE-ID-IF-ANY"
 * ></pnx-widget-legend>
 * 
 * <!-- With custom editor links -->
 * <pnx-widget-legend
 *   _parent=${viewer}
 *   focus="map"
 *   picture="PICTURE-ID-IF-ANY"
 * >
 *   <div slot="editors"><a href="http://my.own.tool">Edit in my own tool</a></div>
 * </pnx-widget-legend>
 * 
 * <!-- Lighter version -->
 * <pnx-widget-legend
 *   _parent=${viewer}
 *   focus="pic"
 *   picture="PICTURE-ID-IF-ANY"
 *   light
 * ></pnx-widget-legend>
 * ```
 */
export default class Legend extends LitElement {
	/** @private */
	static styles = [panel, css`
		:host {
			pointer-events: none;
		}
		.pnx-panel[part="panel"] {
			border-radius: 10px;
			position: relative;
			max-width: 450px;
			z-index: 121; /* To appear above mini component */
			min-width: unset;
			pointer-events: auto;
		}
		.pnx-panel[part="panel"].pnx-padded {
			padding: 10px;
			width: 250px;
		}
		.presentation {
			font-size: 0.85em;
			line-height: 1em;
			display: flex;
			gap: 5px;
			align-items: center;
		}
		.logo {
			width: 45px;
		}
		pnx-map-legend {
			display: block;
			margin-top: 5px;
		}

		/* Lighter/smaller version */
		.pnx-panel[part="panel"].pnx-legend-light {
			display: flex;
			gap: 3px;
			padding: 3px 8px 3px 3px;
			width: unset;
			min-width: unset;
			align-items: center;
			font-size: 10px;
			margin-right: -10px;
			margin-bottom: -10px;
			border-radius: 0;
			border-top-left-radius: 5px;
			border-right: none;
  			border-bottom: none;
		}
		.pnx-legend-light a,
		.pnx-legend-light .presentation {
			font-size: 10px;
		}
		.pnx-legend-light .logo {
			width: 15px;
		}

		.pnx-legend-light pnx-map-legend {
			width: max-content;
			margin-top: unset;
			font-size: 10px;
		}
	`];

	/**
	 * Component properties.
	 * @memberof Panoramax.components.ui.widgets.Legend#
	 * @type {Object}
	 * @property {string} [focus] The focused main component (map, pic)
	 * @property {string} [picture] The picture ID
	 * @property {boolean} [light=false] Lighter version (for iframes)
	 */
	static properties = {
		focus: {type: String},
		picture: {type: String},
		light: {type: Boolean},
	};

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

	/** @private */
	connectedCallback() {
		super.connectedCallback();
		onceParentAvailable(this).then(() => this.requestUpdate());
	}

	render() {
		const classes = {
			"pnx-panel": true,
			"pnx-padded": this.focus == "map",
			"pnx-legend-light": this.light,
		};

		return html`<div class=${classMap(classes)} part="panel">
			<div
				class="presentation"
				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
			>
				<img class="logo" src=${PanoramaxImg} alt="" />

				${this.light ? html`
					&copy; <a
						href=${PanoramaxWebsiteURL()}
						title=${this._parent?._t.map.more_panoramax}
						target="_blank"
					>${this._parent?._t.pnx.panoramax}</a> |
				` : html`
					<div>
						${this._parent?._t.pnx.whats_panoramax}
						<pnx-link-button
							title=${this._parent?._t.map.more_panoramax}
							kind="superinline"
							href=${PanoramaxWebsiteURL()}
							target="_blank"
							size="sm"
						>
							${fa(faInfoCircle)}
						</pnx-link-button>
					</div>
				`}
			</div>
			<pnx-picture-legend
				._parent=${this._parent}
				style=${this.focus == "map" ? "display: none": ""}
				collapsable
				light=${this.light || nothing}
			>
				<slot slot="editors" name="editors">
					<pnx-widget-osmeditors ._parent=${this._parent} />
				</slot>
			</pnx-picture-legend>
			<pnx-map-legend
				._parent=${this._parent}
				style=${this.focus != "map" ? "display: none": ""}
				light=${this.light || nothing}
			></pnx-map-legend>
		</div>`;
	}
}

customElements.define("pnx-widget-legend", Legend);