Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit a6f0de7

Browse files
crisbetokara
authored andcommitted
feat(panel): add the ability to update the animation of an existing panel (#9895)
* Adds the ability to update the animation of a panel, without having to re-create it. * Adds a unit test for verifying that the backdrop animation duration matches the one of the panel. This was missed in #9570.
1 parent 61bd95e commit a6f0de7

File tree

2 files changed

+65
-0
lines changed

2 files changed

+65
-0
lines changed

src/components/panel/panel.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,16 @@ angular
453453
* @returns {!MdPanelRef}
454454
*/
455455

456+
/**
457+
* @ngdoc method
458+
* @name MdPanelRef#updateAnimation
459+
* @description
460+
* Updates the animation configuration for a panel. You can use this to change
461+
* the panel's animation without having to re-create it.
462+
*
463+
* @param {!MdPanelAnimation} animation
464+
*/
465+
456466

457467
/*****************************************************************************
458468
* MdPanelPosition *
@@ -1958,6 +1968,19 @@ MdPanelRef.prototype._configureTrapFocus = function() {
19581968
};
19591969

19601970

1971+
/**
1972+
* Updates the animation of a panel.
1973+
* @param {!MdPanelAnimation} animation
1974+
*/
1975+
MdPanelRef.prototype.updateAnimation = function(animation) {
1976+
this.config['animation'] = animation;
1977+
1978+
if (this._backdropRef) {
1979+
this._backdropRef.config.animation.duration(animation._rawDuration);
1980+
}
1981+
};
1982+
1983+
19611984
/**
19621985
* Animate the panel opening.
19631986
* @returns {!angular.$q.Promise} A promise that is resolved when the panel has

src/components/panel/panel.spec.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2724,6 +2724,20 @@ describe('$mdPanel', function() {
27242724
expect(panelRef.panelContainer).toHaveClass(HIDDEN_CLASS);
27252725
});
27262726

2727+
it('should match the backdrop animation duration with the panel', function() {
2728+
mdPanelAnimation.duration(500);
2729+
2730+
openPanel({
2731+
hasBackdrop: true,
2732+
animation: mdPanelAnimation
2733+
});
2734+
2735+
var backdropAnimation = panelRef._backdropRef.config.animation;
2736+
2737+
expect(backdropAnimation._openDuration).toBe(mdPanelAnimation._openDuration);
2738+
expect(backdropAnimation._closeDuration).toBe(mdPanelAnimation._closeDuration);
2739+
});
2740+
27272741
describe('should determine openFrom when', function() {
27282742
it('provided a selector', function() {
27292743
var animation = mdPanelAnimation.openFrom('button');
@@ -2813,6 +2827,34 @@ describe('$mdPanel', function() {
28132827
expect(animation._closeDuration).toBeFalsy();
28142828
});
28152829
});
2830+
2831+
describe('updating the animation of a panel', function() {
2832+
it('should change the animation config of a panel', function() {
2833+
var newAnimation = $mdPanel.newPanelAnimation();
2834+
2835+
openPanel();
2836+
2837+
panelRef.updateAnimation(newAnimation);
2838+
2839+
expect(panelRef.config.animation).toBe(newAnimation);
2840+
});
2841+
2842+
it('should update the duration of the backdrop animation', function() {
2843+
var newAnimation = $mdPanel.newPanelAnimation().duration({
2844+
open: 1000,
2845+
close: 2000
2846+
});
2847+
2848+
openPanel({ hasBackdrop: true });
2849+
2850+
panelRef.updateAnimation(newAnimation);
2851+
2852+
var backdropAnimation = panelRef._backdropRef.config.animation;
2853+
2854+
expect(backdropAnimation._openDuration).toBe(newAnimation._openDuration);
2855+
expect(backdropAnimation._closeDuration).toBe(newAnimation._closeDuration);
2856+
});
2857+
});
28162858
});
28172859

28182860
describe('interceptor logic: ', function() {

0 commit comments

Comments
 (0)