Add option to enable/disable pinch & double-tap zoom

Closes: #687
arianne · Mar 18, 2024 · 8af5ae1 · 8af5ae1
1 parent 22fa54a
commit 8af5ae1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/app/android/client/src/main/java/org/stendhalgame/client/ClientView.java b/app/android/client/src/main/java/org/stendhalgame/client/ClientView.java
@@ -130,9 +130,9 @@ private void onInit() {
 		viewSettings.setLoadWithOverviewMode(true);
 		viewSettings.setUseWideViewPort(true);
 
-		// disable zoom
-		viewSettings.setSupportZoom(false);
-		viewSettings.setBuiltInZoomControls(false);
+		// zoom controls
+		viewSettings.setSupportZoom(true);
+		viewSettings.setBuiltInZoomControls(true);
 		viewSettings.setDisplayZoomControls(false);
 
 		// allow autoplay of music

diff --git a/srcjs/stendhal.css b/srcjs/stendhal.css
@@ -8,11 +8,6 @@
 	overflow: hidden;
 }
 
-/* disable double-tap zoom in browsers that support it */
-html {
-	touch-action: pan-x pan-y; /* manipulation does not work in Chrome */
-}
-
 /* disable pull down refresh in browsers that support it */
 html, body {
 	overscroll-behavior: none;

diff --git a/srcjs/stendhal.html b/srcjs/stendhal.html
@@ -278,6 +278,7 @@ <h3></h3>
 			<label class="checksetting"><input type="checkbox" id="chk_activityindicator">Object activity indicator</label>
 			<label class="checksetting"><input type="checkbox" id="chk_floatchat">Floating chat panel</label>
 			<label class="checksetting"><input type="checkbox" id="chk_hidechat" class="experimental">Auto-hide chat panel</label>
+			<label class="checksetting"><input type="checkbox" id="chk_zoom">Touch zoom</label>
 		</div>
 		<div id="settings_panel2" class="verticalgroup vgroupcol">
 			<label class="checksetting"><input type="checkbox" id="chk_dblclick">Double-click items</label>

diff --git a/srcjs/stendhal/ui/dialog/SettingsDialog.ts b/srcjs/stendhal/ui/dialog/SettingsDialog.ts
@@ -102,6 +102,14 @@ export class SettingsDialog extends DialogContentComponent {
 		this.createCheckBox("chk_hidechat", "chat.autohide",
 				"Chat panel will be hidden after sending text", "Chat panel will remain on-screen");
 
+		// FIXME: are there unique properties for pinch & tap zooming?
+		this.createCheckBox("chk_zoom", "zoom.touch",
+				"Touch zooming enabled (may not work with all browsers)",
+				"Touch zooming disabled (may not work with all browsers)",
+				function() {
+					stendhal.session.update();
+				});
+
 
 		/* *** center panel *** */
 

diff --git a/srcjs/stendhal/util/ConfigManager.ts b/srcjs/stendhal/util/ConfigManager.ts
@@ -80,7 +80,8 @@ export class ConfigManager {
 		"window.settings": "20,20",
 		"window.shortcuts": "20,20",
 		"window.trade": "200,100",
-		"window.travel-log": "160,50"
+		"window.travel-log": "160,50",
+		"zoom.touch": "false"
 	};
 
 	/**

diff --git a/srcjs/stendhal/util/SessionManager.ts b/srcjs/stendhal/util/SessionManager.ts
@@ -75,6 +75,8 @@ export class SessionManager {
 			}
 			this.set(key, value);
 		}
+
+		this.update();
 	}
 
 	/**
@@ -175,6 +177,19 @@ export class SessionManager {
 		return this.charname || "";
 	}
 
+	/**
+	 * Syncs inteface with updated settings.
+	 */
+	update() {
+		if (stendhal.config.getBoolean("zoom.touch")) {
+			document.documentElement.style.removeProperty("touch-action");
+		} else {
+			// disable double-tap zoom in browsers that support it
+			// NOTE: "manipulation" does not work in Chrome
+			document.documentElement.style.setProperty("touch-action", "pan-x pan-y");
+		}
+	}
+
 	/**
 	 * Detects if test client is being used based on data path.
 	 *