@panoramax/web-viewer 3.1.0-develop-537ffe27 → 3.1.0-develop-428bc81e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.1.0-develop-537ffe27",
+  "version": "3.1.0-develop-428bc81e",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/viewer/URLHash.js

@@ -57,11 +57,11 @@ export default class URLHash extends EventTarget {
 	}
 
 	/**
-	 * Get the hash string with current map/psv parameters
-	 * @return {string} The hash, starting with #
+	 * Compute next hash parts
+	 * @returns {object} Hash parameters
+	 * @private
 	 */
-	getHashString() {
-		let hash = "";
+	_getHashParts() {
 		let hashParts = {};
 
 		if(typeof this._viewer.psv.getTransitionDuration() == "number") {
@@ -103,8 +103,17 @@ export default class URLHash extends EventTarget {
 		else {
 			hashParts.map = "none";
 		}
+		return hashParts;
+	}
+
+	/**
+	 * Get the hash string with current map/psv parameters
+	 * @return {string} The hash, starting with #
+	 */
+	getHashString() {
+		let hash = "";
 
-		Object.entries(hashParts)
+		Object.entries(this._getHashParts())
 			.sort((a,b) => a[0].localeCompare(b[0]))
 			.forEach(entry => {
 				let [ hashName, value ] = entry;
@@ -144,6 +153,63 @@ export default class URLHash extends EventTarget {
 			.forEach(part => {
 				keyvals[part[0]] = part[1];
 			});
+		
+		// If hash is compressed
+		if(keyvals.s) {
+			const shortVals = Object.fromEntries(
+				keyvals.s
+					.split("|")
+					.map(kv => [kv[0], kv.substring(1)])
+			);
+
+			keyvals = {};
+
+			// Used letters: b c d e f k m n p s t u v
+			// Focus
+			if(shortVals.f === "m") { keyvals.focus = "map"; }
+			else if(shortVals.f === "p") { keyvals.focus = "pic"; }
+			else if(shortVals.f === "t") { keyvals.focus = "meta"; }
+
+			// Speed
+			if(shortVals.s !== "") { keyvals.speed = parseFloat(shortVals.s) * 100; }
+
+			// Nav
+			if(shortVals.n === "a") { keyvals.nav = "any"; }
+			else if(shortVals.n === "s") { keyvals.nav = "seq"; }
+			if(shortVals.n === "n") { keyvals.nav = "none"; }
+
+			// Pic
+			if(shortVals.p !== "") { keyvals.pic = shortVals.p; }
+
+			// XYZ
+			if(shortVals.c !== "") { keyvals.xyz = shortVals.c; }
+
+			// Map
+			if(shortVals.m !== "") { keyvals.map = shortVals.m; }
+
+			// Date
+			if(shortVals.d !== "") { keyvals.date_from = shortVals.d; }
+			if(shortVals.e !== "") { keyvals.date_to = shortVals.e; }
+
+			// Pic type
+			if(shortVals.t === "f") { keyvals.pic_type = "flat"; }
+			else if(shortVals.t === "e") { keyvals.pic_type = "equirectangular"; }
+
+			// Camera
+			if(shortVals.k !== "") { keyvals.camera = shortVals.k; }
+
+			// Theme
+			if(shortVals.v === "d") { keyvals.theme = "default"; }
+			else if(shortVals.v === "a") { keyvals.theme = "age"; }
+			else if(shortVals.v === "t") { keyvals.theme = "type"; }
+
+			// Background
+			if(shortVals.b === "s") { keyvals.background = "streets"; }
+			else if(shortVals.b === "a") { keyvals.background = "aerial"; }
+
+			// Users
+			if(shortVals.u !== "") { keyvals.users = shortVals.u; }
+		}
 
 		return keyvals;
 	}
@@ -189,7 +255,7 @@ export default class URLHash extends EventTarget {
 	 * @private
 	 */
 	_onHashChange() {
-		const vals = this._getCurrentHash();
+		let vals = this._getCurrentHash();
 
 		// Restore selected picture
 		if(vals.pic) {
@@ -245,6 +311,36 @@ export default class URLHash extends EventTarget {
 		}
 	}
 
+	/**
+	 * Get short link URL (hash replaced by Base64)
+	 * @returns {str} The short link URL
+	 */
+	getShortLink(baseUrl) {
+		const url = new URL(baseUrl);
+		const hashParts = this._getHashParts();
+		const shortVals = {
+			f: (hashParts.focus || "").substring(0, 1),
+			s: !isNaN(parseInt(hashParts.speed)) ? Math.floor(parseInt(hashParts.speed)/100) : undefined,
+			n: (hashParts.nav || "").substring(0, 1),
+			p: hashParts.pic,
+			c: hashParts.xyz,
+			m: hashParts.map,
+			d: hashParts.date_from,
+			e: hashParts.date_to,
+			t: (hashParts.pic_type || "").substring(0, 1),
+			k: hashParts.camera,
+			v: (hashParts.theme || "").substring(0, 1),
+			b: (hashParts.background || "").substring(0, 1),
+			u: hashParts.users,
+		};
+		const short = Object.entries(shortVals)
+			.filter(([,v]) => v != undefined && v != "")
+			.map(([k,v]) => `${k}${v}`)
+			.join("|");
+		url.hash = `s=${short}`;
+		return url;
+	}
+
 	/**
 	 * Extracts from hash parsed keys all map filters values
 	 * @param {*} vals Hash keys

package/src/viewer/Widgets.js

@@ -1172,7 +1172,7 @@ export default class Widgets {
 			const btnId = pnlShare.querySelector("#gvs-edit-id");
 			const btnRss = pnlShare.querySelector("#gvs-share-rss");
 
-			fUrl.setAttribute("data-copy", baseUrl);
+			fUrl.setAttribute("data-copy", this._viewer?._hash?.getShortLink(baseUrl) || baseUrl);
 			fIframe.innerText = `<iframe src="${iframeBaseUrl}" style="border: none; width: 500px; height: 300px"></iframe>`;
 
 			const meta = this._viewer.psv.getPictureMetadata();
@@ -1192,6 +1192,7 @@ export default class Widgets {
 		};
 		
 		updateLinks();
+		this._viewer.addEventListener("ready", updateLinks, { once: true });
 		this._viewer?._hash?.addEventListener("url-changed", updateLinks);
 
 		// Copy to clipboard on button click