@panoramax/web-viewer 4.0.3-develop-d48b09a7 → 4.0.3-develop-5b0cd5bb

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.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-5b0cd5bb",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/PhotoViewer.js

@@ -132,6 +132,12 @@ export default class PhotoViewer extends Basic {
 				size: this.isHeightSmall() ? "md": "xl",
 			}));
 
+			this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+				slot: "top",
+				_parent: this,
+				class: "pnx-only-psv pnx-print-hidden",
+			}));
+
 			if(!this.isWidthSmall()) {
 				this.legend = createWebComp("pnx-widget-legend", {
 					slot: !this.isWidthSmall() ? "top-left" : undefined,
@@ -146,12 +152,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.js

@@ -158,12 +158,6 @@ export default class Viewer extends PhotoViewer {
 					picture: this._initParams.getParentPostInit().picture,
 				});
 				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 });
@@ -187,6 +181,12 @@ export default class Viewer extends PhotoViewer {
 				size: this.isHeightSmall() ? "md": "xl",
 			}));
 
+			this.grid.appendChild(createWebComp("pnx-annotations-switch", {
+				slot: "top",
+				_parent: this,
+				class: "pnx-only-psv pnx-print-hidden",
+			}));
+
 			this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
 				slot: this.isWidthSmall() ? "top-right" : "top-left",
 				_parent: this,

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/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,96 @@
+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`
+		div {
+			font-family: var(--font-family);
+			font-size: 0.8em;
+		}
+
+		.pnx-annotations-switch-empty {
+			position: absolute;
+			top: 2px;
+			right: 2px;
+			color: var(--orange);
+			height: 12px;
+		}
+
+		pnx-button[active] .pnx-annotations-switch-empty {
+			color: var(--yellow);
+		}
+	`;
+
+	/** @private */
+	static properties = {
+		_annotationsToggled: {state: true},
+		_warnNoAnnot: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._annotationsToggled = false;
+		this._warnNoAnnot = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._parent.onceReady().then(() => {
+			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
+			if(!this._annotationsToggled) {
+				this._parent.psv.toggleAllAnnotations(true);
+				this._annotationsToggled = true;
+			}
+			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());
+			});
+		});
+	}
+
+	_onClick() {
+		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		return html`
+			<pnx-button
+				kind="outline"
+				style="vertical-align: middle; width: 37px; height: 37px"
+				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)}
+				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
+			</pnx-button>
+		`;
+	}
+}
+
+customElements.define("pnx-annotations-switch", AnnotationsSwitch);

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";

package/src/translations/en.json

@@ -191,6 +191,8 @@
         "semantics_qualifiers": "Qualifiers",
         "semantics_show_annotations": "Display picture annotations",
         "semantics_hide_annotations": "Hide picture annotations",
