@panoramax/web-viewer 4.0.3 → 4.1.0-develop-55fdf56c

package/src/components/core/Viewer.css

@@ -1,3 +1,8 @@
+pnx-viewer {
+	position: relative;
+	display: block;
+}
+
 /* Maximized components */
 pnx-viewer .pnx-map.maplibregl-map,
 pnx-viewer .pnx-psv {
@@ -56,7 +61,6 @@ pnx-viewer pnx-mini {
 	pnx-viewer pnx-mini {
 		min-width: unset;
 		min-height: unset;
-		margin-bottom: 40px;
 	}
 }
 
@@ -73,13 +77,13 @@ pnx-viewer:not(pnx-viewer[focus="pic"]) .pnx-only-psv {
 
 /* Override legend positioning */
 @media screen and (min-width: 576px) {
-	pnx-viewer pnx-widget-legend {
+	pnx-viewer pnx-widget-legend:not([light="true"]) {
 		position: absolute;
 		left: 10px;
 		top: 60px;
 	}
 
-	pnx-viewer[focus="pic"] pnx-widget-legend {
+	pnx-viewer[focus="pic"] pnx-widget-legend:not([light="true"]) {
 		top: 10px;
 	}
 }
@@ -95,4 +99,12 @@ pnx-viewer .pnx-map .maplibregl-ctrl-attrib {
 		width: 250px;
 		max-width: 40vw;
 	}
-}
+}
+
+/* Hidden widgets on sequence play */
+pnx-viewer.pnx-playing pnx-bottom-drawer,
+pnx-viewer.pnx-playing pnx-mini,
+pnx-viewer.pnx-playing pnx-widget-legend,
+pnx-viewer.pnx-playing pnx-widget-zoom {
+	display: none;
+}

package/src/components/core/Viewer.js

@@ -2,11 +2,10 @@
 
 import "./Viewer.css";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
-import PhotoViewer from "./PhotoViewer";
-import Basic from "./Basic";
+import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
 import MapMore from "../ui/MapMore";
 import { initMapKeyboardHandler } from "../../utils/map";
-import { isNullId } from "../../utils/utils";
+import { isNullId, isInIframe } from "../../utils/utils";
 import { createWebComp } from "../../utils/widgets";
 import { fa } from "../../utils/widgets";
 import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
@@ -16,7 +15,6 @@ import { default as InitParameters, alterMapState, alterViewerState } from "../.
 
 
 export const PSV_ZOOM_DELTA = 20;
-const PSV_MOVE_DELTA = Math.PI / 6;
 const MAP_MOVE_DELTA = 100;
 
 
@@ -95,6 +93,7 @@ export default class Viewer extends PhotoViewer {
 	 * @property {object} [map] An object with [any map option available in Map or MapMore class](#Panoramax.components.ui.MapMore).<br />Example: `map="{'background': 'aerial', 'theme': 'age'}"`
 	 * @property {object} [psv] [Any option to pass to Photo component](#Panoramax.components.ui.Photo) as an object.<br />Example: `psv="{'transitionDuration': 500, 'picturesNavigation': 'pic'}"`
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 * @property {string} [focus=pic] The component showing up as main component (pic, map)
 	 * @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)
 	 * @property {string} [widgets=true] Use default set of widgets ? Set to false to avoid any widget to show up, and use slots to populate as you like.
@@ -149,20 +148,25 @@ export default class Viewer extends PhotoViewer {
 				_parent: this
 			}));
 			
-			if(!this.isWidthSmall()) {
+			if(isInIframe()) {
 				this.legend = createWebComp("pnx-widget-legend", {
-					slot: this.isWidthSmall() ? "top" : "top-left",
+					slot: "bottom-right",
+					light: true,
 					_parent: this,
 					focus: this._initParams.getParentPostInit().focus,
 					picture: this._initParams.getParentPostInit().picture,
 				});
 				this.grid.appendChild(this.legend);
-
-				this.grid.appendChild(createWebComp("pnx-hashtags", {
-					slot: "top-right",
+			}
+			else if(!this.isWidthSmall()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: this.isWidthSmall() ? "top" : "top-left",
 					_parent: this,
-					class: "pnx-only-psv pnx-print-hidden",
-				}));
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this._miniPicLegend = createWebComp("pnx-mini-picture-legend", { _parent: this });
+				this.grid.appendChild(this.legend);
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
@@ -179,30 +183,47 @@ export default class Viewer extends PhotoViewer {
 				});
 			}
 
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
+			if(!isInIframe()) {
+				this.grid.appendChild(createWebComp("pnx-widget-player", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
+			
+				this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
 
-			this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
-				slot: this.isWidthSmall() ? "top-right" : "top-left",
-				_parent: this,
-				class: "pnx-only-map pnx-print-hidden",
-				geocoder: this._initParams.getParentPostInit().geocoder,
-			}));
-			this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
-				slot: this.isWidthSmall() ? "top-right" : "top-left",
-				_parent: this,
-				"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
-				"quality-score": this.map?._hasQualityScore?.() || false,
-				class: "pnx-only-map pnx-print-hidden",
-			}));
-			this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
+				this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
+					slot: this.isWidthSmall() ? "top-right" : "top-left",
+					_parent: this,
+					class: "pnx-only-map pnx-print-hidden",
+					geocoder: this._initParams.getParentPostInit().geocoder,
+				}));
+
+				this.grid.appendChild(createWebComp("pnx-widget-mapfilters", {
+					slot: this.isWidthSmall() ? "top-right" : "top-left",
+					_parent: this,
+					"user-search": this.api._endpoints.user_search !== null && this.api._endpoints.user_tiles !== null,
+					"quality-score": this.map?._hasQualityScore?.() || false,
+					class: "pnx-only-map pnx-print-hidden",
+				}));
+				
+				this.grid.appendChild(createWebComp("pnx-widget-maplayers", { slot: "top-right", _parent: this, class: "pnx-only-map pnx-print-hidden" }));
+			}
 		}
 	}
 
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.map?.destroy();
+	}
+
 	getClassName() {
 		return "Viewer";
 	}
