1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
class TouchHandler {
constructor() {
this.reset();
}
reset() {
this.touch = {
start: {x: -1, y: -1},
move: {x: -1, y: -1},
element: null
};
}
calculateDistance() {
if (this.touch.start.x >= -1 && this.touch.move.x >= -1) {
let horizontalDistance = Math.abs(this.touch.move.x - this.touch.start.x);
let verticalDistance = Math.abs(this.touch.move.y - this.touch.start.y);
if (horizontalDistance > 30 && verticalDistance < 70) {
return this.touch.move.x - this.touch.start.x;
}
}
return 0;
}
findElement(element) {
if (element.classList.contains("touch-item")) {
return element;
}
return DomHelper.findParent(element, "touch-item");
}
onTouchStart(event) {
if (event.touches === undefined || event.touches.length !== 1) {
return;
}
this.reset();
this.touch.start.x = event.touches[0].clientX;
this.touch.start.y = event.touches[0].clientY;
this.touch.element = this.findElement(event.touches[0].target);
}
onTouchMove(event) {
if (event.touches === undefined || event.touches.length !== 1 || this.element === null) {
return;
}
this.touch.move.x = event.touches[0].clientX;
this.touch.move.y = event.touches[0].clientY;
let distance = this.calculateDistance();
let absDistance = Math.abs(distance);
if (absDistance > 0) {
let opacity = 1 - (absDistance > 75 ? 0.9 : absDistance / 75 * 0.9);
let tx = distance > 75 ? 75 : (distance < -75 ? -75 : distance);
this.touch.element.style.opacity = opacity;
this.touch.element.style.transform = "translateX(" + tx + "px)";
event.preventDefault();
}
}
onTouchEnd(event) {
if (event.touches === undefined) {
return;
}
if (this.touch.element !== null) {
let distance = Math.abs(this.calculateDistance());
if (distance > 75) {
EntryHandler.toggleEntryStatus(this.touch.element);
}
this.touch.element.style.opacity = 1;
this.touch.element.style.transform = "none";
}
this.reset();
}
listen() {
let elements = document.querySelectorAll(".touch-item");
let hasPassiveOption = DomHelper.hasPassiveEventListenerOption();
elements.forEach((element) => {
element.addEventListener("touchstart", (e) => this.onTouchStart(e), hasPassiveOption ? { passive: true } : false);
element.addEventListener("touchmove", (e) => this.onTouchMove(e), hasPassiveOption ? { passive: false } : false);
element.addEventListener("touchend", (e) => this.onTouchEnd(e), hasPassiveOption ? { passive: true } : false);
element.addEventListener("touchcancel", () => this.reset(), hasPassiveOption ? { passive: true } : false);
});
}
}
|
