Fix actions not working on touch devices (#4231)

This commit is contained in:
Bram Kragten 2019-11-18 11:27:44 +01:00 committed by GitHub
parent 09e7638c89
commit 6ecc60423f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -111,12 +111,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
y = (ev as MouseEvent).pageY; y = (ev as MouseEvent).pageY;
} }
if (options.hasHold) { this.timer = window.setTimeout(() => {
this.timer = window.setTimeout(() => { this.startAnimation(x, y);
this.startAnimation(x, y); this.held = true;
this.held = true; }, this.holdTime);
}, this.holdTime);
}
this.cooldownStart = true; this.cooldownStart = true;
window.setTimeout(() => (this.cooldownStart = false), 100); window.setTimeout(() => (this.cooldownStart = false), 100);
@ -166,7 +164,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
// That might be a bug, but until it's fixed, this should make action-handler work. // That might be a bug, but until it's fixed, this should make action-handler work.
// If it's not a bug that is fixed, this might need updating with the next iOS version. // If it's not a bug that is fixed, this might need updating with the next iOS version.
// Note that all events (both touch and mouse) must be listened for in order to work on computers with both mouse and touchscreen. // Note that all events (both touch and mouse) must be listened for in order to work on computers with both mouse and touchscreen.
const isIOS13 = window.navigator.userAgent.match(/iPhone OS 13_/); const isIOS13 = /iPhone OS 13_/.test(window.navigator.userAgent);
if (!isIOS13) { if (!isIOS13) {
element.addEventListener("mousedown", clickStart, { passive: true }); element.addEventListener("mousedown", clickStart, { passive: true });
element.addEventListener("click", clickEnd); element.addEventListener("click", clickEnd);
@ -193,7 +191,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
customElements.define("action-handler", ActionHandler); customElements.define("action-handler", ActionHandler);
const geActionHandler = (): ActionHandler => { const getActionHandler = (): ActionHandler => {
const body = document.body; const body = document.body;
if (body.querySelector("action-handler")) { if (body.querySelector("action-handler")) {
return body.querySelector("action-handler") as ActionHandler; return body.querySelector("action-handler") as ActionHandler;
@ -209,7 +207,7 @@ export const actionHandlerBind = (
element: ActionHandlerElement, element: ActionHandlerElement,
options: ActionHandlerOptions options: ActionHandlerOptions
) => { ) => {
const actionhandler: ActionHandler = geActionHandler(); const actionhandler: ActionHandler = getActionHandler();
if (!actionhandler) { if (!actionhandler) {
return; return;
} }