@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/src/components/ui/SearchBar.js

@@ -0,0 +1,367 @@
+import { LitElement, html, css, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { map } from "lit/directives/map.js";
+import { fa, listenForMenuClosure } from "../../utils/widgets";
+import { faSvg } from "../styles";
+import { faCircleExclamation } from "@fortawesome/free-solid-svg-icons/faCircleExclamation";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons/faMagnifyingGlass";
+import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
+import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
+
+
+/**
+ * Search Bar Element displays an interactive search widget.
+ * @class Panoramax.components.ui.SearchBar
+ * @element pnx-search-bar
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.SearchBar#result
+ * @example
+ * ```html
+ * <pnx-search-bar
+ *   id="my-search-bar"
+ *   placeholder="Search something..."
+ *   .searcher=${mysearchfct}
+ *   ._parent=${viewer}
+ *   reduceable="false"
+ *   reduced="false"
+ *   size="xxl" @result=${e => console.log(e.detail)}
+ * >
+ *   <!-- Optional icon for display on left-side of search bar -->
+ * </pnx-search-bar>
+ * ```
+ */
+export default class SearchBar extends LitElement {
+	/** @private */
+	static styles = [ faSvg, css`
+		/* Container */
+		.sb {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 5px;
+			border: 1px solid var(--widget-border-div);
+			border-radius: 5px;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			height: 30px;
+			border-radius: 20px;
+			position: relative;
+			padding: 0 0 0 10px;
+			width: fit-content;
+			max-width: 100%;
+			box-sizing: border-box;
+			font-family: var(--font-family);
+		}
+		.sb.sb-xxl {
+			height: 40px;
+			line-height: 40px;
+		}
+		.sb.sb-reduceable {
+			width: 360px;
+		}
+		.sb.sb-reduceable.sb-reduced {
+			width: fit-content;
+			padding: 0;
+			gap: 0;
+		}
+
+		/* Text field */
+		.sb input {
+			background: none;
+			border: none !important;
+			outline: none;
+			height: 20px;
+			width: 100%;
+			font-family: var(--font-family);
+		}
+		.sb.sb-xxl input {
+			font-size: 1.1em;
+		}
+		.sb.sb-reduceable.sb-reduced input {
+			display: none;
+		}
+
+		/* Status icon */
+		.sb-icon {
+			cursor: pointer;
+			height: 30px;
+			line-height: 30px;
+			width: 30px;
+			min-width: 30px;
+			text-align: center;
+		}
+		.sb.sb-xxl .sb-icon {
+			height: 40px;
+			line-height: 40px;
+			width: 40px;
+			min-width: 40px;
+		}
+		.sb-icon svg {
+			pointer-events: none;
+			width: 14px;
+			height: 14px;
+		}
+
+		/* Search results */
+		.sb-results {
+			position: absolute;
+			top: 35px;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			max-width: calc(100% - 20px);
+			border: 1px solid var(--widget-border-div);
+			border-radius: 10px;
+			background-color: var(--widget-bg);
+			color: var(--widget-font);
+			z-index: 130;
+			font-size: 1.05em;
+  			line-height: normal;
+			font-family: var(--font-family);
+		}
+		.sb.sb-xxl .sb-results {
+			top: 45px;
+		}
+		.sb-result,
+		.sb-empty {
+			display: block;
+			padding: 5px 15px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			cursor: pointer;
+			border-radius: 0;
+		}
+		.sb-result:hover {
+			background-color: var(--widget-bg-hover);
+		}
+		.sb-result:first-child {
+			border-top-right-radius: 10px;
+			border-top-left-radius: 10px;
+			padding-top: 15px;
+		}
+		.sb-result:last-child {
+			border-bottom-right-radius: 10px;
+			border-bottom-left-radius: 10px;
+			padding-bottom: 15px;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.SearchBar#
+	 * @type {Object}
+	 * @property {string} [id] The ID attribute set on component and prefix for input as well
+	 * @property {string} [placeholder] Default text to display on empty field
+	 * @property {boolean} [reduceable=false] Can the search bar be collapsed (for mobile view)
+	 * @property {boolean} [reduced=false] Is the search bar currently collapsed ?
+	 * @property {string} [value] The default input value
+	 * @property {string} [size=md] The component sizing (md, xxl)
+	 * @property {function} [searcher] Search callback, function that takes as parameter the input text value, and resolves on list of results ({title, subtitle} and any other data you'd like to get on validation)
+	 * @property {boolean} [no-menu-closure=false] Set to true to ignore menu closure events
+	 */
+	static properties = {
+		id: {type: String},
+		placeholder: {type: String},
+		reduceable: {type: Boolean, reflect: true},
+		reduced: {type: Boolean, reflect: true},
+		value: {type: String},
+		size: {type: String},
+		_icon: {state: true},
+		_results: {state: true},
+		searcher: {type: Function},
+		"no-menu-closure": {type: Boolean},
+	};
+
+	constructor() {
+		super();
+
+		// State properties
+		this.reduceable = false;
+		this.reduced = false;
+		this.placeholder = nothing;
+		this.size = "md";
+		this._icon = "search";
+		this._results = null;
+		this["no-menu-closure"] = false;
+
+		// Other properties
+		this._throttler = null;
+		delete this._lastSearch;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		if(!this["no-menu-closure"]) { listenForMenuClosure(this, this.reset.bind(this)); }
+	}
+
+	/** @private */
+	attributeChangedCallback(name, _old, value) {
+		super.attributeChangedCallback(name, _old, value);
+		if(name == "value" && this._icon == "search") {
+			this._icon = "empty";
+		}
+	}
+
+	/** @private */
+	_onIconClick() {
+		if(["empty", "warn"].includes(this._icon)) {
+			this.reset();
+		}
+		if(this.reduceable && this._icon == "search") {
+			this.reduced = !this.reduced;
+		}
+	}
+
+	/** @private */
+	_onInputChange(e) {
+		this.value = e.target.value;
+		this._throttledSearch();
+	}
+
+	/** @private */
+	_onResultClick(item) {
+		/**
+		 * Event for search result clicked
+		 * @event Panoramax.components.ui.SearchBar#result
+		 * @type {CustomEvent}
+		 * @property {object|null} detail The data associated to clicked item (format based on searcher function results), or null on reset
+		 */
+		this.dispatchEvent(new CustomEvent("result", {bubbles: true, composed: true, detail: item}));
+
+		this._results = null;
+		if(this._throttler) {
+			clearTimeout(this._throttler);
+			this._throttler = null;
+		}
+
+		if(!this.reduceable && item) {
+			this.value = item?.title;
+			this._icon = "empty";
+		}
+		else {
+			this.value = "";
+			this._icon = "search";
+			if(this.reduceable) { this.reduced = true; }
+		}
+	}
+
+	/**
+	 * Limit search calls to every 500ms
+	 * @private
+	 */
+	_throttledSearch() {
+		if(this._throttler) {
+			clearTimeout(this._throttler);
+			delete this._throttler;
+		}
+
+		this._throttler = setTimeout(this._search.bind(this), 500);
+	}
+
+	/**
+	 * Perform real search
+	 * @private
+	 */
+	_search() {
+		if(!this.value || this.value.length == 0) {
+			this.reset();
+			return;
+		}
+
+		if(!this.searcher) {
+			console.warn("No search handler defined");
+			return;
+		}
+
+		this._icon = "loading";
+		this._results = null;
+
+		this.searcher(this.value).then(data => {
+			if(this._icon !== "loading") { return; }
+
+			this._icon = "empty";
+			if(!data || data.length == 0) {
+				this._results = [];
+			}
+			else if(data === true) {
+				this._results = null;
+			}
+			else {
+				this._results = data;
+				if(!this["no-menu-closure"]) {
+					this._parent?.dispatchEvent(new CustomEvent("menu-opened", { detail: { menu: this }}));
+				}
+			}
+		}).catch(e => {
+			console.error(e);
+			this._icon = "warn";
+		});
+	}
+
+	/**
+	 * Empty results list and reset search bar content.
+	 */
+	reset() {
+		this._onResultClick(null);
+	}
+
+	/** @private */
+	render() {
+		const classes = {
+			sb: true,
+			"sb-xxl": this.size === "xxl",
+			"sb-reduceable": this.reduceable,
+			"sb-reduced": this.reduced,
+		};
+
+		return html`<div
+			id=${this.id}
+			class=${classMap(classes)}
+			part="container"
+		>
+			<slot name="pre" class=${classMap({"sb-reduced": this.reduced})}></slot>
+
+			<input
+				id="${this.id}-input"
+				type="text"
+				placeholder=${this.placeholder}
+				autocomplete="off"
+				@change=${this._onInputChange.bind(this)}
+				@keypress=${this._onInputChange.bind(this)}
+				@paste=${this._onInputChange.bind(this)}
+				@input=${this._onInputChange.bind(this)}
+				.value=${this.value || ""}
+				part="input"
+			/>
+
+			<span
+				class="sb-icon"
+				@click=${this._onIconClick.bind(this)}
+			>
+				${this._icon == "search" ? fa(faMagnifyingGlass) : nothing}
+				${this._icon == "loading" ? fa(faCircleNotch, { classes: ["fa-spin"] }) : nothing}
+				${this._icon == "empty" ? fa(faXmark) : nothing}
+				${this._icon == "warn" ? fa(faCircleExclamation) : nothing}
+			</span>
+
+			${!this.reduced && this._results ? html`
+				<div class="sb-results">
+					${this._results.length === 0 ? html`
+						<div class="sb-empty">${this._parent?._t?.pnx.search_empty}</div>
+					` : nothing}
+
+					${map(this._results, i => html`
+						<div class="sb-result" @click=${() => this._onResultClick(i)}>
+							${i.title}
+							${i.subtitle && i.subtitle != "" ? html`<br /><small>${i.subtitle}</small>` : nothing}
+						</div>
+					`)}
+				</div>
+			` : nothing}
+		</div>`;
+	}
+}
+
+customElements.define("pnx-search-bar", SearchBar);

package/src/components/ui/TogglableGroup.js

@@ -0,0 +1,157 @@
+import { LitElement, html, css } from "lit";
+import { panel } from "../styles";
+import { listenForMenuClosure } from "../../utils/widgets";
+import { classMap } from "lit/directives/class-map.js";
+
+/**
+ * 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; }
+		.pnx-panel-fixed { position: fixed; }
+	` ];
+
+	/**
+	 * 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 btnMenuMargin = 5;
+		const borderMargin = 10;
+
+		// Reset menu position
+		const menu = this.shadowRoot.querySelector("div[part='menu']");
+		menu.style.top = null;
+		menu.style.bottom = null;
+		menu.style.right = null;
+		menu.style.left = null;
+		menu.style.overflowY = null;
+		menu.style.marginTop = null;
+
+		// Get positions on screen
+		const btnRect = btn.getBoundingClientRect();
+		let menuRect = menu.getBoundingClientRect();
+		const fitsWidth = menuRect.right <= window.innerWidth - borderMargin;
+		const fitsHeight = menuRect.bottom <= window.innerHeight - borderMargin;
+
+		// No overflow = space a bit under button
+		if(fitsWidth && fitsHeight) {
+			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
+		}
+		// Overflows width+height = put at button's top+left
+		else if(!fitsWidth && !fitsHeight) {
+			menu.style.right = `${window.innerWidth - btnRect.left + btnMenuMargin}px`;
+			menu.style.bottom = `${window.innerHeight - btnRect.bottom}px`;
+			
+			// Check if it doesn't overflow on top
+			menuRect = menu.getBoundingClientRect();
+			if(menuRect.top - borderMargin < 0) {
+				menu.style.bottom = `${borderMargin}px`;
+				menu.style.top = `${btnRect.top}px`;
+				menu.style.overflowY = "auto";
+			}
+		}
+		// Overflows height = limit height
+		else if(!fitsHeight) {
+			menu.style.bottom = `${borderMargin}px`;
+			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
+			menu.style.overflowY = "auto";
+		}
+		// Overflows width = move to left
+		else if(!fitsWidth) {
+			menu.style.marginTop = `${btnMenuMargin}px`;
+			menu.style.right = `${window.innerWidth - btnRect.right}px`;
+		}
+	}
+
+	/** @private */
+	render() {
+		const panelClasses = {
+			"pnx-panel": true,
+			"pnx-panel-fixed": true,
+			"pnx-hidden": !this._opened,
+			"pnx-padded": this.padded !== "false",
+		};
+
+		return html`<div class="container">
+			<slot name="button" @slotchange=${this.handleButtonSlotChange}></slot>
+			<div class=${classMap(panelClasses)} part="menu">
+				<slot></slot>
+			</div>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-togglable-group", TogglableGroup);

package/src/components/ui/index.js

@@ -0,0 +1,22 @@
+/**
+ * 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 ListGroup} from "./ListGroup";
+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 ProgressBar} from "./ProgressBar";
+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);