@panoramax/web-viewer 3.0.2-develop-a8ea8e60-develop-10c06f44 → 3.0.2-develop-a8ea8e60-develop-e3ac47c8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.0.2-develop-a8ea8e60-develop-10c06f44",
+  "version": "3.0.2-develop-a8ea8e60-develop-e3ac47c8",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/Viewer.js

@@ -989,6 +989,10 @@ class Viewer extends CoreView {
 	setFocus(focus, skipEvent = false) {
 		if(focus === "map" && !this.map) { throw new Error("Map is not enabled"); }
 		if(!["map", "pic"].includes(focus)) { throw new Error("Invalid focus value (should be pic or map)"); }
+		if(
+			(focus === "map" && this.map && this.isMapWide())
+			|| (focus === "pic" && (!this.map || !this.isMapWide()))
+		) { return; }
 
 		this.mapContainer.parentElement?.removeChild(this.mapContainer);
 		this.psvContainer.parentElement?.removeChild(this.psvContainer);

package/src/viewer/URLHash.js

@@ -313,15 +313,28 @@ export default class URLHash extends EventTarget {
 		}
 
 		this._delay = setTimeout(() => {
-			// Replace if already present, else append the updated hash string
-			const location = window.location.href.replace(
-				/(#.+)?$/,
-				this._viewer ? this.getHashString() : ""
-			);
+			const prevUrl = new URL(window.location.href);
+			const nextUrl = new URL(window.location.href);
+			nextUrl.hash = this._viewer ? this.getHashString() : "";
+
+			// Skip hash update if no changes
+			if(prevUrl.hash == nextUrl.hash) { return; }
+
+			const prevPic = this._getCurrentHash().pic || "";
+			const nextPic = this._viewer?.psv?.getPictureMetadata()?.id || "";
+
 			try {
-				window.history.replaceState(window.history.state, null, location);
+				// If different pic, add entry in browser history
+				if(prevPic != nextPic) {
+					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);
+				}
+				
 				if(this._viewer) {
-					const event = new CustomEvent("url-changed", { detail: {url: location}});
+					const event = new CustomEvent("url-changed", { detail: {url: nextUrl.href}});
 					this.dispatchEvent(event);
 				}
 			} catch (SecurityError) {

package/tests/viewer/URLHash.test.js

@@ -501,7 +501,7 @@ describe("_updateHash", () => {
 		delete window.location;
 
 		window.history = { replaceState: jest.fn(), state: {} };
-		window.location = { href: "http://localhost:5000/#a=b&b=c" };
+		window.location = { href: "http://localhost:5000/#a=b&b=c", hash: "#a=b&b=c" };
 
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHash(v);
@@ -515,12 +515,31 @@ describe("_updateHash", () => {
 		expect(uh.dispatchEvent.mock.calls).toMatchSnapshot();
 	});
 
+	it("works with pic change", async () => {
+		delete window.history;
+		delete window.location;
+
+		window.history = { pushState: jest.fn(), state: {} };
+		window.location = { href: "http://localhost:5000/#a=b&b=c", hash: "#a=b&pic=bla" };
+
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHash(v);
+		uh.getHashString = () => "#c=d";
+		uh.dispatchEvent = jest.fn();
+
+		uh._updateHash();
+		await new Promise((r) => setTimeout(r, 1000));
+
+		expect(window.history.pushState.mock.calls.pop()).toEqual([{}, null, "http://localhost:5000/#c=d"]);
+		expect(uh.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
 	it("deduplicates calls", async () => {
 		delete window.history;
 		delete window.location;
 
 		window.history = { replaceState: jest.fn(), state: {} };
-		window.location = { href: "http://localhost:5000/#a=b&b=c" };
+		window.location = { href: "http://localhost:5000/#a=b&b=c", hash: "#a=b&b=c" };
 
 		const v = { addEventListener: jest.fn() };
 		const uh = new URLHash(v);

package/tests/viewer/__snapshots__/URLHash.test.js.snap

@@ -10,6 +10,16 @@ Array [
 ]
 `;
 
+exports[`_updateHash works with pic change 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
 exports[`bindMapEvents works 1`] = `
 Array [
   Array [