@panoramax/web-viewer 3.2.3-develop-732b95dd → 3.2.3-develop-48da552a

package/package.json

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

package/src/components/core/Viewer.js

@@ -526,13 +526,17 @@ export default class Viewer extends PhotoViewer {
 		const mapFiltersMenu = querySelectorDeep("#pnx-map-filters-menu");
 		const fMinDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-from");
 		const fMaxDate = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-date-end");
-		const fTypeFlat = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-type-flat");
-		const fType360 = mapFiltersMenu?.shadowRoot.getElementById("pnx-filter-type-360");
+		const fTypes = mapFiltersMenu?.shadowRoot.querySelectorAll("input[name='pnx-filter-type']");
 		const fMapTheme = querySelectorDeep("#pnx-map-theme");
 
 		let type = "";
-		if(fType360?.checked && !fTypeFlat?.checked) { type = "equirectangular"; }
-		if(!fType360?.checked && fTypeFlat?.checked) { type = "flat"; }
+		for(let fTypeId = 0 ; fTypeId < fTypes.length; fTypeId++) {
+			const fType = fTypes[fTypeId];
+			if(fType.checked) {
+				type = fType.value;
+				break;
+			}
+		}
 
 		let qualityscore = [];
 		if(this.map?._hasQualityScore()) {

package/src/components/layout/BottomDrawer.js

@@ -2,7 +2,6 @@ import { LitElement, html, css } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 
 const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
-const OPENNESS_Y_PCT_RANGE = { "opened": [0, 0.4], "half-opened": [0.4, 0.8], "closed": [0.8, 1] };
 
 /**
  * BottomDrawer layout offers a mobile-like drawer menu, coming from bottom of the screen.
@@ -27,6 +26,7 @@ export default class BottomDrawer extends LitElement {
 			width: 100%;
 			z-index: 130;
 			pointer-events: none;
+			touch-action: none;
 		}
 
 		.drawer {
@@ -38,7 +38,7 @@ export default class BottomDrawer extends LitElement {
 			flex-direction: column;
 			transition: transform 0.3s ease;
 			will-change: transform;
-			touch-action: none;
+			touch-action: auto;
 			pointer-events: auto;
 		}
 
@@ -53,9 +53,7 @@ export default class BottomDrawer extends LitElement {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			cursor: grab;
-			touch-action: none;
-			pointer-events: auto;
+			cursor: pointer;
 		}
 
 		.handle-bar {
@@ -99,7 +97,7 @@ export default class BottomDrawer extends LitElement {
 		this._boundTouchEnd = this._onTouchEnd.bind(this);
 
 		this._drawerHeight = window.innerHeight - 30;
-		const drawer = this.shadowRoot?.querySelector(".drawer");
+		const drawer = this._getDrawer();
 		if (!drawer) { return; }
 		drawer.style.height = `${this._drawerHeight}px`;
 		drawer.style.maxHeight = `${this._drawerHeight}px`;
@@ -109,9 +107,16 @@ export default class BottomDrawer extends LitElement {
 	attributeChangedCallback(name, old, value) {
 		super.attributeChangedCallback(name, old, value);
 
-		if(name === "openness" && value !== "opened") {
-			const content = this.shadowRoot.querySelector(".content");
-			if(content) { content.scrollTop = 0; }
+		if(name === "openness") {
+			// If not fully opened, force content scroll back to top
+			if(value !== "opened") {
+				const content = this.shadowRoot.querySelector(".content");
+				if(content) { content.scrollTop = 0; }
+			}
+
+			// Remove hand-defined transform
+			const drawer = this._getDrawer();
+			if (drawer) { drawer.style.transform = null; }
 		}
 	}
 
@@ -121,10 +126,16 @@ export default class BottomDrawer extends LitElement {
 		this._cleanupTouchListeners();
 	}
 
+	/** @private */
+	_getDrawer() {
+		return this.shadowRoot?.querySelector(".drawer");
+	}
+
 	/** @private */
 	_onHandleClick() {
-		if(this.openness === "opened" || this.openness === "closed") { this.openness = "half-opened"; }
+		if(this.openness === "opened") { this.openness = "closed"; }
 		else if(this.openness === "half-opened") { this.openness = "opened"; }
+		else if(this.openness === "closed") { this.openness = "half-opened"; }
 	}
 
 	/** @private */
@@ -154,10 +165,19 @@ export default class BottomDrawer extends LitElement {
 	}
 
 	/** @private */
-	_onTouchEnd() {
-		if (!this._isDragging) return;
+	_onTouchEnd(e) {
+		// Touchend is also called when "clicking" on mobile
+		if ((!this._isDragging || Math.abs(this._deltaFingerY) < 30) && !e.target.closest(".handle")) { return; }
+		e.preventDefault();
+
 		this._isDragging = false;
-		this._updateDrawerTransform(this._drawerY + this._deltaFingerY, true);
+
+		if(this._deltaFingerY === 0 && this.openness === "closed") {
+			this.openness = "half-opened";
+		}
+		else {
+			this._updateDrawerTransform(this._drawerY + this._deltaFingerY, true);
+		}
 
 		this._cleanupTouchListeners();
 		this._startFingerY = null;
@@ -173,25 +193,32 @@ export default class BottomDrawer extends LitElement {
 
 	/** @private */
 	_updateDrawerTransform(y, snap = false) {
-		const drawer = this.shadowRoot?.querySelector(".drawer");
+		const drawer = this._getDrawer();
 		if (!drawer) { return; }
 
 		y = Math.max(0, Math.min(y, this._drawerHeight - 30));
 
 		// Snap to nearest static position
 		if(snap) {
-			
-			const pct = y / (this._drawerHeight - 30);
-			if(pct > OPENNESS_Y_PCT_RANGE.opened[0] && pct <= OPENNESS_Y_PCT_RANGE.opened[1]) { this.openness = "opened"; }
-			if(pct > OPENNESS_Y_PCT_RANGE["half-opened"][0] && pct <= OPENNESS_Y_PCT_RANGE["half-opened"][1]) { this.openness = "half-opened"; }
-			if(pct > OPENNESS_Y_PCT_RANGE.closed[0] && pct <= OPENNESS_Y_PCT_RANGE.closed[1]) { this.openness = "closed"; }
+			// Gesture goes up
+			if(this._deltaFingerY < 0) {
+				if(this.openness === "closed") {
+					// How much it goes up ?
+					if(Math.abs(this._deltaFingerY) > this._drawerHeight * (1-OPENNESS_Y_PCT["half-opened"])) {
+						this.openness = "opened";
+					}
+					else { this.openness = "half-opened"; }
+				}
+				else { this.openness = "opened"; }
+			}
+			// Gesture goes down
+			else { this.openness = "closed"; }
+
 			this._drawerY = null;
-			drawer.style.transform = null;
-		}
-		// Live drag
-		else {
-			drawer.style.transform = `translateY(${y}px)`;
+			y = Math.max(0, Math.min(OPENNESS_Y_PCT[this.openness] * this._drawerHeight, this._drawerHeight - 30));
 		}
+
+		drawer.style.transform = `translateY(${y}px)`;
 	}
 
 	/** @private */

package/src/components/menus/MapFilters.js

@@ -5,7 +5,6 @@ import { faSvg, titles } from "../styles";
 import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons/faCalendar";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
-import { faPanorama } from "@fortawesome/free-solid-svg-icons/faPanorama";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
@@ -90,10 +89,8 @@ export default class MapFilters extends LitElement {
 		}
 		.pnx-input-shortcuts button {
 			border: none;
-			height: 20px;
-			line-height: 20px;
-			font-size: 0.8em;
-			padding: 0 8px;
+			font-size: 0.75em;
+			padding: 2px 6px;
 			vertical-align: middle;
 			background-color: var(--grey-pale);
 			color: var(--black);
@@ -132,12 +129,12 @@ export default class MapFilters extends LitElement {
 			border-top-right-radius: 8px;
 			border-bottom-right-radius: 8px;
 		}
-		.pnx-checkbox-btns input[type="checkbox"] { display: none; }
-		.pnx-checkbox-btns input[type="checkbox"]:checked + label {
+		.pnx-checkbox-btns input[type="radio"] { display: none; }
+		.pnx-checkbox-btns input[type="radio"]:checked + label {
 			background-color: var(--widget-bg-active);
 			color: var(--widget-font-active);
 		}
-		.pnx-checkbox-btns input[type="checkbox"]:checked + label:first-of-type {
+		.pnx-checkbox-btns input[type="radio"]:checked + label:first-of-type {
 			border-right-color: white;
 		}
 
@@ -158,8 +155,7 @@ export default class MapFilters extends LitElement {
 		showZoomIn: {state: true},
 		minDate: {state: true},
 		maxDate: {state: true},
-		typeFlat: {state: true},
-		type360: {state: true},
+		type: {state: true},
 		score: {state: true},
 		user: {state: true},
 	};
@@ -217,14 +213,9 @@ export default class MapFilters extends LitElement {
 
 		this.score = e?.qualityscore?.length < 5 ? e.qualityscore.join(",") : "";
 
+		this.type = "";
 		if(e?.pic_type && e.pic_type != "") {
-			this.type360 = e.pic_type == "equirectangular";
-			this.typeFlat = e.pic_type == "flat";
-		}
-		
-		if(this.type360 === this.typeFlat) {
-			this.type360 = false;
-			this.typeFlat = false;
+			this.type = e.pic_type == "flat" ? "flat" : "equirectangular";
 		}
 	}
 
@@ -265,8 +256,7 @@ export default class MapFilters extends LitElement {
 		this.shadowRoot.querySelector("#pnx-filter-search-user")?.reset();
 		this.minDate = null;
 		this.maxDate = null;
-		this.typeFlat = null;
-		this.type360 = null;
+		this.type = "";
 		this.score = null;
 		this.user = null;
 		this._onFormChange();
@@ -302,6 +292,9 @@ export default class MapFilters extends LitElement {
 					<button
 						@click=${this._onShortcutClick("pnx-filter-date-from", 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])}
+					>${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])}
 					>${this._parent?._t.pnx.filter_date_1year}</button>
@@ -327,19 +320,29 @@ export default class MapFilters extends LitElement {
 				<h4>${fa(faImage)} ${this._parent?._t.pnx.filter_picture}</h4>
 				<div class="pnx-input-group pnx-checkbox-btns" style="justify-content: center;">
 					<input
-						type="checkbox"
+						type="radio"
+						id="pnx-filter-type-all"
+						name="pnx-filter-type"
+						value=""
+						.checked=${!this.type || this.type === ""}
+					/>
+					<label for="pnx-filter-type-all">${this._parent?._t.pnx.picture_all}</label>
+					<input
+						type="radio"
 						id="pnx-filter-type-flat"
-						name="flat"
-						.checked=${this.typeFlat}
+						name="pnx-filter-type"
+						value="flat"
+						.checked=${this.type === "flat"}
 					/>
-					<label for="pnx-filter-type-flat">${fa(faImage)} ${this._parent?._t.pnx.picture_flat}</label>
+					<label for="pnx-filter-type-flat">${this._parent?._t.pnx.picture_flat}</label>
 					<input
-						type="checkbox"
+						type="radio"
 						id="pnx-filter-type-360"
-						name="360"
-						.checked=${this.type360}
+						name="pnx-filter-type"
+						value="equirectangular"
+						.checked=${this.type === "equirectangular"}
 					/>
-					<label for="pnx-filter-type-360">${fa(faPanorama)} ${this._parent?._t.pnx.picture_360}</label>
+					<label for="pnx-filter-type-360">${this._parent?._t.pnx.picture_360}</label>
 				</div>
 			</div>
 

package/src/components/ui/MapMore.js

@@ -235,9 +235,9 @@ export default class MapMore extends Map {
 		}
 
 		if(filters.pic_type && filters.pic_type !== "") {
-			this._mapFilters.pic_type = filters.pic_type;
-			mapSeqFilters.push(["==", ["get", "type"], filters.pic_type]);
-			mapPicFilters.push(["==", ["get", "type"], filters.pic_type]);
+			this._mapFilters.pic_type = filters.pic_type === "flat" ? "flat" : "equirectangular";
+			mapSeqFilters.push(["==", ["get", "type"], this._mapFilters.pic_type]);
+			mapPicFilters.push(["==", ["get", "type"], this._mapFilters.pic_type]);
 		}
 		if(this._hasGridStats()) {
 			reloadMapStyle = true;

package/src/translations/en.json

@@ -105,11 +105,13 @@
         "error_api_compatibility": "The pictures server is not compatible with this viewer version",
         "filter_date": "Date",
         "filter_date_1month": "1 month",
+        "filter_date_6months": "6 months",
         "filter_date_1year": "1 year",
         "filter_user": "User",
         "filter_user_mypics": "My pictures",
         "filter_picture": "Picture type",
-        "filter_zoom_in": "Zoom-in to see this filter",
+        "filter_zoom_in": "Zoom-in the map to see this filter",
+        "picture_all": "All",
         "picture_flat": "Classic",
         "picture_360": "360°",
         "picture_flat_long": "Classic picture",

package/src/translations/fr.json

@@ -105,10 +105,12 @@
         "error_api_compatibility": "Le serveur de photos n'est pas compatible avec cette visionneuse",
         "filter_date": "Date",
         "filter_date_1month": "1 mois",
+        "filter_date_6months": "6 mois",
         "filter_date_1year": "1 an",
         "filter_user": "Utilisateur",
         "filter_user_mypics": "Mes photos",
         "filter_picture": "Type d'image",
+        "picture_all": "Tout",
         "picture_flat": "Classique",
         "picture_360": "360°",
         "picture_flat_long": "Photo classique",
@@ -120,7 +122,7 @@
         "qualityscore_doc_2": "Le score est affiché sous la forme d'une lettre A/B/C/D/E (A étant le meilleur, E le moins bon), et visualisable grâce à cette échelle :",
         "qualityscore_doc_3": "Il est calculé en fonction de la précision du GPS ainsi que la résolution de la photo. Un matériel professionnel aura une note de A, une caméra sportive 360° une note de B, et un smartphone une note de C à E.",
         "qualityscore_doc_link": "En savoir plus sur le Score de Qualité",
-        "filter_zoom_in": "Zoomez plus pour voir ce filtre",
+        "filter_zoom_in": "Zoomez la carte pour voir ce filtre",
         "map_background": "Fond de carte",
         "map_background_aerial": "Satellite",
         "map_background_streets": "Plan",

package/src/translations/it.json

@@ -18,7 +18,7 @@
         "search_user": "Cerca un nome utente…",
         "share": "Condividi",
         "share_links": "Collegamenti",
-        "share_page": "Collegamento a questa pagina",
+        "share_page": "Collegamento a questa immagine",
         "share_image": "Immagine HD",
         "share_embed": "Incorpora nel tuo sito web",
         "share_embed_docs": "Scopri di più sulla configurazione della incorporazione",
@@ -42,7 +42,10 @@
             "🏘️ Creazione del rendering 3D",
             "📷 Inizializzazione delle foto a 360°",
             "🟠 Bilanciamento del colore",
-            "💯 Calcolo del punteggio della qualità ©"
+            "💯 Calcolo del punteggio della qualità ©",
+            "📡 Scaricamento degli aggiornamenti",
+            "🌍 Recupero dei tasselli della mappa",
+            "📸 Elaborazione delle ombre"
         ],
         "loading_labels_fun": [
             "🦌 Rilevazione dei cartelli di attraversamento dei cervi",
@@ -62,7 +65,13 @@
             "👥 Scrittura delle persone",
             "🐟 Ricerca dei negozi di patatine fritte",
             "🧑‍💻 Debug dell’interfaccia",
-            "📈 Incremento delle statistiche"
+            "📈 Incremento delle statistiche",
+            "🤖 Apprendimento della semantica",
+            "🎨 Riprogettazione dell’interfaccia",
+            "📅 Pianificazione di eventi di photo-mapping",
+            "🧀 Affinamento dei formaggi",
+            "🌄 Calcolo della nebbia in Valpadana",
+            "🌊 Misurazione delle grandi maree"
         ],
         "error_psv": "Il visualizzatore delle foto sferiche non si sta caricando correttamente",
         "error_pic": "La foto richiesta non è stata trovata",
@@ -92,7 +101,7 @@
         "map_theme_score": "Punteggio della qualità",
         "contrast": "Abilita un maggiore contrasto della foto",
         "metadata": "Metadata della foto",
-        "metadata_general_picid": "Identificatore della foto",
+        "metadata_general_picid": "Foto",
         "metadata_general_picid_link": "Vai alla descrizione JSON della foto",
         "metadata_general_seqid_link": "Vai alla descrizione JSON della sequenza",
         "metadata_general_author": "Autore",
@@ -107,11 +116,11 @@
         "metadata_location_longitude": "Longitudine",
         "metadata_location_latitude": "Latitudine",
         "metadata_location_precision": "Precisione della posizione",
-        "metadata_quality": "Punteggio della qualità",
+        "metadata_quality": "Qualità",
         "metadata_quality_score": "Punteggio globale",
         "metadata_quality_gps_score": "Punteggio sulla posizione",
         "metadata_quality_resolution_score": "Punteggio della risoluzione",
-        "metadata_exif": "EXIF / XMP",
+        "metadata_exif": "EXIF",
         "metadata_exif_name": "Attributo",
         "report_auth": "Questa segnalazione verrà inviata usando la tua utenza “{a}”",
         "report_nature_label": "Natura del problema",
@@ -146,15 +155,15 @@
         "sequence_prev": "Foto precedente della sequenza",
         "sequence_more": "Altre opzioni di riproduzione",
         "josm_live": "Abilita la sincronizzazione automatica di JOSM al caricamento delle foto",
-        "metadata_general_seqid": "Identificatore della sequenza",
+        "metadata_general_seqid": "Sequenza",
         "metadata_camera_focal_length": "Lunghezza focale",
         "filter_user": "Utente",
-        "metadata_location_orientation": "Direzione dello scatto",
+        "metadata_location_orientation": "Direzione",
         "filter_qualityscore": "Punteggio della qualità",
         "metadata_quality_help": "Per saperne di più sul punteggio di qualità",
         "metadata_quality_missing": "Nessun valore impostato nella foto",
         "metadata_exif_value": "Valore",
-        "report": "Segnala foto",
+        "report": "Segnala",
         "report_details_placeholder": "Facoltativo, puoi aggiungere dei dettagli sul problema e sul perché lo ritieni rilevante",
         "report_success": "La segnalazione è stata inviata correttamente. Non appena possibile verrà esaminata.",
         "minimize_short": "Nascondi",
@@ -162,7 +171,17 @@
         "qualityscore_doc_1": "Panoramax propone un Punteggio della qualità per ogni foto. Ciò permette di filtrare facilmente la mappa e mostrare le foto di alta qualità disponibili.",
         "qualityscore_doc_2": "Il voto è mostrato agli utenti con un valore tipo A/B/C/D/E (A è il voto migliore, E il peggiore) e graficamente viene mostrato con la seguente scala:",
         "qualityscore_doc_link": "Nella nostra documentazione sono presenti maggiori dettagli sul calcolo del Punteggio della qualità.",
-        "qualityscore_doc_3": "Esso è calcolato basandosi sulla precisione del GPS e sulla risoluzione della foto. Un sistema professionale avrà un punteggio A, un action camera a 360° avrà un punteggio B e uno smartphone verrà classificato come C, D o E."
+        "qualityscore_doc_3": "Esso è calcolato basandosi sulla precisione del GPS e sulla risoluzione della foto. Un sistema professionale avrà un punteggio A, un action camera a 360° avrà un punteggio B e uno smartphone verrà classificato come C, D o E.",
+        "metadata_general_instance": "Istanza di origine",
+        "josm": "JOSM",
+        "picture_flat_long": "Foto classica",
+        "picture_360_long": "Foto panoramica",
+        "metadata_summary": "Sintesi",
+        "metadata_general_copy_id": "Copia l’ID",
+        "metadata_general_copy_picid": "Copia l’ID della foto",
+        "id": "iD",
+        "contribute_id": "Contribuisci a OpenStreetMap con l’editor iD",
+        "geo_uri": "App esterna"
     },
     "psv": {
         "loadError": "Impossibile caricare l’immagine panoramica",
@@ -177,6 +196,8 @@
         "loading": "Caricamento…",
         "thumbnail": "Miniatura della foto passata con il mouse",
         "not_public": "Non pubblicamente visibile",
-        "slow_loading": "La mappa impiega troppo tempo a caricarsi e potrebbe apparire a pezzi"
+        "slow_loading": "La mappa impiega troppo tempo a caricarsi e potrebbe apparire a pezzi",
+        "map_data": "Dati cartografici:",
+        "more_panoramax": "Per saperne di più su Panoramax"
     }
 }