From c97d6305f6e336dd263e8aacb39ee1d42ba27cb6 Mon Sep 17 00:00:00 2001 From: Koen Bok Date: Thu, 1 Dec 2016 11:54:35 +0100 Subject: [PATCH] Fix double nav.onTransitionEnd event Fixes https://github.com/motif/company/issues/3143 Fixes https://github.com/motif/company/issues/3142 --- extras/Studio.framer/app.coffee | 16 ++++--------- extras/Studio.framer/framer/config.json | 16 +++++++------ framer/Components/NavComponent.coffee | 31 ++++++++++++++++--------- test/tests/NavComponentTest.coffee | 21 ++++++++--------- 4 files changed, 43 insertions(+), 41 deletions(-) diff --git a/extras/Studio.framer/app.coffee b/extras/Studio.framer/app.coffee index 5fff32081..9bbf52b8e 100644 --- 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 \ No newline at end of file diff --git a/extras/Studio.framer/framer/config.json b/extras/Studio.framer/framer/config.json index 4b309eea5..fe61526ba 100644 --- 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" } \ No newline at end of file diff --git a/framer/Components/NavComponent.coffee b/framer/Components/NavComponent.coffee index cc801470c..73428a967 100644 --- 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 index 8da481c63..7f9748c06 100644 --- a/test/tests/NavComponentTest.coffee +++ b/test/tests/NavComponentTest.coffee @@ -106,6 +106,8 @@ describe "NavComponent", -> it "should throw the right events", (done) -> + events = [] + cardA = new Layer name: "cardA", size: 100 cardB = new Layer name: "cardB", size: 100 @@ -113,17 +115,14 @@ describe "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()