@panoramax/web-viewer 3.2.3-develop-a4cbf815 → 3.2.3-develop-cb38d751

package/docs/03_URL_settings.md

@@ -18,14 +18,17 @@ https://api.panoramax.xyz/?map=19.51/48.1204522/-1.7199004&pic=890b6268-7716-4e3
 
 ### :material-target: `focus`: main shown element
 
-Switch to choose which element between map, picture or metadata should be shown wide at start. Examples:
+Switch to choose which element between map or picture should be shown wide at start. Examples:
 
 - `focus=map`
 - `focus=pic`
-- `focus=meta`
 
 By default, picture is shown wide.
 
+!!! note
+
+	In versions prior to 4.0.0, another `meta` value was also available to display picture metadata popup. As this part of interface is shown directly on picture side since 4.0.0, this parameter was removed. If present, picture is shown focused.
+
 ### :simple-speedtest: `speed`: sequence play speed
 
 The duration of stay on a picture during sequence play (excluding image dowloading time), in milliseconds. Authorized values are between 0 and 3000. Example:

package/package.json

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

package/src/components/menus/MapFilters.js

@@ -262,18 +262,17 @@ export default class MapFilters extends LitElement {
 		this._onFormChange();
 	}
 
-	/**
-	 * Shortcut button click: change associated input value
-	 * @private
-	 */
-	_onShortcutClick(field, value) {
-		return () => {
-			const elem = this.shadowRoot.getElementById(field);
-			if(elem) {
-				if(elem.value !== value) { elem.value = value; }
-				else { elem.value = ""; }
-			}
-		};
+	/** @private */
+	_onDateShortcut(date) {
+		const dateFromField = this.shadowRoot.getElementById("pnx-filter-date-from");
+		const dateToField = this.shadowRoot.getElementById("pnx-filter-date-end");
+
+		if(dateFromField) {
+			if(dateFromField.value !== date) { dateFromField.value = date; }
+			else { dateFromField.value = ""; }
+		}
+
+		if(dateToField) { dateToField.value = ""; }
 	}
 	
 	/** @private */
@@ -290,13 +289,13 @@ export default class MapFilters extends LitElement {
 				<h4>${fa(faCalendar)} ${this._parent?._t.pnx.filter_date}</h4>
 				<div class="pnx-input-shortcuts">
 					<button
-						@click=${this._onShortcutClick("pnx-filter-date-from", new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0])}
+						@click=${() => this._onDateShortcut(new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0])}
 					>${this._parent?._t.pnx.filter_date_1month}</button>
 					<button
-						@click=${this._onShortcutClick("pnx-filter-date-from", new Date(new Date().setMonth(new Date().getMonth() - 6)).toISOString().split("T")[0])}
+						@click=${() => this._onDateShortcut(new Date(new Date().setMonth(new Date().getMonth() - 6)).toISOString().split("T")[0])}
 					>${this._parent?._t.pnx.filter_date_6months}</button>
 					<button
-						@click=${this._onShortcutClick("pnx-filter-date-from", new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0])}
+						@click=${() => this._onDateShortcut(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0])}
 					>${this._parent?._t.pnx.filter_date_1year}</button>
 				</div>
 				<div class="pnx-input-group">

package/src/components/menus/PictureMetadata.js

