@panoramax/web-viewer 3.2.3-develop-e0ce9866 → 3.2.3-develop-00ee44cd

package/docs/03_URL_settings.md

@@ -36,7 +36,7 @@ Choose the allowed navigation between pictures, to eventually restrict what is v
 
 - `nav=any` (or no value): no restriction in navigation (default)
 - `nav=seq`: can only see pictures in same sequence
-- `nav=none`: can only see current picture, no navigation to other picture allowed
+- `nav=none/pic`: can only see current picture, no navigation to other picture allowed
 
 ## :material-image: Picture settings
 

package/docs/reference/utils/URLHandler.md

@@ -9,7 +9,7 @@
     * [.listenToChanges()](#Panoramax.utils.URLHandler+listenToChanges)
     * [.nextURLParams()](#Panoramax.utils.URLHandler+nextURLParams) ⇒ <code>object</code>
     * [.nextURLString()](#Panoramax.utils.URLHandler+nextURLString) ⇒ <code>string</code>
-    * [.currentURLParams()](#Panoramax.utils.URLHandler+currentURLParams) ⇒ <code>object</code>
+    * [.currentURLParams([readFromHash])](#Panoramax.utils.URLHandler+currentURLParams) ⇒ <code>object</code>
     * [.currentMapString()](#Panoramax.utils.URLHandler+currentMapString) ⇒ <code>string</code>
     * [.currentPSVString()](#Panoramax.utils.URLHandler+currentPSVString) ⇒ <code>string</code>
     * [.nextShortLink()](#Panoramax.utils.URLHandler+nextShortLink) ⇒ <code>str</code>
@@ -51,11 +51,16 @@ Compute next URL query string (based on `nextURLParams()`)
 **Returns**: <code>string</code> - The query string  
 <a name="Panoramax.utils.URLHandler+currentURLParams"></a>
 
-### urlHandler.currentURLParams() ⇒ <code>object</code>
+### urlHandler.currentURLParams([readFromHash]) ⇒ <code>object</code>
 Transforms current URL query string into key->value object
 
 **Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
 **Returns**: <code>object</code> - Key-value read from current URL query  
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [readFromHash] | <code>boolean</code> | <code>false</code> | Switch to reading from hash URL part (for retro-compatibility) |
+
 <a name="Panoramax.utils.URLHandler+currentMapString"></a>
 
 ### urlHandler.currentMapString() ⇒ <code>string</code>

package/docs/tutorials/migrate_v4.md

@@ -120,3 +120,11 @@ Many functions were changed as well, in order to reduce source files size and ma
 | `Viewer.toggleJOSMLive` | Made private in `(components.ui.widgets).Share` |
 | `Viewer`'s set/toggle focus/unfocused | Managed through `(components.core).Viewer` `focus` attribute and `mini` property |
 | `Viewer.setFilters` | `(components.ui).MapMore` |
+
+## 🌍 URL parameters
+
+URL parameters are now managed in the URL _search_ part (everything after the `?`), whereas in version 3 it was managed through _hash_ part (everything after the `#`). To ensure long-term compatibility, you may just replace the `#` in your URL by `?`. Here's an example of these new URL:
+
+```urlencoded
+https://panoramax.ign.fr/?background=streets&focus=map&map=9/48.6659/2.3237&speed=250
+```

package/package.json

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

package/src/components/core/Viewer.js

@@ -139,7 +139,7 @@ export default class Viewer extends Basic {
 			this.loader.setAttribute("value", 30);
 			this._initParams = new InitParameters(
 				InitParameters.GetComponentProperties(Viewer, this),
-				this.urlHandler?.currentURLParams()
+				Object.assign({}, this.urlHandler?.currentURLParams(), this.urlHandler?.currentURLParams(true))
 			);
 
 			const myInitParams = this._initParams.getParentInit();

package/src/components/ui/Photo.js

@@ -833,6 +833,7 @@ export default class Photo extends PSViewer {
 	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	setPicturesNavigation(pn) {
+		if(pn === "none") { pn = "pic"; }
 		this._picturesNavigation = pn;
 
 		/**
@@ -856,6 +857,7 @@ export default class Photo extends PSViewer {
 		case "seq":
 			return ["next", "prev"].includes(link.rel);
 		case "pic":
+		case "none":
 			return false;
 		case "any":
 		default:

package/src/utils/InitParameters.js

@@ -284,7 +284,7 @@ export function alterPSVState(psv, params) {
 	}
 
 	// Change pictures navigation mode
-	if(["pic", "any", "seq"].includes(params.picturesNavigation)) {
+	if(["none", "pic", "any", "seq"].includes(params.picturesNavigation)) {
 		psv.setPicturesNavigation(params.picturesNavigation);
 	}
 }

package/src/utils/URLHandler.js

@@ -5,7 +5,7 @@ import {
 // List of supported parameters
 const MANAGED_PARAMETERS = [
 	"speed", "nav", "focus", "pic", "xyz", "map",
-	"background", "users", "pic_score",
+	"background", "users", "pic_score", "s"
 ].concat(Object.values(MAP_FILTERS_JS2URL));
 
 // Events to listen on parent and PSV
@@ -131,19 +131,20 @@ export default class URLHandler extends EventTarget {
 
 	/**
 	 * Transforms current URL query string into key->value object
+	 * @param {boolean} [readFromHash=false] Switch to reading from hash URL part (for retro-compatibility)
 	 * @return {object} Key-value read from current URL query
 	 * @memberof Panoramax.utils.URLHandler#
 	 */
-	currentURLParams() {
+	currentURLParams(readFromHash = false) {
 		// Get the current hash from location, stripped from its number sign
-		const hash = window.location.search.replace(/^\?/, "");
+		const hash = (readFromHash ? window.location.hash : window.location.search).replace(/^[?#]/, "");
 
 		// Split the parameter-styled hash into parts and find the value we need
 		let keyvals = {};
 		hash.split("&").map(
 			part => part.split("=")
 		)
-			.filter(part => part[0] !== undefined && part[0].length > 0)
+			.filter(part => part[0] !== undefined && part[0].length > 0 && MANAGED_PARAMETERS.includes(part[0]))
 			.forEach(part => {
 				keyvals[part[0]] = part[1];
 			});
@@ -321,6 +322,9 @@ export default class URLHandler extends EventTarget {
 			const unmanaged = this.getUnmanagedParameters(prevUrl);
 			nextUrl.search = this._parent ? this.nextURLString() + (unmanaged.length > 0 ? "&"+unmanaged : ""): "";
 
+			// Clear out hash if older parameters appear
+			if(Object.keys(this.currentURLParams(true)).length > 0) { nextUrl.hash = ""; }
+
 			// Skip hash update if no changes
 			if(prevUrl.search == nextUrl.search) { return; }
 

package/tests/components/ui/Photo.test.js

@@ -362,6 +362,8 @@ describe("setPicturesNavigation", () => {
 		expect(ph.getPicturesNavigation()).toBe("seq");
 		ph.setPicturesNavigation("any");
 		expect(ph.getPicturesNavigation()).toBe("any");
+		ph.setPicturesNavigation("none");
+		expect(ph.getPicturesNavigation()).toBe("pic");
 		expect(eventWatcher.mock.calls).toMatchSnapshot();
 	});
 });

package/tests/components/ui/__snapshots__/Photo.test.js.snap

@@ -246,6 +246,11 @@ Array [
       "value": "any",
     },
   ],
+  Array [
+    Object {
+      "value": "pic",
+    },
+  ],
 ]
 `;
 

package/tests/utils/InitParameters.test.js

@@ -312,6 +312,12 @@ describe("alterPSVState", () => {
 		expect(psv.setPicturesNavigation).toHaveBeenCalledWith("pic");
 	});
 
+	it("should set pictures navigation mode when picturesNavigation=none", () => {
+		const params = { picturesNavigation: "none" };
+		alterPSVState(psv, params);
+		expect(psv.setPicturesNavigation).toHaveBeenCalledWith("none");
+	});
+
 	it("should not set pictures navigation mode when picturesNavigation param is invalid", () => {
 		const params = { picturesNavigation: "invalid" };
 		alterPSVState(psv, params);

package/tests/utils/URLHandler.test.js

@@ -171,7 +171,7 @@ describe("nextURLString", () => {
 });
 
 describe("currentURLParams", () => {
-	it("works if empty", () => {
+	it("works if empty + search", () => {
 		delete window.location;
 		window.location = { search: "" };
 		const v = { addEventListener: jest.fn() };
@@ -179,20 +179,61 @@ describe("currentURLParams", () => {
 		expect(uh.currentURLParams()).toStrictEqual({});
 	});
 
-	it("works with single param", () => {
+	it("works with single param + search", () => {
 		delete window.location;
-		window.location = { search: "?a=b" };
+		window.location = { search: "?nav=pic" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({"nav": "pic"});
+	});
+
+	it("works with multiple params + search", () => {
+		delete window.location;
+		window.location = { search: "?nav=pic&speed=42" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({"nav": "pic", "speed": "42"});
+	});
+
+	it("works if empty + hash", () => {
+		delete window.location;
+		window.location = { hash: "" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams(true)).toStrictEqual({});
+	});
+
+	it("works with single param + hash", () => {
+		delete window.location;
+		window.location = { hash: "#nav=pic" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams(true)).toStrictEqual({"nav": "pic"});
+	});
+
+	it("works with multiple params + hash", () => {
+		delete window.location;
+		window.location = { hash: "#nav=pic&speed=42" };
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHandler(v);
-		expect(uh.currentURLParams()).toStrictEqual({"a": "b"});
+		expect(uh.currentURLParams(true)).toStrictEqual({"nav": "pic", "speed": "42"});
 	});
 
-	it("works with multiple params", () => {
+	it("works with search + hash", () => {
 		delete window.location;
-		window.location = { search: "?a=b&c=d" };
+		window.location = { hash: "#nav=pic&speed=42", search: "?pic=bla" };
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHandler(v);
-		expect(uh.currentURLParams()).toStrictEqual({"a": "b", "c": "d"});
+		expect(uh.currentURLParams()).toStrictEqual({"pic": "bla"});
+		expect(uh.currentURLParams(true)).toStrictEqual({"nav": "pic", "speed": "42"});
+	});
+
+	it("skips unmanaged parameters", () => {
+		delete window.location;
+		window.location = { search: "?a=b" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({});
 	});
 });
 
@@ -295,7 +336,7 @@ describe("_onParentChange", () => {
 		delete window.location;
 
 		window.history = { replaceState: jest.fn(), state: {} };
-		window.location = { href: "http://localhost:5000/?nav=pic&speed=2", search: "?nav=pic&speed=2" };
+		window.location = { href: "http://localhost:5000/?nav=pic&speed=2", search: "?nav=pic&speed=2", hash: "" };
 
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHandler(v);
@@ -314,7 +355,7 @@ describe("_onParentChange", () => {
 		delete window.location;
 
 		window.history = { pushState: jest.fn(), state: {} };
-		window.location = { href: "http://localhost:5000/?pic=bla", search: "?pic=bla" };
+		window.location = { href: "http://localhost:5000/?pic=bla", search: "?pic=bla", hash: "" };
 
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHandler(v);
@@ -333,7 +374,7 @@ describe("_onParentChange", () => {
 		delete window.location;
 
 		window.history = { replaceState: jest.fn(), state: {} };
-		window.location = { href: "http://localhost:5000/?speed=1&nav=seq", search: "?speed=1&nav=seq" };
+		window.location = { href: "http://localhost:5000/?speed=1&nav=seq", search: "?speed=1&nav=seq", hash: "" };
 
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHandler(v);