jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 19:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle mouse events on touchscreens. Fix #2085 (#2170)

Browse Source 
* Handle mouse events on touchscreens. Fix #2085

* Some more fixes. Makes listeners non-passive!

* Only prevent preventable events.

* Different approach

* Some travis fixes

* Try to avoid clicking while scrolling
This commit is contained in:
Thomas Lovén 2018-12-05 22:05:51 +01:00 committed by Paulus Schoutsen
parent fb180c7b9b
commit 9711068f8b
1 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/panels/lovelace/common/directives/long-press-directive.ts
View File

@ -19,6 +19,8 @@ class LongPress extends HTMLElement implements LongPress {
protected ripple: any;
protected timer: number | undefined;
protected held: boolean;
protected cooldownStart: boolean;
protected cooldownEnd: boolean;
constructor() {
super();
@ -26,6 +28,8 @@ class LongPress extends HTMLElement implements LongPress {
this.ripple = document.createElement("mwc-ripple");
this.timer = undefined;
this.held = false;
this.cooldownStart = false;
this.cooldownEnd = false;
}
public connectedCallback() {
@ -41,7 +45,8 @@ class LongPress extends HTMLElement implements LongPress {
this.ripple.primary = true;
[
isTouch ? "touchcancel" : "mouseout",
"touchcancel",
"mouseout",
"mouseup",
"touchmove",
"mousewheel",
@ -80,6 +85,9 @@ class LongPress extends HTMLElement implements LongPress {
});
const clickStart = (ev: Event) => {
if (this.cooldownStart) {
return;
}
this.held = false;
let x;
let y;
@ -94,30 +102,35 @@ class LongPress extends HTMLElement implements LongPress {
this.startAnimation(x, y);
this.held = true;
}, this.holdTime);
this.cooldownStart = true;
window.setTimeout(() => (this.cooldownStart = false), 100);
};
const clickEnd = () => {
clearTimeout(this.timer);
this.stopAnimation();
if (isTouch && this.timer === undefined) {
const clickEnd = (ev: Event) => {
if (
this.cooldownEnd ||
(ev instanceof TouchEvent && this.timer === undefined)
) {
return;
}
clearTimeout(this.timer);
this.stopAnimation();
this.timer = undefined;
if (this.held) {
element.dispatchEvent(new Event("ha-hold"));
} else {
element.dispatchEvent(new Event("ha-click"));
}
this.cooldownEnd = true;
window.setTimeout(() => (this.cooldownEnd = false), 100);
};
if (isTouch) {
element.addEventListener("touchstart", clickStart, { passive: true });
element.addEventListener("touchend", clickEnd);
element.addEventListener("touchcancel", clickEnd);
} else {
element.addEventListener("mousedown", clickStart, { passive: true });
element.addEventListener("click", clickEnd);
}
element.addEventListener("touchstart", clickStart, { passive: true });
element.addEventListener("touchend", clickEnd);
element.addEventListener("touchcancel", clickEnd);
element.addEventListener("mousedown", clickStart, { passive: true });
element.addEventListener("click", clickEnd);
}
private startAnimation(x: number, y: number) {