diff options
Diffstat (limited to 'node_modules/montage/ui/composer/swipe-composer.js')
-rw-r--r-- | node_modules/montage/ui/composer/swipe-composer.js | 303 |
1 files changed, 303 insertions, 0 deletions
diff --git a/node_modules/montage/ui/composer/swipe-composer.js b/node_modules/montage/ui/composer/swipe-composer.js new file mode 100644 index 00000000..4eb9ee3b --- /dev/null +++ b/node_modules/montage/ui/composer/swipe-composer.js | |||
@@ -0,0 +1,303 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | /** | ||
7 | @module montage/ui/composer/swipe-composer | ||
8 | @requires montage | ||
9 | @requires montage/ui/composer/composer | ||
10 | */ | ||
11 | var Montage = require("montage").Montage, | ||
12 | Composer = require("ui/composer/composer").Composer; | ||
13 | /** | ||
14 | @module montage/ui/composer/swipe-composer | ||
15 | */ | ||
16 | /** | ||
17 | @class module:montage/ui/composer/swipe-composer.SwipeComposer | ||
18 | @classdesc Detects a swipe gesture. | ||
19 | @extends module:montage/ui/composer/composer.Composer | ||
20 | */ | ||
21 | exports.SwipeComposer = Montage.create(Composer, /** @lends module:montage/ui/composer/swipe-composer.SwipeComposer# */ { | ||
22 | |||
23 | /** | ||
24 | Description TODO | ||
25 | @function | ||
26 | @param {Element} | ||
27 | */ | ||
28 | load: { | ||
29 | value: function() { | ||
30 | document.addEventListener("touchstart", this, true); | ||
31 | } | ||
32 | }, | ||
33 | |||
34 | /** | ||
35 | Description TODO | ||
36 | @function | ||
37 | */ | ||
38 | unload: { | ||
39 | value: function() { | ||
40 | document.removeEventListener("touchstart", this, true); | ||
41 | } | ||
42 | }, | ||
43 | |||
44 | /** | ||
45 | TODO | ||
46 | @private | ||
47 | */ | ||
48 | _startX: { | ||
49 | enumerable: false, | ||
50 | value: 0 | ||
51 | }, | ||
52 | |||
53 | /** | ||
54 | TODO | ||
55 | @private | ||
56 | */ | ||
57 | _startY: { | ||
58 | enumerable: false, | ||
59 | value: 0 | ||
60 | }, | ||
61 | |||
62 | /** | ||
63 | TODO | ||
64 | @private | ||
65 | */ | ||
66 | _deltaX: { | ||
67 | enumerable: false, | ||
68 | value: 0 | ||
69 | }, | ||
70 | |||
71 | /** | ||
72 | TODO | ||
73 | @private | ||
74 | */ | ||
75 | _deltaY: { | ||
76 | enumerable: false, | ||
77 | value: 0 | ||
78 | }, | ||
79 | |||
80 | /** | ||
81 | TODO | ||
82 | @private | ||
83 | */ | ||
84 | _threshold: { | ||
85 | enumerable: false, | ||
86 | value: 50 | ||
87 | }, | ||
88 | |||
89 | /** | ||
90 | TODO | ||
91 | @private | ||
92 | */ | ||
93 | _thresholdSwipeAngle: { | ||
94 | enumerable: false, | ||
95 | value: 20 | ||
96 | }, | ||
97 | |||
98 | /** | ||
99 | TODO | ||
100 | @private | ||
101 | */ | ||
102 | _startTimestamp: { | ||
103 | enumerable: false, | ||
104 | value: 0 | ||
105 | }, | ||
106 | |||
107 | /** | ||
108 | TODO | ||
109 | @function | ||
110 | @param {Event} event The event. | ||
111 | */ | ||
112 | captureTouchstart: { | ||
113 | value: function(event) { | ||
114 | this._reset(); | ||
115 | var touches = event.touches, | ||
116 | touch = touches[0]; | ||
117 | this._startX = touch.clientX; | ||
118 | this._startY = touch.clientY; | ||
119 | this._startTimestamp = event.timeStamp; | ||
120 | document.addEventListener("touchmove", this, true); | ||
121 | document.addEventListener("touchend", this, true); | ||
122 | document.addEventListener("touchcancel", this, true); | ||
123 | } | ||
124 | }, | ||
125 | |||
126 | /** | ||
127 | TODO | ||
128 | @private | ||
129 | */ | ||
130 | _reset: { | ||
131 | enumerable: false, | ||
132 | value: function() { | ||
133 | this._startX = 0; | ||
134 | this._startY = 0; | ||
135 | this._deltaX = 0; | ||
136 | this._deltaY = 0; | ||
137 | this._startSwipeAngle = null; | ||
138 | } | ||
139 | }, | ||
140 | |||
141 | /** | ||
142 | TODO | ||
143 | @private | ||
144 | */ | ||
145 | _startSwipeAngle: { | ||
146 | enumerable: false, | ||
147 | value: null | ||
148 | }, | ||
149 | |||
150 | /** | ||
151 | TODO | ||
152 | @function | ||
153 | @param {Event} event The event. | ||
154 | */ | ||
155 | captureTouchcancel: { | ||
156 | value: function(event) { | ||
157 | document.removeEventListener("touchmove", this, true); | ||
158 | document.removeEventListener("touchend", this, true); | ||
159 | document.removeEventListener("touchcancel", this, true); | ||
160 | } | ||
161 | }, | ||
162 | |||
163 | /** | ||
164 | TODO | ||
165 | @function | ||
166 | @param {Event} event The event. | ||
167 | */ | ||
168 | captureTouchmove: { | ||
169 | value: function(event) { | ||
170 | event.preventDefault(); | ||
171 | var touches = event.changedTouches[0], swipeEvent, direction; | ||
172 | |||
173 | this._deltaX = touches.clientX - this._startX; | ||
174 | this._deltaY = touches.clientY - this._startY; | ||
175 | |||
176 | var dX = this._deltaX, | ||
177 | dY = this._deltaY, | ||
178 | threshold = this._threshold, | ||
179 | swipeAngle = this._findSwipeAngle(dX, dY); | ||
180 | |||
181 | if (this._startSwipeAngle != null && Math.abs(this._startSwipeAngle - swipeAngle) > this._thresholdSwipeAngle) { | ||
182 | //Direction changed; Abort touch | ||
183 | //this.captureTouchcancel(); | ||
184 | this._startSwipeAngle = null; | ||
185 | } | ||
186 | |||
187 | if (this._startSwipeAngle == null) { | ||
188 | this._startSwipeAngle = swipeAngle; | ||
189 | this._startX = touches.clientX; | ||
190 | this._startY = touches.clientY; | ||
191 | this._deltaX = 0; | ||
192 | this._deltaY = 0; | ||
193 | } | ||
194 | |||
195 | if (dX > threshold && dY > threshold) { | ||
196 | direction = "DIAGONAL"; | ||
197 | } else if (dX > threshold && dY < threshold) { | ||
198 | if (this._deltaX > 0) { | ||
199 | direction = "RIGHT"; | ||
200 | } else { | ||
201 | direction = "LEFT"; | ||
202 | } | ||
203 | } else if (dX < threshold && dY > threshold) { | ||
204 | if (this._deltaY > 0) { | ||
205 | direction = "DOWN"; | ||
206 | } else { | ||
207 | direction = "UP"; | ||
208 | } | ||
209 | } | ||
210 | |||
211 | swipeEvent = document.createEvent("CustomEvent"); | ||
212 | swipeEvent.initCustomEvent("swipemove", true, false, null); | ||
213 | swipeEvent.direction = direction; | ||
214 | swipeEvent.angle = this._startSwipeAngle; | ||
215 | swipeEvent.velocity = this._findVelocity((event.timeStamp - this._startTimestamp)); | ||
216 | swipeEvent.startX = this._startX; | ||
217 | swipeEvent.startY = this._startY; | ||
218 | swipeEvent.dX = this._deltaX; | ||
219 | swipeEvent.dY = this._deltaY; | ||
220 | |||
221 | this.dispatchEvent(swipeEvent); | ||
222 | } | ||
223 | }, | ||
224 | |||
225 | /** | ||
226 | TODO | ||
227 |