Fix double nav.onTransitionEnd event

Fixes framer/company#3143 Fixes framer/company#3142
koenbok · Dec 1, 2016 · c97d630 · c97d630
1 parent 367de0b
commit c97d630
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 41 deletions.
diff --git a/extras/Studio.framer/app.coffee b/extras/Studio.framer/app.coffee
@@ -13,16 +13,8 @@ c3 = new Card()
 
 nav = new NavComponent(c1)
 
-nav.header = new Layer
-	height: 80
-	width: Screen.width
+c1.onTap -> nav.showNext(c2)
+c2.onTap -> nav.showPrevious()
 
-nav.header.onClick -> 
-	nav.showPrevious(animate: false)
-
-Utils.labelLayer(nav.header, "Header")
-
-c1.onClick -> nav.showNext(c2)
-c2.onClick -> nav.showNext(c3)
-
-c3.onTap -> nav.showPrevious(count: 2)
+nav.onTransitionEnd (args...) ->
+	print "end", @, args
diff --git a/extras/Studio.framer/framer/config.json b/extras/Studio.framer/framer/config.json
@@ -1,17 +1,19 @@
 {
+  "orientation" : 0,
+  "updateDelay" : 0.3,
+  "contentScale" : 1,
+  "fullScreen" : false,
+  "sharedPrototype" : 1,
   "propertyPanelToggleStates" : {
     "Filters" : false
   },
-  "deviceOrientation" : 0,
-  "sharedPrototype" : 1,
-  "contentScale" : 1,
   "deviceType" : "apple-iphone-7-silver",
+  "shareServer" : "https:\/\/store.framerjs.com",
+  "projectId" : "69CDD578-9E6C-4069-B6D8-422FB93C6F23",
+  "deviceOrientation" : 0,
   "selectedHand" : "",
-  "updateDelay" : 0.3,
-  "deviceScale" : "fit",
   "foldedCodeRanges" : [
     "{0, 215}"
   ],
-  "orientation" : 0,
-  "fullScreen" : false
+  "deviceScale" : "fit"
 }
diff --git a/framer/Components/NavComponent.coffee b/framer/Components/NavComponent.coffee
@@ -292,7 +292,14 @@ class exports.NavComponent extends Layer
 
 	_runTransition: (transition, direction, animate, from, to) =>
 
-		@emit(Events.TransitionStart, from, to, {direction: direction, modal: @isModal})
+		if direction is "forward"
+			a = from
+			b = to
+		else
+			a = to
+			b = from
+
+		@emit(Events.TransitionStart, a, b, direction)
 
 		# Start the transition with a small delay added so it only runs after all
 		# js has been processed. It's also important for hints, as they rely on
@@ -301,22 +308,20 @@ class exports.NavComponent extends Layer
 		Utils.delay 0, =>
 			@_firstTransition = true
 			transition[direction] animate, =>
-				@emit(Events.TransitionEnd, from, to, {direction: direction, modal: @isModal})
+				@emit(Events.TransitionEnd, a, b, direction)
 
 	_buildTransition: (template, layerA, layerB, overlay) ->
 
 		# # Buld a new transtition object with empty states
 		transition = {}
 
-		forwardEvents = (group, direction) =>
-			group.once Events.AnimationStart, => @emit(Events.TransitionStart, layerA, layerB, direction)
-			group.once Events.AnimationHalt, => @emit(Events.TransitionHalt, layerA, layerB, direction)
-			group.once Events.AnimationStop, => @emit(Events.TransitionStop, layerA, layerB, direction)
-			group.once Events.AnimationEnd, => @emit(Events.TransitionEnd, layerA, layerB, direction)
-
 		# Add the forward function for this state to transition forward
 		transition.forward = (animate=true, callback) =>
 
+			forwardEvents = (group, direction) =>
+				group.once Events.AnimationHalt, => @emit(Events.TransitionHalt, layerA, layerB, direction)
+				group.once Events.AnimationStop, => @emit(Events.TransitionStop, layerA, layerB, direction)
+
 			animations = []
 			options = {instant: not animate}
 
@@ -348,14 +353,18 @@ class exports.NavComponent extends Layer
 			group = new AnimationGroup(animations)
 			forwardEvents(group, "forward")
 
-			group.once(Events.AnimationStop, callback)
+			group.once(Events.AnimationStop, callback) if callback
 			group.once Events.AnimationEnd, ->
 				if layerA and template.layerA and not (overlay and template.overlay)
 					layerA.visible = false
 
 			group.start()
 
-		transition.back = (animate=true, callback) ->
+		transition.back = (animate=true, callback) =>
+
+			forwardEvents = (group, direction) =>
+				group.once Events.AnimationHalt, => @emit(Events.TransitionHalt, layerB, layerA, direction)
+				group.once Events.AnimationStop, => @emit(Events.TransitionStop, layerB, layerA, direction)
 
 			animations = []
 			options = {instant: not animate}
@@ -378,7 +387,7 @@ class exports.NavComponent extends Layer
 
 			forwardEvents(group, "back")
 
-			group.once(Events.AnimationStop, callback)
+			group.once(Events.AnimationStop, callback) if callback
 			group.once Events.AnimationEnd, ->
 				if layerB and template.layerB
 					layerB.visible = false

diff --git a/test/tests/NavComponentTest.coffee b/test/tests/NavComponentTest.coffee
@@ -106,24 +106,23 @@ describe "NavComponent", ->
 
 		it "should throw the right events", (done) ->
 
+			events = []
+
 			cardA = new Layer name: "cardA", size: 100
 			cardB = new Layer name: "cardB", size: 100
 
 			nav = new NavComponent()
 			nav.showNext(cardA)
 			nav.current.should.equal cardA
 
+			nav.onTransitionStart (args...) ->
+				events.push(Events.TransitionStart)
 
-			# nav.once Events.TransitionStart, (args...) ->
-			# 	print Events.TransitionStart, args
-			# 	#events.push(Events.TransitionStart)
-
-			nav.once Events.TransitionEnd, (args...) ->
-				# print Events.TransitionEnd, args
-				# print nav.current, nav._stack
-				nav.current.should.equal cardB
-				done()
-				#events.push(Events.TransitionEnd)
+			nav.onTransitionEnd (args...) ->
+				events.push(Events.TransitionEnd)
 
 			nav.showNext(cardB)
-			# nav.back()
+
+			nav.onTransitionEnd (args...) ->
+				events.should.eql ["transitionstart", "transitionend"]
+				done()