@panoramax/web-viewer 5.0.0-develop-d26305dd → 5.0.0-develop-be5ba1a7

package/build/components/menus/PictureLegend.js

@@ -1,379 +0,0 @@
-import { LitElement, css, nothing } from "lit";
-import { html, unsafeStatic } from "lit/static-html.js";
-import { classMap } from "lit/directives/class-map.js";
-import { fa, onceParentAvailable } from "../../utils/widgets.js";
-import {
-	faArrowLeft, faCalendarAlt, faChevronDown, faChevronUp, faShareNodes,
-	faTriangleExclamation, faUser, faUserLock,
-} from "@fortawesome/free-solid-svg-icons";
-import { hidden, panel, placeholder } from "../styles.js";
-import { reverseGeocodingNominatim } from "../../utils/geocoder.js";
-import { PanoramaxMetaCatalogURL } from "../../utils/services.js";
-
-/**
- * Picture legend shows info about picture author, capture date, address, and access to metadata popup.
- * @class Panoramax.components.menus.PictureLegend
- * @element pnx-picture-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
- * <pnx-picture-legend ._parent=${viewer} />
- * ```
- */
-export default class PictureLegend extends LitElement {
-	/** @private */
-	static styles = [placeholder, panel, hidden, css`
-		:host {
-			display: flex;
-			flex-direction: column;
-			margin: 0;
-			font-family: var(--font-family);
-			flex-wrap: nowrap;
-		}
-
-		@media screen and (min-width: 576px) {
-			:host {
-				max-height: 70vh;
-			}
-		}
-
-		/* Top bar */
-		.headline {
-			display: flex;
-			gap: 10px;
-			align-items: center;
-			margin: 10px 10px 5px 10px;
-			justify-content: space-between;
-			flex: 1;
-		}
-
-		.headline-buttons {
-			display: flex;
-			gap: 5px;
-			align-items: center;
-		}
-
-		/* Address line */
-		#pic-legend-addr {
-			line-height: 1.2em;
-			font-size: 1em;
-			margin-bottom: 2px;
-			flex-grow: 5;
-			font-weight: 800;
-			text-overflow: ellipsis;
-			overflow: hidden;
-  			white-space: nowrap;
-		}
-
-		#pic-legend-addr span {
-			display: inline-block;
-			height: 100%;
-			width: 100%;
-		}
-
-		/* Visibility badge */
-		.visibility-badge {
-			cursor: help;
-			background: var(--blue);
-			color: var(--white);
-			border-radius: 10px;
-			height: 20px;
-			display: inline-flex;
-			font-size: 0.8em;
-			padding: 0 5px;
-  			gap: 3px;
-			font-size: 0.7em;
-  			align-items: center;
-		}
-
-		.visibility-badge svg {
-			height: 1em;
-		}
-
-		/* Minimal info block */
-		#pic-legend-info {
-			margin: 10px;
-			display: flex;
-			gap: 10px;
-			justify-content: space-around;
-		}
-		.info-block {
-			display: flex;
-			flex-shrink: 1;
-			gap: 5px;
-			font-weight: 600;
-			font-size: 0.85em;
-			align-items: center;
-		}
-		.info-block svg { height: 18px; }
-
-		/* Expand button */
-		#pic-legend-expand {
-			display: block;
-			margin-top: 5px;
-			max-width: 100%;
-			flex: 1;
-		}
-		#pic-legend-expand::part(btn) {
-			border-radius: 10px;
-			border-top-right-radius: 0;
-			border-top-left-radius: 0;
-		}
-
-		/* Details block */
-		pnx-picture-metadata {
-			margin: 5px 10px;
-			display: block;
-			box-sizing: border-box;
-			flex: 1;
-			overflow-y: auto;
-		}
-
-		/* Details actions */
-		#pic-legend-cta {
-			display: flex;
-			margin: 5px 10px;
-			border-bottom-left-radius: 10px;
-			border-bottom-right-radius: 10px;
-			gap: 5px;
-			flex-wrap: wrap;
-			flex: 1;
-		}
-
-		/* More options menu */
-		#pnx-legend-opts { min-width: unset; }
-
-		/* Editors */
-		#pic-legend-editors { margin: 0 10px; }
-
-		/* Light version */
-		.pnx-picture-legend-light {
-			width: max-content;
-			font-size: 10px;
-		}
-	`];
-
-	/**
-	 * Component properties.
-	 * @memberof Panoramax.components.menus.PictureLegend#
-	 * @type {Object}
-	 * @property {boolean} [light=false] Lighter version (for iframes)
-	 */
-	static properties = {
-		light: {type: Boolean},
-		_caption: { state: true },
-		_addr: { state: true },
-		_expanded: { state: true },
-		_blockOnEditor: { state: true },
-		_visibility: { state: true },
-		collapsable: { type: Boolean },
-	};
-
-	/** @private */
-	constructor() {
-		super();
-		this._expanded = true;
-		this.collapsable = false;
-		this.light = false;
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-
-		this._expanded = !this.collapsable;
-		this._prevSearches = {};
-
-		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());
-				});
-				this._parent.psv.addEventListener("annotation-focused", () => {
-					this._expanded = true;
-				});
-				if(!this._parent._initParams.getParentPostInit().skipTagsMenuOpening) {
-					this._parent.psv.addEventListener("annotations-toggled", e => {
-						if(e.detail.visible) { this._expanded = true; }
-					});
-				}
-				if(this._parent.psv.getSelectedAnnotations().length > 0) {
-					this._expanded = true;
-				}
-			});
-	}
-
-	/** @private */
-	_onPicChange(picMeta) {
-		clearTimeout(this._addrTimer1);
-		this._caption = picMeta?.caption;
-
-		if(picMeta) {
-			this._visibility = picMeta.properties?.["geovisio:visibility"] || null;
-			if(this._visibility === "anyone") { this._visibility = null; }
-
-			const coordsHash = `${picMeta.gps[0].toFixed(4)}/${picMeta.gps[1].toFixed(4)}`;
-			if(this._prevSearches[coordsHash]) {
-				this._addr = this._prevSearches[coordsHash];
-			}
-			else if(!this._parent.psv._sequencePlaying) {
-				this._addr = "";
-				this._addrTimer1 = setTimeout(() => {
-					reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
-						.then(addr => {
-							clearTimeout(this._addrTimer2);
-							this._addr = addr;
-							this._prevSearches[coordsHash] = addr;
-						});
-				}, 500);
-			}
-		}
-		else {
-			this._visibility = null;
-			this._addr = "";
-		}
-	}
-
-	/** @private */
-	_onBackClick() {
-		if(this._parent.isWidthSmall() && this._parent.focus === "map") {
-			this._parent.select();
-		}
-		else {
-			this._parent._setFocus?.("map");
-		}
-	}
-
-	/**
-	 * Force legend to not go anywhere beyond tags editor.
-	 * @memberof Panoramax.components.menus.PictureLegend#
-	 * @param {boolean} enabled Set to true to block legend, false to unblock
-	 */
-	blockOnEditing(enabled) {
-		this._blockOnEditor = enabled;
-	}
-
-	/** @private */
-	render() {
-		if(!this._caption) { return nothing; }
-
-		const lang = this._parent?.lang || window.navigator.language;
-		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
-		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
-
-		if(this.light) {
-			return html`<div class="pnx-picture-legend-light">
-				${this._caption.producer?.length > 0 ? html`
-					<a
-						href=${PanoramaxMetaCatalogURL()+"/?pic="+this._parent.psv.getPictureMetadata().id}
-						target="_blank"
-						title=${this._parent?._t.pnx.share_page}
-					>${this._caption.producer[this._caption.producer.length-1]}</a>
-				</div>` : nothing}
-
-				${this._caption.producer?.length > 0 && this._caption.date ? "-" : ""}
-
-				${this._caption.date ? new Intl.DateTimeFormat(lang, {
-					timeZone: this._caption.tz,
-					dateStyle: "short"
-				}).format(this._caption.date) : nothing}
-
-				${(this._caption.producer?.length > 0 || this._caption.date) && this._caption?.license ? "|" : ""}
-
-				${this._caption?.license ? html`${unsafeStatic(this._caption.license)}` : nothing}
-			`;
-		}
-
-		return html`
-			<div class=${classMap({ "headline": true, "pnx-hidden": this._blockOnEditor })}>
-				${this._parent._setFocus ? html`
-					<pnx-button
-						kind="superinline"
-						@click=${this._onBackClick}
-					>
-						${fa(faArrowLeft)}
-					</pnx-button>
-				` : nothing}
-
-				<div id="pic-legend-addr" title=${this._addr || ""}>
-					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
-				</div>
-
-				<div class="headline-buttons">
-					${this._visibility ? html`
-						<div
-							class="visibility-badge"
-							title=${this._parent?._t.pnx["visibility_title_"+this._visibility]}
-						>
-							${fa(faUserLock, {transform: {size: 16}})}
-							${this._parent?._t.pnx["visibility_"+this._visibility]}
-						</div>
-					` : nothing}
-
-					<pnx-button
-						size="sm"
-						class=${hiddenExpanded}
-						title=${this._parent?._t.pnx.share}
-						@click=${() => this._parent._showShareOptions()}
-					>
-						${fa(faShareNodes)}
-					</pnx-button>
-
-					<pnx-picture-legend-actions
-						@click=${e => e.stopPropagation()}
-						._parent=${this._parent}
-						?full=${this._expanded}
-					></pnx-picture-legend-actions>
-				</div>
-			</div>
-
-			<div id="pic-legend-info" class=${hiddenExpanded}>
-				${this._caption.producer?.length > 0 ? html`<div class="info-block">
-					${fa(faUser)}
-					${this._caption.producer[this._caption.producer.length-1]}
-				</div>` : nothing}
-
-				${this._caption.date ? html`<div class="info-block">
-					${fa(faCalendarAlt)}
-					${this._caption.date.toLocaleDateString(this._parent?.lang || window.navigator.language, { year: "numeric", month: "long", day: "numeric" })}				</div>` : nothing}
-			</div>
-
-			<div id="pic-legend-cta" class=${classMap({ "pnx-hidden": !this._expanded || this._blockOnEditor })}>
-				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
-					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
-				</pnx-button>
-
-				${this._parent.getAPI()._endpoints.report ? html`
-						<pnx-button kind="fullwarn" size="sm" @click=${() => this._parent._showReportForm()}>
-							${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
-						</pnx-button>
-				` : nothing}
-
-				<slot name="editors">
-					<pnx-widget-osmeditors ._parent=${this._parent} />
-				</slot>
-			</div>
-
-			<pnx-picture-metadata
-				class=${shownExpanded}
-				.block-editor=${this._blockOnEditor}
-				._parent=${this._parent}
-			></pnx-picture-metadata>
-
-			${this.collapsable && !this._blockOnEditor ? html`<pnx-button
-				kind="inline"
-				size="sm"
-				id="pic-legend-expand"
-				@click=${() => this._expanded = !this._expanded}
-			>${this._expanded ? fa(faChevronUp) : fa(faChevronDown)}</pnx-button>` : nothing}
-		`;
-	}
-}
-
-customElements.define("pnx-picture-legend", PictureLegend);