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

Panoramax web viewer for geolocated pictures

import { LitElement, html, css } from "lit";
import { degToDms } from "../../../utils/utils";
import { fa } from "../../../utils/widgets";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
import { btngroup } from "../../styles";

/**
 * Copy Coordinates button allows easy copy of several format of map coordinates.
 * @class Panoramax.components.ui.widgets.CopyCoordinates
 * @element pnx-copy-coordinates
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-copy-coordinates gps=${[-1.7, 48.6]} _parent=${viewer} />
 * ```
 */
export default class CopyCoordinates extends LitElement {
	/** @private */
	static styles = [btngroup, css`
		pnx-togglable-group::part(menu) {
			border-radius: 5px;
			min-width: unset;
		}
	`];

	/**
	 * Component properties.
	 * @memberof Panoramax.components.ui.widgets.CopyCoordinates#
	 * @type {Object}
	 * @property {number[]} gps GPS/map coordinates, as [lon, lat]
	 */
	static properties = {
		gps: {type: Array},
	};

	/** @private */
	render() {
		const dmslonval = degToDms(this.gps[0]);
		const dmslon = dmslonval.d < 0 ? `${Math.abs(dmslonval.d)}°${dmslonval.m}'${dmslonval.s}"W` : `${dmslonval.d}°${dmslonval.m}'${dmslonval.s}"E`;
		const dmslatval = degToDms(this.gps[1]);
		const dmslat = dmslatval.d < 0 ? `${Math.abs(dmslatval.d)}°${dmslatval.m}'${dmslatval.s}"S` : `${dmslatval.d}°${dmslatval.m}'${dmslatval.s}"N`;

		const values = {
			ddeclatlon: `${this.gps[1].toFixed(7)}, ${this.gps[0].toFixed(7)}`,
			ddeclonlat: `${this.gps[0].toFixed(7)}, ${this.gps[1].toFixed(7)}`,
			ddmslonlat: `${dmslon}, ${dmslat}`,
			ddmslatlon: `${dmslat}, ${dmslon}`,
		};

		return html`<pnx-button-group style="display: inline-block; vertical-align: baseline" dir="row">
			<pnx-copy-button
				size="sm"
				text=${values.ddeclonlat}
				title=${this._parent?._t.pnx.metadata_location_copy.replace("{v}", values.ddeclonlat)}
			></pnx-copy-button>

			<pnx-togglable-group padded="false" ._parent=${this._parent}>
				<pnx-button
					size="sm"
					slot="button"
					title=${this._parent?._t.pnx.metadata_location_copy_more}
				>${fa(faChevronDown)}</pnx-button>
				<pnx-list-group>
					${Object.values(values).map(text => html`
						<pnx-copy-button unstyled text=${text} ._t=${this._parent._t}>
							${this._parent?._t.pnx.metadata_location_copy.replace("{v}", text)}
						</pnx-copy-button>
					`)}
				</pnx-list-group>
			</pnx-togglable-group>
		</pnx-button-group>`;
	}
}

customElements.define("pnx-copy-coordinates", CopyCoordinates);