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

package/src/components/ui/TogglableGroup.js

@@ -0,0 +1,162 @@
+import { LitElement, html, css } from "lit";
+import { panel } from "../styles";
+import { listenForMenuClosure } from "../../utils/widgets";
+
+/**
+ * Togglable Group element allows to make a menu appear/disappear based on button click.
+ * @class Panoramax.components.ui.TogglableGroup
+ * @element pnx-togglable-group
+ * @slot `button` The button on which click leads to open/close menu
+ * @slot `default` The menu to make shown/hidden on button click
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-togglable-group padded="false" ._parent=${viewer}>
+ *   <pnx-button slot="button">
+ *     Open menu
+ *   </pnx-button>
+ *   <div>Menu content</div>
+ * </pnx-togglable-group>
+ * ```
+ */
+export default class TogglableGroup extends LitElement {
+	/** @private */
+	static styles = [ panel, css`
+		div.container {
+			position: relative;
+			height: 100%;
+		}
+
+		.pnx-panel {
+			z-index: 130;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.TogglableGroup#
+	 * @type {Object}
+	 * @property {string} [padded] If set, adds a 15px padding to the menu panel.
+	 */
+	static properties = {
+		_opened: {state: true},
+		padded: {type: String},
+	};
+
+	constructor() {
+		super();
+		this._opened = false;
+	}
+
+	/** @private */
+	open() {
+		this._opened = true;
+		this._parent?.dispatchEvent(new CustomEvent("menu-opened", { detail: { menu: this }}));
+		this.adjustMenuPosition(this._btn);
+		if(this._chevron) { this._chevron.style.rotate = "180deg"; }
+	}
+
+	/** @private */
+	close() {
+		this._opened = false;
+		if(this._chevron) { this._chevron.style.rotate = ""; }
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		listenForMenuClosure(this, this.close.bind(this));
+	}
+
+	/** @private */
+	handleButtonSlotChange(e) {
+		this._btn = e.target.assignedNodes().pop();
+		if(this._btn) {
+			// Chevron
+			this._chevron = this._btn.querySelector("svg.fa-chevron-down");
+			if(this._chevron) {
+				this._chevron.style.transition = "rotate 0.2s";
+				this._chevron.style.rotate = this._opened ? "180deg" : "";
+			}
+
+			this._btn.addEventListener("click", () => {
+				if(this._opened) { this.close(); }
+				else { this.open(); }
+			});
+		}
+	}
+
+	/** @private */
+	adjustMenuPosition(btn) {
+		const smallWidth = window.innerWidth < 576;
+		const menu = this.shadowRoot.querySelector(".pnx-panel");
+		const btnRect = btn.getBoundingClientRect();
+		let menuRect = menu.getBoundingClientRect();
+
+		const overflowHeight = menuRect.height > window.innerHeight * 0.8;
+		if(overflowHeight) {
+			menu.style.height = `${window.innerHeight * 0.8}px`;
+			menu.style.overflowY = "scroll";
+			menuRect = menu.getBoundingClientRect();
+		}
+		else {
+			// Try to remove height limiter
+			menu.style.height = "unset";
+			menu.style.overflowY = "unset";
+			menuRect = menu.getBoundingClientRect();
+
+			// If height is too high, put back limitation
+			if(menuRect.height > window.innerHeight * 0.8) {
+				menu.style.height = `${window.innerHeight * 0.8}px`;
+				menu.style.overflowY = "scroll";
+				menuRect = menu.getBoundingClientRect();
+			}
+		}
+
+		const overflowRight = btnRect.left + menuRect.width > window.innerWidth;
+		const overflowBottom = btnRect.bottom + menuRect.height > window.innerHeight;
+		const overflowTop = btnRect.top - menuRect.height < 0;
+
+		if(overflowRight && overflowBottom && overflowTop) {
+			menu.style.top = smallWidth ? "0px" : `${btnRect.height + 5}px`;
+			menu.style.bottom = null;
+			menu.style.right = `${btnRect.width + 5}px`;
+			menu.style.left = null;
+		}
+		else if(overflowRight && overflowBottom) {
+			menu.style.top = null;
+			menu.style.bottom = "0px";
+			menu.style.right = `${btnRect.width + 5}px`;
+			menu.style.left = null;
+		}
+		else if(overflowRight) {
+			menu.style.top = smallWidth ? "0px" : `${btnRect.height + 5}px`;
+			menu.style.bottom = null;
+			menu.style.right = smallWidth ? `${btnRect.width + 5}px` : "0px";
+			menu.style.left = null;
+		}
+		else if(overflowBottom && !overflowTop) {
+			menu.style.top = null;
+			menu.style.bottom = "0px";
+			menu.style.left = `${btnRect.width + 5}px`;
+		}
+		else {
+			menu.style.top = `${btnRect.height + 5}px`;
+			menu.style.right = null;
+			menu.style.left = "0px";
+			menu.style.bottom = null;
+		}
+	}
+
+	/** @private */
+	render() {
+		return html`<div class="container">
+			<slot name="button" @slotchange=${this.handleButtonSlotChange}></slot>
+			<div class="pnx-panel ${this._opened ? "" : "pnx-hidden"} ${this.padded == "false" ? "" : "pnx-padded"}">
+				<slot></slot>
+			</div>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-togglable-group", TogglableGroup);

package/src/components/ui/index.js

@@ -0,0 +1,20 @@
+/**
+ * Smaller UI pieces components
+ * @module Panoramax:components:ui
+ */
+
+export {default as ButtonGroup} from "./ButtonGroup";
+export {default as Button} from "./Button";
+export {default as CopyButton} from "./CopyButton";
+export {default as Grade} from "./Grade";
+export {default as LinkButton} from "./LinkButton";
+export {default as Loader} from "./Loader";
+export {default as Map} from "./Map";
+export {default as MapMore} from "./MapMore";
+export {default as Photo} from "./Photo";
+export {default as Popup} from "./Popup";
+export {default as QualityScore} from "./QualityScore";
+export {default as SearchBar} from "./SearchBar";
+export {default as TogglableGroup} from "./TogglableGroup";
+import * as widgets from "./widgets";
+export {widgets};

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

@@ -0,0 +1,21 @@
+pnx-widget-geosearch .maplibregl-ctrl {
+	box-shadow: none !important;
+	background: none !important;
+}
+
+pnx-widget-geosearch .maplibregl-ctrl-geolocate {
+	border-radius: 15px;	
+}
+
+pnx-widget-geosearch pnx-search-bar[reduced] .maplibregl-ctrl-geolocate {
+	width: 40px;
+}
+
+pnx-widget-geosearch pnx-search-bar:not([reduced]) .maplibregl-ctrl-geolocate {
+	margin-left: -5px;
+}
+
+pnx-widget-geosearch pnx-search-bar:not([reduceable])::part(input) {
+	width: 300px;
+	max-width: 30vw;
+}

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

@@ -0,0 +1,139 @@
+// DO NOT REMOVE THE "!": bundled builds breaks otherwise !!!
+import maplibregl from "!maplibre-gl";
+
+import { LitElement, html } from "lit";
+import { forwardGeocodingBAN, forwardGeocodingNominatim } from "../../../utils/geocoder";
+import "./GeoSearch.css";
+
+const GEOCODER_ENGINES = { "ban": forwardGeocodingBAN, "nominatim": forwardGeocodingNominatim };
+
+/**
+ * Ready-to-use geocoder search bar.
+ * @class Panoramax.components.ui.widgets.GeoSearch
+ * @element pnx-widget-geosearch
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-geosearch _parent=${viewer} />
+ * ```
+ */
+export default class GeoSearch extends LitElement {
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.GeoSearch#
+	 * @type {Object}
+	 * @property {string} [geocoder=nominatim] The geocoder engine to use (nominatim, ban)
+	 */
+	static properties = {
+		geocoder: {type: String},
+		_geolocate: {state: true},
+	};
+
+	constructor() {
+		super();
+		this.geocoder = "nominatim";
+		
+		this._geolocateCtrl = new maplibregl.GeolocateControl({
+			positionOptions: {
+				enableHighAccuracy: true,
+				timeout: 60000, // Max 1 minute for first position
+				maximumAge: 300000, // Accepts 5 minutes old position
+			},
+			showAccuracyCircle: true,
+			showUserLocation: true,
+			trackUserLocation: true,
+		});
+	}
+
+	/** @private */
+	createRenderRoot() {
+		return this;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder];
+		this._parent?.onceMapReady?.().then(() => {
+			this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
+			this._geolocate.setAttribute("slot", "pre");
+		});
+	}
+
+	/** @private */
+	_onInput(query) {
+		const rgxCoords = /([-+]?\d{1,2}\.\d+),\s*([-+]?\d{1,3}\.\d+)/;
+		const coordsMatch = query.match(rgxCoords);
+		const rgxUuid = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+		const uuidMatch = query.match(rgxUuid);
+	
+		if(coordsMatch) {
+			const lat = parseFloat(coordsMatch[1]);
+			const lon = parseFloat(coordsMatch[2]);
+			this._parent.map.jumpTo({
+				center: [lon, lat],
+				zoom: 16,
+			});
+			return Promise.resolve(true);
+		}
+		else if(uuidMatch) {
+			this._parent.select(null, query);
+			return Promise.resolve(true);
+		}
+		else {
+			return this._geocoderEngine({
+				query,
+				limit: 3,
+				//bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
+				proximity: this._parent.map.getCenter().lat+","+this._parent.map.getCenter().lng,
+			}).then(data => {
+				data = data.features.map(f => ({
+					title: f.place_name.split(",")[0],
+					subtitle: f.place_name.split(",").slice(1).join(", "),
+					data: f
+				}));
+				return data;
+			});
+		}
+	}
+
+	/** @private */
+	_onSelect(e) {
+		const entry = e.detail;
+		if(entry) {
+			if(entry.data.bounds) {
+				this._parent?.map.fitBounds(entry.data.bounds, {animate: false});
+			}
+			else {
+				this._parent?.map.jumpTo({
+					center: entry.data.center,
+					zoom: entry.data.zoom || 13,
+				});
+			}
+		}
+	}
+
+	/** @private */
+	render() {
+		const isSmall = this._parent?.isWidthSmall() || false;
+
+		return html`
+			<pnx-search-bar
+				id="pnx-widget-search-bar"
+				placeholder=${this._parent?._t.pnx.search_address}
+				._parent=${this._parent}
+				.searcher=${this._onInput.bind(this)}
+				.reduceable=${isSmall}
+				.reduced=${isSmall}
+				size="xxl"
+				class="pnx-print-hidden"
+				@result=${this._onSelect.bind(this)}
+			>
+				${this._geolocate}
+			</pnx-search-bar>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-geosearch", GeoSearch);

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

@@ -0,0 +1,51 @@
+import {LitElement, html, css} from "lit";
+import { panel } from "../../styles";
+
+/**
+ * Legend widget, handling switch between map and photo components.
+ * @class Panoramax.components.ui.widgets.Legend
+ * @element pnx-widget-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-legend _parent=${viewer} />
+ * ```
+ */
+export default class Legend extends LitElement {
+	/** @private */
+	static styles = [panel, css`
+		.pnx-panel.pnx-padded {
+			border-radius: 10px;
+			padding: 10px;
+			position: relative;
+			width: 250px;
+			max-width: 80vh;
+			z-index: 120;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.Legend#
+	 * @type {Object}
+	 * @property {string} [focus] The focused main component (map, pic)
+	 */
+	static properties = {
+		focus: {type: String},
+	};
+
+	render() {
+		return html`<div class="pnx-panel pnx-padded" part="panel">
+			<pnx-picture-legend
+				._parent=${this._parent}
+				style=${this.focus == "map" ? "display: none": ""}
+			></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/Player.css

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