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

Commit 4ec5ceb

Browse files
KarenParkerErinCoughlan
KarenParker
authored and
ErinCoughlan
committed
feat(panel): Add default animations and withAnimation API method.
1 parent 3eac4f8 commit 4ec5ceb

File tree

8 files changed

+601
-125
lines changed

8 files changed

+601
-125
lines changed

‎src/components/panel/demoPanelAnimations/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="demo-md-panel-animation md-padding" ng-controller="AnimationCtrl as ctrl">
2+
<h2>Animations</h2>
3+
<div layout="row">
4+
<div flex="33">
5+
OpenFrom:
6+
<md-radio-group ng-model="ctrl.openFrom">
7+
<md-radio-button value="button">Button</md-radio-button>
8+
<md-radio-button value="corner">Top/Left Corner</md-radio-button>
9+
<md-radio-button value="bottom">Bottom Center</md-radio-button>
10+
</md-radio-group>
11+
</div>
12+
13+
<div flex="33">
14+
CloseTo:
15+
<md-radio-group ng-model="ctrl.closeTo">
16+
<md-radio-button value="button">Button</md-radio-button>
17+
<md-radio-button value="corner">Top/Left Corner</md-radio-button>
18+
<md-radio-button value="bottom">Bottom Center</md-radio-button>
19+
</md-radio-group>
20+
</div>
21+
22+
<div flex="33">
23+
AnimationType:
24+
<md-radio-group ng-model="ctrl.animationType">
25+
<md-radio-button value="none">None</md-radio-button>
26+
<md-radio-button value="slide">Slide</md-radio-button>
27+
<md-radio-button value="scale">Scale</md-radio-button>
28+
<md-radio-button value="fade">Fade</md-radio-button>
29+
<md-radio-button value="custom">Custom</md-radio-button>
30+
</md-radio-group>
31+
</div>
32+
</div>
33+
34+
<div class="demo-md-panel-content">
35+
<md-button class="animation-target md-primary md-raised" ng-click="ctrl.showDialog($event)">
36+
Dialog
37+
</md-button>
38+
</div>
39+
</div>

‎src/components/panel/demoPanelAnimations/panel.tmpl.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<div role="dialog" aria-label="Eat me!" layout="column" layout-align="center center">
2+
<md-toolbar>
3+
<div class="md-toolbar-tools">
4+
<h2>Surprise!</h2>
5+
</div>
6+
</md-toolbar>
7+
8+
<div class="demo-dialog-content">
9+
<p>
10+
You hit the secret button. Here's a donut:
11+
</p>
12+
13+
<div layout="row" >
14+
<img flex alt="Delicious donut" src="img/donut.jpg">
15+
</div>
16+
</div>
17+
18+
<div layout="row" class="demo-dialog-button">
19+
<md-button flex class="md-primary">
20+
Nothing
21+
</md-button>
22+
<md-button md-autofocus flex class="md-primary" ng-click="ctrl.closeFn()">
23+
Close
24+
</md-button>
25+
</div>
26+
</div>

‎src/components/panel/demoPanelAnimations/script.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
angular.module('panelAnimationsDemo', ['ngMaterial'])
2+
.controller('AnimationCtrl', AnimationCtrl)
3+
.controller('DialogCtrl', DialogCtrl);
4+
5+
6+
function AnimationCtrl($mdPanel) {
7+
this._mdPanel = $mdPanel;
8+
this.openFrom = 'button';
9+
this.closeTo = 'button';
10+
this.animationType = 'none';
11+
}
12+
13+
14+
AnimationCtrl.prototype.showDialog = function() {
15+
var position = this._mdPanel.newPanelPosition()
16+
.absolute()
17+
.right()
18+
.top();
19+
20+
var animation = this._mdPanel.newPanelAnimation();
21+
22+
switch(this.openFrom) {
23+
case 'button':
24+
animation.openFrom('.animation-target');
25+
break;
26+
case 'corner':
27+
animation.openFrom({top:0, left:0});
28+
break;
29+
case 'bottom':
30+
animation.openFrom({
31+
top: document.documentElement.clientHeight,
32+
left: document.documentElement.clientWidth / 2 - 250
33+
});
34+
}
35+
switch(this.closeTo) {
36+
case 'button':
37+
animation.closeTo('.animation-target');
38+
break;
39+
case 'corner':
40+
animation.closeTo({top:0, left:0});
41+
break;
42+
case 'bottom':
43+
animation.closeTo({
44+
top: document.documentElement.clientHeight,
45+
left: document.documentElement.clientWidth / 2 - 250
46+
});
47+
}
48+
switch(this.animationType) {
49+
case 'custom':
50+
animation.withAnimation({
51+
open: 'demo-dialog-custom-animation-open',
52+
close: 'demo-dialog-custom-animation-close'
53+
});
54+
break;
55+
case 'slide':
56+
animation.withAnimation(this._mdPanel.animation.SLIDE);
57+
break;
58+
case 'scale':
59+
animation.withAnimation(this._mdPanel.animation.SCALE);
60+
break;
61+
case 'fade':
62+
animation.withAnimation(this._mdPanel.animation.FADE);
63+
break;
64+
case 'none':
65+
animation = undefined;
66+
break;
67+
}
68+
69+
var config = {
70+
animation: animation,
71+
attachTo: angular.element(document.querySelector('.demo-md-panel-animation')),
72+
controller: DialogCtrl,
73+
controllerAs: 'ctrl',
74+
templateUrl: 'panel.tmpl.html',
75+
locals: {
76+
closeFn: angular.bind(this, this.closeDialog)
77+
},
78+
panelClass: 'demo-dialog-example',
79+
position: position,
80+
trapFocus: true,
81+
zIndex: 150
82+
};
83+
84+
this._panelRef = this._mdPanel.open(config);
85+
};
86+
87+
88+
AnimationCtrl.prototype.closeDialog = function() {
89+
this._panelRef && this._panelRef.close();
90+
};
91+
92+
93+
// Necessary to pass locals to the dialog template.
94+
function DialogCtrl() { }

‎src/components/panel/demoPanelAnimations/style.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.demo-md-panel {
2+
min-height: 500px;
3+
}
4+
5+
.demo-dialog-example {
6+
background: white;
7+
border-radius: 4px;
8+
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
9+
0 13px 19px 2px rgba(0, 0, 0, 0.14),
10+
0 5px 24px 4px rgba(0, 0, 0, 0.12);
11+
width: 500px;
12+
}
13+
14+
.demo-dialog-content {
15+
padding: 0 15px;
16+
width: 100%;
17+
}
18+
19+
.demo-dialog-content img {
20+
height: 300px;
21+
margin: auto;
22+
}
23+
24+
.demo-dialog-button {
25+
width: 100%;
26+
}
27+
28+
.demo-dialog-custom-animation-open {
29+
transition: all 1s linear, opacity 1ms;
30+
transform: rotate(390deg);
31+
}
32+
33+
.demo-dialog-custom-animation-close {
34+
transition: all 1s linear, opacity 1ms;
35+
transform: rotate(0deg);
36+
}

0 commit comments

Comments
 (0)