Permalink
Browse files

Fix double nav.onTransitionEnd event

  • Loading branch information...
koenbok committed Dec 1, 2016
1 parent 367de0b commit c97d6305f6e336dd263e8aacb39ee1d42ba27cb6
@@ -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
@@ -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"
}
@@ -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
@@ -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()

0 comments on commit c97d630

Please sign in to comment.