diff options
Diffstat (limited to 'node_modules/montage/ui/composer/translate-composer.js')
-rw-r--r-- | node_modules/montage/ui/composer/translate-composer.js | 77 |
1 files changed, 58 insertions, 19 deletions
diff --git a/node_modules/montage/ui/composer/translate-composer.js b/node_modules/montage/ui/composer/translate-composer.js index 485290b4..4ce165dc 100644 --- a/node_modules/montage/ui/composer/translate-composer.js +++ b/node_modules/montage/ui/composer/translate-composer.js | |||
@@ -4,7 +4,7 @@ | |||
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 | /** | 6 | /** |
7 | @module montage/ui/composer/long-press-composer | 7 | @module montage/ui/composer/long-press-composer |
8 | @requires montage | 8 | @requires montage |
9 | @requires montage/ui/composer/composer | 9 | @requires montage/ui/composer/composer |
10 | */ | 10 | */ |
@@ -15,7 +15,19 @@ var Montage = require("montage").Montage, | |||
15 | @class module:montage/ui/composer/translate-composer.TranslateComposer | 15 | @class module:montage/ui/composer/translate-composer.TranslateComposer |
16 | @extends module:montage/ui/composer/composer.Composer | 16 | @extends module:montage/ui/composer/composer.Composer |
17 | */ | 17 | */ |
18 | exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui/event/composer/translate-composer.TranslateComposer# */ { | 18 | var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui/event/composer/translate-composer.TranslateComposer# */ { |
19 | |||
20 | /** | ||
21 | These elements perform some native action when clicked/touched and so we | ||
22 | should not preventDefault when a mousedown/touchstart happens on them. | ||
23 | @private | ||
24 | */ | ||
25 | _NATIVE_ELEMENTS: { | ||
26 | value: ["A", "IFRAME", "EMBED", "OBJECT", "VIDEO", "AUDIO", "CANVAS", | ||
27 | "LABEL", "INPUT", "BUTTON", "SELECT", "TEXTAREA", "KEYGEN", | ||
28 | "DETAILS", "COMMAND" | ||
29 | ] | ||
30 | }, | ||
19 | 31 | ||
20 | _externalUpdate: { | 32 | _externalUpdate: { |
21 | enumerable: false, | 33 | enumerable: false, |
@@ -191,6 +203,8 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
191 | } | 203 | } |
192 | }, | 204 | }, |
193 | 205 | ||
206 | invertAxis: {value: null}, | ||
207 | |||
194 | _hasMomentum: { | 208 | _hasMomentum: { |
195 | enumerable: false, | 209 | enumerable: false, |
196 | value: true | 210 | value: true |
@@ -296,16 +310,31 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
296 | value: null | 310 | value: null |
297 | }, | 311 | }, |
298 | 312 | ||
313 | /** | ||
314 | Returns if we should preventDefault on a touchstart/mousedown event. | ||
315 | @param {Event} The event | ||
316 | @returns {Boolean} Whether preventDefault should be called | ||
317 | @private | ||
318 | */ | ||
319 | _shouldPreventDefault: { | ||
320 | value: function(event) { | ||
321 | return !!event.target.tagName && TranslateComposer._NATIVE_ELEMENTS.indexOf(event.target.tagName) === -1 && !event.target.isContentEditable; | ||
322 | } | ||
323 | }, | ||
324 | |||
325 | /** | ||
326 | Description TODO | ||
327 | @function | ||
328 | @param {Event} event TODO | ||
329 | */ | ||
299 | captureMousedown: { | 330 | captureMousedown: { |
300 | enumerable: false, | 331 | enumerable: false, |
301 | value: function (event) { | 332 | value: function (event) { |
333 | if (event.button !== 0) { | ||
334 | return; | ||
335 | } | ||
302 | 336 | ||
303 | // TODO this is a bit of a temporary workaround to ensure that we allow input fields | 337 | if (this._shouldPreventDefault(event)) { |
304 | //to receive the mousedown that gives them focus and sets the cursor a the mousedown coordinates | ||
305 | if (!(event.target.tagName && | ||
306 | ("INPUT" === event.target.tagName || "SELECT" === event.target.tagName || "TEXTAREA" === event.target.tagName)) && | ||
307 | !event.target.isContentEditable) { | ||
308 | |||
309 | event.preventDefault(); | 338 | event.preventDefault(); |
310 | } | 339 | } |
311 | 340 | ||
@@ -317,11 +346,16 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
317 | } | 346 | } |
318 | }, | 347 | }, |
319 | 348 | ||
349 | /** | ||
350 | Handle the mousedown that bubbled back up from beneath the element | ||
351 | If nobody else claimed this pointer, we should handle it now | ||
352 | @function | ||
353 | @param {Event} event TODO | ||
354 | */ | ||
320 | handleMousedown: { | 355 | handleMousedown: { |
321 | enumerable: false, | 356 | enumerable: false, |
322 | value: function (event) { | 357 | value: function (event) { |
323 | 358 | if (event.button === 0 && !this.eventManager.componentClaimingPointer(this._observedPointer, this)) { | |
324 | if (!this.eventManager.componentClaimingPointer(this._observedPointer, this)) { | ||
325 | this.eventManager.claimPointer(this._observedPointer, this); | 359 | this.eventManager.claimPointer(this._observedPointer, this); |
326 | this._start(event.clientX, event.clientY, event.target); | 360 | this._start(event.clientX, event.clientY, event.target); |
327 | } | 361 | } |
@@ -371,10 +405,11 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
371 | captureTouchstart: { | 405 | captureTouchstart: { |
372 | enumerable: false, | 406 | enumerable: false, |
373 | value: function (event) { | 407 | value: function (event) { |
408 | if (this._shouldPreventDefault(event)) { | ||
409 | event.preventDefault(); | ||
410 | } | ||
374 | 411 | ||
375 | event.preventDefault(); | 412 | // If already scrolling, ignore any new touchstarts |
376 | |||
377 | // If already scrolling the scrollview, ignore any new touchstarts | ||
378 | if (this._observedPointer !== null && this.eventManager.isPointerClaimedByComponent(this._observedPointer, this)) { | 413 | if (this._observedPointer !== null && this.eventManager.isPointerClaimedByComponent(this._observedPointer, this)) { |
379 | return; | 414 | return; |
380 | } | 415 | } |
@@ -391,7 +426,9 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
391 | if (!this.eventManager.componentClaimingPointer(this._observedPointer)) { | 426 | if (!this.eventManager.componentClaimingPointer(this._observedPointer)) { |
392 | 427 | ||
393 | if (event.targetTouches.length === 1) { | 428 | if (event.targetTouches.length === 1) { |
394 | event.preventDefault(); | 429 | if (this._shouldPreventDefault(event)) { |
430 | event.preventDefault(); | ||
431 | } | ||
395 | 432 | ||
396 | this.eventManager.claimPointer(this._observedPointer, this); | 433 | this.eventManager.claimPointer(this._observedPointer, this); |
397 | this._start(event.targetTouches[0].clientX, event.targetTouches[0].clientY, event.targetTouches[0].target); | 434 | this._start(event.targetTouches[0].clientX, event.targetTouches[0].clientY, event.targetTouches[0].target); |
@@ -458,7 +495,7 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
458 | 495 | ||
459 | angle = velocity.angle; | 496 | angle = velocity.angle; |
460 | 497 | ||
461 | // The motion is with the grain of the scrollview; we may want to see if we should claim the pointer | 498 | // The motion is with the grain of the element; we may want to see if we should claim the pointer |
462 | if ("horizontal" === this.axis) { | 499 | if ("horizontal" === this.axis) { |
463 | 500 | ||
464 | isRight = (angle <= lowerRight && angle >= upperRight); | 501 | isRight = (angle <= lowerRight && angle >= upperRight); |
@@ -516,11 +553,13 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
516 | value: function (x, y) { | 553 | value: function (x, y) { |
517 | 554 | ||
518 | this._isSelfUpdate=true; | 555 | this._isSelfUpdate=true; |
556 | var delta; | ||
519 | if (this._axis!="vertical") { | 557 | if (this._axis!="vertical") { |
558 | var delta = this.invertAxis ? (x-this._pointerX) : (this._pointerX-x); | ||
520 | if ((this._translateX<0)||(this._translateX>this._maxTranslateX)) { | 559 | if ((this._translateX<0)||(this._translateX>this._maxTranslateX)) { |
521 | this.translateX+=((this._pointerX-x)/2)*this._pointerSpeedMultiplier; | 560 | this.translateX+=(delta/2)*this._pointerSpeedMultiplier; |
522 | } else { | 561 | } else { |
523 | this.translateX+=(this._pointerX-x)*this._pointerSpeedMultiplier; | 562 | this.translateX+=(delta)*this._pointerSpeedMultiplier; |
524 | } | 563 | } |
525 | } | 564 | } |
526 | if (this._axis!="horizontal") { | 565 | if (this._axis!="horizontal") { |
@@ -530,6 +569,7 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
530 | this.translateY+=(this._pointerY-y)*this._pointerSpeedMultiplier; | 569 | this.translateY+=(this._pointerY-y)*this._pointerSpeedMultiplier; |
531 | } | 570 | } |
532 | } | 571 | } |
572 | |||
533 | this._isSelfUpdate=false; | 573 | this._isSelfUpdate=false; |
534 | this._pointerX=x; | 574 | this._pointerX=x; |
535 | this._pointerY=y; | 575 | this._pointerY=y; |
@@ -573,7 +613,6 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
573 | var translateStartEvent = document.createEvent("CustomEvent"); | 613 | var translateStartEvent = document.createEvent("CustomEvent"); |
574 | 614 | ||
575 | translateStartEvent.initCustomEvent("translateStart", true, true, null); | 615 | translateStartEvent.initCustomEvent("translateStart", true, true, null); |
576 | translateStartEvent.type = "translateStart"; | ||
577 | this.dispatchEvent(translateStartEvent); | 616 | this.dispatchEvent(translateStartEvent); |
578 | } | 617 | } |
579 | }, | 618 | }, |
@@ -584,11 +623,11 @@ exports.TranslateComposer = Montage.create(Composer,/** @lends module:montage/ui | |||
584 | var translateEndEvent = document.createEvent("CustomEvent"); | 623 | var translateEndEvent = document.createEvent("CustomEvent"); |
585 | 624 | ||
586 | translateEndEvent.initCustomEvent("translateEnd", true, true, null); | 625 | translateEndEvent.initCustomEvent("translateEnd", true, true, null); |
587 | translateEndEvent.type = "translateEnd"; | ||
588 | this.dispatchEvent(translateEndEvent); | 626 | this.dispatchEvent(translateEndEvent); |
589 | } | 627 | } |
590 | }, | 628 | }, |
591 | 629 | ||
630 | |||