@@ -32,16 +32,6 @@ const missing = () => fa(faQuestion, {styles: {height: "16px"}});
 export default class PictureMetadata extends LitElement {
 	/** @private */
 	static styles = [ titles, textarea, css`
-		h4[slot="title"] {
-			margin: 0;
-			justify-content: center;
-			font-size: 0.8em;
-			line-height: 2em;
-			padding: 0.5em 0;
-		}
-		h4[slot="title"] svg.svg-inline--fa {
-			height: 14px;
-		}
 		div[slot="content"] {
 			padding: 5px 10px;
 			background-color: #ededed;

package/src/components/menus/Share.js

@@ -1,8 +1,10 @@
 import { LitElement, css, html } from "lit";
 import { fa } from "../../utils/widgets";
-import { faSvg, textarea, titles } from "../styles";
+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";
+import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
+import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
 
 /**
  * Share Menu displays links for quick picture sharing.
@@ -16,35 +18,25 @@ import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
  */
 export default class ShareMenu extends LitElement {
 	/** @private */
-	static styles = [ faSvg, textarea, titles, css`
-		.pnx-many-buttons {
+	static styles = [ faSvg, input, textarea, titles, css`
+		div[slot="content"] {
+			margin-top: 10px;
+		}
+		.links {
 			display: flex;
-			flex-direction: row;
-			width: 100%;
 			gap: 5px;
-			justify-content: space-between;
-			align-items: center;
-			flex-wrap: wrap;
-			white-space: nowrap;
-		}
-
-		.pnx-many-buttons textarea {
-			font-size: 0.8em;
-			height: 50px;
 		}
-
-		.pnx-many-buttons pnx-button,
-		.pnx-many-buttons pnx-copy-button,
-		.pnx-many-buttons pnx-link-button {
-			flex-basis: 100%;
-			flex-grow: 2;
-			flex-shrink: 2;
+		.embed {
+			display: flex;
+			gap: 5px;
+			align-items: center;
+			flex-direction: column;
 		}
 	` ];
 
 	/** @private */
 	static properties = {
-		_baseUrl: {state: true},
+		_url: {state: true},
 	};
 
 	constructor() {
@@ -63,29 +55,45 @@ export default class ShareMenu extends LitElement {
 
 	/** @private */
 	_onUrlChange() {
-		this._baseUrl = window.location.href.replace(/\/$/, "");
+		const baseUrl = window.location.href.replace(/\/$/, "");
+		this._url = this._parent?.urlHandler?.nextShortLink(baseUrl) || baseUrl;
 	}
 
 	/** @private */
 	render() {
-		const shareUrl = this._parent?.urlHandler?.nextShortLink(this._baseUrl) || this._baseUrl;
-		const iframe = `<iframe src="${shareUrl}" style="border: none; width: 500px; height: 300px"></iframe>`;
+		const iframe = `<iframe src="${this._url}" style="border: none; width: 500px; height: 300px"></iframe>`;
 
 		return html`
-			<h4>
-				${fa(faMap)} ${this._parent?._t.pnx.share_embed}
-				<pnx-link-button
-					href="https://docs.panoramax.fr/web-viewer/03_URL_settings/"
-					title="${this._parent?._t.pnx.share_embed_docs}"
-					target="_blank"
-					kind="outline">
-					${fa(faCircleInfo, {styles: {padding: "0 3px"}})}
-				</pnx-link-button>
-			</h4>
-			<div class="pnx-many-buttons">
-				<textarea readonly>${iframe}</textarea>
-				<pnx-copy-button ._t=${this._parent?._t} text=${iframe}></pnx-copy-button>
-			</div>`;
+			<h4>${fa(faShareAlt)} ${this._parent?._t.pnx.share}</h4>
+			<pnx-tabs>
+				<h4 slot="title">${fa(faLink)} ${this._parent?._t.pnx.share_page}</h4>
+				<div slot="content">
+					<div class="links">
+						<input type="text" readonly value=${this._url} style="flex: 2" />
+						<pnx-copy-button ._t=${this._parent?._t} text=${this._url}></pnx-copy-button>
+					</div>
+				</div>
+					
+				<h4 slot="title">${fa(faMap)} ${this._parent?._t.pnx.share_embed}</h4>
+				<div slot="content">
+					<div class="embed">
+						<pnx-link-button
+							href="https://docs.panoramax.fr/web-viewer/03_URL_settings/"
+							target="_blank"
+							kind="superinline"
+							size="sm"
+						>
+							${fa(faCircleInfo)} ${this._parent?._t.pnx.share_embed_docs}
+						</pnx-link-button>
+						<textarea readonly>${iframe}</textarea>
+						<pnx-copy-button
+							._t=${this._parent?._t}
+							text=${iframe}
+							style="width: 100%"
+						></pnx-copy-button>
+					</div>
+				</div>
+			</pnx-tabs>`;
 	}
 }
 

package/src/components/styles.js

@@ -303,6 +303,17 @@ export const titles = css`
 	h4 > svg.svg-inline--fa {
 		height: 18px;
 	}
+
+	h4[slot="title"] {
+		margin: 0;
+		justify-content: center;
+		font-size: 0.8em;
+		line-height: 2em;
+		padding: 0.5em 0;
+	}
+	h4[slot="title"] svg.svg-inline--fa {
+		height: 14px;
+	}
 `;
 
 // Active icon badge

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

@@ -30,14 +30,12 @@ export default class PictureLegendActions extends LitElement {
 	 */
 	static properties = {
 		full: { type: Boolean },
-		_baseUrl: {state: true},
 		_meta: { state: true },
 	};
 
 	constructor() {
 		super();
 		this.full = false;
-		this._onUrlChange();
 	}
 
 	/** @private */
@@ -45,20 +43,13 @@ export default class PictureLegendActions extends LitElement {
 		super.connectedCallback();
 
 		this._parent?.onceReady().then(() => {
-			this._onUrlChange();
 			this._meta = this._parent.psv.getPictureMetadata();
-			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
 			this._parent.psv.addEventListener("picture-loaded", () => {
 				this._meta = this._parent.psv.getPictureMetadata();
 			});
 		});
 	}
 
-	/** @private */
-	_onUrlChange() {
-		this._baseUrl = window.location.href.replace(/\/$/, "");
-	}
-
 	/** @private */
 	_onPrint() {
 		this._closeGroup();
@@ -84,8 +75,6 @@ export default class PictureLegendActions extends LitElement {
 
 	/** @private */
 	render() {
-		const shareUrl = this._parent?.urlHandler?.nextShortLink(this._baseUrl) || this._baseUrl;
-
 		return html`<pnx-togglable-group padded="false" id="pic-legend-headline-menu" ._parent=${this._parent}>
 			<pnx-button slot="button" kind="inline">${fa(faEllipsisV)}</pnx-button>
 			<pnx-list-group class="pnx-print-hidden" @click=${this._closeMenu}>
@@ -96,9 +85,6 @@ export default class PictureLegendActions extends LitElement {
 						href=${this._meta?.panorama?.hdUrl}
 						@click=${this._closeGroup}
 					>${this._parent?._t.pnx.share_image}</a>
-					<pnx-copy-button ._t=${this._parent?._t} text=${shareUrl} unstyled>
-						${this._parent?._t.pnx.share_page}
-					</pnx-copy-button>
 					${this._parent.isWidthSmall() ? nothing : html`<button @click=${this._onPrint}>
 						${this._parent?._t.pnx.share_print}
 					</button>`}

package/src/utils/InitParameters.js

@@ -90,7 +90,7 @@ export default class InitParameters { // eslint-disable-line import/no-unused-mo
 		let map_pic_score = urlParams.pic_score;
 
 		// Check coherence
-		if(!["map", "meta", "pic"].includes(focus)) {
+		if(!["map", "pic"].includes(focus)) {
 			console.warn("Invalid value for parameter focus:", focus);
 			focus = map && !picture ? "map" : "pic";
 		}
@@ -373,13 +373,6 @@ export function alterPhotoViewerState(viewer, params) {
 export function alterViewerState(viewer, params) {
 	alterPhotoViewerState(viewer, params);
 
-	// Restore selected picture
-	let pic = params.picture || params.pic;
-	if(pic && params.focus && params.focus == "meta") {
-		// TODO open expanded legend
-		//viewer.psv.addEventListener("picture-loaded", () => viewer._showPictureMetadata(), { once: true });
-	}
-
 	// Change focus
 	if(params.focus === "map" && viewer?.map) {
 		viewer.setPopup(false);

package/src/utils/URLHandler.js

@@ -73,7 +73,6 @@ export default class URLHandler extends EventTarget {
 			hashParts.map = this.currentMapString();
 			hashParts.focus = "pic";
 			if(this._parent.isMapWide()) { hashParts.focus = "map"; }
-			if(this._parent.popup.hasAttribute("visible")) { hashParts.focus = "meta"; }
 			if(this._parent.map.hasTwoBackgrounds() && this._parent.map.getBackground()) {
 				hashParts.background = this._parent.map.getBackground();
 			}
@@ -333,18 +332,11 @@ export default class URLHandler extends EventTarget {
 			const prevPic = this.currentURLParams().pic || "";
 			const nextPic = this._parent?.psv?.getPictureId?.() || "";
 
-			const prevFocus = this.currentURLParams().focus || "";
-			const nextFocus = nextUrl.search.includes("focus=meta") ? "meta" : (nextUrl.search.includes("focus=map") ? "map" : "pic");
-
 			try {
 				// If different pic, add entry in browser history
 				if(prevPic != nextPic) {
 					window.history.pushState(window.history.state, null, nextUrl.href);
 				}
-				// If metadata popup is open, come back to pic/map
-				else if(prevFocus != nextFocus && nextFocus == "meta") {
-					window.history.pushState(window.history.state, null, nextUrl.href);
-				}
 				// If same pic, just update viewer params
 				else {
 					window.history.replaceState(window.history.state, null, nextUrl.href);

package/tests/utils/InitParameters.test.js

@@ -461,14 +461,6 @@ describe("alterViewerState", () => {
 		expect(viewer.select).toHaveBeenCalledWith();
 	});
 
-	// it("should show picture metadata when focus is meta and picture is loaded", () => {
-	// 	const params = { picture: "pic1", focus: "meta" };
-	// 	alterViewerState(viewer, params);
-	// 	expect(viewer.psv.addEventListener).toHaveBeenCalledWith("picture-loaded", expect.any(Function), { once: true });
-	// 	const listener = viewer.psv.addEventListener.mock.calls[0][1];
-	// 	listener();
-	// });
-
 	it("should set focus to map when focus param is map and map exists", () => {
 		const params = { focus: "map", forceFocus: true };
 		viewer.map = {};

package/tests/utils/URLHandler.test.js

@@ -160,7 +160,7 @@ describe("nextURLString", () => {
 		};
 		const uh = new URLHandler(v);
 		uh.currentMapString = () => "18/0.5/-12";
-		expect(uh.nextURLString()).toBe("?focus=meta&map=18/0.5/-12");
+		expect(uh.nextURLString()).toBe("?focus=pic&map=18/0.5/-12");
 	});
 
 	it("works with nav", () => {