diff options
Diffstat (limited to 'node_modules/montage/ui/composer/translate-composer.js')
-rw-r--r-- | node_modules/montage/ui/composer/translate-composer.js | 230 |
1 files changed, 155 insertions, 75 deletions
diff --git a/node_modules/montage/ui/composer/translate-composer.js b/node_modules/montage/ui/composer/translate-composer.js index 86e6fb09..13e01207 100644 --- a/node_modules/montage/ui/composer/translate-composer.js +++ b/node_modules/montage/ui/composer/translate-composer.js | |||
@@ -34,6 +34,11 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
34 | ] | 34 | ] |
35 | }, | 35 | }, |
36 | 36 | ||
37 | _WHEEL_POINTER: { | ||
38 | value: "wheel", | ||
39 | writable: false | ||
40 | }, | ||
41 | |||
37 | _externalUpdate: { | 42 | _externalUpdate: { |
38 | enumerable: false, | 43 | enumerable: false, |
39 | value: true | 44 | value: true |
@@ -388,6 +393,10 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
388 | value: 500 | 393 | value: 500 |
389 | }, | 394 | }, |
390 | 395 | ||
396 | startTranslateRadius: { | ||
397 | value: 8 | ||
398 | }, | ||
399 | |||
391 | _hasMomentum: { | 400 | _hasMomentum: { |
392 | enumerable: false, | 401 | enumerable: false, |
393 | value: true | 402 | value: true |
@@ -513,7 +522,7 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
513 | handleMousedown: { | 522 | handleMousedown: { |
514 | enumerable: false, | 523 | enumerable: false, |
515 | value: function(event) { | 524 | value: function(event) { |
516 | if (event.button === 0 && !this.eventManager.componentClaimingPointer(this._observedPointer, this)) { | 525 | if (event.button === 0 && !this.eventManager.componentClaimingPointer(this._observedPointer)) { |
517 | this.eventManager.claimPointer(this._observedPointer, this); | 526 | this.eventManager.claimPointer(this._observedPointer, this); |
518 | this._start(event.clientX, event.clientY, event.target); | 527 | this._start(event.clientX, event.clientY, event.target); |
519 | } | 528 | } |
@@ -529,7 +538,13 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
529 | event.preventDefault(); | 538 | event.preventDefault(); |
530 | this._move(event.clientX, event.clientY); | 539 | this._move(event.clientX, event.clientY); |
531 | } else { | 540 | } else { |
532 | this._analyzeMovement(event.velocity); | 541 | if (this.axis !== "both") { |
542 | this._analyzeMovement(event); | ||
543 | } else { | ||
544 | this._stealPointer(); | ||
545 | event.preventDefault(); | ||
546 | this._move(event.clientX, event.clientY); | ||
547 | } | ||
533 | } | 548 | } |
534 | 549 | ||
535 | } | 550 | } |
@@ -609,7 +624,7 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
609 | event.preventDefault(); | 624 | event.preventDefault(); |
610 | this._move(event.changedTouches[i].clientX, event.changedTouches[i].clientY); | 625 | this._move(event.changedTouches[i].clientX, event.changedTouches[i].clientY); |
611 | } else { | 626 | } else { |
612 | this._analyzeMovement(event.changedTouches[i].velocity); | 627 | this._analyzeMovement(event.changedTouches[i]); |
613 | } | 628 | } |
614 | 629 | ||
615 | } | 630 | } |
@@ -630,7 +645,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
630 | }, | 645 | }, |
631 | 646 | ||
632 | _analyzeMovement: { | 647 | _analyzeMovement: { |
633 | value: function(velocity) { | 648 | value: function(event) { |
649 | var velocity = event.velocity; | ||
634 | 650 | ||
635 | if (!velocity) { | 651 | if (!velocity) { |
636 | return; | 652 | return; |
@@ -642,7 +658,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
642 | upperRight = -0.7853981633974483, // 7pi/4 | 658 | upperRight = -0.7853981633974483, // 7pi/4 |
643 | isUp, isDown, isRight, isLeft, | 659 | isUp, isDown, isRight, isLeft, |
644 | angle, | 660 | angle, |
645 | speed; | 661 | speed, |
662 | dX, dY; | ||
646 | 663 | ||
647 | speed = velocity.speed; | 664 | speed = velocity.speed; |
648 | 665 | ||
@@ -674,6 +691,12 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
674 | 691 | ||
675 | } else if (speed >= this.startTranslateSpeed) { | 692 | } else if (speed >= this.startTranslateSpeed) { |
676 | this._stealPointer(); | 693 | this._stealPointer(); |
694 | } else { | ||
695 | dX = this.pointerStartEventPosition.pageX - event.pageX; | ||
696 | dY = this.pointerStartEventPosition.pageY - event.pageY; | ||
697 | if (dX * dX + dY * dY > this.startTranslateRadius * this.startTranslateRadius) { | ||
698 | this._stealPointer(); | ||
699 | } | ||
677 | } | 700 | } |
678 | 701 | ||
679 | } | 702 | } |
@@ -690,25 +713,37 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
690 | value: null | 713 | value: null |
691 | }, | 714 | }, |
692 | 715 | ||
716 | captureMousewheel: { | ||
717 | value: function(event) { | ||
718 | if (!this.eventManager.componentClaimingPointer(this._WHEEL_POINTER)) { | ||
719 | this.eventManager.claimPointer(this._WHEEL_POINTER, this.component); | ||
720 | } | ||
721 | } | ||
722 | }, | ||
723 | |||
693 | handleMousewheel: { | 724 | handleMousewheel: { |
694 | enumerable: false, | 725 | enumerable: false, |
695 | value: function(event) { | 726 | value: function(event) { |
696 | var self = this; | 727 | var self = this; |
697 | 728 | ||
698 | var oldTranslateY = this._translateY; | 729 | // If this composers' component is claiming the "wheel" pointer then handle the event |
699 | this._dispatchTranslateStart(); | 730 | if (this.eventManager.isPointerClaimedByComponent(this._WHEEL_POINTER, this.component)) { |
700 | this.translateY = this._translateY - ((event.wheelDeltaY * 20) / 120); | 731 | var oldTranslateY = this._translateY; |
701 | this._dispatchTranslate(); | 732 | this._dispatchTranslateStart(); |
702 | window.clearTimeout(this._translateEndTimeout); | 733 | this.translateY = this._translateY - ((event.wheelDeltaY * 20) / 120); |
703 | this._translateEndTimeout = window.setTimeout(function() { | 734 | this._dispatchTranslate(); |
704 | self._dispatchTranslateEnd(); | 735 | window.clearTimeout(this._translateEndTimeout); |
705 | }, 400); | 736 | this._translateEndTimeout = window.setTimeout(function() { |
706 | 737 | self._dispatchTranslateEnd(); | |
707 | // If we're not at one of the extremes (i.e. the scroll actully | 738 | }, 400); |
708 | // changed the translate) then we want to preventDefault to stop | 739 | |
709 | // the page scrolling. | 740 | // If we're not at one of the extremes (i.e. the scroll actually |
710 | if (oldTranslateY !== this._translateY) { | 741 | // changed the translate) then we want to preventDefault to stop |
711 | event.preventDefault(); | 742 | // the page scrolling. |
743 | if (oldTranslateY !== this._translateY && this._shouldPreventDefault(event)) { | ||
744 | event.preventDefault(); | ||
745 | } | ||
746 | this.eventManager.forfeitPointer(this._WHEEL_POINTER, this.component); | ||
712 | } | 747 | } |
713 | } | 748 | } |
714 | }, | 749 | }, |
@@ -743,11 +778,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
743 | } | 778 | } |
744 | }, | 779 | }, |
745 | 780 | ||
746 | _animationInterval: { | ||
747 | enumerable: false, | ||
748 | value: false | ||
749 | }, | ||
750 | |||
751 | _bezierTValue: { | 781 | _bezierTValue: { |
752 | enumerable: false, | 782 | enumerable: false, |
753 | value: function(x, p1x, p1y, p2x, p2y) { | 783 | value: function(x, p1x, p1y, p2x, p2y) { |
@@ -804,68 +834,117 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** | |||
804 | } | 834 | } |
805 | }, | 835 | }, |
806 | 836 | ||
837 | animateBouncingX: {value: false, enumerable: false}, | ||
838 | startTimeBounceX: {value: false, enumerable: false}, | ||
839 | animateBouncingY: {value: false, enumerable: false}, | ||
840 | startTimeBounceY: {value: false, enumerable: false}, | ||
841 | animateMomentum: {value: false, enumerable: false}, | ||
842 | startTime: {value: null, enumerable: false}, | ||
843 | startX: {value: null, enumerable: false}, | ||
844 | posX: {value: null, enumerable: false}, | ||
845 | endX: {value: null, enumerable: false}, | ||
846 | startY: {value: null, enumerable: false}, | ||
847 | posY: {value: null, enumerable: false}, | ||
848 | endY: {value: null, enumerable: false}, | ||
807 | 849 | ||
808 | _end: { | 850 | translateStrideX: { |
809 | enumerable: false, | 851 | value: null |
810 | value: function(event) { | 852 | }, |
811 | 853 | ||
812 | var animateMomentum=false, | 854 | translateStrideY: { |
813 | momentumX, | 855 | value: null |
814 | momentumY, | 856 | }, |
815 | startX = this._translateX, | 857 | |
816 | startY = this._translateY, | 858 | translateStrideDuration: { |
817 | posX = startX, | 859 | value: 330 |
818 | posY = startY, | 860 | }, |
819 | endX = startX, | 861 | |
820 | endY = startY, |