From 3f67ab074a643499f084ca424444acfd58f202e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Tue, 20 Dec 2016 16:02:50 -0800 Subject: [PATCH] feat(animations): expose the `triggerName` within the transition event Closes #13600 --- .../src/animation/animation_compiler.ts | 4 +- .../src/animation/animation_transition.ts | 7 ++-- .../animation/animation_transition_event.ts | 7 +++- .../animation/animation_integration_spec.ts | 42 +++++++++++++++++++ .../renderer_animation_integration_spec.ts | 9 +++- tools/public_api_guard/core/index.d.ts | 4 +- 6 files changed, 64 insertions(+), 9 deletions(-) diff --git a/modules/@angular/compiler/src/animation/animation_compiler.ts b/modules/@angular/compiler/src/animation/animation_compiler.ts index 6f85494842..9bcf6df070 100644 --- a/modules/@angular/compiler/src/animation/animation_compiler.ts +++ b/modules/@angular/compiler/src/animation/animation_compiler.ts @@ -294,8 +294,8 @@ class _AnimationBuilder implements AnimationAstVisitor { statements.push(new o.ReturnStatement( o.importExpr(createIdentifier(Identifiers.AnimationTransition)).instantiate([ - _ANIMATION_PLAYER_VAR, _ANIMATION_FACTORY_ELEMENT_VAR, _ANIMATION_CURRENT_STATE_VAR, - _ANIMATION_NEXT_STATE_VAR, _ANIMATION_TIME_VAR + _ANIMATION_PLAYER_VAR, _ANIMATION_FACTORY_ELEMENT_VAR, o.literal(this.animationName), + _ANIMATION_CURRENT_STATE_VAR, _ANIMATION_NEXT_STATE_VAR, _ANIMATION_TIME_VAR ]))); return o.fn( diff --git a/modules/@angular/core/src/animation/animation_transition.ts b/modules/@angular/core/src/animation/animation_transition.ts index 772f7789f1..03f9961a3d 100644 --- a/modules/@angular/core/src/animation/animation_transition.ts +++ b/modules/@angular/core/src/animation/animation_transition.ts @@ -12,8 +12,8 @@ import {AnimationTransitionEvent} from './animation_transition_event'; export class AnimationTransition { constructor( - private _player: AnimationPlayer, private _element: ElementRef, private _fromState: string, - private _toState: string, private _totalTime: number) {} + private _player: AnimationPlayer, private _element: ElementRef, private _triggerName: string, + private _fromState: string, private _toState: string, private _totalTime: number) {} private _createEvent(phaseName: string): AnimationTransitionEvent { return new AnimationTransitionEvent({ @@ -21,7 +21,8 @@ export class AnimationTransition { toState: this._toState, totalTime: this._totalTime, phaseName: phaseName, - element: this._element + element: this._element, + triggerName: this._triggerName }); } diff --git a/modules/@angular/core/src/animation/animation_transition_event.ts b/modules/@angular/core/src/animation/animation_transition_event.ts index ccea8dbc5f..250cf21e6f 100644 --- a/modules/@angular/core/src/animation/animation_transition_event.ts +++ b/modules/@angular/core/src/animation/animation_transition_event.ts @@ -44,18 +44,21 @@ export class AnimationTransitionEvent { public totalTime: number; public phaseName: string; public element: ElementRef; + public triggerName: string; - constructor({fromState, toState, totalTime, phaseName, element}: { + constructor({fromState, toState, totalTime, phaseName, element, triggerName}: { fromState: string, toState: string, totalTime: number, phaseName: string, - element: any + element: any, + triggerName: string }) { this.fromState = fromState; this.toState = toState; this.totalTime = totalTime; this.phaseName = phaseName; this.element = new ElementRef(element); + this.triggerName = triggerName; } } diff --git a/modules/@angular/core/test/animation/animation_integration_spec.ts b/modules/@angular/core/test/animation/animation_integration_spec.ts index 710ae00b54..7505fe9a86 100644 --- a/modules/@angular/core/test/animation/animation_integration_spec.ts +++ b/modules/@angular/core/test/animation/animation_integration_spec.ts @@ -1794,6 +1794,48 @@ function declareTests({useJit}: {useJit: boolean}) { expect(elements[i].nativeElement).toBe(targetElements[i]); } })); + + it('should expose the trigger associated with the animation within the callback event', + fakeAsync(() => { + TestBed.overrideComponent(DummyIfCmp, { + set: { + template: ` +
+
+ `, + animations: [ + trigger('t1', [transition('* => *', [animate(1000)])]), + trigger('t2', [transition('* => *', [animate(1000)])]) + ] + } + }); + + const driver = TestBed.get(AnimationDriver) as InnerContentTrackingAnimationDriver; + const fixture = TestBed.createComponent(DummyIfCmp); + const cmp = fixture.componentInstance; + + let triggers: string[] = []; + cmp.callback = (e: AnimationTransitionEvent) => + triggers.push(`${e.triggerName}-${e.phaseName}`); + + cmp.exp = true; + fixture.detectChanges(); + flushMicrotasks(); + + expect(triggers).toEqual(['t1-start', 't2-start']); + triggers = []; + + driver.log.shift()['player'].finish(); + driver.log.shift()['player'].finish(); + + expect(triggers).toEqual(['t1-done', 't2-done']); + })); }); describe('ng directives', () => { diff --git a/modules/@angular/platform-webworker/test/web_workers/worker/renderer_animation_integration_spec.ts b/modules/@angular/platform-webworker/test/web_workers/worker/renderer_animation_integration_spec.ts index bea50582d8..c5009e9ff2 100644 --- a/modules/@angular/platform-webworker/test/web_workers/worker/renderer_animation_integration_spec.ts +++ b/modules/@angular/platform-webworker/test/web_workers/worker/renderer_animation_integration_spec.ts @@ -9,7 +9,6 @@ import {AUTO_STYLE, AnimationTransitionEvent, Component, Injector, ViewChild, animate, state, style, transition, trigger} from '@angular/core'; import {DebugDomRootRenderer} from '@angular/core/src/debug/debug_renderer'; import {ElementRef} from '@angular/core/src/linker/element_ref'; -import {ViewChild} from '@angular/core/src/metadata/di'; import {RootRenderer} from '@angular/core/src/render/api'; import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing'; import {MockAnimationPlayer} from '@angular/core/testing/testing_internal'; @@ -207,12 +206,14 @@ export function main() { uiDriver.log.shift()['player'].finish(); const [triggerOneStart, triggerOneDone] = log['one']; + expect(triggerOneStart.triggerName).toEqual('one'); expect(triggerOneStart.fromState).toEqual('a'); expect(triggerOneStart.toState).toEqual('b'); expect(triggerOneStart.totalTime).toEqual(500); expect(triggerOneStart.phaseName).toEqual('start'); expect(triggerOneStart.element instanceof ElementRef).toEqual(true); + expect(triggerOneDone.triggerName).toEqual('one'); expect(triggerOneDone.fromState).toEqual('a'); expect(triggerOneDone.toState).toEqual('b'); expect(triggerOneDone.totalTime).toEqual(500); @@ -222,12 +223,14 @@ export function main() { uiDriver.log.shift()['player'].finish(); const [triggerTwoStart, triggerTwoDone] = log['two']; + expect(triggerTwoStart.triggerName).toEqual('two'); expect(triggerTwoStart.fromState).toEqual('c'); expect(triggerTwoStart.toState).toEqual('d'); expect(triggerTwoStart.totalTime).toEqual(1000); expect(triggerTwoStart.phaseName).toEqual('start'); expect(triggerTwoStart.element instanceof ElementRef).toEqual(true); + expect(triggerTwoDone.triggerName).toEqual('two'); expect(triggerTwoDone.fromState).toEqual('c'); expect(triggerTwoDone.toState).toEqual('d'); expect(triggerTwoDone.totalTime).toEqual(1000); @@ -263,6 +266,7 @@ export function main() { uiDriver.log.shift()['player'].finish(); const start1 = cmp1Log['start']; + expect(start1.triggerName).toEqual('myTrigger'); expect(start1.fromState).toEqual('void'); expect(start1.toState).toEqual('off'); expect(start1.totalTime).toEqual(500); @@ -270,6 +274,7 @@ export function main() { expect(start1.element instanceof ElementRef).toBe(true); const done1 = cmp1Log['done']; + expect(done1.triggerName).toEqual('myTrigger'); expect(done1.fromState).toEqual('void'); expect(done1.toState).toEqual('off'); expect(done1.totalTime).toEqual(500); @@ -281,6 +286,7 @@ export function main() { uiDriver.log.shift()['player'].finish(); const start2 = cmp2Log['start']; + expect(start2.triggerName).toEqual('myTrigger'); expect(start2.fromState).toEqual('void'); expect(start2.toState).toEqual('on'); expect(start2.totalTime).toEqual(1000); @@ -288,6 +294,7 @@ export function main() { expect(start2.element instanceof ElementRef).toBe(true); const done2 = cmp2Log['done']; + expect(done2.triggerName).toEqual('myTrigger'); expect(done2.fromState).toEqual('void'); expect(done2.toState).toEqual('on'); expect(done2.totalTime).toEqual(1000); diff --git a/tools/public_api_guard/core/index.d.ts b/tools/public_api_guard/core/index.d.ts index 56ed6e3dbd..979d34eacb 100644 --- a/tools/public_api_guard/core/index.d.ts +++ b/tools/public_api_guard/core/index.d.ts @@ -113,12 +113,14 @@ export declare class AnimationTransitionEvent { phaseName: string; toState: string; totalTime: number; - constructor({fromState, toState, totalTime, phaseName, element}: { + triggerName: string; + constructor({fromState, toState, totalTime, phaseName, element, triggerName}: { fromState: string; toState: string; totalTime: number; phaseName: string; element: any; + triggerName: string; }); }