From 13ae16997d4bbca14e255d5989d1c44a76eac72c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 16 May 2012 15:23:48 -0700 Subject: montage v.0.10 integration Signed-off-by: Valerio Virgillito --- .../montage/ui/composer/translate-composer.js | 230 ++++++++++++++------- 1 file changed, 155 insertions(+), 75 deletions(-) (limited to 'node_modules/montage/ui/composer/translate-composer.js') 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,/** ] }, + _WHEEL_POINTER: { + value: "wheel", + writable: false + }, + _externalUpdate: { enumerable: false, value: true @@ -388,6 +393,10 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** value: 500 }, + startTranslateRadius: { + value: 8 + }, + _hasMomentum: { enumerable: false, value: true @@ -513,7 +522,7 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** handleMousedown: { enumerable: false, value: function(event) { - if (event.button === 0 && !this.eventManager.componentClaimingPointer(this._observedPointer, this)) { + if (event.button === 0 && !this.eventManager.componentClaimingPointer(this._observedPointer)) { this.eventManager.claimPointer(this._observedPointer, this); this._start(event.clientX, event.clientY, event.target); } @@ -529,7 +538,13 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** event.preventDefault(); this._move(event.clientX, event.clientY); } else { - this._analyzeMovement(event.velocity); + if (this.axis !== "both") { + this._analyzeMovement(event); + } else { + this._stealPointer(); + event.preventDefault(); + this._move(event.clientX, event.clientY); + } } } @@ -609,7 +624,7 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** event.preventDefault(); this._move(event.changedTouches[i].clientX, event.changedTouches[i].clientY); } else { - this._analyzeMovement(event.changedTouches[i].velocity); + this._analyzeMovement(event.changedTouches[i]); } } @@ -630,7 +645,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** }, _analyzeMovement: { - value: function(velocity) { + value: function(event) { + var velocity = event.velocity; if (!velocity) { return; @@ -642,7 +658,8 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** upperRight = -0.7853981633974483, // 7pi/4 isUp, isDown, isRight, isLeft, angle, - speed; + speed, + dX, dY; speed = velocity.speed; @@ -674,6 +691,12 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** } else if (speed >= this.startTranslateSpeed) { this._stealPointer(); + } else { + dX = this.pointerStartEventPosition.pageX - event.pageX; + dY = this.pointerStartEventPosition.pageY - event.pageY; + if (dX * dX + dY * dY > this.startTranslateRadius * this.startTranslateRadius) { + this._stealPointer(); + } } } @@ -690,25 +713,37 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** value: null }, + captureMousewheel: { + value: function(event) { + if (!this.eventManager.componentClaimingPointer(this._WHEEL_POINTER)) { + this.eventManager.claimPointer(this._WHEEL_POINTER, this.component); + } + } + }, + handleMousewheel: { enumerable: false, value: function(event) { var self = this; - var oldTranslateY = this._translateY; - this._dispatchTranslateStart(); - this.translateY = this._translateY - ((event.wheelDeltaY * 20) / 120); - this._dispatchTranslate(); - window.clearTimeout(this._translateEndTimeout); - this._translateEndTimeout = window.setTimeout(function() { - self._dispatchTranslateEnd(); - }, 400); - - // If we're not at one of the extremes (i.e. the scroll actully - // changed the translate) then we want to preventDefault to stop - // the page scrolling. - if (oldTranslateY !== this._translateY) { - event.preventDefault(); + // If this composers' component is claiming the "wheel" pointer then handle the event + if (this.eventManager.isPointerClaimedByComponent(this._WHEEL_POINTER, this.component)) { + var oldTranslateY = this._translateY; + this._dispatchTranslateStart(); + this.translateY = this._translateY - ((event.wheelDeltaY * 20) / 120); + this._dispatchTranslate(); + window.clearTimeout(this._translateEndTimeout); + this._translateEndTimeout = window.setTimeout(function() { + self._dispatchTranslateEnd(); + }, 400); + + // If we're not at one of the extremes (i.e. the scroll actually + // changed the translate) then we want to preventDefault to stop + // the page scrolling. + if (oldTranslateY !== this._translateY && this._shouldPreventDefault(event)) { + event.preventDefault(); + } + this.eventManager.forfeitPointer(this._WHEEL_POINTER, this.component); } } }, @@ -743,11 +778,6 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** } }, - _animationInterval: { - enumerable: false, - value: false - }, - _bezierTValue: { enumerable: false, value: function(x, p1x, p1y, p2x, p2y) { @@ -804,68 +834,117 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** } }, + animateBouncingX: {value: false, enumerable: false}, + startTimeBounceX: {value: false, enumerable: false}, + animateBouncingY: {value: false, enumerable: false}, + startTimeBounceY: {value: false, enumerable: false}, + animateMomentum: {value: false, enumerable: false}, + startTime: {value: null, enumerable: false}, + startX: {value: null, enumerable: false}, + posX: {value: null, enumerable: false}, + endX: {value: null, enumerable: false}, + startY: {value: null, enumerable: false}, + posY: {value: null, enumerable: false}, + endY: {value: null, enumerable: false}, - _end: { - enumerable: false, - value: function(event) { + translateStrideX: { + value: null + }, - var animateMomentum=false, - momentumX, - momentumY, - startX = this._translateX, - startY = this._translateY, - posX = startX, - posY = startY, - endX = startX, - endY = startY, - self=this, - startTime=Date.now(); - - if ((this._hasMomentum) && (event.velocity.speed > 40)) { - if (this._axis != "vertical") { - momentumX = event.velocity.x * this._pointerSpeedMultiplier * (this._invertXAxis ? 1 : -1); + translateStrideY: { + value: null + }, + + translateStrideDuration: { + value: 330 + }, + + _animationInterval: { + value: function () { + var time = Date.now(), t, tmp, tmpX, tmpY, animateStride = false; + + if (this.animateMomentum) { + t=time-this.startTime; + if (t 0)) { + if (time - this.startStrideXTime < this.translateStrideDuration) { + t = this._bezierTValue((time - this.startStrideXTime) / this.translateStrideDuration, .275, 0, .275, 1); + this.posX = this.posX * (1 - t) + (tmp * this.translateStrideX) * t; + animateStride = true; } else { - momentumY = 0; + this.posX = tmp * this.translateStrideX; } - endX = startX - (momentumX * this.__momentumDuration / 2000); - endY = startY - (momentumY * this.__momentumDuration / 2000); - animateMomentum = true; - } - - this._animationInterval = function() { - var time = Date.now(), - t, tmpX, tmpY; - - if (animateMomentum) { - t = time - startTime; - if (t < self.__momentumDuration) { - posX = startX - ((momentumX + momentumX * (self.__momentumDuration - t) / self.__momentumDuration) * t / 1000) / 2; - posY = startY - ((momentumY + momentumY * (self.__momentumDuration - t) / self.__momentumDuration) * t / 1000) / 2; - } else { - animateMomentum = false; - } + } + tmp = Math.round(this.endY / this.translateStrideY); + if (this.startStrideYTime && (time - this.startStrideYTime > 0)) { + if (time - this.startStrideYTime < this.translateStrideDuration) { + t = this._bezierTValue((time - this.startStrideYTime) / this.translateStrideDuration, .275, 0, .275, 1); + this.posY = this.posY * (1 - t) + (tmp * this.translateStrideY) * t; + animateStride = true; + } else { + this.posY = tmp * this.translateStrideY; } + } + tmpX = this.posX; + tmpY = this.posY; + this._isSelfUpdate=true; + this.translateX=tmpX; + this.translateY=tmpY; + this._isSelfUpdate=false; + this.isAnimating = this.animateMomentum || animateStride; + if (this.isAnimating) { + this.needsFrame=true; + } else { + this._dispatchTranslateEnd(); + } + }, + enumerable: false + }, + + + _end: { + enumerable: false, + value: function (event) { + + this.startTime=Date.now(); - tmpX = posX; - tmpY = posY; + this.endX = this.posX = this.startX=this._translateX; + this.endY=this.posY=this.startY=this._translateY; - self._isSelfUpdate = true; - self.translateX = tmpX; - self.translateY = tmpY; - self._isSelfUpdate = false; - self.isAnimating = animateMomentum; - if (self.isAnimating) { - self.needsFrame = true; + if ((this._hasMomentum) && ((event.velocity.speed>40) || this.translateStrideX || this.translateStrideY)) { + if (this._axis != "vertical") { + this.momentumX = event.velocity.x * this._pointerSpeedMultiplier * (this._invertXAxis ? 1 : -1); } else { - this._dispatchTranslateEnd(); + this.momentumX = 0; } - }; - if (animateMomentum) { + if (this._axis != "horizontal") { + this.momentumY = event.velocity.y * this._pointerSpeedMultiplier * (this._invertYAxis ? 1 : -1); + } else { + this.momentumY=0; + } + this.endX = this.startX - (this.momentumX * this.__momentumDuration / 2000); + this.endY = this.startY - (this.momentumY * this.__momentumDuration / 2000); + this.startStrideXTime = null; + this.startStrideYTime = null; + this.animateMomentum = true; + } else { + this.animateMomentum = false; + } + + if (this.animateMomentum) { this._animationInterval(); } else if (!this._isFirstMove) { // Only dispatch a translateEnd if a translate start has occured @@ -896,6 +975,7 @@ var TranslateComposer = exports.TranslateComposer = Montage.create(Composer,/** this._element.addEventListener("mousedown", this, true); this._element.addEventListener("mousedown", this, false); this._element.addEventListener("mousewheel", this, false); + this._element.addEventListener("mousewheel", this, true); } this.eventManager.isStoringPointerEvents = true; -- cgit v1.2.3