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

package/build/components/ui/Switch.js

@@ -0,0 +1,139 @@
+import { LitElement, css, html } from "lit";
+
+/**
+ * Switch button, based on a native checkbox.
+ * @class Panoramax.components.ui.Switch
+ * @element pnx-switch
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.ui.Switch#change
+ * @example
+ * ```html
+ * <pnx-switch
+ *   checked="true"
+ *   name="my-switch"
+ *   @change=${doSomething}
+ * >
+ *   Label text
+ * </pnx-switch>
+ * ```
+ */
+export default class Switch extends LitElement {
+	static styles = css`
+		.toggle {
+			cursor: pointer;
+			display: inline-block;
+		}
+
+		.toggle-switch {
+			display: inline-block;
+			background: #ccc;
+			border-radius: 11px;
+			width: 42px;
+			height: 22px;
+			position: relative;
+			vertical-align: middle;
+			transition: background 0.25s;
+		}
+		.toggle-switch:before, .toggle-switch:after {
+			content: "";
+		}
+		.toggle-switch:before {
+			display: block;
+			background: linear-gradient(to bottom, #fff 0%, #eee 100%);
+			border-radius: 50%;
+			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+			width: 16px;
+			height: 16px;
+			position: absolute;
+			top: 3px;
+			left: 3px;
+			transition: left 0.25s;
+		}
+		.toggle:hover .toggle-switch:before {
+			background: linear-gradient(to bottom, #fff 0%, #fff 100%);
+			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
+		}
+		.toggle-checkbox:checked + .toggle-switch {
+			background: var(--widget-bg-active);
+		}
+		.toggle-checkbox:disabled + .toggle-switch:before,
+		.toggle-checkbox:disabled:hover + .toggle-switch:before {
+			background: var(--grey-pale);
+			box-shadow: none;
+		}
+		.toggle-checkbox:disabled + .toggle-switch {
+			background: var(--grey);
+			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+		}
+		.toggle-checkbox:checked + .toggle-switch:before {
+			left: 23px;
+		}
+
+		.toggle-checkbox {
+			position: absolute;
+			visibility: hidden;
+		}
+
+		.toggle-label {
+			margin-left: 5px;
+			position: relative;
+			top: 2px;
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.Switch#
+	 * @type {Object}
+	 * @property {boolean} checked True if checked
+	 * @property {boolean} disabled Inactive if true
+	 * @property {boolean} value The current switch value
+	 * @property {string} name The switch name (also serves as ID)
+	 */
+	static properties = {
+		checked: {type: Boolean, reflect: true},
+		disabled: {type: Boolean, reflect: true},
+		name: {type: String},
+	};
+
+	constructor() {
+		super();
+		this.checked = false;
+		this.disabled = false;
+		this.name = "pnx-switch-1"; // Default name+ID to avoid issues
+	}
+
+	/** @private */
+	_onChange(e) {
+		this.checked = e.target.checked;
+		/**
+		 * Event for switch status change
+		 * @event Panoramax.components.ui.Switch#change
+		 * @type {Event}
+		 */
+		this.dispatchEvent(new Event("change"));
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<label class="toggle" for=${this.name}>
+				<input
+					class="toggle-checkbox"
+					type="checkbox"
+					id=${this.name}
+					name=${this.name}
+					.checked=${this.checked}
+					.disabled=${this.disabled}
+					@change=${this._onChange}
+				/>
+				<div class="toggle-switch"></div>
+				<span class="toggle-label">
+					<slot></slot>
+				</span>
+			</label>
+		`;
+	}
+}
+
+customElements.define("pnx-switch", Switch);

package/build/components/ui/TogglableGroup.js

