@panoramax/web-viewer 3.1.1-develop-9c3a5399 → 3.1.1-develop-7b28b173

package/package.json

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

package/src/Viewer.js

@@ -235,6 +235,7 @@ class Viewer extends CoreView {
 						const userSearchField = document.getElementById("gvs-filter-search-user").querySelector("input");
 						if(userSearchField) {
 							userSearchField.setItem(userNames);
+							userSearchField.parentNode.classList.add("gvs-filter-active");
 						}
 					}).catch(e => console.warn("Error when looking up for user names", e));
 				}

package/src/utils/Widgets.js

@@ -62,6 +62,19 @@ export function createExpandableButton(id, icon, label, container, classes = [])
 		btn.title = label;
 	}
 	btn.classList.add("gvs-btn", "gvs-widget-bg", "gvs-btn-expandable", ...classes);
+	btn.setActive = val => {
+		let span = btn.querySelector(".gvs-filters-active");
+		if(val && !span) {
+			span = document.createElement("span");
+			span.classList.add("gvs-filters-active");
+			const svg = btn.querySelector("svg");
+			if(svg.nextSibling) { btn.insertBefore(span, svg.nextSibling); }
+			else { btn.appendChild(span); }
+		}
+		else if(!val && span) {
+			span.remove();
+		}
+	};
 	return btn;
 }
 

package/src/viewer/Widgets.css

@@ -207,6 +207,63 @@ span.gvs-input-btn {
 	width: 100%;
 }
 
+/* Checkbox looking like buttons */
+.gvs-input-group.gvs-checkbox-btns {
+	gap: 0;
+}
+.gvs-checkbox-btns label {
+	display: inline-block;
+	padding: 2px 7px;
+	background: none;
+	border: 1px solid var(--widget-border-btn);
+	color: var(--widget-font-btn-direct);
+	cursor: pointer;
+	font-size: 16px;
+	text-decoration: none;
+	border-left-width: 0px;
+}
+.gvs-checkbox-btns label:hover {
+	background-color: var(--widget-bg-hover);
+}
+.gvs-checkbox-btns label:first-of-type {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+	border-left-width: 1px;
+}
+.gvs-checkbox-btns label:last-of-type {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+.gvs-checkbox-btns input[type="checkbox"] { display: none; }
+.gvs-checkbox-btns input[type="checkbox"]:checked + label {
+	background-color: var(--widget-bg-active);
+	color: var(--widget-font-active);
+}
+.gvs-checkbox-btns input[type="checkbox"]:checked + label:first-of-type {
+	border-right-color: white;
+}
+
+/* Input shortcuts */
+.gvs-input-shortcuts {
+	margin-top: -10px;
+	margin-bottom: 5px;
+}
+.gvs-input-shortcuts button {
+	border: none;
+	height: 20px;
+	line-height: 20px;
+	font-size: 11px;
+	padding: 0 8px;
+	vertical-align: middle;
+	background-color: var(--grey-pale);
+	color: var(--black);
+	border-radius: 10px;
+	cursor: pointer;
+}
+.gvs-input-shortcuts button:hover {
+	background-color: #d9dcd9;
+}
+
 
 /* Group */
 .gvs-group {
@@ -591,10 +648,25 @@ a.gvs-btn { text-decoration: none; }
 
 /* Filters */
 #gvs-filter { margin-bottom: 5px; }
+.gvs-filters-active {
+	width: 15px;
+	height: 15px;
+	border-radius: 8px;
+	border: 3px solid white;
+	position: absolute;
+	left: 20px;
+	top: 5px;
+	background-color: var(--orange);
+}
 #gvs-filter-panel {
 	width: 350px;
 	max-width: 350px;
 }
+#gvs-filter-panel .gvs-filter-active {
+	background-color: var(--widget-bg-active);
+	border-color: var(--widget-bg-active);
+	color: var(--widget-font-active);
+}
 #gvs-filter-panel input[type=date] {
 	min-width: 0;
 	flex-grow: 2;
@@ -602,6 +674,10 @@ a.gvs-btn { text-decoration: none; }
 	text-align: center;
 }
 #gvs-filter-camera-model, #gvs-filter-search-user { width: 100%; }
+#gvs-filter-search-user.gvs-filter-active input {
+	color: var(--widget-font-active);
+	background: none;
+}
 #gvs-filter-zoomin {
 	text-align: center;
 	font-weight: bold;

package/src/viewer/Widgets.js

