@panoramax/web-viewer 4.0.3-develop-90cc79b9 → 4.0.3-develop-dd0778d7

package/docs/index.md

@@ -118,6 +118,19 @@ A photo-only viewer, showing one picture at a time, and offering navigation thro
 />
 ```
 
+If you'd like a photo viewer that looks like an iframe embed (with only a small legend widget), you may use this code:
+
+```html
+<pnx-photo-viewer
+  endpoint="https://api.panoramax.xyz/api"
+  sequence="id-to-an-existing-sequence"
+  picture="id-to-a-picture-in-this-sequence"
+  widgets="false"
+>
+	<pnx-widget-legend light slot="bottom-right"></pnx-widget-legend>
+</pnx-photo-viewer>
+```
+
 [Many options are available as well](./reference/components/core/PhotoViewer.md).
 
 __Editor__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-90cc79b9",
+  "version": "4.0.3-develop-dd0778d7",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/PhotoViewer.css

@@ -35,18 +35,6 @@ pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
 	}
 }
 
-@media screen and (min-width: 576px) {
-	pnx-photo-viewer pnx-widget-legend {
-		position: absolute;
-		left: 10px;
-		top: 60px;
-	}
-
-	pnx-photo-viewer pnx-widget-legend {
-		top: 10px;
-	}
-}
-
 /* Hidden widgets on sequence play */
 pnx-photo-viewer.pnx-playing pnx-bottom-drawer,
 pnx-photo-viewer.pnx-playing pnx-widget-legend,

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/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,7 +181,7 @@ export default class MapFilters extends LitElement {
 		}
 
 		// Map zoom
-		this._parent?.onceMapReady?.().then(async () => {
+		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();
@@ -193,7 +194,7 @@ export default class MapFilters extends LitElement {
 				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/PictureLegend.js

@@ -1,7 +1,7 @@
 import { LitElement, nothing, css } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
 import { classMap } from "lit/directives/class-map.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
@@ -165,18 +165,20 @@ export default class PictureLegend extends LitElement {
 		this._expanded = !this.collapsable;
 		this._prevSearches = {};
 
-		this._parent.onceReady().then(() => {
-			this._onPicChange(this._parent.psv.getPictureMetadata());
-			this._parent.psv.addEventListener("picture-loaded", () => {
+		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());
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					this._expanded = true;
+				});
 			});
-			this._parent.psv.addEventListener("sequence-stopped", () => {
-				this._onPicChange(this._parent.psv.getPictureMetadata());
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				this._expanded = true;
-			});
-		});
 	}
 
 	/** @private */

package/src/components/menus/PictureMetadata.js

@@ -1,6 +1,6 @@
 import { LitElement, nothing, css } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
@@ -82,14 +82,16 @@ export default class PictureMetadata extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._meta = this._parent?.psv?.getPictureMetadata();
-		this._parent?.oncePSVReady?.().then(() => {
-			this._parent.psv.addEventListener("picture-loaded", () => {
-				this._meta = this._parent.psv.getPictureMetadata();
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				const tabs = this.shadowRoot.querySelector("pnx-tabs");
-				if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+		onceParentAvailable(this).then(() => {
+			this._meta = this._parent?.psv?.getPictureMetadata();
+			this._parent?.oncePSVReady?.().then(() => {
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._meta = this._parent.psv.getPictureMetadata();
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					const tabs = this.shadowRoot.querySelector("pnx-tabs");
+					if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+				});
 			});
 		});
 	}

package/src/components/menus/PlayerOptions.js

@@ -4,7 +4,7 @@ import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
 import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
 import { faPersonBiking } from "@fortawesome/free-solid-svg-icons/faPersonBiking";
 import { PIC_MAX_STAY_DURATION } from "../ui/Photo";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Player Options menu displays player speed and contrast settings.
@@ -40,9 +40,9 @@ export default class PlayerOptions extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.psv?.addEventListener("transition-duration-changed", e => {
+		onceParentAvailable(this).then(() => this._parent?.psv?.addEventListener("transition-duration-changed", e => {
 			this.renderRoot.querySelector("#pnx-player-speed").value = PIC_MAX_STAY_DURATION - e.detail.value;
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/Share.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faSvg, textarea, titles, input } from "../styles";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
@@ -47,7 +47,7 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._onUrlChange();
 			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
 		});

package/src/components/ui/AnnotationsSwitch.js

@@ -107,6 +107,7 @@ export default class AnnotationsSwitch extends LitElement {
 				kind="outline"
 				size=${this.size}
 				style="vertical-align: middle"
+				class="pnx-print-hidden"
 				title=${[
 					this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations,
 					this._warnNoAnnot ? this._parent._t?.pnx.semantics_zero_annotations : null

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

@@ -3,6 +3,7 @@ import maplibregl from "!maplibre-gl";
 
 import { LitElement, html } from "lit";
 import { forwardGeocodingBAN, forwardGeocodingStandard, forwardGeocodingNominatim } from "../../../utils/geocoder";
+import { onceParentAvailable } from "../../../utils/widgets";
 import "./GeoSearch.css";
 
 const GEOCODER_ENGINES = {
@@ -63,10 +64,10 @@ export default class GeoSearch extends LitElement {
 		super.connectedCallback();
 
 		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
 			this._geolocate.setAttribute("slot", "pre");
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { panel } from "../../styles";
 import { fa } from "../../../utils/widgets";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
@@ -150,7 +150,7 @@ export default class Legend extends LitElement {
 				._parent=${this._parent}
 				style=${this.focus == "map" ? "display: none": ""}
 				collapsable
-				light=${this.light}
+				light=${this.light || nothing}
 			>
 				<slot slot="editors" name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />
@@ -159,7 +159,7 @@ export default class Legend extends LitElement {
 			<pnx-map-legend
 				._parent=${this._parent}
 				style=${this.focus != "map" ? "display: none": ""}
-				light=${this.light}
+				light=${this.light || nothing}
 			></pnx-map-legend>
 		</div>`;
 	}

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } 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";
@@ -45,7 +45,7 @@ export default class MapFiltersButton extends LitElement {
 		super.connectedCallback();
 
 		// Listen to user visibility changes to switch the filter active icon
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => 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
@@ -64,7 +64,7 @@ export default class MapFiltersButton extends LitElement {
 					|| e.usersIds.filter(u => u !== "geovisio").length > 0
 				);
 			});
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } 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";
@@ -35,12 +35,12 @@ export default class MapLayersButton extends LitElement {
 
 		const nullThemes = [undefined, null, "", "default"];
 
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => 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 */

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing, css } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { josmBboxParameters } from "../../../utils/utils";
 import { IdEditorURL } from "../../../utils/services";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
