@panoramax/web-viewer 3.2.1-develop-4458bd99 → 3.2.1-develop-0f0a36ec

package/package.json

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

package/src/Editor.js

@@ -253,6 +253,7 @@ export default class Editor extends CoreView {
 
 		const imgBgStreets = document.createElement("img");
 		imgBgStreets.src = BackgroundStreets;
+		imgBgStreets.alt = "";
 
 		labelBgStreets.appendChild(imgBgStreets);
 		labelBgStreets.appendChild(document.createTextNode(this._t.gvs.map_background_streets));
@@ -272,6 +273,7 @@ export default class Editor extends CoreView {
 
 		const imgBgAerial = document.createElement("img");
 		imgBgAerial.src = BackgroundAerial;
+		imgBgAerial.alt = "";
 
 		labelBgAerial.appendChild(imgBgAerial);
 		labelBgAerial.appendChild(document.createTextNode(this._t.gvs.map_background_aerial));

package/src/components/Loader.js

@@ -18,6 +18,7 @@ export default class Loader {
 		// Logo
 		const logo = document.createElement("img");
 		logo.src = LoaderImg;
+		logo.alt = "";
 		logo.title = this._parent._t.map.loading;
 		logo.classList.add("gvs-loader-img");
 		this.container.appendChild(logo);

package/src/components/Map.js

@@ -793,6 +793,7 @@ export default class Map extends maplibregl.Map {
 	_getPictureMarker(selected = true) {
 		const img = document.createElement("img");
 		img.src = selected ? MarkerSelectedSVG : MarkerBaseSVG;
+		img.alt = "";
 		return new maplibregl.Marker({
 			element: img
 		});

package/src/components/Photo.js

@@ -678,7 +678,7 @@ export default class Photo extends PSViewer {
 		else {
 			console.error(e);
 			this.overlay.show({
-				image: `<img style="width: 200px" src="${LogoDead}" />`,
+				image: `<img style="width: 200px" src="${LogoDead}" alt="" />`,
 				title: this._parent._t.gvs.error, 
 				text: label + "<br />" + this._parent._t.gvs.error_click,
 				dissmisable,

package/src/translations/en.json

@@ -22,6 +22,7 @@
         "show_psv": "Show the picture viewer",
         "show_map": "Show the map",
         "minimize": "Hide this widget, you can show it again using button in bottom left corner",
+        "minimize_short": "Hide",
         "options": "Options",
         "filters": "Filters",
         "layers": "Layers",
@@ -98,7 +99,7 @@
         "filter_user": "User",
         "filter_user_mypics": "My pictures",
         "filter_picture": "Picture type",
-        "filter_zoom_in": "Zoom-in for filters to be visible",
+        "filter_zoom_in": "Zoom-in to see this filter",
         "picture_flat": "Classic",
         "picture_360": "360°",
         "filter_qualityscore": "Quality score",

package/src/translations/fr.json

@@ -22,6 +22,7 @@
         "show_psv": "Afficher la visionneuse de photos",
         "show_map": "Afficher la carte",
         "minimize": "Masquer ce widget, vous pouvez l'afficher de nouveau grâce au bouton dans le coin en bas à gauche",
+        "minimize_short": "Masquer",
         "options": "Options",
         "filters": "Filtres",
         "layers": "Calques",
@@ -107,7 +108,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": "Plus d'infos sur le calcul du Score Qualité dans notre documentation.",
-        "filter_zoom_in": "Zoomez plus pour voir les filtres",
+        "filter_zoom_in": "Zoomez plus pour voir ce filtre",
         "map_background": "Fond de carte",
         "map_background_aerial": "Satellite",
         "map_background_streets": "Plan",

package/src/utils/Utils.js

@@ -117,6 +117,7 @@ function svgToPSVLink(svg, fillColor) {
 	catch(e) {
 		const img = document.createElement("img");
 		img.src = svg;
+		img.alt = "";
 		return img;
 	}
 }

package/src/viewer/Widgets.css

@@ -669,6 +669,7 @@ a.gvs-btn { text-decoration: none; }
 #gvs-filter-panel {
 	width: 350px;
 	max-width: 350px;
+	padding: 0;
 }
 #gvs-filter-panel .gvs-filter-active {
 	background-color: var(--widget-bg-active);
@@ -686,11 +687,32 @@ a.gvs-btn { text-decoration: none; }
 	color: var(--widget-font-active);
 	background: none;
 }
-#gvs-filter-zoomin {
+.gvs-filter-block {
+	position: relative;
+	padding: 10px 15px;
+	border-bottom: 2px solid var(--widget-border-div);
+}
+.gvs-filter-block:first-child {
+	padding-top: 15px;
+}
+.gvs-filter-block:last-child {
+	border-bottom: none;
+	padding-bottom: 15px;
+}
+.gvs-filter-zoomin {
+	z-index: 10;
+	background-color: rgba(255,255,255,0.8);
 	text-align: center;
 	font-weight: bold;
-	margin-bottom: 15px;
-	color: var(--orange);
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 25px;
 }
 
 #gvs-filter-qualityscore {

package/src/viewer/Widgets.js

@@ -731,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");
@@ -744,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);
@@ -874,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>`;
@@ -1007,23 +1013,27 @@ export default class Widgets {
 		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" />
-					<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 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>
 		`;
@@ -1050,11 +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} <button class="gvs-btn-link" title="${this._t.gvs.metadata_quality_help}">${fat(faInfoCircle)}</button>`;
 			title.style.marginBottom = "3px";
 			title.lastChild.addEventListener("click", () => this._showQualityScoreDoc());
-			form.appendChild(title);
+			block.appendChild(title);
 
 			const div = document.createElement("div");
 			div.id = "gvs-filter-qualityscore";
@@ -1077,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();
@@ -1095,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");
@@ -1124,12 +1147,12 @@ export default class Widgets {
 				this,
 				true
 			);
-			form.addEventListener("reset", () => {
+			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) {
@@ -1294,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 {