@panoramax/web-viewer 3.2.3 → 4.0.0

package/src/components/ui/widgets/Legend.js

@@ -0,0 +1,113 @@
+import {LitElement, html, css} from "lit";
+import { panel } from "../../styles";
+import { fa } 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";
+
+/**
+ * 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"
+ * />
+ * 
+ * <!-- 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>
+ * ```
+ */
+export default class Legend extends LitElement {
+	/** @private */
+	static styles = [panel, css`
+		.pnx-panel[part="panel"] {
+			border-radius: 10px;
+			position: relative;
+			max-width: 80vw;
+			z-index: 121; /* To appear above mini component */
+			min-width: unset;
+		}
+		.pnx-panel[part="panel"].pnx-padded {
+			padding: 10px;
+			width: 250px;
+		}
+		.presentation {
+			font-size: 0.9em;
+			display: flex;
+			gap: 5px;
+			align-items: center;
+		}
+		.logo {
+			width: 45px;
+		}
+	`];
+
+	/**
+	 * 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
+	 */
+	static properties = {
+		focus: {type: String},
+		picture: {type: String},
+	};
+
+	render() {
+		const classes = {
+			"pnx-panel": true,
+			"pnx-padded": this.focus == "map",
+		};
+
+		return html`<div class=${classMap(classes)} part="panel">
+			<div
+				class="presentation"
+				style=${this.focus != "map" && this.picture ? "display: none": ""}
+			>
+				<img class="logo" src=${PanoramaxImg} alt="" />
+				<div>
+					Panoramax est le géocommun des photos de rues.
+					<pnx-link-button
+						title=${this._parent?._t.map.more_panoramax}
+						kind="superinline"
+						href="https://panoramax.fr"
+						target="_blank"
+						size="sm"
+					>
+						${fa(faInfoCircle)}
+					</pnx-link-button>
+				</div>
+			</div>
+			<pnx-picture-legend
+				._parent=${this._parent}
+				style=${this.focus == "map" ? "display: none": ""}
+				collapsable
+			>
+				<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": ""}
+			></pnx-map-legend>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-widget-legend", Legend);

package/src/components/ui/widgets/MapFiltersButton.js

@@ -0,0 +1,104 @@
+import { LitElement, html, nothing } from "lit";
+import { fa } from "../../../utils/widgets";
+import { faSliders } from "@fortawesome/free-solid-svg-icons/faSliders";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+import { activeIcon } from "../../styles";
+import { MAP_FILTERS } from "../MapMore";
+
+/**
+ * Collapsible button showing off map filters menus.
+ * @class Panoramax.components.ui.widgets.MapFiltersButton
+ * @element pnx-widget-mapfilters
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-mapfilters user-search="" _parent=${viewer} />
+ * ```
+ */
+export default class MapFiltersButton extends LitElement {
+	/** @private */
+	static styles = [activeIcon];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.MapFiltersButton#
+	 * @type {Object}
+	 * @property {boolean} [user-search=false] Should user search filter show up ?
+	 * @property {boolean} [quality-score=false] Should quality score filter show up ?
+	 */
+	static properties = {
+		"user-search": {type: Boolean},
+		"quality-score": {type: Boolean},
+		_active: {state: true},
+	};
+
+	constructor() {
+		super();
+		this["user-search"] = false;
+		this["quality-score"] = false;
+		this._active = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Listen to user visibility changes to switch the filter active icon
+		this._parent?.onceMapReady?.().then(() => {
+			this._active = (
+				Object.keys(this._parent.map._mapFilters).filter(d => d && d !== "theme").length > 0
+				|| this._parent.map.getVisibleUsers().filter(u => u !== "geovisio").length > 0
+			);
+			
+			this._parent.map.on("filters-changed", e => {
+				this._active = (
+					Object.keys(e).filter(d => d && MAP_FILTERS.includes(d) && d != "theme").length > 0
+					|| this._parent.map.getVisibleUsers().filter(u => u !== "geovisio").length > 0
+				);
+			});
+
+			this._parent.map.on("users-changed", e => {
+				this._active = (
+					Object.keys(this._parent.map._mapFilters).filter(d => d && d !== "theme").length > 0
+					|| e.usersIds.filter(u => u !== "geovisio").length > 0
+				);
+			});
+		});
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall();
+		const resetIcon = fa(faXmark);
+		resetIcon.addEventListener("click", e => {
+			e.stopPropagation();
+			this.shadowRoot.querySelector("pnx-map-filters-menu")._onReset();
+			this.shadowRoot.querySelector("#pnx-widget-filter")._opened = false;
+		});
+
+		return html`
+			<pnx-togglable-group
+				id="pnx-widget-filter"
+				padded="false"
+				class="pnx-only-map pnx-print-hidden"
+				._parent=${this._parent}
+			>
+				<pnx-button kind="flat" size="xl" slot="button">
+					${fa(faSliders)}
+					${this._active ? html`<span class="pnx-active-icon"></span>` : nothing}
+					${isSmall ? nothing : this._parent?._t.pnx.filters}
+					${isSmall ? nothing : (this._active ? resetIcon : fa(faChevronDown))}
+				</pnx-button>
+				<pnx-map-filters-menu
+					id="pnx-map-filters-menu"
+					._parent=${this._parent}
+					user-search=${this["user-search"]}
+					quality-score=${this["quality-score"]}
+				></pnx-map-filters-menu>
+			</pnx-togglable-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-mapfilters", MapFiltersButton);

package/src/components/ui/widgets/MapLayersButton.js

@@ -0,0 +1,79 @@
+import { LitElement, html, nothing } from "lit";
+import { fa } from "../../../utils/widgets";
+import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+import { activeIcon } from "../../styles";
+
+/**
+ * Collapsible button showing off map filters menus.
+ * @class Panoramax.components.ui.widgets.MapLayersButton
+ * @element pnx-widget-maplayers
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-maplayers _parent=${viewer} />
+ * ```
+ */
+export default class MapLayersButton extends LitElement {
+	/** @private */
+	static styles = [activeIcon];
+
+	/** @private */
+	static properties = {
+		_active: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._active = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const nullThemes = [undefined, null, "", "default"];
+
+		this._parent?.onceMapReady?.().then(() => {
+			this._active = !nullThemes.includes(this._parent.map._mapFilters.theme);
+			this._parent.map.on("filters-changed", e => {
+				this._active = !nullThemes.includes(e.theme);
+			});
+		});
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall();
+		const resetIcon = fa(faXmark);
+		resetIcon.addEventListener("click", e => {
+			e.stopPropagation();
+			const menu = this.shadowRoot.querySelector("pnx-map-layers-menu");
+			menu.shadowRoot.querySelector("#pnx-map-theme").value = "default";
+			menu._onThemeSelect({target: {value: "default"}});
+			this.shadowRoot.querySelector("#pnx-widget-map-layers")._opened = false;
+		});
+
+		return html`
+			<pnx-togglable-group
+				id="pnx-widget-map-layers"
+				class="pnx-print-hidden"
+				._parent=${this._parent}
+			>
+				<pnx-button kind="flat" size="xl" slot="button">
+					${fa(faLayerGroup)}
+					${this._active ? html`<span class="pnx-active-icon"></span>` : nothing}
+					${isSmall ? nothing : this._parent?._t.pnx.layers}
+					${isSmall ? nothing : (this._active ? resetIcon : fa(faChevronDown))}
+				</pnx-button>
+				<pnx-map-layers-menu
+					id="pnx-map-layers-menu"
+					._parent=${this._parent}
+				></pnx-map-layers-menu>
+			</pnx-togglable-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-maplayers", MapLayersButton);

package/src/components/ui/widgets/OSMEditors.js

@@ -0,0 +1,155 @@
+import { LitElement, html, nothing, css } from "lit";
+import { fa } from "../../../utils/widgets";
+import { josmBboxParameters } from "../../../utils/utils";
+import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
+import { faSatelliteDish } from "@fortawesome/free-solid-svg-icons/faSatelliteDish";
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
+
+const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
+const ID_URL = "https://www.openstreetmap.org/edit?editor=id";
+
+/**
+ * OSM Editors component offers direct links to OpenStreetMap's iD and JOSM editors.
+ * @class Panoramax.components.ui.widgets.OSMEditors
+ * @element pnx-widget-osmeditors
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-osmeditors _parent=${viewer} />
+ * ```
+ */
+export default class OSMEditors extends LitElement {
+	/** @private */
+	static properties = {
+		_pic: {state: true},
+		_josm: {state: true},
+	};
+
+	/** @private */
+	static styles = css`
+		:host { display: inline-flex; gap: 5px; }
+		:host > * { flex: 1; }
+		pnx-link-button::part(btn) { height: auto; }
+	`;
+
+	constructor() {
+		super();
+		this._josm = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._parent?.onceReady().then(() => {
+			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
+			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
+		});
+	}
+
+	/** @private */
+	_onPictureLoad() {
+		this._pic = this._parent?.psv?.getPictureMetadata();
+	}
+
+	/**
+	 * Enable or disable JOSM live editing using [Remote](https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands)
+	 * @private
+	 */
+	_toggleJOSMLive() {
+		this._josm = !this._josm;
+
+		if(this._josm) {
+			// Check if JOSM remote is enabled
+			fetch(JOSM_REMOTE_URL+"/version")
+				.then(() => {
+					// First loading : download + zoom
+					const p1 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
+					if(p1) {
+						const url = `${JOSM_REMOTE_URL}/load_and_zoom?${p1}`;
+						fetch(url).catch(e => {
+							console.warn(e);
+							this._toggleJOSMLive();
+						});
+					}
+
+					// Enable event listening
+					this._josmListener = () => {
+						const p2 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
+						if(p2) {
+							// Next loadings : just zoom
+							//   This avoids desktop focus to go on JOSM instead of
+							//   staying on web browser
+							const url = `${JOSM_REMOTE_URL}/zoom?${p2}`;
+							fetch(url).catch(e => {
+								console.warn(e);
+								this._toggleJOSMLive();
+							});
+						}
+					};
+					this._parent?.psv?.addEventListener?.("picture-loaded", this._josmListener);
+					this._parent?.psv?.addEventListener?.("picture-loading", this._josmListener);
+				})
+				.catch(e => {
+					console.warn(e);
+					alert(this._parent?._t.pnx.error_josm);
+					this._toggleJOSMLive();
+				});
+		}
+		else {
+			if(this._josmListener) {
+				this._parent?.psv?.removeEventListener?.("picture-loading", this._josmListener);
+				this._parent?.psv?.removeEventListener?.("picture-loaded", this._josmListener);
+				delete this._josmListener;
+			}
+		}
+	}
+
+	/** @private */
+	render() {
+		if(!this._pic) { return nothing; }
+
+		// Mobile -> Geo URI
+		if(this._parent?.isWidthSmall()) {
+			return html`
+				<pnx-link-button
+					size="sm"
+					href="geo:${this._pic.gps[1]},${this._pic.gps[0]};u=3"
+				>
+					${fa(faExternalLinkAlt)} ${this._parent?._t.pnx.geo_uri}
+				</pnx-link-button>
+			`;
+		}
+		else {
+			const idOpts = {
+				"map": `19/${this._pic.gps[1]}/${this._pic.gps[0]}`,
+				"source": "Panoramax",
+				"photo_overlay": "panoramax",
+				"photo": `panoramax/${this._pic.id}`,
+			};
+			const idUrl = idOpts && `${ID_URL}#${new URLSearchParams(idOpts).toString()}`;
+
+			return html`
+				<pnx-link-button
+					size="sm"
+					href=${idUrl}
+					target="_blank"
+					title="${this._parent?._t.pnx.contribute_id}"
+				>
+					${fa(faLocationDot)} ${this._parent?._t.pnx.id}
+				</pnx-link-button>
+
+				<pnx-button
+					id="pnx-edit-josm"
+					size="sm"
+					active=${this._josm ? "" : nothing}
+					@click=${this._toggleJOSMLive}
+					title="${this._parent?._t.pnx.josm_live}"
+				>
+					${fa(faSatelliteDish)} ${this._parent?._t.pnx.josm}
+				</pnx-button>
+			`;
+		}
+	}
+}
+
+customElements.define("pnx-widget-osmeditors", OSMEditors);

package/src/components/ui/widgets/PictureLegendActions.js

@@ -0,0 +1,117 @@
+import { LitElement, html, nothing, css } from "lit";
+import { fa } 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();
+
+		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("pnx-togglable-group").close();
+	}
+
+	/** @private */
+	_onShareClick() {
+		this._closeGroup();
+		this._parent._showShareOptions();
+	}
+
+	/** @private */
+	_onReportClick() {
+		this._closeGroup();
+		this._parent._showReportForm();
+	}
+
+	/** @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.full ? html`
+					<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>
+					`}
+				` : html`
+					<button @click=${this._onReportClick}>
+						${this._parent?._t.pnx.report}
+					</button>
+					<button @click=${this._onShareClick}>
+						${this._parent?._t.pnx.share}
+					</button>
+					${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}
+				` }
+			</pnx-list-group>
+		</pnx-togglable-group>`;
+	}
+}
+
+customElements.define("pnx-picture-legend-actions", PictureLegendActions);

package/src/components/ui/widgets/Player.css

@@ -0,0 +1,7 @@
+pnx-widget-player {
+	pointer-events: none;
+}
+
+pnx-widget-player > pnx-button-group {
+	pointer-events: auto;
+}