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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
/// <reference path='touchEvent.d.ts' />
class Psalm {
private _cur_psalm: number = null;
private swipe_pos_x = 0;
private swipe_pos_y = 0;
constructor() {
// Swipe event handlers
document.body.addEventListener("dblclick",
() => {
console.log("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];
console.log("touchend; end_pos = " + end_pos.screenX +
" / " + end_pos.screenY);
// 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",
() => {
console.log("touchcancel");
this.swipe_pos_x = 0;
this.swipe_pos_y = 0;
}, false);
this.display();
}
public get cur_psalm(): number {
// If this._cur_psalm has not been initialized yet, do it
if (this._cur_psalm === null) {
var stored = JSON.parse(localStorage.getItem("curPsalm"));
if (stored === null) {
this._cur_psalm = 1;
localStorage.setItem("curPsalm", JSON.stringify(this._cur_psalm));
}
else {
this._cur_psalm = stored;
}
}
return this._cur_psalm;
}
public set cur_psalm(value: number) {
// Remove 'visible' style from the currently displayed psalm, if
// there is any
this.hide();
if ((value > 0) && (value <= 150)) {
this._cur_psalm = value;
localStorage.setItem("curPsalm", JSON.stringify(this._cur_psalm));
}
// set the parameter directly to avoid call to getter.
this.display(this._cur_psalm);
}
// Methods
/**
* 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 = 50;
console.log('distX = ' + distX);
console.log('distY = ' + distY);
if (distX < -negligible) {
console.log("swipe left");
this.next_psalm();
}
else if (distX > negligible) {
console.log("swipe right");
this.prev_psalm();
}
else if (Math.abs(distY) > negligible) {
console.log("jump to today!");
this.display();
}
}
/**
* Display the current Psalm
*
* @param number Number of the psalm to be displayed (optional)
*
* Displays the particular Psalm
*/
display(new_date: number = this.cur_psalm) {
console.log("cur_psalm = " + new_date);
document.getElementById("Ps." + new_date).parentElement.
classList.add('visible');
}
/**
* Hides the current Psalm
*/
hide() {
document.getElementById("Ps." + this.cur_psalm).parentElement.
classList.remove('visible');
}
next_psalm() {
console.log("Next day!");
this.cur_psalm += 1;
}
prev_psalm() {
console.log("Previous day!");
this.cur_psalm -= 1;
}
}
var thisPsalm = new Psalm();
|
