@panoramax/web-viewer 4.0.3-develop-dd0778d7 → 4.0.3-develop-cdb08f04

package/package.json

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

package/src/components/ui/AnnotationsSwitch.js

@@ -3,6 +3,10 @@ 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";
+import { classMap } from "lit/directives/class-map.js";
+import { panel } from "../styles";
+
+const DISABLE_ANNOTATIONS_PARAM = "pnx-disable-annotations";
 
 /**
  * AnnotationsSwitch component allows to switch on/off pictures annotations.
@@ -16,7 +20,14 @@ import { hasAnnotations } from "../../utils/picture";
  */
 export default class AnnotationsSwitch extends LitElement {
 	/** @private */
-	static styles = css`
+	static styles = [ panel, css`
+		.pnx-panel {
+			padding: 5px;
+			margin-top: 5px;
+			width: max-content;
+  			min-width: unset;
+		}
+
 		/* Custom button look */
 		pnx-button::part(btn) {
 			border-radius: 8px;
@@ -30,6 +41,13 @@ export default class AnnotationsSwitch extends LitElement {
 			width: 38px;
 		}
 
+		pnx-button[active]::part(btn),
+		pnx-button[active]:hover::part(btn) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+
 		/* No-annotations badge */
 		.pnx-annotations-switch-empty {
 			position: absolute;
@@ -48,7 +66,7 @@ export default class AnnotationsSwitch extends LitElement {
 		pnx-button[active] .pnx-annotations-switch-empty {
 			color: var(--yellow);
 		}
-	`;
+	`];
 
 	/**
 	 * Component properties.
@@ -61,12 +79,14 @@ export default class AnnotationsSwitch extends LitElement {
 		size: {type: String},
 		_annotationsToggled: {state: true},
 		_warnNoAnnot: {state: true},
+		_warnNoAnnotTooltip: {state: true},
 	};
 
 	constructor() {
 		super();
 		this._annotationsToggled = false;
 		this._warnNoAnnot = false;
+		this._warnNoAnnotTooltip = false;
 		this.size = "xl";
 	}
 
@@ -74,9 +94,13 @@ export default class AnnotationsSwitch extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
+		// Check if annotations have been explicitly disabled
+		const annotsDisabled = localStorage.getItem(DISABLE_ANNOTATIONS_PARAM) === "true";
+
 		this._parent.onceReady().then(() => {
 			this._parent.psv.addEventListener("annotations-toggled", e => {
 				this._annotationsToggled = e.detail.visible;
+				this._persistAnnotationsLocalStorage(this._annotationsToggled);
 			});
 
 			this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
@@ -88,36 +112,57 @@ export default class AnnotationsSwitch extends LitElement {
 		this._parent.onceFirstPicLoaded().then(() => {
 			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
 
-			if(!this._annotationsToggled) {
+			if(!this._annotationsToggled && !annotsDisabled) {
 				this._parent.psv.toggleAllAnnotations(true);
 				this._annotationsToggled = true;
 			}
+			this._persistAnnotationsLocalStorage(this._annotationsToggled);
 		});
 	}
 
+	/** @private */
+	_persistAnnotationsLocalStorage(isAnnotToggled) {
+		console.log("save", isAnnotToggled);
+		localStorage.setItem(DISABLE_ANNOTATIONS_PARAM, isAnnotToggled ? "false": "true");
+	}
+
+	/** @private */
 	_onClick() {
+		if(!this._annotationsToggled && this._warnNoAnnot) {
+			this._warnNoAnnotTooltip = true;
+			setTimeout(() => this._warnNoAnnotTooltip = false, 2000);
+		}
+		this._persistAnnotationsLocalStorage(!this._annotationsToggled);
 		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
 	}
 
 	/** @private */
 	render() {
 		/* eslint-disable indent */
+		const panelClasses = {
+			"pnx-panel": true,
+			"pnx-hidden": !this._warnNoAnnotTooltip,
+		};
+
 		return html`
 			<pnx-button
-				kind="outline"
+				kind="superflat"
 				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
-				].filter(v => v).join(" ")}
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
 				active=${this._annotationsToggled ? "" : nothing}
 				@click=${this._onClick}
 			>
-				${fa(faTags, { styles: { "height": "unset" }})}
+				${fa(faTags, { styles: { "height": "20px" }})}
 				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
 			</pnx-button>
+			<div
+				class=${classMap(panelClasses)}
+				@click=${() => this._warnNoAnnotTooltip = false}
+			>
+				${this._parent._t?.pnx.semantics_zero_annotations}
+			</div>
 		`;
 	}
 }

package/src/components/ui/Photo.css

@@ -43,7 +43,8 @@
 	display: none;
 }
 
-/* No virtual tour arrows if photo is reduced */
-pnx-mini .psv-virtual-tour-arrows {
+/* No virtual tour arrows or annotations if photo is reduced */
+pnx-mini .psv-virtual-tour-arrows,
+pnx-mini .pnx-psv-annotation {
 	display: none;
 }

package/src/components/ui/Photo.js

@@ -992,6 +992,7 @@ export default class Photo extends PSViewer {
 					id: `annotation-${a.id}`,
 					polygon: shape,
 					data: { id: a.id },
+					className: "pnx-psv-annotation",
 					svgStyle: {
 						stroke: "var(--orange)",
 						strokeWidth: "3px",

package/src/translations/en.json

@@ -192,7 +192,7 @@
         "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_zero_annotations": "No annotation set on this picture",
         "semantics_hashtags": "Picture hashtags",
         "semantics_wikidata_properties": {
             "P31": "instance of",

package/src/translations/fr.json

@@ -192,7 +192,7 @@
         "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_zero_annotations": "Aucune annotation sur cette image",
         "semantics_hashtags": "Mots-dièse de la photo",
         "semantics_wikidata_properties": {
             "P31": "instance de",