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

package/docs/reference/components/menus/MapLegend.md

@@ -4,6 +4,11 @@
 **Kind**: static class of <code>Panoramax.components.menus</code>  
 **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
 **Element**: pnx-map-legend  
+
+* [.MapLegend](#Panoramax.components.menus.MapLegend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new MapLegend()](#new_Panoramax.components.menus.MapLegend_new)
+    * [.properties](#Panoramax.components.menus.MapLegend+properties) : <code>Object</code>
+
 <a name="new_Panoramax.components.menus.MapLegend_new"></a>
 
 ### new MapLegend()
@@ -13,3 +18,15 @@ Map legend displays information about map sources.
 ```html
 <pnx-map-legend ._parent=${viewer} />
 ```
+<a name="Panoramax.components.menus.MapLegend+properties"></a>
+
+### mapLegend.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>MapLegend</code>](#Panoramax.components.menus.MapLegend)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
+

package/docs/reference/components/menus/PictureLegend.md

@@ -5,6 +5,11 @@
 **Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
 **Element**: pnx-picture-legend  
 **Slot**: `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).  
+
+* [.PictureLegend](#Panoramax.components.menus.PictureLegend) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new PictureLegend()](#new_Panoramax.components.menus.PictureLegend_new)
+    * [.properties](#Panoramax.components.menus.PictureLegend+properties) : <code>Object</code>
+
 <a name="new_Panoramax.components.menus.PictureLegend_new"></a>
 
 ### new PictureLegend()
@@ -14,3 +19,15 @@ Picture legend shows info about picture author, capture date, address, and acces
 ```html
 <pnx-picture-legend ._parent=${viewer} />
 ```
+<a name="Panoramax.components.menus.PictureLegend+properties"></a>
+
+### pictureLegend.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>PictureLegend</code>](#Panoramax.components.menus.PictureLegend)  
+**Properties**
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
+

package/docs/reference/components/ui/AnnotationsSwitch.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.ui.AnnotationsSwitch"></a>
+
+## Panoramax.components.ui.AnnotationsSwitch ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-annotations-switch  
+<a name="new_Panoramax.components.ui.AnnotationsSwitch_new"></a>
+
+### new AnnotationsSwitch()
+AnnotationsSwitch component allows to switch on/off pictures annotations.
+
+**Example**  
+```html
+<pnx-annotations-switch ._parent=${viewer} />
+```

package/docs/reference/components/ui/widgets/Legend.md

@@ -42,8 +42,9 @@ Component properties.
 **Kind**: instance property of [<code>Legend</code>](#Panoramax.components.ui.widgets.Legend)  
 **Properties**
 
-| Name | Type | Description |
-| --- | --- | --- |
-| [focus] | <code>string</code> | The focused main component (map, pic) |
-| [picture] | <code>string</code> | The picture ID |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [focus] | <code>string</code> |  | The focused main component (map, pic) |
+| [picture] | <code>string</code> |  | The picture ID |
+| [light] | <code>boolean</code> | <code>false</code> | Lighter version (for iframes) |
 

package/docs/reference.md

@@ -41,11 +41,11 @@ All-in-one, ready-to-use menus for complex operations. Note that they don't embe
 
 Basic UI components:
 
+- [AnnotationsSwitch](./reference/components/ui/AnnotationsSwitch.md) : a switch button for showing/hiding picture annotations.
 - [Button](./reference/components/ui/Button.md) : a simple button.
 - [ButtonGroup](./reference/components/ui/ButtonGroup.md) : button bar.
 - [CopyButton](./reference/components/ui/CopyButton.md) : a copy-to-clipboard button.
 - [Grade](./reference/components/ui/Grade.md) : a 5-star rating display.
-- [HashTags](./reference/components/ui/HashTags.md) : a list of hashtags associated to a picture.
 - [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
 - [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
 - [ListItem](./reference/components/ui/ListItem.md) : a Material Design-like list entry.

package/mkdocs.yml

@@ -87,11 +87,11 @@ nav:
           - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
           - Player: 'reference/components/ui/widgets/Player.md'
           - Zoom: 'reference/components/ui/widgets/Zoom.md'
+        - AnnotationsSwitch: 'reference/components/ui/AnnotationsSwitch.md'
         - Button: 'reference/components/ui/Button.md'
         - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
         - CopyButton: 'reference/components/ui/CopyButton.md'
         - Grade: 'reference/components/ui/Grade.md'
-        - HashTags: 'reference/components/ui/HashTags.md'
         - LinkButton: 'reference/components/ui/LinkButton.md'
         - ListGroup: 'reference/components/ui/ListGroup.md'
         - ListItem: 'reference/components/ui/ListItem.md'

package/package.json

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

package/src/components/core/PhotoViewer.js

@@ -7,7 +7,7 @@ import URLHandler from "../../utils/URLHandler";
 import Basic from "./Basic";
 import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import { createWebComp } from "../../utils/widgets";
-import { isNullId } from "../../utils/utils";
+import { isNullId, isInIframe } from "../../utils/utils";
 import { default as InitParameters, alterPSVState, alterMapState, alterPhotoViewerState } from "../../utils/InitParameters";
 import PresetManager from "../../utils/PresetsManager";
 
@@ -125,14 +125,33 @@ export default class PhotoViewer extends Basic {
 	/** @private */
 	_initWidgets() {
 		if(this._initParams.getParentPostInit().widgets !== "false") {
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
-
-			if(!this.isWidthSmall()) {
+			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",
+				}));
+			}
+
+			if(isInIframe()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: "bottom-right",
+					light: true,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this.grid.appendChild(this.legend);
+			}
+			else if(!this.isWidthSmall()) {
 				this.legend = createWebComp("pnx-widget-legend", {
 					slot: !this.isWidthSmall() ? "top-left" : undefined,
 					_parent: this,
@@ -146,12 +165,6 @@ export default class PhotoViewer extends Basic {
 					_parent: this
 				}));
 				this.grid.appendChild(this.legend);
-
-				this.grid.appendChild(createWebComp("pnx-hashtags", {
-					slot: "top-right",
-					_parent: this,
-					class: "pnx-only-psv pnx-print-hidden",
-				}));
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });

package/src/components/core/Viewer.css

@@ -56,7 +56,6 @@ pnx-viewer pnx-mini {
 	pnx-viewer pnx-mini {
 		min-width: unset;
 		min-height: unset;
-		margin-bottom: 40px;
 	}
 }
 

package/src/components/core/Viewer.js

@@ -3,10 +3,9 @@
 import "./Viewer.css";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
 import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
-import Basic from "./Basic";
 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;
 
 
@@ -150,20 +148,24 @@ 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.grid.appendChild(this.legend);
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
@@ -180,27 +182,38 @@ 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" }));
+			}
 		}
 	}
 

package/src/components/layout/Tabs.js

@@ -36,6 +36,7 @@ export default class Tabs extends LitElement {
 			position: sticky;
 			top: 0;
 			background: white;
+			z-index: 125;
 		}
 		nav ::slotted(*) {
 			color: var(--grey-dark);

package/src/components/menus/MapLegend.js

@@ -24,17 +24,34 @@ export default class MapLegend extends LitElement {
 		}
 	`;
 
+	/**
+	 * 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 */
 	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`${mapLabelParts.shift()}${mapAttrib}${mapLabelParts.shift()}`
-				: 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/PictureLegend.js

@@ -1,4 +1,5 @@
-import { LitElement, html, nothing, css } from "lit";
+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 { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
@@ -127,10 +128,22 @@ export default class PictureLegend extends LitElement {
 
 		/* Editors */
 		#pic-legend-editors { margin: 0 10px; }
+
+		/* Light version */
+		.pnx-picture-legend-light {
+			width: max-content;
+			font-size: 10px;
+		}
 	`];
 
-	/** @private */
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.PictureLegend#
+	 * @type {Object}
+	 * @property {boolean} [light=false] Lighter version (for iframes)
+	 */
 	static properties = {
+		light: {type: Boolean},
 		_caption: { state: true },
 		_addr: { state: true },
 		_expanded: { state: true },
@@ -142,6 +155,7 @@ export default class PictureLegend extends LitElement {
 		super();
 		this._expanded = true;
 		this.collapsable = false;
+		this.light = false;
 	}
 
 	/** @private */
@@ -209,6 +223,22 @@ export default class PictureLegend extends LitElement {
 		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
 		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
 
+		if(this.light) {
+			return html`<div class="pnx-picture-legend-light">
+				${this._caption.producer?.length > 0 ? html`
+					<a
+						href=${window.location.href}
+						target="_blank"
+						title=${this._parent?._t.pnx.share_page}
+					>${this._caption.producer[this._caption.producer.length-1]}</a>
+				</div>` : nothing}
+
+				${this._caption.producer?.length > 0 && this._caption?.license ? "|" : ""}
+
+				${this._caption?.license ? html`${unsafeStatic(this._caption.license)}` : nothing}
+			`;
+		}
+
 		return html`
 			<div class="headline">
 				${this._parent._setFocus ? html`

package/src/components/menus/PictureMetadata.js

@@ -14,7 +14,7 @@ import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
 import { faSvg, titles, textarea, hidden } from "../styles";
 import { createWebComp } from "../../utils/widgets";
-import { getGPSPrecision } from "../../utils/picture";
+import { getGPSPrecision, getHashTags } from "../../utils/picture";
 import { PanoramaxMetaCatalogURL } from "../../utils/services";
 import {
 	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
@@ -243,6 +243,16 @@ export default class PictureMetadata extends LitElement {
 		);
 		let semanticsData = [];
 		if(hasSemantics) {
+			// Hashtags
+			const hashtags = getHashTags(this._meta);
+			if(hashtags.length > 0) {
+				semanticsData.push({
+					title: this._parent?._t.pnx.semantics_hashtags,
+					style: "width: 100%",
+					content: hashtags.join(" ")
+				});
+			}
+			
 			// Full list of picture tags
 			semanticsData.push({
 				title: this._parent?._t.pnx.semantics_tags_picture,
@@ -392,7 +402,6 @@ export default class PictureMetadata extends LitElement {
 				</strong>`
 			}
 		];
-		console.log("instance", this._meta.origInstance);
 
 		return html`<pnx-tabs>
 			${this._toTab( // General

package/src/components/ui/AnnotationsSwitch.js

@@ -0,0 +1,124 @@
+import { LitElement, html, css, nothing } from "lit";
+import { fa } from "../../utils/widgets";
+import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { hasAnnotations } from "../../utils/picture";
+
+/**
+ * AnnotationsSwitch component allows to switch on/off pictures annotations.
+ * @class Panoramax.components.ui.AnnotationsSwitch
+ * @element pnx-annotations-switch
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-annotations-switch ._parent=${viewer} />
+ * ```
+ */
+export default class AnnotationsSwitch extends LitElement {
+	/** @private */
+	static styles = css`
+		/* Custom button look */
+		pnx-button::part(btn) {
+			border-radius: 8px;
+			height: 26px;
+			width: 26px;
+		}
+
+		pnx-button[size="xl"]::part(btn) {
+			border-radius: 8px;
+			height: 38px;
+			width: 38px;
+		}
+
+		/* No-annotations badge */
+		.pnx-annotations-switch-empty {
+			position: absolute;
+			top: 1px;
+			right: 1px;
+			color: var(--orange);
+			height: 8px;
+		}
+
+		pnx-button[size="xl"] .pnx-annotations-switch-empty {
+			top: 2px;
+			right: 2px;
+			height: 12px;
+		}
+
+		pnx-button[active] .pnx-annotations-switch-empty {
+			color: var(--yellow);
+		}
+	`;
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.AnnotationsSwitch#
+	 * @type {Object}
+	 * @property {string} [size=xl] Button size (md, xl)
+	 */
+	/** @private */
+	static properties = {
+		size: {type: String},
+		_annotationsToggled: {state: true},
+		_warnNoAnnot: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._annotationsToggled = false;
+		this._warnNoAnnot = false;
+		this.size = "xl";
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._parent.onceReady().then(() => {
+			this._parent.psv.addEventListener("annotations-toggled", e => {
+				this._annotationsToggled = e.detail.visible;
+			});
+
+			this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
+			});
+		});
+
+		this._parent.onceFirstPicLoaded().then(() => {
+			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+
+			if(!this._annotationsToggled) {
+				this._parent.psv.toggleAllAnnotations(true);
+				this._annotationsToggled = true;
+			}
+		});
+	}
+
+	_onClick() {
+		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		return html`
+			<pnx-button
+				kind="outline"
+				size=${this.size}
+				style="vertical-align: middle"
+				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
+				].filter(v => v).join(" ")}
+				active=${this._annotationsToggled ? "" : nothing}
+				@click=${this._onClick}
+			>
+				${fa(faTags, { styles: { "height": "unset" }})}
+				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
+			</pnx-button>
+		`;
+	}
+}
+
+customElements.define("pnx-annotations-switch", AnnotationsSwitch);

package/src/components/ui/Photo.js

@@ -954,7 +954,7 @@ export default class Photo extends PSViewer {
 
 		if(!visible) { this._myMarkers.clearMarkers(); }
 		else {
-			let annotations = meta.properties.annotations;
+			let annotations = meta.properties.annotations || [];
 			if(annotations?.length === 0) { console.warn("No annotation available on picture", meta.id); }
 
 			const picBData = this.state.textureData.panoData?.baseData;

package/src/components/ui/index.js

@@ -7,7 +7,7 @@ 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 HashTags} from "./HashTags";
+export {default as AnnotationsSwitch} from "./AnnotationsSwitch";
 export {default as LinkButton} from "./LinkButton";
 export {default as ListGroup} from "./ListGroup";
 export {default as ListItem} from "./ListItem";