From ccb16cb0c2188cbf09d32ee5437b9afe01bdca15 Mon Sep 17 00:00:00 2001
From: Jordan Irwin <antumdeluge@gmail.com>
Date: Fri, 1 Mar 2024 19:11:19 -0800
Subject: [PATCH] Support secondary touch events in quick menu buttons

https://github.com/arianne/stendhal/issues/417
---
 .../stendhal/ui/quickmenu/QuickMenuButton.ts  | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/srcjs/stendhal/ui/quickmenu/QuickMenuButton.ts b/srcjs/stendhal/ui/quickmenu/QuickMenuButton.ts
index 20dc0e085bc..9ff9e7d8d35 100644
--- a/srcjs/stendhal/ui/quickmenu/QuickMenuButton.ts
+++ b/srcjs/stendhal/ui/quickmenu/QuickMenuButton.ts
@@ -9,6 +9,8 @@
  *                                                                         *
  ***************************************************************************/
 
+declare var stendhal: any;
+
 import { Component } from "../toolkit/Component";
 import { ui } from "../UI";
 import { Paths } from "../../data/Paths";
@@ -21,6 +23,10 @@ export abstract class QuickMenuButton extends Component {
 
 	/** Property to determine if button is visible/disabled. */
 	public enabled = true;
+	/** Property denoting button was pressed with mouse click. */
+	private clickEngaged = false;
+	/** Property denoting button was pressed with tap/touch. */
+	private touchEngaged = 0;
 
 
 	/**
@@ -43,8 +49,32 @@ export abstract class QuickMenuButton extends Component {
 		this.componentElement.style["cursor"] = "url(" + Paths.sprites + "/cursor/highlight.png) 1 3, auto";
 		this.componentElement.draggable = false;
 		// listen for click events
-		this.componentElement.addEventListener("click", (evt: Event) => {
-			this.onClick(evt);
+		this.componentElement.addEventListener("mousedown", (evt: MouseEvent) => {
+			evt.preventDefault();
+			if (evt.button == 0) {
+				this.clickEngaged = true;
+			}
+		});
+		this.componentElement.addEventListener("touchstart", (evt: TouchEvent) => {
+			evt.preventDefault();
+			this.touchEngaged = evt.changedTouches.length;
+		});
+		this.componentElement.addEventListener("mouseup", (evt: MouseEvent) => {
+			evt.preventDefault();
+			if (this.clickEngaged && evt.button == 0) {
+				// FIXME: should veto if moved too much before release
+				this.onClick(evt);
+			}
+			this.clickEngaged = false;
+		});
+		this.componentElement.addEventListener("touchend", (evt: TouchEvent) => {
+			evt.preventDefault();
+			const target = stendhal.ui.html.extractTarget(evt, this.touchEngaged - 1);
+			if (this.touchEngaged == evt.changedTouches.length && target == this.componentElement) {
+				// FIXME: should veto if moved too much before release
+				this.onClick(evt);
+			}
+			this.touchEngaged = 0;
 		});
 		this.update();
 	}