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

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

@@ -1,9 +1,10 @@
-import {LitElement, html, css} from "lit";
+import { LitElement, html, css } from "lit";
 import { panel } from "../../styles";
 import { fa } from "../../../utils/widgets";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import PanoramaxImg from "../../../img/panoramax.svg";
 import { classMap } from "lit/directives/class-map.js";
+import { PanoramaxWebsiteURL } from "../../../utils/services";
 
 /**
  * Legend widget, handling switch between map and photo components.
@@ -55,6 +56,40 @@ export default class Legend extends LitElement {
 		.logo {
 			width: 45px;
 		}
+		pnx-map-legend {
+			display: block;
+			margin-top: 5px;
+		}
+
+		/* Lighter/smaller version */
+		.pnx-panel[part="panel"].pnx-legend-light {
+			display: flex;
+			gap: 3px;
+			padding: 3px 8px 3px 3px;
+			width: unset;
+			min-width: unset;
+			align-items: center;
+			font-size: 10px;
+			margin-right: -10px;
+			margin-bottom: -10px;
+			border-radius: 0;
+			border-top-left-radius: 5px;
+			border-right: none;
+  			border-bottom: none;
+		}
+		.pnx-legend-light a,
+		.pnx-legend-light .presentation {
+			font-size: 10px;
+		}
+		.pnx-legend-light .logo {
+			width: 15px;
+		}
+
+		.pnx-legend-light pnx-map-legend {
+			width: max-content;
+			margin-top: unset;
+			font-size: 10px;
+		}
 	`];
 
 	/**
@@ -63,41 +98,59 @@ export default class Legend extends LitElement {
 	 * @type {Object}
 	 * @property {string} [focus] The focused main component (map, pic)
 	 * @property {string} [picture] The picture ID
+	 * @property {boolean} [light=false] Lighter version (for iframes)
 	 */
 	static properties = {
 		focus: {type: String},
 		picture: {type: String},
+		light: {type: Boolean},
 	};
 
+	constructor() {
+		super();
+		this.light = false;
+	}
+
 	render() {
 		const classes = {
 			"pnx-panel": true,
 			"pnx-padded": this.focus == "map",
+			"pnx-legend-light": this.light,
 		};
 
 		return html`<div class=${classMap(classes)} part="panel">
 			<div
 				class="presentation"
-				style=${this.focus != "map" && this.picture ? "display: none": ""}
+				style=${!this.light && this.focus != "map" && this.picture ? "display: none": ""}
 			>
 				<img class="logo" src=${PanoramaxImg} alt="" />
-				<div>
-					${this._parent?._t.pnx.whats_panoramax}
-					<pnx-link-button
+
+				${this.light ? html`
+					&copy; <a
+						href=${PanoramaxWebsiteURL()}
 						title=${this._parent?._t.map.more_panoramax}
-						kind="superinline"
-						href="https://panoramax.fr"
 						target="_blank"
-						size="sm"
-					>
-						${fa(faInfoCircle)}
-					</pnx-link-button>
-				</div>
+					>${this._parent?._t.pnx.panoramax}</a> |
+				` : html`
+					<div>
+						${this._parent?._t.pnx.whats_panoramax}
+						<pnx-link-button
+							title=${this._parent?._t.map.more_panoramax}
+							kind="superinline"
+							href=${PanoramaxWebsiteURL()}
+							target="_blank"
+							size="sm"
+						>
+							${fa(faInfoCircle)}
+						</pnx-link-button>
+					</div>
+				`}
 			</div>
 			<pnx-picture-legend
 				._parent=${this._parent}
 				style=${this.focus == "map" ? "display: none": ""}
 				collapsable
+				light=${this.light}
 			>
 				<slot slot="editors" name="editors">
 					<pnx-widget-osmeditors ._parent=${this._parent} />
@@ -105,7 +158,8 @@ export default class Legend extends LitElement {
 			</pnx-picture-legend>
 			<pnx-map-legend
 				._parent=${this._parent}
-				style=${this.focus != "map" ? "display: none": "display: block; margin-top: 5px"}
+				style=${this.focus != "map" ? "display: none": ""}
+				light=${this.light}
 			></pnx-map-legend>
 		</div>`;
 	}

package/src/translations/en.json

@@ -39,6 +39,7 @@
         "share_embed": "Embed on your website",
         "share_embed_docs": "Read more about embed configuration",
         "share_print": "Print",
+        "panoramax": "Panoramax",
         "whats_panoramax": "Panoramax is the geo-commons for territories' pictures.",
         "copy": "Copy",
         "copied": "Copied",
@@ -191,6 +192,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

@@ -39,6 +39,7 @@
         "share_embed": "Intégration sur votre site",
         "share_embed_docs": "Découvrir plus de possibilités pour l'intégration sur votre site",
         "share_print": "Imprimer",
+        "panoramax": "Panoramax",
         "whats_panoramax": "Panoramax est le géocommun des photos des territoires.",
         "copy": "Copier",
         "copied": "Copié",
@@ -189,6 +190,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/src/utils/services.js

@@ -4,6 +4,14 @@
  */
 
 
+/**
+ * Panoramax website URL
+ * @returns {string} The website URL
+ */
+export function PanoramaxWebsiteURL() {
+	return "https://panoramax.fr";
+}
+
 /**
  * Panoramax Presets URL
  * @returns {string} The presets URL

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

@@ -10,6 +10,13 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-widget-zoom
         class="pnx-print-hidden"
@@ -23,12 +30,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 +62,13 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-bottom-drawer
         slot="bottom"
@@ -78,6 +86,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,13 +17,14 @@ 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 +106,13 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
         slot="top"
       />,
     ],
+    Array [
+      <pnx-annotations-switch
+        class="pnx-only-psv pnx-print-hidden"
+        size="xl"
+        slot="top"
+      />,
+    ],
     Array [
       <pnx-widget-geosearch
         class="pnx-only-map pnx-print-hidden"
@@ -150,6 +158,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);