@@ -321,7 +342,10 @@ export default class Viewer extends PhotoViewer {
 		this._moveChildToGrid();
 
 		alterViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => {
@@ -367,7 +391,10 @@ export default class Viewer extends PhotoViewer {
 
 		// Widgets
 		for(let cn of this.grid.childNodes) {
-			if(cn.getAttribute("slot") !== "bg") {
+			if(
+				cn.getAttribute("slot") !== "bg"
+				&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
+			) {
 				cn.addEventListener("focusin", () => keytonone());
 				cn.addEventListener("focusout", () => {
 					if(this.popup.getAttribute("visible") === null) {
@@ -471,6 +498,7 @@ export default class Viewer extends PhotoViewer {
 			// Add PSV to mini
 			this.mini.appendChild(this.psvContainer);
 			this.mini.icon = fa(faPanorama);
+			if(this._miniPicLegend) { this.mini.appendChild(this._miniPicLegend); }
 
 			// Hide mini icon if no picture selected
 			if(isNullId(this.picture)) { this.mini.classList.add("pnx-hidden"); }
@@ -488,6 +516,7 @@ export default class Viewer extends PhotoViewer {
 			// Remove PSV from mini
 			if(this.psvContainer.parentNode == this.mini) {
 				this.mini.removeChild(this.psvContainer);
+				if(this._miniPicLegend) { this.mini.removeChild(this._miniPicLegend); }
 			}
 
 			// Add PSV to grid

package/src/components/layout/BottomDrawer.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { onceParentAvailable } from "../../utils/widgets";
 
 const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
 
@@ -104,7 +105,7 @@ export default class BottomDrawer extends LitElement {
 		drawer.style.height = `${this._drawerHeight}px`;
 		drawer.style.maxHeight = `${this._drawerHeight}px`;
 
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._parent.map?.addEventListener("click", () => this.openness = "closed");
 			this._parent.psv?.addEventListener("click", () => this.openness = "closed");
 		});

package/src/components/layout/Tabs.js

@@ -33,6 +33,10 @@ export default class Tabs extends LitElement {
 			align-items: stretch;
 			overflow-x: auto;
 			touch-action: pan-x;
+			position: sticky;
+			top: 0;
+			background: white;
+			z-index: 125;
 		}
 		nav ::slotted(*) {
 			color: var(--grey-dark);

package/src/components/menus/AnnotationsList.js

@@ -3,6 +3,7 @@ import { faSvg, iconify } from "../styles";
 import { fa, moreIcons } from "../../utils/widgets";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { onceParentAvailable } from "../../utils/widgets";
 import "iconify-icon";
 
 /**
@@ -42,15 +43,18 @@ export default class AnnotationsList extends LitElement {
 		super.connectedCallback();
 
 		this._onPicChange();
-		this._parent?.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
-
-		this._parent?.psv?.addEventListener("annotation-click", e => {
-			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
-			if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
-		});
-
-		this._parent?.psv?.addEventListener("annotations-unfocused", () => {
-			this._onListItemClick(null);
+		
+		onceParentAvailable(this).then(() => {
+			this._parent.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
+
+			this._parent.psv?.addEventListener("annotation-click", e => {
+				const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
+				if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
+			});
+
+			this._parent.psv?.addEventListener("annotations-unfocused", () => {
+				this._onListItemClick(null);
+			});
 		});
 	}
 

package/src/components/menus/MapBackground.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from "lit";
 import BackgroundAerial from "../../img/bg_aerial.jpg";
 import BackgroundStreets from "../../img/bg_streets.jpg";
+import { onceParentAvailable } from "../../utils/widgets";
+
 
 /**
  * Map Background menu allows user to select background.
@@ -60,10 +62,13 @@ export default class MapBackground extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.map?.on("background-changed", e => {
-			this.bg = e.background;
+
+		onceParentAvailable(this).then(() => {
+			this._parent.map?.on("background-changed", e => {
+				this.bg = e.background;
+			});
+			this.bg = this._parent.map?.getBackground();
 		});
-		this.bg = this._parent?.map?.getBackground();
 	}
 
 	/** @private */

package/src/components/menus/MapFilters.js

@@ -8,6 +8,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
 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";
+import { onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Map Filters menu allows user to select map data they want displayed.
@@ -180,12 +181,20 @@ export default class MapFilters extends LitElement {
 		}
 
 		// Map zoom
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(async () => {
 			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);
-		});
+
+			// Load default users filter
+			const vu = this._parent.map.getVisibleUsers();
+			if(vu?.length > 0 && vu[0] != "geovisio") {
+				this.user = vu[0];
+				const username = await this._parent.api.getUserName(vu[0]);
+				if(username) { this.user = username; }
+			}
+		}));
 	}
 
 	/**

package/src/components/menus/MapLayers.js

@@ -5,6 +5,7 @@ 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";
+import { onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Map Layers menu allows user to select background and map theme.
@@ -56,10 +57,10 @@ export default class MapLayers extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this.theme = this._parent.map._mapFilters.theme;
 			this._parent.map.on("filters-changed", e => this.theme = e.theme);
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/MapLegend.js

@@ -1,4 +1,5 @@
 import {LitElement, html, nothing, css} from "lit";
+import {onceParentAvailable} from "../../utils/widgets";
 
 /**
  * Map legend displays information about map sources.
@@ -14,20 +15,50 @@ export default class MapLegend extends LitElement {
 	/** @private */
 	static styles = css`
 		:host {
-			font-size: 0.9em;
+			font-size: 0.7em;
 		}
 		small {
 			font-size: 1em;
 		}
+		.maplibregl-ctrl-attrib-inner {
+			display: inline-block;
+		}
 	`;
 
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.MapLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
+	static properties = {
+		light: {type: Boolean},
+	};
+
+	constructor() {
+		super();
+		this.light = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this.requestUpdate());
+	}
+
 	/** @private */
 	render() {
+		/* eslint-disable indent */
 		const mapAttrib = this._parent?.map?._attribution?._innerContainer;
+		const mapLabelParts = this._parent?._t.map.map_data.split("{m}");
 
-		return html`
-			${mapAttrib && mapAttrib.innerHTML.length > 0 ? html`${this._parent?._t.map.map_data}<br />${mapAttrib}` : nothing}
-		`;
+		return this.light ?
+			(mapAttrib && mapAttrib.innerHTML.length > 0 ? mapAttrib : nothing)
+			: html`
+				${mapAttrib && mapAttrib.innerHTML.length > 0
+					? html`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
+					: nothing}
+			`;
 	}
 }
 

package/src/components/menus/MiniPictureLegend.js

@@ -0,0 +1,74 @@
+import { LitElement, nothing, css, html } from "lit";
+import { onceParentAvailable } from "../../utils/widgets";
+import { panel } from "../styles";
+
+/**
+ * Mini picture legend shows info about picture capture date, when seen in mini component of viewer.
+ * @class Panoramax.components.menus.MiniPictureLegend
+ * @element pnx-mini-picture-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-mini-picture-legend ._parent=${viewer} />
+ * ```
+ */
+export default class MiniPictureLegend extends LitElement {
+	/** @private */
+	static styles = [panel, css`
+		.pnx-panel {
+			bottom: 0;
+			right: 0;
+			width: unset;
+			min-width: unset;
+			border-radius: 10px;
+			border-top-right-radius: 0;
+			border-bottom-left-radius: 0;
+			border-right: none;
+			border-bottom: none;
+			padding: 2px 5px;
+			font-size: 0.7em;
+		}
+	`];
+
+	/** @private */
+	static properties = {
+		_caption: {state: true},
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this)
+			.then(() => this._parent.onceReady())
+			.then(() => {
+				this._onPicChange(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("sequence-stopped", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+			});
+	}
+
+	/** @private */
+	_onPicChange(picMeta) {
+		this._caption = picMeta?.caption;
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		return this._caption?.date ?
+			html`<div class="pnx-panel">${
+				this._caption.date.toLocaleDateString(
+					this._parent?.lang || window.navigator.language,
+					{ year: "numeric", month: "long", day: "numeric" }
+				)
+			}</div>`
+			: nothing;
+	}
+}
+
+customElements.define("pnx-mini-picture-legend", MiniPictureLegend);