@panoramax/web-viewer 3.2.3-develop-f219e404 → 3.2.3-develop-6257391e

package/src/components/menus/MapFilters.js

@@ -0,0 +1,386 @@
+import { LitElement, html, css, nothing } from "lit";
+import { fa } from "../../utils/widgets";
+import { getUserAccount } from "../../utils/utils";
+import { faSvg, titles } from "../styles";
+import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
+import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
+import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+
+/**
+ * Map Filters menu allows user to select map data they want displayed.
+ * @class Panoramax.components.menus.MapFilters
+ * @element pnx-map-filters-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-filters-menu user-search="" _parent=${viewer} />
+ * ```
+ */
+export default class MapFilters extends LitElement {
+	/** @private */
+	static styles = [ faSvg, titles, css`
+		.pnx-input-group {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			gap: 5px;
+		}
+
+		/* Filter block */
+		.pnx-filter-block {
+			position: relative;
+			padding: 10px 15px;
+			border-bottom: 2px solid var(--widget-border-div);
+		}
+		.pnx-filter-block:first-child {
+			padding-top: 15px;
+		}
+		.pnx-filter-block:last-child {
+			border-bottom: none;
+			padding-bottom: 15px;
+		}
+		.pnx-filter-zoomin {
+			z-index: 131;
+			background-color: rgba(255,255,255,0.8);
+			text-align: center;
+			font-weight: bold;
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 25px;
+		}
+		.pnx-filter-zoomin.hidden {
+			display: none;
+		}
+
+		/* Input styles */
+		.pnx-filter-active,
+		pnx-search-bar.pnx-filter-active::part(container),
+		pnx-search-bar.pnx-filter-active::part(input) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+		input[type=date] {
+			min-width: 0;
+			flex-grow: 2;
+			padding: 2px 0;
+			text-align: center;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			border: 1px solid var(--widget-border-div);
+			border-radius: 20px;
+		}
+
+		/* Input shortcuts */
+		.pnx-input-shortcuts {
+			margin-top: -10px;
+			margin-bottom: 5px;
+		}
+		.pnx-input-shortcuts button {
+			border: none;
+			height: 20px;
+			line-height: 20px;
+			font-size: 11px;
+			padding: 0 8px;
+			vertical-align: middle;
+			background-color: var(--grey-pale);
+			color: var(--black);
+			border-radius: 10px;
+			cursor: pointer;
+		}
+		.pnx-input-shortcuts button:hover {
+			background-color: #d9dcd9;
+		}
+
+		/* Checkbox looking like buttons */
+		.pnx-input-group.pnx-checkbox-btns {
+			gap: 0;
+		}
+		.pnx-checkbox-btns label {
+			display: inline-block;
+			padding: 2px 7px;
+			background: none;
+			border: 1px solid var(--widget-border-btn);
+			color: var(--widget-font-direct);
+			cursor: pointer;
+			font-size: 16px;
+			text-decoration: none;
+			border-left-width: 0px;
+		}
+		.pnx-checkbox-btns label:hover {
+			background-color: var(--widget-bg-hover);
+		}
+		.pnx-checkbox-btns label:first-of-type {
+			border-top-left-radius: 8px;
+			border-bottom-left-radius: 8px;
+			border-left-width: 1px;
+		}
+		.pnx-checkbox-btns label:last-of-type {
+			border-top-right-radius: 8px;
+			border-bottom-right-radius: 8px;
+		}
+		.pnx-checkbox-btns input[type="checkbox"] { display: none; }
+		.pnx-checkbox-btns input[type="checkbox"]:checked + label {
+			background-color: var(--widget-bg-active);
+			color: var(--widget-font-active);
+		}
+		.pnx-checkbox-btns input[type="checkbox"]:checked + label:first-of-type {
+			border-right-color: white;
+		}
+
+		/* Force user search width */
+		#pnx-filter-search-user::part(container) { width: 100%; }
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.MapFilters#
+	 * @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 = {
+		"quality-score": {type: Boolean},
+		"user-search": {type: Boolean},
+		showZoomIn: {state: true},
+		minDate: {state: true},
+		maxDate: {state: true},
+		typeFlat: {state: true},
+		type360: {state: true},
+		score: {state: true},
+		user: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._formDelay = null;
+		this.showZoomIn = true;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		// Input changes
+		for(let i of this.shadowRoot.querySelectorAll("input")) {
+			i.addEventListener("change", this._onFormChange.bind(this));
+			i.addEventListener("keypress", this._onFormChange.bind(this));
+			i.addEventListener("paste", this._onFormChange.bind(this));
+			i.addEventListener("input", this._onFormChange.bind(this));
+		}
+
+		// Map zoom
+		this._parent?.onceMapReady?.().then(() => {
+			this._parent.map.on("zoomend", this._onMapZoom.bind(this));
+			this._parent.map.on("filters-changed", this._onParentFilterChange.bind(this));
+			this._onMapZoom();
+			this._onParentFilterChange(this._parent.map._mapFilters);
+		});
+	}
+
+	/**
+	 * Map zoom event handler: show/hide "zoom in" labels
+	 * @private
+	 */
+	_onMapZoom() {
+		this.showZoomIn = this._parent.map.getZoom() < 7;
+	}
+
+	/**
+	 * Filter changes on parent: update input fields
+	 * @private
+	 */
+	_onParentFilterChange(e) {
+		this.minDate = e?.minDate || null;
+		this.maxDate = e?.maxDate || null;
+		this.score = e?.qualityscore?.length < 5 ? e.qualityscore.join(",") : "";
+
+		if(e?.pic_type && e.pic_type != "") {
+			this.type360 = e.pic_type == "equirectangular";
+			this.typeFlat = e.pic_type == "flat";
+		}
+		
+		if(this.type360 === this.typeFlat) {
+			this.type360 = false;
+			this.typeFlat = false;
+		}
+	}
+
+	/** @private */
+	_onSubmit(e) {
+		e.preventDefault();
+		this._onFormChange();
+		return false;
+	}
+
+	/** @private */
+	_onFormChange() {
+		if(this._formDelay) { clearTimeout(this._formDelay); }
+		this._formDelay = setTimeout(() => this._parent?._onMapFiltersChange(), 250);
+	}
+
+	/** @private */
+	_userSearch(value) {
+		return this?._parent.api.searchUsers(value)
+			.then(data => ((data || [])
+				.map(f => ({
+					title: f.label,
+					data: f
+				}))
+			));
+	}
+
+	/** @private */
+	_onUserSearchResult(e) {
+		if(e.detail) { e.target.classList.add("pnx-filter-active"); }
+		else { e.target.classList.remove("pnx-filter-active"); }
+		return this._parent?.map.setVisibleUsers(e.detail?.data ? [e.detail.data.id] : ["geovisio"]);
+	}
+
+	/** @private */
+	_onReset() {
+		this.shadowRoot.querySelector("#pnx-filter-qualityscore")?.setAttribute("grade", "");
+		this.shadowRoot.querySelector("#pnx-filter-search-user")?.reset();
+		this.minDate = null;
+		this.maxDate = null;
+		this.typeFlat = null;
+		this.type360 = null;
+		this.score = null;
+		this.user = null;
+		this._onFormChange();
+	}
+
+	/**
+	 * Shortcut button click: change associated input value
+	 * @private
+	 */
+	_onShortcutClick(field, value) {
+		return () => {
+			const elem = this.shadowRoot.getElementById(field);
+			if(elem) {
+				if(elem.value !== value) { elem.value = value; }
+				else { elem.value = ""; }
+			}
+		};
+	}
+	
+	/** @private */
+	render() {
+		const userAccount = getUserAccount();
+
+		return html`<form
+			@reset=${this._onReset}
+			@change=${this._onFormChange}
+			@submit=${this._onSubmit}
+		>
+			<div class="pnx-filter-block">
+				<div class="pnx-filter-zoomin ${this.showZoomIn ? "" : "hidden"}">${this._parent?._t.pnx.filter_zoom_in}</div>
+				<h4>${fa(faCalendar)} ${this._parent?._t.pnx.filter_date}</h4>
+				<div class="pnx-input-shortcuts">
+					<button
+						@click=${this._onShortcutClick("pnx-filter-date-from", new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0])}
+					>${this._parent?._t.pnx.filter_date_1month}</button>
+					<button
+						@click=${this._onShortcutClick("pnx-filter-date-from", new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0])}
+					>${this._parent?._t.pnx.filter_date_1year}</button>
+				</div>
+				<div class="pnx-input-group">
+					<input
+						type="date"
+						id="pnx-filter-date-from"
+						.value=${this.minDate}
+						class=${this.minDate && this.minDate != "" ? "pnx-filter-active" : ""}
+					/>
+					${fa(faArrowRight)}
+					<input
+						type="date"
+						id="pnx-filter-date-end"
+						.value=${this.maxDate}
+						class=${this.maxDate && this.maxDate != "" ? "pnx-filter-active" : ""}
+					/>
+				</div>
+			</div>
+
+			<div class="pnx-filter-block">
+				<h4>${fa(faImage)} ${this._parent?._t.pnx.filter_picture}</h4>
+				<div class="pnx-input-group pnx-checkbox-btns" style="justify-content: center;">
+					<input
+						type="checkbox"
+						id="pnx-filter-type-flat"
+						name="flat"
+						.checked=${this.typeFlat}
+					/>
+					<label for="pnx-filter-type-flat">${fa(faImage)} ${this._parent?._t.pnx.picture_flat}</label>
+					<input
+						type="checkbox"
+						id="pnx-filter-type-360"
+						name="360"
+						.checked=${this.type360}
+					/>
+					<label for="pnx-filter-type-360">${fa(faPanorama)} ${this._parent?._t.pnx.picture_360}</label>
+				</div>
+			</div>
+
+			${this["quality-score"] ? html`
+				<div class="pnx-filter-block">
+					<div class="pnx-filter-zoomin ${this.showZoomIn ? "" : "hidden"}">${this._parent?._t.pnx.filter_zoom_in}</div>
+					<h4 style="margin-bottom: 3px">
+						${fa(faMedal)} ${this._parent?._t.pnx.filter_qualityscore}
+						<pnx-button
+							title="${this._parent?._t.pnx.metadata_quality_help}"
+							kind="outline"
+							@click=${() => this._parent?._showQualityScoreDoc()}
+						>
+							${fa(faInfoCircle)}
+						</pnx-button>
+					</h4>
+					<div class="pnx-input-group">
+						<pnx-quality-score
+							id="pnx-filter-qualityscore"
+							_t=${this._parent?._t}
+							input="pnx-filter-qualityscore"
+							grade=${this.score}
+							@change=${this._onFormChange}
+						>
+						</pnx-quality-score>
+					</div>
+				</div>
+			` : nothing}
+
+			${this["user-search"] ? html`
+				<div class="pnx-filter-block">
+					<h4>${fa(faUser)} ${this._parent?._t.pnx.filter_user}</h4>
+					${userAccount ? html`
+						<div class="pnx-input-shortcuts">
+							<button>${this._parent?._t.pnx.filter_user_mypics}</button>
+						</div>
+					` : nothing}
+					<pnx-search-bar
+						id="pnx-filter-search-user"
+						placeholder=${this._parent?._t.pnx.search_user}
+						class=${this.user ? "pnx-filter-active" : ""}
+						value=${this.user}
+						@result=${this._onUserSearchResult}
+						.searcher=${this._userSearch.bind(this)}
+						._parent=${this._parent}
+						no-menu-closure
+					>
+					</pnx-search-bar>
+				</div>
+			` : nothing}
+		</form>`;
+	}
+}
+
+customElements.define("pnx-map-filters-menu", MapFilters);

package/src/components/menus/MapLayers.js

@@ -0,0 +1,143 @@
+import { LitElement, html, css, nothing } from "lit";
+import { fa } from "../../utils/widgets";
+import { faSvg, titles, select } from "../styles";
+import { COLORS } from "../../utils/utils";
+import { faEarthEurope } from "@fortawesome/free-solid-svg-icons/faEarthEurope";
+import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+
+/**
+ * Map Layers menu allows user to select background and map theme.
+ * @class Panoramax.components.menus.MapLayers
+ * @element pnx-map-layers-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-layers-menu _parent=${viewer} />
+ * ```
+ */
+export default class MapLayers extends LitElement {
+	/** @private */
+	static styles = [ faSvg, titles, select, css`
+		.legend {
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 5px;
+			justify-content: space-evenly;
+		}
+
+		.legend-entry {
+			margin: 10px 8px 5px 0px;
+			line-height: 12px;
+			display: flex;
+			align-items: center;
+			font-size: 1.0em;
+		}
+
+		.legend-color {
+			display: inline-block;
+			width: 15px;
+			height: 15px;
+			border-radius: 3px;
+			margin-right: 5px;
+		}
+
+		.legend-score {
+			justify-content: center;
+			gap: 0;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		theme: {state: true},
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._parent?.onceMapReady?.().then(() => {
+			this.theme = this._parent.map._mapFilters.theme;
+			this._parent.map.on("filters-changed", e => this.theme = e.theme);
+		});
+	}
+
+	/** @private */
+	_onThemeSelect(e) {
+		this.theme = e.target.value;
+		this._parent?._onMapFiltersChange();
+	}
+
+	/** @private */
+	render() {
+		const parts = [];
+
+		// Background selector
+		if(this._parent?.map?.hasTwoBackgrounds?.()) {
+			parts.push(html`
+				<h4>${fa(faEarthEurope)} ${this._parent?._t.pnx.map_background}</h4>
+				<pnx-map-background ._parent=${this._parent}></pnx-map-background>
+			`);
+		}
+
+		// Map theme selector
+		parts.push(html`
+			<h4>${fa(faPalette)} ${this._parent?._t.pnx.map_theme}</h4>
+			<select id="pnx-map-theme" style="width: 100%;" @change=${this._onThemeSelect}>
+				<option value="default" .selected=${this.theme == "default"}>${this._parent?._t.pnx.map_theme_default}</option>
+				<option value="age" .selected=${this.theme == "age"}>${this._parent?._t.pnx.map_theme_age}</option>
+				<option value="type" .selected=${this.theme == "type"}>${this._parent?._t.pnx.map_theme_type}</option>
+				${this._parent?.map?._hasQualityScore?.() && html`<option value="score" .selected=${this.theme == "score"}>${this._parent?._t.pnx.map_theme_score}</option>`}
+			</select>
+		`);
+
+		// Map legend
+		parts.push(html`<div class="legend">
+			${this.theme == "age" ? html`
+				<div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_4"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_4"]}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_3"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_3"]}
+					</div>
+				</div>
+				<div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_2"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_2"]}
+					</div>
+					<div class="legend-entry">
+						<span class="legend-color" style="background-color: ${COLORS["PALETTE_1"]}"></span>
+						${this._parent?._t.pnx["map_theme_age_1"]}
+					</div>
+				</div>` : nothing}
+			
+			${this.theme == "type" ? html`
+			 	<div class="legend-entry">
+			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_1}"></span>
+			 		${this._parent?._t.pnx.picture_360}
+			 	</div>
+			 	<div class="legend-entry">
+			 		<span class="legend-color" style="background-color: ${COLORS.QUALI_2}"></span>
+			 		${this._parent?._t.pnx.picture_flat}
+			 	</div>` : nothing}
+			
+			${this.theme == "score" ? html`<div>
+				<pnx-quality-score></pnx-quality-score>
+				<pnx-button
+					title="${this._parent?._t.pnx.metadata_quality_help}"
+					kind="outline"
+					@click=${() => this._parent?._showQualityScoreDoc()}
+				>
+					${fa(faInfoCircle)}
+				</pnx-button></div>` : nothing}
+		</div>`);
+
+		return parts;
+	}
+}
+
+customElements.define("pnx-map-layers-menu", MapLayers);

package/src/components/menus/MapLegend.js

@@ -0,0 +1,54 @@
+import {LitElement, html, nothing, css} from "lit";
+import { fa } from "../../utils/widgets";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import PanoramaxImg from "../../img/panoramax.svg";
+
+/**
+ * Map legend displays information about map sources and Panoramax.
+ * @class Panoramax.components.menus.MapLegend
+ * @element pnx-map-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-map-legend ._parent=${viewer} />
+ * ```
+ */
+export default class MapLegend extends LitElement {
+	/** @private */
+	static styles = css`
+		:host {
+			font-size: 0.8em;
+		}
+		small {
+			font-size: 1em;
+		}
+		.presentation {
+			display: flex;
+			gap: 5px;
+			align-items: center;
+		}
+		.logo {
+			width: 45px;
+		}
+	`;
+
+	/** @private */
+	render() {
+		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
+
+		return html`
+			<div class="presentation">
+				<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="outline" href="https://panoramax.fr" target="_blank">
+						${fa(faInfoCircle, { styles: {height: "12px", "margin-inline": "3px"}})}
+					</pnx-link-button>
+				</div>
+			</div>
+			${mapAttrib ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
+		`;
+	}
+}
+
+customElements.define("pnx-map-legend", MapLegend);

package/src/components/menus/PictureLegend.js

@@ -0,0 +1,103 @@
+import {LitElement, html, nothing, css} from "lit";
+import {fa} from "../../utils/widgets";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
+import { placeholder } from "../styles";
+import { reverseGeocodingNominatim } from "../../utils/geocoder";
+
+/**
+ * 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/)
+ * @example
+ * ```html
+ * <pnx-picture-legend ._parent=${viewer} />
+ * ```
+ */
+export default class PictureLegend extends LitElement {
+	/** @private */
+	static styles = [placeholder, css`
+		.addr {
+			line-height: 1.2em;
+			font-size: 1em;
+			margin-bottom: 2px;
+		}
+
+		.addr span {
+			display: inline-block;
+			height: 100%;
+			width: 100%;
+		}
+
+		.context {
+			font-size: 0.8em;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+
+		pnx-button { float: right; vertical-align: sub; }
+	`];
+
+	/** @private */
+	static properties = {
+		_caption: { state: true },
+		_addr: { state: true },
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._parent.onceReady().then(() => {
+			this._onPicChange(this._parent.psv.getPictureMetadata());
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._onPicChange(this._parent.psv.getPictureMetadata());
+			});
+		});
+	}
+
+	/** @private */
+	_onPicChange(picMeta) {
+		clearTimeout(this._addrTimer1);
+		this._caption = picMeta?.caption;
+		
+		if(picMeta) {
+			this._addrTimer1 = setTimeout(() => {
+				this._addrTimer2 = setTimeout(() => this._addr = "", 500);
+
+				reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
+					.then(addr => {
+						clearTimeout(this._addrTimer2);
+						this._addr = addr;
+					});
+			}, 500);
+		}
+		else {
+			this._addr = "";
+		}
+	}
+
+	/** @private */
+	render() {
+		if(!this._caption) { return nothing; }
+
+		return html`
+			<div class="addr">
+				${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
+			</div>
+			<div class="context">
+				${this._caption.producer ? this._caption.producer : nothing}
+				${this._caption.producer && this._caption.date ? html`-` : nothing}
+				${this._caption.date ? this._caption.date.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }) : nothing}
+				<pnx-button
+					kind="outline"
+					title=${this._parent?._t.pnx.legend_title}
+					@click=${() => this._parent?._showPictureMetadata()}
+				>${fa(faCircleInfo, { styles: { height: "12px" }})}</pnx-button>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-picture-legend", PictureLegend);