@panoramax/web-viewer 3.1.1-develop-2701b828 → 3.1.1-develop-7b28b173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.1.1-develop-2701b828",
+  "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/translations/zh_Hant.json

@@ -16,10 +16,10 @@
         "expand": "展開",
         "expand_info": "在整個畫面顯示此小工具",
         "filter_camera_model": "按相機型號",
-        "filter_date": "按日期",
-        "filter_picture": "按相片類型",
+        "filter_date": "日期",
+        "filter_picture": "相片類型",
         "filter_reset": "重設",
-        "filter_user": "按使用者",
+        "filter_user": "使用者",
         "filter_zoom_in": "拉近地圖以顯示篩選結果",
         "filters": "篩選器",
         "id": "iD",
@@ -54,7 +54,8 @@
             "🔍 正在分析 EXIF 詮釋資料",
             "🏘️ 正在算繪 3D",
             "📷 正在初始化 360° 相片",
-            "🟠 正在平衡色彩"
+            "🟠 正在平衡色彩",
+            "💯 正在計算品質分數 ©"
         ],
         "map_background": "地圖背景",
         "map_background_aerial": "衛星",
@@ -65,7 +66,7 @@
         "map_theme_age_2": "< 2 年",
         "map_theme_age_3": "< 1 年",
         "map_theme_age_4": "< 1 個月",
-        "map_theme_default": "預設",
+        "map_theme_default": "經典",
         "map_theme_type": "相機類型",
         "metadata": "相片詮釋資料",
         "metadata_camera": "相機",
@@ -125,7 +126,15 @@
         "report_email": "您的 email",
         "report_nature_label": "問題的類型",
         "report_nature": {
-            "": "選擇問題的類型…"
+            "": "選擇問題的類型…",
+            "blur_missing": "可以看見人臉或車牌",
+            "blur_excess": "不需要模糊的物件被模糊處理了",
+            "inappropriate": "不當的相片 (不相關、裸體…)",
+            "privacy": "可以看見私人的道路或資產",
+            "picture_low_quality": "相片的品質很差",
+            "mislocated": "相片在地圖上的位置不正確",
+            "copyright": "相片侵犯了版權",
+            "other": "任何其他類型的問題"
         },
         "share_embed_docs": "深入了解嵌入設定值",
         "error_retry": "請稍後再試",
@@ -135,13 +144,27 @@
         "report_whole_sequence": "這個問題影響整個序列",
         "report_details": "更多資訊",
         "report_details_placeholder": "選填，您可以詳述此問題和它造成的影響",
-        "report_wait": "正在傳送報告..."
+        "report_wait": "正在傳送報告...",
+        "report_success": "已成功發送報告，我們將儘快對它進行審核。",
+        "report_failure": "建立報告時發送錯誤: {e}，請稍後再試。",
+        "report_auth": "此報告將使用您的帳戶「{a}」發送",
+        "filter_qualityscore": "品質分數",
+        "filter_qualityscore_help": "點擊以啟用或停用",
+        "map_theme_score": "品質分數",
+        "metadata_camera_resolution": "解析度",
+        "metadata_quality": "品質分數",
+        "metadata_quality_help": "了解有關品質分數的更多資訊",
+        "metadata_quality_gps_score": "定位分數",
+        "metadata_quality_resolution_score": "解析度分數",
+        "metadata_quality_missing": "相片未包含資訊",
+        "report": "檢舉相片"
     },
     "map": {
         "loading": "正在載入…",
         "no_thumbnail": "沒有縮圖",
         "not_public": "未公開顯示",
-        "thumbnail": "遊標懸停相片的縮圖"
+        "thumbnail": "遊標懸停相片的縮圖",
+        "slow_loading": "地圖載入速度緩慢而且可能出現損壞"
     },
     "psv": {
         "ctrlZoom": "使用 CTRL + 滑鼠滾輪縮放圖片",

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();
 		});