diff options
Diffstat (limited to 'node_modules/montage/ui/button.reel')
-rw-r--r-- | node_modules/montage/ui/button.reel/button.js | 206 |
1 files changed, 30 insertions, 176 deletions
diff --git a/node_modules/montage/ui/button.reel/button.js b/node_modules/montage/ui/button.reel/button.js index 51f4c011..5da92482 100644 --- a/node_modules/montage/ui/button.reel/button.js +++ b/node_modules/montage/ui/button.reel/button.js | |||
@@ -3,11 +3,13 @@ | |||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<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. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | /*global require, exports*/ | ||
6 | var Montage = require("montage").Montage, | 7 | var Montage = require("montage").Montage, |
7 | Component = require("ui/component").Component, | 8 | Component = require("ui/component").Component, |
8 | NativeControl = require("ui/native-control").NativeControl; | 9 | NativeControl = require("ui/native-control").NativeControl, |
10 | PressComposer = require("ui/composer/press-composer").PressComposer; | ||
9 | /** | 11 | /** |
10 | * The Text input | 12 | * The Button input |
11 | */ | 13 | */ |
12 | var Button = exports.Button = Montage.create(NativeControl, { | 14 | var Button = exports.Button = Montage.create(NativeControl, { |
13 | 15 | ||
@@ -127,56 +129,25 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
127 | } | 129 | } |
128 | }, | 130 | }, |
129 | 131 | ||
130 | // Low-level event listeners | 132 | prepareForActivationEvents: { |
131 | 133 | value: function() { | |
132 | /** | 134 | var pressComposer = PressComposer.create(); |
133 | Description TODO | 135 | this.addComposer(pressComposer); |
134 | @function | 136 | pressComposer.addEventListener("pressstart", this, false); |
135 | @param {Event} event The handleMousedown event | 137 | pressComposer.addEventListener("press", this, false); |
136 | */ | 138 | pressComposer.addEventListener("presscancel", this, false); |
137 | handleMousedown: { | ||
138 | value: function(event) { | ||
139 | if (this._observedPointer !== null) { | ||
140 | return; | ||
141 | } | ||
142 | if (!this._disabled) { | ||
143 | this._startInteraction("mouse"); | ||
144 | } | ||
145 | |||
146 | event.preventDefault(); | ||
147 | |||
148 | if (!this._preventFocus) { | ||
149 | this._element.focus(); | ||
150 | } | ||
151 | } | ||
152 | }, | ||
153 | /** | ||
154 | Description TODO | ||
155 | @function | ||
156 | @param {Event} event The handleMouseup event | ||
157 | */ | ||
158 | handleMouseup: { | ||
159 | value: function(event) { | ||
160 | this._interpretInteraction(event); | ||
161 | } | 139 | } |
162 | }, | 140 | }, |
163 | 141 | ||
142 | // Handlers | ||
143 | |||
164 | /** | 144 | /** |
165 | Description TODO | 145 | Called when the user starts interacting with the component. |
166 | @function | ||
167 | @param {Event} event The handleTouchstart event | ||
168 | */ | 146 | */ |
169 | handleTouchstart: { | 147 | handlePressstart: { |
170 | value: function(event) { | 148 | value: function(event) { |
171 | if (this._observedPointer !== null) { | 149 | this.active = true; |
172 | return; | ||
173 | } | ||
174 | if (!this._disabled) { | ||
175 | this._startInteraction(event.changedTouches[0].identifier); | ||
176 | } | ||
177 | 150 | ||
178 | // NOTE preventingDefault disables the magnifying class | ||
179 | // sadly it also disables double tapping on the button to zoom... | ||
180 | event.preventDefault(); | 151 | event.preventDefault(); |
181 | 152 | ||
182 | if (!this._preventFocus) { | 153 | if (!this._preventFocus) { |
@@ -184,142 +155,38 @@ var Button = exports.Button = Montage.create(NativeControl, { | |||
184 | } | 155 | } |
185 | } | 156 | } |
186 | }, | 157 | }, |
187 | /** | ||
188 | Description TODO | ||
189 | @function | ||
190 | @param {Event} event The handleTouchend event | ||
191 | */ | ||
192 | handleTouchend: { | ||
193 | value: function(event) { | ||
194 | var i = 0, changedTouchCount = event.changedTouches.length; | ||
195 | |||
196 | for (; i < changedTouchCount; i++) { | ||
197 | if (event.changedTouches[i].identifier === this._observedPointer) { | ||
198 | this._interpretInteraction(event); | ||
199 | return; | ||
200 | } | ||
201 | } | ||
202 | 158 | ||
203 | } | ||
204 | }, | ||
205 | /** | 159 | /** |
206 | Description TODO | 160 | Called when the user has interacted with the button. |
207 | @function | ||
208 | @param {Event} event The handleTouchcancel event | ||
209 | */ | 161 | */ |
210 | handleTouchcancel: { | 162 | handlePress: { |
211 | value: function(event) { | 163 | value: function(event) { |
212 | var i = 0, changedTouchCount = event.changedTouches.length; | 164 | this.active = false; |
213 | 165 | this._dispatchActionEvent(); | |
214 | for (; i < changedTouchCount; i++) { | ||
215 | if (event.changedTouches[i].identifier === this._observedPointer) { | ||
216 | this._endInteraction(); | ||
217 | return; | ||
218 | } | ||
219 | } | ||
220 | |||
221 | } | ||
222 | }, | ||
223 | |||
224 | /** | ||
225 | If we have to surrender the pointer we are no longer active. This will | ||
226 | stop the action event being dispatched. | ||
227 | */ | ||
228 | surrenderPointer: { | ||
229 | value: function(pointer, component) { | ||
230 | if (pointer === this._observedPointer) { | ||
231 | this._endInteraction(); | ||
232 | } | ||
233 | return true; | ||
234 | } | 166 | } |
235 | }, | 167 | }, |
236 | 168 | ||
237 | // Internal state management | ||
238 | |||
239 | /** | ||
240 | Stores the pointer that pressed down the button. Needed for multitouch. | ||
241 | @private | ||
242 | */ | ||
243 | _observedPointer: { | ||
244 | enumerable: true, | ||
245 | value: null | ||
246 | }, | ||
247 | |||
248 | /** | ||
249 | Called when the user starts interacting with the component. Adds release | ||
250 | (touch and mouse) listeners. | ||
251 | @private | ||
252 | */ | ||
253 | _startInteraction: { | ||
254 | value: function(pointer) { | ||
255 | this.eventManager.claimPointer(pointer, this); | ||
256 | this._observedPointer = pointer; | ||
257 | this.active = true; | ||
258 | |||
259 | if (window.Touch) { | ||
260 | document.addEventListener("touchend", this); | ||
261 | document.addEventListener("touchcancel", this); | ||
262 | } else { | ||
263 | document.addEventListener("mouseup", this); | ||
264 | } | ||
265 | }, | ||
266 | enumerable: false | ||
267 | }, | ||
268 | |||
269 | /** | 169 | /** |
270 | Called when the user has interacted with the button. Decides whether to | 170 | Called when all interaction is over. |
271 | dispatch an action event. | ||
272 | @private | ||
273 | */ | 171 | */ |
274 | _interpretInteraction: { | 172 | handlePresscancel: { |
275 | value: function(event) { | 173 | value: function(event) { |
276 | if (!this._active) { | ||
277 | return; | ||
278 | } | ||
279 | |||
280 | var target = event.target; | ||
281 | while (target !== this.element && target && target.parentNode) { | ||
282 | target = target.parentNode; | ||
283 | } | ||
284 | |||
285 | if (this.element === target) { | ||
286 | this._dispatchActionEvent(); | ||
287 | } | ||
288 | |||
289 | this._endInteraction(); | ||
290 | }, | ||
291 | enumerable: false | ||
292 | }, | ||
293 | /** | ||
294 | Called when all interaction is over. Removes listeners. | ||
295 | @private | ||
296 | */ | ||
297 | _endInteraction: { | ||
298 | value: function() { | ||
299 | if (window.Touch) { | ||
300 | document.removeEventListener("touchend", this); | ||
301 | document.removeEventListener("touchcancel", this); | ||
302 | } else { | ||
303 | document.removeEventListener("mouseup", this); | ||
304 | } | ||
305 | |||
306 | if (this.eventManager.isPointerClaimedByComponent(this._observedPointer, this)) { | ||
307 | this.eventManager.forfeitPointer(this._observedPointer, this); |