@panoramax/web-viewer 3.1.1-develop-7ba76d1c → 3.1.1-develop-baa3e20d

package/package.json

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

package/src/Viewer.js

@@ -240,6 +240,13 @@ class Viewer extends CoreView {
 					}).catch(e => console.warn("Error when looking up for user names", e));
 				}
 			}
+
+			// Dismiss popup with Escape
+			document.addEventListener("keyup", e => {
+				if(e.key === "Escape" && !this.popupContainer.classList.contains("gvs-hidden")) {
+					this.setPopup(false);
+				}
+			});
 		};
 
 		this._api.onceReady().then(() => {

package/src/translations/de.json

@@ -46,7 +46,6 @@
         "picture_flat": "Klassisch",
         "picture_360": "360°",
         "filter_camera_model": "Nach Kameramodell",
-        "filter_reset": "Filter löschen",
         "map_background": "Kartenhintergrund",
         "map_background_aerial": "Satelliten",
         "map_background_streets": "Straßen",

package/src/translations/en.json

@@ -96,11 +96,11 @@
         "filter_date_1month": "1 month",
         "filter_date_1year": "1 year",
         "filter_user": "User",
+        "filter_user_mypics": "My pictures",
         "filter_picture": "Picture type",
         "filter_zoom_in": "Zoom-in for filters to be visible",
         "picture_flat": "Classic",
         "picture_360": "360°",
-        "filter_reset": "Clear filters",
         "filter_qualityscore": "Quality score",
         "filter_qualityscore_help": "Click to enable or disable",
         "map_background": "Map background",

package/src/translations/es.json

@@ -111,7 +111,6 @@
         "picture_flat": "Clásico",
         "picture_360": "360°",
         "filter_camera_model": "Por modelo de cámara",
-        "filter_reset": "Quitar filtros",
         "map_background": "Fondo de mapa",
         "map_background_aerial": "Vista aérea",
         "map_theme": "Tema de mapa",

package/src/translations/fr.json

@@ -96,10 +96,10 @@
         "filter_date_1month": "1 mois",
         "filter_date_1year": "1 an",
         "filter_user": "Utilisateur",
+        "filter_user_mypics": "Mes photos",
         "filter_picture": "Type d'image",
         "picture_flat": "Classique",
         "picture_360": "360°",
-        "filter_reset": "Retirer les filtres",
         "filter_qualityscore": "Score de qualité",
         "filter_qualityscore_help": "Cliquez pour activer ou désactiver",
         "filter_zoom_in": "Zoomez plus pour voir les filtres",

package/src/translations/hu.json

@@ -89,7 +89,6 @@
         "picture_flat": "Klasszikus",
         "picture_360": "360°",
         "filter_camera_model": "Kameramodell szerint",
-        "filter_reset": "Szűrők törlése",
         "map_background": "Térképháttér",
         "map_background_aerial": "Légi felvétel",
         "map_background_streets": "képUtca",

package/src/translations/zh_Hant.json

@@ -18,7 +18,6 @@
         "filter_camera_model": "按相機型號",
         "filter_date": "日期",
         "filter_picture": "相片類型",
-        "filter_reset": "重設",
         "filter_user": "使用者",
         "filter_zoom_in": "拉近地圖以顯示篩選結果",
         "filters": "篩選器",

package/src/utils/Widgets.js

@@ -111,6 +111,7 @@ export function createSearchBar(
 	const input = document.createElement("input");
 	input.type = "text";
 	input.placeholder = placeholder;
+	input.id = `${id}-input`;
 	bar.appendChild(input);
 	const extendInput = () => {
 		bar.classList.remove("gvs-search-bar-reduced");
@@ -154,7 +155,7 @@ export function createSearchBar(
 	bar.resetSearch = resetSearch;
 
 	// Handle result item click
-	const goItem = (entry) => {
+	input.goItem = (entry) => {
 		if(reduced) {
 			onResultClick(entry);
 			resetSearch();
@@ -164,6 +165,7 @@ export function createSearchBar(
 			input.value = entry.title;
 			list.innerHTML = "";
 			list._toggle(false);
+			switchIcon(iconEmpty);
 			onResultClick(entry);
 		}
 	};
@@ -211,7 +213,7 @@ export function createSearchBar(
 					listEntry.classList.add("gvs-search-bar-result");
 					listEntry.innerHTML = `${entry.title}<br /><small>${entry?.subtitle || ""}</small>`;
 					list.appendChild(listEntry);
-					listEntry.addEventListener("click", () => goItem(entry));
+					listEntry.addEventListener("click", () => input.goItem(entry));
 				});
 			}).catch(e => {
 				console.error(e);

package/src/viewer/Widgets.js

@@ -1046,6 +1046,18 @@ export default class Widgets {
 			title.innerHTML = `${fat(faUser)} ${this._t.gvs.filter_user}`;
 			form.appendChild(title);
 
+			// Shortcut for my own pictures
+			const userAccount = getUserAccount();
+			let mypics;
+			if(userAccount) {
+				const shortcuts = document.createElement("div");
+				shortcuts.classList.add("gvs-input-shortcuts");
+				mypics = document.createElement("button");
+				mypics.appendChild(document.createTextNode(this._t.gvs.filter_user_mypics));
+				shortcuts.appendChild(mypics);
+				form.appendChild(shortcuts);
+			}
+
 			const input = document.createElement("div");
 			input.id = "gvs-filter-user";
 			input.classList.add("gvs-input-group");
@@ -1074,6 +1086,19 @@ export default class Widgets {
 			);
 			input.appendChild(userSearch);
 			form.appendChild(input);
+
+			// Trigger "my pictures" shortcut action
+			if(userAccount) {
+				mypics.addEventListener("click", () => {
+					const userInput = userSearch.querySelector("input");
+					if(userInput.value === userAccount.name) {
+						userSearch.resetSearch();
+					}
+					else {
+						userInput.goItem({ title: userAccount.name, data: { id: userAccount.id } });
+					}
+				});
+			}
 		}
 
 		// Shortcuts
@@ -1081,8 +1106,10 @@ export default class Widgets {
 			btn.addEventListener("click", () => {
 				const elem = document.getElementById(btn.getAttribute("data-for"));
 				const val = btn.getAttribute("data-value");
-				if(elem && elem.value !== val) { elem.value = val; }
-				else { elem.value = ""; }
+				if(elem) {
+					if(elem.value !== val) { elem.value = val; }
+					else { elem.value = ""; }
+				}
 			});
 		});
 
@@ -1205,10 +1232,23 @@ export default class Widgets {
 				fScoreD.checked = e.detail.qualityscore.includes(2) && e.detail.qualityscore.length < 5;
 				fScoreE.checked = e.detail.qualityscore.includes(1) && e.detail.qualityscore.length < 5;
 			}
-			btnFilter.setActive(Object.keys(e.detail).filter(d => d && d !== "theme").length > 0);
+			let activeFilters = (
+				Object.keys(e.detail).filter(d => d && d !== "theme").length > 0
+				|| this._viewer.map.getVisibleUsers().filter(u => u !== "geovisio").length > 0
+			);
+			btnFilter.setActive(activeFilters);
 			this._onMapThemeChange();
 		});
 
+		// Listen to user visibility changes to switch the filter active icon
+		this._viewer.addEventListener("map:users-changed", e => {
+			let activeFilters = (
+				Object.keys(this._viewer._mapFilters).filter(d => d && d !== "theme").length > 0
+				|| e.detail.usersIds.filter(u => u !== "geovisio").length > 0
+			);
+			btnFilter.setActive(activeFilters);
+		});
+
 		// Show/hide zoom in warning when map zoom changes
 		const lblZoomIn = document.getElementById("gvs-filter-zoomin");
 		const changeLblZoomInDisplay = () => {

package/tests/utils/__snapshots__/Widgets.test.js.snap

@@ -21,7 +21,7 @@ Array [
 ]
 `;
 
-exports[`createSearchBar works 1`] = `"<input type=\\"text\\" placeholder=\\"no res\\"><span class=\\"gvs-search-bar-icon\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"magnifying-glass\\" class=\\"svg-inline--fa fa-magnifying-glass\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\\"></path></svg></span><div id=\\"mysrch-panel\\" class=\\"gvs-panel gvs-widget-bg gvs-hidden gvs-search-bar-results\\"></div>"`;
+exports[`createSearchBar works 1`] = `"<input type=\\"text\\" placeholder=\\"no res\\" id=\\"mysrch-input\\"><span class=\\"gvs-search-bar-icon\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"magnifying-glass\\" class=\\"svg-inline--fa fa-magnifying-glass\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\\"></path></svg></span><div id=\\"mysrch-panel\\" class=\\"gvs-panel gvs-widget-bg gvs-hidden gvs-search-bar-results\\"></div>"`;
 
 exports[`fa works 1`] = `
 <svg