From b8e9f3864d1b6263249a0a110de9681d3acd0adf Mon Sep 17 00:00:00 2001 From: pythongosssss <125205205+pythongosssss@users.noreply.github.com> Date: Thu, 16 Mar 2023 13:53:03 +0000 Subject: [PATCH] Add mapping of touch -> mouse events --- touch-support/touchEvents.js | 74 ++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 touch-support/touchEvents.js diff --git a/touch-support/touchEvents.js b/touch-support/touchEvents.js new file mode 100644 index 0000000..f89ce54 --- /dev/null +++ b/touch-support/touchEvents.js @@ -0,0 +1,74 @@ +import { app } from "/scripts/app.js"; + +// Adds mapping of touch events to mouse events for mobile. This isnt great but it is somewhat usable + +app.registerExtension({ + name: "pysssss.TouchEvents", + setup() { + let touchStart = null; + let touchType = 0; + + function fireEvent(originalEvent, type) { + const fakeEvent = document.createEvent("MouseEvent"); + const touch = originalEvent.changedTouches[0]; + fakeEvent.initMouseEvent( + type, + true, + true, + window, + 1, + touch.screenX, + touch.screenY, + touch.clientX, + touch.clientY, + false, + false, + false, + false, + 0, + null + ); + + touch.target.dispatchEvent(fakeEvent); + if (fakeEvent.defaultPrevented) { + originalEvent.preventDefault(); + } + } + + document.addEventListener( + "touchstart", + (e) => { + // Support tap as click if it completes within a delay + if (touchStart) { + clearTimeout(touchStart); + } + touchStart = setTimeout(() => { + touchStart = null; + }, 100); + + // Left or right button down + touchType = e.touches.length === 1 ? 0 : 2; + + fireEvent(e, "mousedown"); + }, + true + ); + + document.addEventListener("touchmove", (e) => fireEvent(e, "mousemove"), true); + + document.addEventListener( + "touchend", + (e) => { + const isClick = touchStart; + if (isClick) { + // We are within the touch start delay so fire this as a click + clearTimeout(touchStart); + fireEvent(e, "click"); + } + fireEvent(e, "mouseup"); + touchType = 0; + }, + true + ); + }, +});