@@ -40,7 +40,7 @@ export default class OSMEditors extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
 			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
 		});

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing, css } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
 import { noprint } from "../../styles";
 
@@ -42,7 +42,7 @@ export default class PictureLegendActions extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._meta = this._parent.psv.getPictureMetadata();
 			this._parent.psv.addEventListener("picture-loaded", () => {
 				this._meta = this._parent.psv.getPictureMetadata();

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faBackward } from "@fortawesome/free-solid-svg-icons/faBackward";
 import { faPlay } from "@fortawesome/free-solid-svg-icons/faPlay";
 import { faPause } from "@fortawesome/free-solid-svg-icons/faPause";
@@ -52,13 +52,13 @@ export default class Player extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._parent?.oncePSVReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.oncePSVReady?.().then(() => {
 			this._parent.psv.addEventListener("sequence-playing", () => this.playing = true);
 			this._parent.psv.addEventListener("sequence-stopped", () => this.playing = false);
 			this._parent.psv.addEventListener("picture-loaded", this._changeActiveStates.bind(this));
 			this._parent.addEventListener("pictures-navigation-changed", this._changeActiveStates.bind(this));
 			this._changeActiveStates();
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../Photo";
 import { PSV_ZOOM_DELTA } from "../../core/Viewer";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
 import "../ButtonGroup.css";
@@ -30,7 +30,9 @@ export default class Zoom extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.oncePSVReady?.().then(() => this._lastWantedZoom = this._parent?.psv?.getZoomLevel() || PSV_DEFAULT_ZOOM);
+		onceParentAvailable(this).then(() => this._parent?.oncePSVReady?.().then(() => {
+			this._lastWantedZoom = this._parent?.psv?.getZoomLevel() || PSV_DEFAULT_ZOOM;
+		}));
 	}
 
 	/** @private */

package/src/utils/widgets.js

@@ -70,3 +70,23 @@ export function listenForMenuClosure(me, callback) {
 		me._parent.legend?.addEventListener("click", () => callback());
 	});
 }
+
+/**
+ * Wait for parent availability
+ * @private
+ */
+export function onceParentAvailable(comp) {
+	if(comp._parent) {
+		return Promise.resolve(comp._parent);
+	}
+	else {
+		return new Promise(resolve => {
+			const itv = setInterval(() => {
+				if(comp._parent) {
+					clearInterval(itv);
+					resolve(comp._parent);
+				}
+			}, 100);
+		});
+	}
+}