@panoramax/web-viewer 3.2.1 → 3.2.2-develop-69587b96

package/src/viewer/Widgets.js

@@ -533,10 +533,12 @@ export default class Widgets {
 	
 		// Picture quality level
 		if(this._viewer?.map?._hasQualityScore()) {
-			popupContent.push(createHeader(
+			const qsHeader = createHeader(
 				"h4",
-				`${fat(faMedal)} ${this._t.gvs.metadata_quality} <a href="https://docs.panoramax.fr/pictures-metadata/quality_score/" target="_blank" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</a>`
-			));
+				`${fat(faMedal)} ${this._t.gvs.metadata_quality} <button class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</button>`
+			);
+			qsHeader.lastChild.addEventListener("click", () => this._showQualityScoreDoc());
+			popupContent.push(qsHeader);
 			const gpsGrade = getGrade(QUALITYSCORE_GPS_VALUES, picMeta?.properties?.["quality:horizontal_accuracy"]);
 			const resGrade = getGrade(
 				picMeta?.horizontalFov === 360 ? QUALITYSCORE_RES_360_VALUES : QUALITYSCORE_RES_FLAT_VALUES,
@@ -567,6 +569,30 @@ export default class Widgets {
 		this._viewer.dispatchEvent(new CustomEvent("focus-changed", { detail: { focus: "meta" } }));
 	}
 
+	_showQualityScoreDoc() {
+		const popupContent = [];
+		popupContent.push(createHeader("h4", `${fat(faMedal)} ${this._t.gvs.qualityscore_title}`));
+
+		const link = document.createElement("a");
+		link.setAttribute("href", "https://docs.panoramax.fr/pictures-metadata/quality_score/");
+		link.setAttribute("target", "_blank");
+		link.appendChild(document.createTextNode(this._t.gvs.qualityscore_doc_link));
+		
+		[
+			document.createTextNode(this._t.gvs.qualityscore_doc_1),
+			document.createTextNode(this._t.gvs.qualityscore_doc_2),
+			showQualityScore(5),
+			document.createTextNode(this._t.gvs.qualityscore_doc_3),
+			link
+		].forEach(elem => {
+			const p = document.createElement("p");
+			p.appendChild(elem);
+			popupContent.push(p);
+		});
+
+		this._viewer.setPopup(true, popupContent);
+	}
+
 	_showReportForm() {
 		const picMeta = this._viewer.psv.getPictureMetadata();
 		if (!picMeta) { throw new Error("No picture currently selected"); }
@@ -705,6 +731,9 @@ export default class Widgets {
 	_initWidgetMiniActions() {
 		// Mini widget expand
 		const imgExpand = document.createElement("img");
+		imgExpand.alt = "";
+		imgExpand.height = 120;
+		imgExpand.draggable = false;
 		imgExpand.src = SwitchBig;
 		const lblExpand = document.createElement("span");
 		lblExpand.classList.add("gvs-mobile-hidden");
@@ -718,6 +747,9 @@ export default class Widgets {
 
 		// Mini widget hide
 		const imgReduce = document.createElement("img");
+		imgReduce.alt = this._t.gvs.minimize_short;
+		imgReduce.height = 120;
+		imgReduce.draggable = false;
 		imgReduce.src = SwitchMini;
 		const btnHide = createButton("gvs-mini-hide", imgReduce, this._t.gvs.minimize, ["gvs-only-mini", "gvs-print-hidden"]);
 		this._corners["mini-bottom-left"].appendChild(btnHide);
@@ -848,12 +880,12 @@ export default class Widgets {
 				<div id="gvs-map-bg" class="gvs-input-group">
 					<input type="radio" id="gvs-map-bg-streets" name="gvs-map-bg" value="streets" />
 					<label for="gvs-map-bg-streets">
-						<img id="gvs-map-bg-streets-img" />
+						<img id="gvs-map-bg-streets-img" alt="" />
 						${this._t.gvs.map_background_streets}
 					</label>
 					<input type="radio" id="gvs-map-bg-aerial" name="gvs-map-bg" value="aerial" />
 					<label for="gvs-map-bg-aerial">
-						<img id="gvs-map-bg-aerial-img" />
+						<img id="gvs-map-bg-aerial-img" alt="" />
 						${this._t.gvs.map_background_aerial}
 					</label>
 				</div>`;
@@ -905,9 +937,12 @@ export default class Widgets {
 				</div>
 				<div id="gvs-map-theme-legend-score" class="gvs-map-theme-legend gvs-hidden">
 					${QUALITYSCORE_VALUES.map(pv => "<span class=\"gvs-qualityscore\" style=\"background-color: "+pv.color+";\">"+pv.label+"</span>").join("")}
+					<button id="gvs-map-theme-quality-help" class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle, {transform: {x: 6, size: 24}})}</button>
 				</div>
 			</div>`;
 
+		pnlLayers.querySelector("#gvs-map-theme-quality-help").addEventListener("click", () => this._showQualityScoreDoc());
+
 		// Map theme events
 		const fMapTheme = pnlLayers.querySelector("#gvs-map-theme");
 		const onChange = () => {
@@ -955,7 +990,9 @@ export default class Widgets {
 	 */
 	_onMapThemeChange() {
 		const fMapTheme = document.getElementById("gvs-map-theme");
+		const layerBtn = document.getElementById("gvs-map-layers");
 		const t = fMapTheme.value;
+		layerBtn.setActive(t !== "default");
 		for(let d of document.getElementsByClassName("gvs-map-theme-legend")) {
 			if(d.id == "gvs-map-theme-legend-"+t) {
 				d.classList.remove("gvs-hidden");
@@ -972,27 +1009,31 @@ 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">
-				<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]}">${this._t.gvs.filter_date_1month}</button>
-					<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1year}</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 class="gvs-filter-block">
+					<div class="gvs-filter-zoomin">${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]}">${this._t.gvs.filter_date_1month}</button>
+						<button data-for="gvs-filter-date-from" data-value="${new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().split("T")[0]}">${this._t.gvs.filter_date_1year}</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>
 				</div>
-				<h4>${fat(faImage)} ${this._t.gvs.filter_picture}</h4>
-				<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">${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">${fat(faPanorama)} ${this._t.gvs.picture_360}</label>
+				<div class="gvs-filter-block">
+					<h4>${fat(faImage)} ${this._t.gvs.filter_picture}</h4>
+					<div class="gvs-input-group gvs-checkbox-btns" style="justify-content: center;">
+						<input type="checkbox" id="gvs-filter-type-flat" name="flat" />
+						<label for="gvs-filter-type-flat">${fat(faImage)} ${this._t.gvs.picture_flat}</label>
+						<input type="checkbox" id="gvs-filter-type-360" name="360" />
+						<label for="gvs-filter-type-360">${fat(faPanorama)} ${this._t.gvs.picture_360}</label>
+					</div>
 				</div>
 			</form>
 		`;
@@ -1004,6 +1045,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`;
@@ -1011,10 +1060,20 @@ export default class Widgets {
 
 		// Create qualityscore filter
 		if(hasQualityScore) {
+			const block = document.createElement("div");
+			block.classList.add("gvs-filter-block");
+			form.appendChild(block);
+
+			const zoomLbl = document.createElement("div");
+			zoomLbl.classList.add("gvs-filter-zoomin");
+			zoomLbl.appendChild(document.createTextNode(this._t.gvs.filter_zoom_in));
+			block.appendChild(zoomLbl);
+
 			const title = document.createElement("h4");
-			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore}`;
+			title.innerHTML = `${fat(faMedal)} ${this._t.gvs.filter_qualityscore} <button class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</button>`;
 			title.style.marginBottom = "3px";
-			form.appendChild(title);
+			title.lastChild.addEventListener("click", () => this._showQualityScoreDoc());
+			block.appendChild(title);
 
 			const div = document.createElement("div");
 			div.id = "gvs-filter-qualityscore";
@@ -1037,14 +1096,18 @@ export default class Widgets {
 				div.appendChild(label);
 			});
 
-			form.appendChild(div);
+			block.appendChild(div);
 		}
 
 		// Create search bar for users
 		if(hasUserSearch) {
+			const block = document.createElement("div");
+			block.classList.add("gvs-filter-block");
+			form.appendChild(block);
+
 			const title = document.createElement("h4");
 			title.innerHTML = `${fat(faUser)} ${this._t.gvs.filter_user}`;
-			form.appendChild(title);
+			block.appendChild(title);
 
 			// Shortcut for my own pictures
 			const userAccount = getUserAccount();
@@ -1055,7 +1118,7 @@ export default class Widgets {
 				mypics = document.createElement("button");
 				mypics.appendChild(document.createTextNode(this._t.gvs.filter_user_mypics));
 				shortcuts.appendChild(mypics);
-				form.appendChild(shortcuts);
+				block.appendChild(shortcuts);
 			}
 
 			const input = document.createElement("div");
@@ -1084,8 +1147,12 @@ export default class Widgets {
 				this,
 				true
 			);
+			block.addEventListener("reset", () => {
+				userSearch.classList.remove("gvs-filter-active");
+				userSearch.resetSearch();
+			});
 			input.appendChild(userSearch);
-			form.appendChild(input);
+			block.appendChild(input);
 
 			// Trigger "my pictures" shortcut action
 			if(userAccount) {
@@ -1250,10 +1317,12 @@ export default class Widgets {
 		});
 
 		// Show/hide zoom in warning when map zoom changes
-		const lblZoomIn = document.getElementById("gvs-filter-zoomin");
+		const lblsZoomIn = document.getElementsByClassName("gvs-filter-zoomin");
 		const changeLblZoomInDisplay = () => {
-			if(this._viewer.map.getZoom() < 7) { lblZoomIn.style.display = null; }
-			else { lblZoomIn.style.display = "none"; }
+			for(let lblZoomIn of lblsZoomIn) {
+				if(this._viewer.map.getZoom() < 7) { lblZoomIn.style.display = null; }
+				else { lblZoomIn.style.display = "none"; }
+			}
 		};
 		changeLblZoomInDisplay();
 		this._viewer.map.on("zoomend", changeLblZoomInDisplay);

package/tests/__snapshots__/Editor.test.js.snap

@@ -16,6 +16,7 @@ exports[`_addMapBackgroundWidget works 1`] = `
       for="gvs-map-bg-streets"
     >
       <img
+        alt=""
         src="bg_streets.jpg"
       />
       Streets
@@ -30,6 +31,7 @@ exports[`_addMapBackgroundWidget works 1`] = `
       for="gvs-map-bg-aerial"
     >
       <img
+        alt=""
         src="bg_aerial.jpg"
       />
       Aerial

package/tests/components/__snapshots__/Loader.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`constructor works 1`] = `"<img src=\\"marker.svg\\" title=\\"undefined\\" class=\\"gvs-loader-img\\"><div><span>Loading...</span></div>"`;
+exports[`constructor works 1`] = `"<img src=\\"marker.svg\\" alt=\\"\\" title=\\"undefined\\" class=\\"gvs-loader-img\\"><div><span>Loading...</span></div>"`;
 
 exports[`dismiss works when no error set 1`] = `
 Array [
@@ -12,4 +12,4 @@ Array [
 ]
 `;
 
-exports[`dismiss works with error set 1`] = `"<img src=\\"logo_dead.svg\\" title=\\"undefined\\" class=\\"gvs-loader-img\\" style=\\"width: 200px; animation: unset;\\"><div>undefined<br>Oops it's broken<br><small>undefined</small></div>"`;
+exports[`dismiss works with error set 1`] = `"<img src=\\"logo_dead.svg\\" alt=\\"\\" title=\\"undefined\\" class=\\"gvs-loader-img\\" style=\\"width: 200px; animation: unset;\\"><div>undefined<br>Oops it's broken<br><small>undefined</small></div>"`;

package/tests/components/__snapshots__/Photo.test.js.snap

@@ -19,6 +19,7 @@ Object {
     Object {
       "arrowStyle": Object {
         "element": <img
+          alt=""
           src="arrow_triangle.svg"
         />,
         "size": Object {
@@ -38,6 +39,7 @@ Object {
     Object {
       "arrowStyle": Object {
         "element": <img
+          alt=""
           src="arrow_triangle.svg"
         />,
         "size": Object {

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