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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
export class ActivePage {
// The idea behind this property that it could basically anything, but
// whoever inherits this class must override next(), prev(), and display() methods,
// if necessary; just in the end, its value probably corresponds to the IDs of the
// individual elements in the page.
public cur_section = 0;
private swipe_pos_x = 0;
private swipe_pos_y = 0;
constructor(appName: string) {
// Swipe event handlers
document.body.addEventListener("dblclick",
() => {
this.display();
}, false);
document.body.addEventListener("mousedown",
(evt: MouseEvent) => {
this.swipe_pos_x = evt.screenX;
this.swipe_pos_y = evt.screenY;
console.log("mousedown; pos = " + this.swipe_pos_x +
" / " + this.swipe_pos_y);
}, false);
document.body.addEventListener("mouseup",
(evt: MouseEvent) => {
console.log("mouseup; end_pos = " + evt.screenX +
" / " + evt.screenY);
this.handle_move(this.swipe_pos_x - evt.screenX,
this.swipe_pos_y - evt.screenY);
}, false);
document.body.addEventListener("touchstart",
(evt: TouchEvent) => {
this.swipe_pos_x = evt.changedTouches[0].screenX;
this.swipe_pos_y = evt.changedTouches[0].screenY;
console.log("touchstart; pos = " + this.swipe_pos_x +
" / " + this.swipe_pos_y);
}, false);
document.body.addEventListener("touchend",
(evt: TouchEvent) => {
var end_pos = evt.changedTouches[evt.changedTouches.length - 1];
// We want't opposite direction to Mouse gestures here
// so the difference should be opposite
this.handle_move(end_pos.screenX - this.swipe_pos_x,
end_pos.screenY - this.swipe_pos_y);
}, false);
document.body.addEventListener("touchcancel",
() => {
this.swipe_pos_x = 0;
this.swipe_pos_y = 0;
}, false);
// applicationCache.addEventListener("updateready",
// () => { location.reload(); }
// );
this.display();
}
/**
* Display current item
*
* @param new_date String with ISO formatted date (optional)
* or Number with the relative distance of the day from the date
* currently displayed.
*
* Displays the Losungen for the given date (or today if not defined)
*/
display() {
var visibleElems = document.getElementsByClassName("visible");
Array.prototype.forEach.call(visibleElems, function(e) {
e.classList.remove("visible");
});
}
/**
* react to the discovered distance of swipe
*
* @param distX Number distance in points in direction X
* @param distY Number distance in points in direction Y
*
* There is a preference for the horizontal swipe; if that doesn't
* happen (i.e., the distance travelled horizontally is less than
* negligible), then the vertical swipe (in either direction) means
* jump to today.
*/
handle_move(distX: number, distY: number) {
var negligible = 100;
console.log('distX = ' + distX);
console.log('distY = ' + distY);
if (distX < -negligible) {
console.log("swipe left");
this.next();
}
else if (distX > negligible) {
console.log("swipe right");
this.prev();
}
}
next() {
console.log("Next!");
this.cur_section += 1;
this.display();
}
prev() {
console.log("Previous!");
this.cur_section -= 1;
this.display();
}
}
|