@@ -978,17 +978,21 @@ export default class Widgets {
 			<form id="gvs-filter-form">
 				<div id="gvs-filter-zoomin">${fat(faTriangleExclamation)} ${this._t.gvs.filter_zoom_in}</div>
 				<h4>${fat(faCalendar)} ${this._t.gvs.filter_date}</h4>
+				<div class="gvs-input-shortcuts">
+					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().split("T")[0]}">1 mois</button>
+					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0]}">1 an</button>
+				</div>
 				<div class="gvs-input-group">
 					<input type="date" id="gvs-filter-date-from" />
 					${fat(faArrowRight)}
 					<input type="date" id="gvs-filter-date-end" />
 				</div>
 				<h4>${fat(faImage)} ${this._t.gvs.filter_picture}</h4>
-				<div class="gvs-input-group" style="justify-content: center;">
+				<div class="gvs-input-group gvs-checkbox-btns" style="justify-content: center;">
 					<input type="checkbox" id="gvs-filter-type-flat" name="flat" checked />
-					<label for="gvs-filter-type-flat" style="margin-right: 20px">${this._t.gvs.picture_flat}</label>
+					<label for="gvs-filter-type-flat">${fat(faImage)} ${this._t.gvs.picture_flat}</label>
 					<input type="checkbox" id="gvs-filter-type-360" name="360" checked />
-					<label for="gvs-filter-type-360">${this._t.gvs.picture_360}</label>
+					<label for="gvs-filter-type-360">${fat(faPanorama)} ${this._t.gvs.picture_360}</label>
 				</div>
 			</form>
 		`;
@@ -1046,17 +1050,25 @@ export default class Widgets {
 			input.id = "gvs-filter-user";
 			input.classList.add("gvs-input-group");
 
-			const userSearch = createSearchBar(
+			let userSearch;
+			userSearch = createSearchBar(
 				"gvs-filter-search-user",
 				this._t.gvs.search_user,
-				q => this._viewer._api.searchUsers(q)
-					.then(data => ((data || [])
-						.map(f => ({
-							title: f.label,
-							data: f
-						}))
-					)),
-				d => this._viewer.map.setVisibleUsers(d ? [d.data.id] : ["geovisio"]),
+				q => {
+					userSearch.classList.remove("gvs-filter-active");
+					return this._viewer._api.searchUsers(q)
+						.then(data => ((data || [])
+							.map(f => ({
+								title: f.label,
+								data: f
+							}))
+						));
+				},
+				d => {
+					if(d) { userSearch.classList.add("gvs-filter-active"); }
+					else { userSearch.classList.remove("gvs-filter-active"); }
+					return this._viewer.map.setVisibleUsers(d ? [d.data.id] : ["geovisio"]);
+				},
 				this,
 				true
 			);
@@ -1064,6 +1076,27 @@ export default class Widgets {
 			form.appendChild(input);
 		}
 
+		// Shortcuts
+		pnlFilter.querySelectorAll(".gvs-input-shortcuts button").forEach(btn => {
+			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 = ""; }
+			});
+		});
+
+		// Fields change events (for active highlighting)
+		const fMinDate = document.getElementById("gvs-filter-date-from");
+		const fMaxDate = document.getElementById("gvs-filter-date-end");
+		[fMinDate, fMaxDate].forEach(f => {
+			f.addEventListener("change", () => {
+				if(f.value) { f.classList.add("gvs-filter-active"); }
+				else { f.classList.remove("gvs-filter-active"); }
+			});
+		});
+
+		// Form update events
 		this._formDelay = null;
 
 		const onFormChange = () => {
@@ -1136,6 +1169,7 @@ export default class Widgets {
 	 * @private
 	 */
 	_listenMapFiltersChanges() {
+		const btnFilter = document.getElementById("gvs-filter");
 		const fMinDate = document.getElementById("gvs-filter-date-from");
 		const fMaxDate = document.getElementById("gvs-filter-date-end");
 		const fTypeFlat = document.getElementById("gvs-filter-type-flat");
@@ -1149,8 +1183,16 @@ export default class Widgets {
 
 		// Update widget based on programmatic filter changes
 		this._viewer.addEventListener("filters-changed", e => {
-			if(e.detail.minDate) { fMinDate.value = e.detail.minDate; }
-			if(e.detail.maxDate) { fMaxDate.value = e.detail.maxDate; }
+			if(e.detail.minDate) {
+				fMinDate.value = e.detail.minDate;
+				fMinDate.classList.add("gvs-filter-active");
+			}
+			else { fMinDate.classList.remove("gvs-filter-active"); }
+			if(e.detail.maxDate) {
+				fMaxDate.value = e.detail.maxDate;
+				fMaxDate.classList.add("gvs-filter-active");
+			}
+			else { fMaxDate.classList.remove("gvs-filter-active"); }
 			if(e.detail.theme) { fMapTheme.value = e.detail.theme; }
 			if(e.detail.type) {
 				fType360.checked = ["", "equirectangular"].includes(e.detail.type);
@@ -1163,6 +1205,7 @@ 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);
 			this._onMapThemeChange();
 		});