Merge pull request #397 from koenbok/feature/consistent-scroll-events

Feature/consistent scroll events
koenbok · Aug 23, 2016 · 8488d33 · 8488d33
2 parents a33d1be + 7a3a02b
commit 8488d33
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 59 deletions.
diff --git a/framer/Components/PageComponent.coffee b/framer/Components/PageComponent.coffee
@@ -114,15 +114,6 @@ class exports.PageComponent extends ScrollComponent
 		else
 			@updateContent()
 
-	setContentLayer: (contentLayer) ->
-		if @content
-			@_onAnimationStop()
-			@content.off(Events.AnimationStart, @_onAnimationStart)
-			@content.off(Events.AnimationStop, @_onAnimationStop)
-		super contentLayer
-		@content.on(Events.AnimationStart, @_onAnimationStart)
-		@content.on(Events.AnimationStop, @_onAnimationStop)
-
 	horizontalPageIndex: (page) ->
 		(_.sortBy(@content.children, (l) -> l.x)).indexOf(page)
 
@@ -140,19 +131,6 @@ class exports.PageComponent extends ScrollComponent
 			@_previousPages.push(currentPage)
 			@emit("change:currentPage", {old:@previousPage, new:currentPage})
 
-	_onAnimationStart: =>
-		@_isMoving = true
-		@_isAnimating = true
-		@content.on("change:frame", @_onAnimationStep)
-
-	_onAnimationStep: =>
-		@emit(Events.Move, @content.point)
-
-	_onAnimationStop: =>
-		@_isMoving = false
-		@_isAnimating = false
-		@content.off("change:frame", @_onAnimationStep)
-
 	_scrollEnd: =>
 
 		return if @content.isAnimating

diff --git a/framer/Components/ScrollComponent.coffee b/framer/Components/ScrollComponent.coffee
@@ -109,7 +109,11 @@ class exports.ScrollComponent extends Layer
 		# Sets the content layer if you happen to want to replace the default one
 		# yourself. Sets some sane defaults too.
 
-		@_content.destroy() if @content
+		if @content
+			@_onAnimationStop()
+			@content.off(Events.AnimationStart, @_onAnimationStart)
+			@content.off(Events.AnimationStop, @_onAnimationStop)
+			@_content.destroy()
 
 		@_content = layer
 		@_content.parent = @
@@ -127,6 +131,9 @@ class exports.ScrollComponent extends Layer
 
 		@scrollPoint = {x:0, y:0}
 
+		@content.on(Events.AnimationStart, @_onAnimationStart)
+		@content.on(Events.AnimationStop, @_onAnimationStop)
+
 		return @_content
 
 	updateContent: =>
@@ -308,6 +315,16 @@ class exports.ScrollComponent extends Layer
 	closestContentLayerForScrollPoint: (scrollPoint, originX=0, originY=0) ->
 		return _.head(@_contentLayersSortedByDistanceForScrollPoint(scrollPoint, originX, originY))
 
+	_onAnimationStart: (event) =>
+		@content.on("change:frame", @_onAnimationStep)
+
+	_onAnimationStep: (event) =>
+		@content.emit(Events.Move, @content.point)
+		@emit(Events.Scroll, event)
+
+	_onAnimationStop: =>
+		@content.off("change:frame", @_onAnimationStep)
+
 	_scrollPointForLayer: (layer, originX=0, originY=0, clamp=true) ->
 		return Utils.framePointForOrigin(layer, originX, originY)
 
@@ -383,6 +400,7 @@ class exports.ScrollComponent extends Layer
 
 		@content.point = point
 
+		@content.emit(Events.Move, point)
 		@emit(Events.Scroll, event)
 		@_onMouseWheelEnd(event)
 

diff --git a/test/tests/ScrollComponentTest.coffee b/test/tests/ScrollComponentTest.coffee
@@ -34,42 +34,77 @@ describe "ScrollComponent", ->
 
 		copy = instance.copy()
 		copy.scrollHorizontal.should.be.false
-
-	describe "scolling with mousEvents", ->
-		it "should work", ->
-			scroll = new ScrollComponent size: 200
-			new Layer
-				width: 400
-				height: 400
-				parent: scroll.content
-			scroll.mouseWheelEnabled = true
-			scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
-			scroll.content.x.should.equal -75
-			scroll.content.y.should.equal -150
-
-		it "should respect scrollHorizontal = false", ->
-			scroll = new ScrollComponent size: 200
-			new Layer
-				width: 400
-				height: 400
-				parent: scroll.content
-			scroll.mouseWheelEnabled = true
-			scroll.scrollHorizontal = false
-			scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
-			scroll.content.x.should.equal 0
-			scroll.content.y.should.equal -150
-
-		it "should respect scrollVertial = false", ->
-			scroll = new ScrollComponent size: 200
-			new Layer
-				width: 400
-				height: 400
-				parent: scroll.content
-			scroll.mouseWheelEnabled = true
-			scroll.scrollVertical = false
-			scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
-			scroll.content.x.should.equal -75
-			scroll.content.y.should.equal 0
+	describe "Events", ->
+		describe "scolling with mousEvents", ->
+			it "should work", ->
+				scroll = new ScrollComponent size: 200
+				new Layer
+					width: 400
+					height: 400
+					parent: scroll.content
+				scroll.mouseWheelEnabled = true
+				scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+				scroll.content.x.should.equal -75
+				scroll.content.y.should.equal -150
+
+			it "should respect scrollHorizontal = false", ->
+				scroll = new ScrollComponent size: 200
+				new Layer
+					width: 400
+					height: 400
+					parent: scroll.content
+				scroll.mouseWheelEnabled = true
+				scroll.scrollHorizontal = false
+				scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+				scroll.content.x.should.equal 0
+				scroll.content.y.should.equal -150
+
+			it "should respect scrollVertial = false", ->
+				scroll = new ScrollComponent size: 200
+				new Layer
+					width: 400
+					height: 400
+					parent: scroll.content
+				scroll.mouseWheelEnabled = true
+				scroll.scrollVertical = false
+				scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+				scroll.content.x.should.equal -75
+				scroll.content.y.should.equal 0
+
+			it "should fire move events", (done) ->
+				scroll = new ScrollComponent size: 200
+				new Layer
+					width: 400
+					height: 400
+					parent: scroll.content
+				scroll.mouseWheelEnabled = true
+				scroll.on Events.Move, (event) ->
+					event.x.should.equal -75
+					event.y.should.equal -150
+					done()
+				scroll.emit(Events.MouseWheel, {wheelDeltaX: -75, wheelDeltaY: -150})
+
+		describe "PageComponent", ->
+			it "should fire scroll events", (done) ->
+				page = new PageComponent
+					width: 100
+					height: 100
+				page.addPage(new Layer)
+				page.addPage(new Layer)
+				page.once Events.Scroll, ->
+					done()
+				page.snapToNextPage()
+
+		it "should fire move events when moving a layer programmatically", (done) ->
+			scroll = new ScrollComponent
+				width: 20
+				height: 20
+			layer = new Layer parent: scroll.content
+			doneCalled = false
+			scroll.on Events.Move, ->
+				done() if not doneCalled
+				doneCalled = true
+			scroll.scrollToPoint({x: 50, y: 50})
 
 
 	describe "wrap", ->