+        "semantics_zero_annotations": "(no annotation set on this picture)",
+        "semantics_hashtags": "Picture hashtags",
         "semantics_wikidata_properties": {
             "P31": "instance of",
             "P279": "subclass of",

package/src/translations/fr.json

@@ -189,6 +189,10 @@
         "semantics_tags_picture": "Attributs de la photo",
         "semantics_tags_picture_none": "Aucun attribut n'a été défini pour cette photo pour l'instant.",
         "semantics_qualifiers": "Qualificateurs",
+        "semantics_show_annotations": "Afficher les annotations de photo",
+        "semantics_hide_annotations": "Masquer les annotations de photo",
+        "semantics_zero_annotations": "(aucune annotation sur cette image)",
+        "semantics_hashtags": "Mots-dièse de la photo",
         "semantics_wikidata_properties": {
             "P31": "instance de",
             "P279": "sous-classe de",

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -10,6 +10,12 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-widget-zoom
         class="pnx-print-hidden"
@@ -23,12 +29,6 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top-left"
       />,
     ],
-    Array [
-      <pnx-hashtags
-        class="pnx-only-psv pnx-print-hidden"
-        slot="top-right"
-      />,
-    ],
   ],
   "results": Array [
     Object {
@@ -61,6 +61,12 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-bottom-drawer
         slot="bottom"
@@ -78,6 +84,10 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -17,15 +17,15 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
       />,
     ],
     Array [
-      <pnx-hashtags
+      <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
-        slot="top-right"
+        size="xl"
+        slot="top"
       />,
     ],
     Array [
-      <pnx-widget-player
+      <pnx-annotations-switch
         class="pnx-only-psv pnx-print-hidden"
-        size="xl"
         slot="top"
       />,
     ],
@@ -105,6 +105,12 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-widget-geosearch
         class="pnx-only-map pnx-print-hidden"
@@ -150,6 +156,10 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

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

@@ -1,15 +0,0 @@
-<a name="Panoramax.components.ui.HashTags"></a>
-
-## Panoramax.components.ui.HashTags ⇐ <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-hashtags  
-<a name="new_Panoramax.components.ui.HashTags_new"></a>
-
-### new HashTags()
-HashTags component shows the list of hashtags associated to a picture.
-
-**Example**  
-```html
-<pnx-hashtags ._parent=${viewer} />
-```

package/src/components/ui/HashTags.js

@@ -1,98 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { getHashTags, hasAnnotations } from "../../utils/picture";
-import { fa } from "../../utils/widgets";
-import { faDrawPolygon } from "@fortawesome/free-solid-svg-icons/faDrawPolygon";
-
-/**
- * HashTags component shows the list of hashtags associated to a picture.
- * @class Panoramax.components.ui.HashTags
- * @element pnx-hashtags
- * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
- * @example
- * ```html
- * <pnx-hashtags ._parent=${viewer} />
- * ```
- */
-export default class HashTags extends LitElement {
-	/** @private */
-	static styles = css`
-		div {
-			background: linear-gradient(to bottom left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
-			margin-top: -10px;
-			margin-right: -10px;
-			padding: 5px 10px;
-			border-bottom-left-radius: 10px;
-			font-family: var(--font-family);
-			color: white;
-			font-size: 0.8em;
-		}
-	`;
-
-	/** @private */
-	static properties = {
-		_tags: {state: true},
-		_visible: {state: true},
-		_annotationsToggled: {state: true},
-	};
-
-	constructor() {
-		super();
-		this._tags = [];
-		this._visible = false;
-		this._annotationsToggled = false;
-	}
-
-	/** @private */
-	connectedCallback() {
-		super.connectedCallback();
-
-		this._parent.onceReady().then(() => {
-			this._tags = getHashTags(this._parent?.psv?.getPictureMetadata?.());
-
-			// Component visibility : only if seen at least one pic with semantics
-			if(
-				!this._visible && (
-					this._tags.length > 0
-					|| hasAnnotations(this._parent?.psv?.getPictureMetadata?.())
-				)
-			) {
-				this._visible = true;
-				this._parent.psv.toggleAllAnnotations(true);
-			}
-
-			this._parent.psv.addEventListener("picture-loaded", () => {
-				this._tags = getHashTags(this._parent.psv.getPictureMetadata());
-				if(
-					!this._visible && (
-						this._tags.length > 0 ||
-						hasAnnotations(this._parent.psv.getPictureMetadata())
-					)
-				) {
-					this._visible = true;
-					this._parent.psv.toggleAllAnnotations(true);
-				}
-			});
-
-			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
-			this._parent.psv.addEventListener("annotations-toggled", e => {
-				this._annotationsToggled = e.detail.visible;
-			});
-		});
-	}
-
-	/** @private */
-	render() {
-		return this._visible ? html`<div>
-			${this._tags.join(" ")}
-			<pnx-button
-				kind="outline"
-				style="vertical-align: middle"
-				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
-				active=${this._annotationsToggled ? "" : nothing}
-				@click=${() => this._parent.psv.toggleAllAnnotations(!this._annotationsToggled)}
-			>${fa(faDrawPolygon)}</pnx-button>
-		</div>` : nothing;
-	}
-}
-
-customElements.define("pnx-hashtags", HashTags);