@@ -0,0 +1,157 @@
+import { LitElement, css, html } from "lit";
+import { panel } from "../styles.js";
+import { listenForMenuClosure } from "../../utils/widgets.js";
+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" @click=${e => e.stopPropagation()}>
+			<slot name="button" @slotchange=${this.handleButtonSlotChange}></slot>
+			<div class=${classMap(panelClasses)} part="menu">
+				<slot></slot>
+			</div>
+		</div>`;
+	}
+}
+
+customElements.define("pnx-togglable-group", TogglableGroup);

package/build/components/ui/index.js

@@ -0,0 +1,29 @@
+/**
+ * Smaller UI pieces components
+ * @module Panoramax:components:ui
+ */
+
+export {default as AnnotationsSwitch} from "./AnnotationsSwitch.js";
+export {default as ButtonGroup} from "./ButtonGroup.js";
+export {default as Button} from "./Button.js";
+export {default as CopyButton} from "./CopyButton.js";
+export {default as Grade} from "./Grade.js";
+export {default as GradeFilter} from "./GradeFilter.js";
+export {default as IconSwitch} from "./IconSwitch.js";
+export {default as LinkButton} from "./LinkButton.js";
+export {default as ListGroup} from "./ListGroup.js";
+export {default as ListItem} from "./ListItem.js";
+export {default as Loader} from "./Loader.js";
+export {default as Map} from "./Map.js";
+export {default as MapMore} from "./MapMore.js";
+export {default as Photo} from "./Photo.js";
+export {default as Popup} from "./Popup.js";
+export {default as ProgressBar} from "./ProgressBar.js";
+export {default as QualityScore} from "./QualityScore.js";
+export {default as SearchBar} from "./SearchBar.js";
+export {default as SemanticsEditor} from "./SemanticsEditor.js";
+export {default as SemanticsTable} from "./SemanticsTable.js";
+export {default as Switch} from "./Switch.js";
+export {default as TogglableGroup} from "./TogglableGroup.js";
+import * as widgets from "./widgets/index.js";
+export {widgets};

package/build/components/ui/index_photoviewer.js

@@ -0,0 +1,21 @@
+// Lightweight export for PhotoViewer
+export {default as ButtonGroup} from "./ButtonGroup.js";
+export {default as Button} from "./Button.js";
+export {default as CopyButton} from "./CopyButton.js";
+export {default as Grade} from "./Grade.js";
+export {default as AnnotationsSwitch} from "./AnnotationsSwitch.js";
+export {default as LinkButton} from "./LinkButton.js";
+export {default as ListGroup} from "./ListGroup.js";
+export {default as ListItem} from "./ListItem.js";
+export {default as Loader} from "./Loader.js";
+export {default as Photo} from "./Photo.js";
+export {default as Popup} from "./Popup.js";
+export {default as ProgressBar} from "./ProgressBar.js";
+export {default as QualityScore} from "./QualityScore.js";
+export {default as SearchBar} from "./SearchBar.js";
+export {default as SemanticsEditor} from "./SemanticsEditor.js";
+export {default as SemanticsTable} from "./SemanticsTable.js";
+export {default as Switch} from "./Switch.js";
+export {default as TogglableGroup} from "./TogglableGroup.js";
+import * as widgets from "./widgets/index_photoviewer.js";
+export {widgets};

package/build/components/ui/widgets/CopyCoordinates.js

@@ -0,0 +1,75 @@
+import { LitElement, css, html } from "lit";
+import { degToDms } from "../../../utils/utils.js";
+import { fa } from "../../../utils/widgets.js";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { btngroup } from "../../styles.js";
+
+/**
+ * Copy Coordinates button allows easy copy of several format of map coordinates.
+ * @class Panoramax.components.ui.widgets.CopyCoordinates
+ * @element pnx-copy-coordinates
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-copy-coordinates gps=${[-1.7, 48.6]} _parent=${viewer} />
+ * ```
+ */
+export default class CopyCoordinates extends LitElement {
+	/** @private */
+	static styles = [btngroup, css`
+		pnx-togglable-group::part(menu) {
+			border-radius: 5px;
+			min-width: unset;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.CopyCoordinates#
+	 * @type {Object}
+	 * @property {number[]} gps GPS/map coordinates, as [lon, lat]
+	 */
+	static properties = {
+		gps: {type: Array},
+	};
+
+	/** @private */
+	render() {
+		const dmslonval = degToDms(this.gps[0]);
+		const dmslon = dmslonval.d < 0 ? `${Math.abs(dmslonval.d)}°${dmslonval.m}'${dmslonval.s}"W` : `${dmslonval.d}°${dmslonval.m}'${dmslonval.s}"E`;
+		const dmslatval = degToDms(this.gps[1]);
+		const dmslat = dmslatval.d < 0 ? `${Math.abs(dmslatval.d)}°${dmslatval.m}'${dmslatval.s}"S` : `${dmslatval.d}°${dmslatval.m}'${dmslatval.s}"N`;
+
+		const values = {
+			ddeclatlon: `${this.gps[1].toFixed(5)}, ${this.gps[0].toFixed(5)}`,
+			ddeclonlat: `${this.gps[0].toFixed(5)}, ${this.gps[1].toFixed(5)}`,
+			ddmslonlat: `${dmslon}, ${dmslat}`,
+			ddmslatlon: `${dmslat}, ${dmslon}`,
+		};
+
+		return html`<pnx-button-group style="display: inline-block; vertical-align: baseline" dir="row">
+			<pnx-copy-button
+				size="sm"
+				text=${values.ddeclonlat}
+				title=${this._parent?._t.pnx.metadata_location_copy.replace("{v}", values.ddeclonlat)}
+			></pnx-copy-button>
+
+			<pnx-togglable-group padded="false" ._parent=${this._parent}>
+				<pnx-button
+					size="sm"
+					slot="button"
+					title=${this._parent?._t.pnx.metadata_location_copy_more}
+				>${fa(faChevronDown)}</pnx-button>
+				<pnx-list-group>
+					${Object.values(values).map(text => html`
+						<pnx-copy-button unstyled text=${text} ._t=${this._parent._t}>
+							${this._parent?._t.pnx.metadata_location_copy.replace("{v}", text)}
+						</pnx-copy-button>
+					`)}
+				</pnx-list-group>
+			</pnx-togglable-group>
+		</pnx-button-group>`;
+	}
+}
+
+customElements.define("pnx-copy-coordinates", CopyCoordinates);

package/build/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/build/components/ui/widgets/GeoSearch.js

@@ -0,0 +1,150 @@
+import "maplibre-gl";
+import { LitElement, html } from "lit";
+import { forwardGeocodingBAN, forwardGeocodingNominatim, forwardGeocodingStandard } from "../../../utils/geocoder.js";
+import { onceParentAvailable } from "../../../utils/widgets.js";
+import GeoSearchStyles from "./GeoSearch.css" with { type: "css" };
+document.adoptedStyleSheets.push(GeoSearchStyles);
+
+const GEOCODER_ENGINES = {
+	"ban": forwardGeocodingBAN,
+	"standard": forwardGeocodingStandard,
+	"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
+ * <!-- Default geocoder -->
+ * <pnx-widget-geosearch _parent=${viewer} />
+ *
+ * <!-- Custom-URL geocoder -->
+ * <pnx-widget-geosearch geocoder="https://photon.komoot.io/api" _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, or URL to a standard [GeocodeJSON-compliant](https://github.com/geocoders/geocodejson-spec/blob/master/draft/README.md) API)
+	 */
+	static properties = {
+		geocoder: {type: String},
+		_geolocate: {state: true},
+	};
+
+	constructor() {
+		super();
+		this.geocoder = "nominatim";
+
+		// eslint-disable-next-line no-undef
+		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] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
+			if(!this._geolocate) {
+				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: 5,
+				//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);