Skip to content

Commit e4339bc

Browse files
NarretzNarretz
committed
feat($animate): add option data to event callbacks
Closes angular#12697 Closes angular#13059
1 parent 0e26197 commit e4339bc

File tree

2 files changed

+251
-4
lines changed

2 files changed

+251
-4
lines changed

‎src/ngAnimate/animateQueue.js

+13-4
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@ var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animate
1313
join: []
1414
};
1515

16+
function getEventData(options) {
17+
return {
18+
addClass: options.addClass,
19+
removeClass: options.removeClass,
20+
from: options.from,
21+
to: options.to
22+
};
23+
}
24+
1625
function makeTruthyCssClassMap(classString) {
1726
if (!classString) {
1827
return null;
@@ -379,9 +388,9 @@ var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animate
379388

380389
if (skipAnimations) {
381390
// Callbacks should fire even if the document is hidden (regression fix for issue #14120)
382-
if (documentHidden) notifyProgress(runner, event, 'start');
391+
if (documentHidden) notifyProgress(runner, event, 'start', getEventData(options));
383392
close();
384-
if (documentHidden) notifyProgress(runner, event, 'close');
393+
if (documentHidden) notifyProgress(runner, event, 'close', getEventData(options));
385394
return runner;
386395
}
387396

@@ -543,15 +552,15 @@ var $$AnimateQueueProvider = ['$animateProvider', /** @this */ function($animate
543552
// this will update the runner's flow-control events based on
544553
// the `realRunner` object.
545554
runner.setHost(realRunner);
546-
notifyProgress(runner, event, 'start', {});
555+
notifyProgress(runner, event, 'start', getEventData(options));
547556

548557
realRunner.done(function(status) {
549558
close(!status);
550559
var animationDetails = activeAnimationsLookup.get(node);
551560
if (animationDetails && animationDetails.counter === counter) {
552561
clearElementAnimationState(node);
553562
}
554-
notifyProgress(runner, event, 'close', {});
563+
notifyProgress(runner, event, 'close', getEventData(options));
555564
});
556565
});
557566

‎test/ngAnimate/animateSpec.js

+238
Original file line numberDiff line numberDiff line change
@@ -2784,6 +2784,244 @@ describe('animations', function() {
27842784

27852785
});
27862786

2787+
describe('event data', function() {
2788+
2789+
it('should be included for enter',
2790+
inject(function($animate, $rootScope, $rootElement, $document) {
2791+
var eventData;
2792+
2793+
$animate.on('enter', jqLite($document[0].body), function(element, phase, data) {
2794+
eventData = data;
2795+
});
2796+
2797+
element = jqLite('<div></div>');
2798+
$animate.enter(element, $rootElement, null, {
2799+
addClass: 'red blue',
2800+
removeClass: 'yellow green',
2801+
from: {opacity: 0},
2802+
to: {opacity: 1}
2803+
});
2804+
$rootScope.$digest();
2805+
2806+
$animate.flush();
2807+
2808+
expect(eventData).toEqual({
2809+
addClass: 'red blue',
2810+
removeClass: null,
2811+
from: {opacity: 0},
2812+
to: {opacity: 1}
2813+
});
2814+
}));
2815+
2816+
2817+
it('should be included for leave',
2818+
inject(function($animate, $rootScope, $rootElement, $document) {
2819+
var eventData;
2820+
2821+
$animate.on('leave', jqLite($document[0].body), function(element, phase, data) {
2822+
eventData = data;
2823+
});
2824+
2825+
var outerContainer = jqLite('<div></div>');
2826+
element = jqLite('<div></div>');
2827+
outerContainer.append(element);
2828+
$rootElement.append(outerContainer);
2829+
2830+
$animate.leave(element, {
2831+
addClass: 'red blue',
2832+
removeClass: 'yellow green',
2833+
from: {opacity: 0},
2834+
to: {opacity: 1}
2835+
});
2836+
2837+
$animate.flush();
2838+
2839+
expect(eventData).toEqual({
2840+
addClass: 'red blue',
2841+
removeClass: null,
2842+
from: {opacity: 0},
2843+
to: {opacity: 1}
2844+
});
2845+
})
2846+
);
2847+
2848+
2849+
it('should be included for move',
2850+
inject(function($animate, $rootScope, $rootElement, $document) {
2851+
var eventData;
2852+
2853+
$animate.on('move', jqLite($document[0].body), function(element, phase, data) {
2854+
eventData = data;
2855+
});
2856+
2857+
var parent = jqLite('<div></div>');
2858+
var parent2 = jqLite('<div></div>');
2859+
element = jqLite('<div></div>');
2860+
parent.append(element);
2861+
$rootElement.append(parent);
2862+
$rootElement.append(parent2);
2863+
2864+
$animate.move(element, parent2, null, {
2865+
addClass: 'red blue',
2866+
removeClass: 'yellow green',
2867+
from: {opacity: 0},
2868+
to: {opacity: 1}
2869+
});
2870+
2871+
$animate.flush();
2872+
2873+
expect(eventData).toEqual({
2874+
addClass: 'red blue',
2875+
removeClass: null,
2876+
from: {opacity: 0},
2877+
to: {opacity: 1}
2878+
});
2879+
})
2880+
);
2881+
2882+
2883+
it('should be included for addClass', inject(function($animate, $rootElement) {
2884+
var eventData;
2885+
2886+
element = jqLite('<div class="purple"></div>');
2887+
$animate.on('addClass', element, function(element, phase, data) {
2888+
eventData = data;
2889+
});
2890+
2891+
$rootElement.append(element);
2892+
$animate.addClass(element, 'red blue', {
2893+
from: {opacity: 0},
2894+
to: {opacity: 1}
2895+
});
2896+
$animate.flush();
2897+
2898+
expect(eventData).toEqual({
2899+
addClass: 'red blue',
2900+
removeClass: null,
2901+
from: {opacity: 0},
2902+
to: {opacity: 1}
2903+
});
2904+
}));
2905+
2906+
2907+
it('should be included for removeClass', inject(function($animate, $rootElement) {
2908+
var eventData;
2909+
2910+
element = jqLite('<div class="red blue purple"></div>');
2911+
$animate.on('removeClass', element, function(element, phase, data) {
2912+
eventData = data;
2913+
});
2914+
2915+
$rootElement.append(element);
2916+
$animate.removeClass(element, 'red blue', {
2917+
from: {opacity: 0},
2918+
to: {opacity: 1}
2919+
});
2920+
$animate.flush();
2921+
2922+
expect(eventData).toEqual({
2923+
removeClass: 'red blue',
2924+
addClass: null,
2925+
from: {opacity: 0},
2926+
to: {opacity: 1}
2927+
});
2928+
}));
2929+
2930+
2931+
it('should be included for setClass', inject(function($animate, $rootElement) {
2932+
var eventData;
2933+
2934+
element = jqLite('<div class="yellow green purple"></div>');
2935+
2936+
$animate.on('setClass', element, function(element, phase, data) {
2937+
2938+
eventData = data;
2939+
});
2940+
2941+
$rootElement.append(element);
2942+
$animate.setClass(element, 'red blue', 'yellow green', {
2943+
from: {opacity: 0},
2944+
to: {opacity: 1}
2945+
});
2946+
$animate.flush();
2947+
2948+
expect(eventData).toEqual({
2949+
addClass: 'red blue',
2950+
removeClass: 'yellow green',
2951+
from: {opacity: 0},
2952+
to: {opacity: 1}
2953+
});
2954+
}));
2955+
2956+
it('should be included for animate', inject(function($animate, $rootElement) {
2957+
// The event for animate changes to 'setClass' if both addClass and removeClass
2958+
// are definded, because the operations are merged. However, it is still 'animate'
2959+
// and not 'addClass' if only 'addClass' is defined.
2960+
// Ideally, we would make this consistent, but it's a BC
2961+
var eventData, eventName;
2962+
2963+
element = jqLite('<div class="yellow green purple"></div>');
2964+
2965+
$animate.on('setClass', element, function(element, phase, data) {
2966+
eventData = data;
2967+
eventName = 'setClass';
2968+
});
2969+
2970+
$animate.on('animate', element, function(element, phase, data) {
2971+
eventData = data;
2972+
eventName = 'animate';
2973+
});
2974+
2975+
$rootElement.append(element);
2976+
var runner = $animate.animate(element, {opacity: 0}, {opacity: 1}, null, {
2977+
addClass: 'red blue',
2978+
removeClass: 'yellow green'
2979+
});
2980+
$animate.flush();
2981+
runner.end();
2982+
2983+
expect(eventName).toBe('setClass');
2984+
expect(eventData).toEqual({
2985+
addClass: 'red blue',
2986+
removeClass: 'yellow green',
2987+
from: {opacity: 0},
2988+
to: {opacity: 1}
2989+
});
2990+
2991+
eventData = eventName = null;
2992+
runner = $animate.animate(element, {opacity: 0}, {opacity: 1}, null, {
2993+
addClass: 'yellow green'
2994+
});
2995+
2996+
$animate.flush();
2997+
runner.end();
2998+
2999+
expect(eventName).toBe('animate');
3000+
expect(eventData).toEqual({
3001+
addClass: 'yellow green',
3002+
removeClass: null,
3003+
from: {opacity: 0},
3004+
to: {opacity: 1}
3005+
});
3006+
3007+
eventData = eventName = null;
3008+
runner = $animate.animate(element, {opacity: 0}, {opacity: 1}, null, {
3009+
removeClass: 'yellow green'
3010+
});
3011+
3012+
$animate.flush();
3013+
runner.end();
3014+
3015+
expect(eventName).toBe('animate');
3016+
expect(eventData).toEqual({
3017+
addClass: null,
3018+
removeClass: 'yellow green',
3019+
from: {opacity: 0},
3020+
to: {opacity: 1}
3021+
});
3022+
}));
3023+
});
3024+
27873025
they('should trigger a callback for a $prop animation if the listener is on the document',
27883026
['enter', 'leave'], function($event) {
27893027
module(function($provide) {

0 commit comments

Comments
 (0)