@panoramax/web-viewer 3.2.3-develop-97f87faf → 3.2.3-develop-f4edbdd3

package/package.json

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

package/src/components/core/Viewer.js

@@ -266,7 +266,12 @@ export default class Viewer extends PhotoViewer {
 			// Select after none selected -> show pic wide
 			else {
 				this.mini.classList.remove("pnx-hidden");
-				if(isNullId(old)) { this._setFocus("pic"); }
+				if(isNullId(old)) {
+					this._setFocus("pic");
+					if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
+						this.bottomDrawer.setAttribute("openness", "half-opened");
+					}
+				}
 			}
 		}
 		
@@ -526,13 +531,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 {
@@ -95,23 +93,37 @@ export default class BottomDrawer extends LitElement {
 	/** @private */
 	firstUpdated() {
 		super.firstUpdated();
+
 		this._boundTouchMove = this._onTouchMove.bind(this);
 		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`;
+
+		this._parent?.onceReady().then(() => {
+			this._parent.map?.addEventListener("click", () => this.openness = "closed");
+			this._parent.psv?.addEventListener("click", () => this.openness = "closed");
+		});
 	}
 
 	/** @private */
 	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 +133,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 +172,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 +200,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/CopyButton.js

@@ -72,9 +72,15 @@ export default class CopyButton extends LitElement {
 		else if(this.text !== "") {
 			textToCopy = this.text;
 		}
-		navigator.clipboard.writeText(textToCopy);
-		this._active = true;
-		setTimeout(() => this._active = false, 2000);
+
+		if(!navigator?.clipboard) {
+			alert("Clipboard is not available");
+		}
+		else {
+			navigator.clipboard.writeText(textToCopy);
+			this._active = true;
+			setTimeout(() => this._active = false, 2000);
+		}
 	}
 
 	/** @private */

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/components/ui/TogglableGroup.js

@@ -98,6 +98,7 @@ export default class TogglableGroup extends LitElement {
 		menu.style.right = null;
 		menu.style.left = null;
 		menu.style.overflowY = null;
+		menu.style.marginTop = null;
 
 		// Get positions on screen
 		const btnRect = btn.getBoundingClientRect();
@@ -130,7 +131,7 @@ export default class TogglableGroup extends LitElement {
 		}
 		// Overflows width = move to left
 		else if(!fitsWidth) {
-			menu.style.top = `${btnRect.bottom+btnMenuMargin}px`;
+			menu.style.marginTop = `${btnMenuMargin}px`;
 			menu.style.right = `${window.innerWidth - btnRect.right}px`;
 		}
 	}

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",