@panoramax/web-viewer 3.2.1-develop-abd38073 → 3.2.1-develop-231013c4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.1-develop-abd38073",
+  "version": "3.2.1-develop-231013c4",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/utils/Widgets.js

@@ -56,6 +56,12 @@ export function createExpandableButton(id, icon, label, container, classes = [])
 	btn.appendChild(fa(icon));
 	if(!container._viewer.isWidthSmall()) {
 		btn.appendChild(document.createTextNode(label));
+		if(classes.includes("gvs-filter-unset-btn")) {
+			const resetIcon = fa(faXmark, { classes: ["gvs-filter-unset-btn"]});
+			resetIcon.style.display = "none";
+			btn.appendChild(resetIcon);
+			classes = classes.filter(v => v !== "gvs-filter-unset-btn");
+		}
 		btn.appendChild(fa(faChevronDown));
 	}
 	else {
@@ -64,15 +70,25 @@ export function createExpandableButton(id, icon, label, container, classes = [])
 	btn.classList.add("gvs-btn", "gvs-widget-bg", "gvs-btn-expandable", ...classes);
 	btn.setActive = val => {
 		let span = btn.querySelector(".gvs-filters-active");
+		const resetIcon = btn.querySelector(".gvs-filter-unset-btn");
+		const downIcon = btn.querySelector(".fa-chevron-down");
 		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); }
+			if(resetIcon) {
+				resetIcon.style.display = null;
+				downIcon.style.display = "none";
+			}
 		}
 		else if(!val && span) {
 			span.remove();
+			if(resetIcon) {
+				resetIcon.style.display = "none";
+				downIcon.style.display = null;
+			}
 		}
 	};
 	return btn;
@@ -112,6 +128,7 @@ export function createSearchBar(
 	input.type = "text";
 	input.placeholder = placeholder;
 	input.id = `${id}-input`;
+	input.setAttribute("autocomplete", "off");
 	bar.appendChild(input);
 	const extendInput = () => {
 		bar.classList.remove("gvs-search-bar-reduced");

package/src/viewer/Widgets.js

@@ -1001,7 +1001,7 @@ export default class Widgets {
 	 * @private
 	 */
 	_initWidgetFilters(hasUserSearch, hasQualityScore) {
-		const btnFilter = createExpandableButton("gvs-filter", faSliders, this._t.gvs.filters, this);
+		const btnFilter = createExpandableButton("gvs-filter", faSliders, this._t.gvs.filters, this, ["gvs-filter-unset-btn"]);
 		const pnlFilter = createPanel(this, btnFilter, []);
 		pnlFilter.innerHTML = `
 			<form id="gvs-filter-form">
@@ -1033,6 +1033,14 @@ export default class Widgets {
 			[btnFilter, pnlFilter],
 			["gvs-group-large", "gvs-group-btnpanel", "gvs-only-map", "gvs-print-hidden"]
 		);
+		
+		const resetBtn = btnFilter.querySelector(".gvs-filter-unset-btn");
+		if(resetBtn) {
+			resetBtn.addEventListener("click", e => {
+				e.stopPropagation();
+				form.reset();
+			});
+		}
 
 		if(this._viewer.isWidthSmall()) {
 			pnlFilter.style.width = `${this._viewer.container.offsetWidth - 70}px`;
@@ -1114,6 +1122,10 @@ export default class Widgets {
 				this,
 				true
 			);
+			form.addEventListener("reset", () => {
+				userSearch.classList.remove("gvs-filter-active");
+				userSearch.resetSearch();
+			});
 			input.appendChild(userSearch);
 			form.appendChild(input);
 

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

@@ -21,7 +21,7 @@ Array [
 ]
 `;
 
-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[`createSearchBar works 1`] = `"<input type=\\"text\\" placeholder=\\"no res\\" id=\\"mysrch-input\\" autocomplete=\\"off\\"><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