paper-fab-speed-dial.html
5.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="../neon-animation/neon-animations.html">
<link rel="import" href="paper-square-grow-animation.html">
<!--
`paper-fab-speed-dial` builds on `iron-dropdown` to allow showing a list of
speed dial actions when tapping on a floating action button.
This element expects its content to contain two children: one with the class
`dropdown-trigger` , which is initially visible and acts as the trigger, and
another one with the class `dropdown-content` , which will be hidden until the
trigger is tapped, and will contain the speed dial option elements.
Example:
<paper-fab-speed-dial>
<paper-fab icon="add" class="dropdown-trigger"></paper-fab>
<div class="dropdown-content">
<paper-fab mini icon="star-border"></paper-fab>
<paper-fab mini icon="star-half"></paper-fab>
<paper-fab mini icon="star"></paper-fab>
</div>
</paper-fab-speed-dial>
The `direction` property can be set to `top`, `bottom`, `left` or `right` to
control the direction in which the options dropdown is expanded.
### Styling
The following custom properties and mixins are also available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-fab-speed-dial-option` | Mixin applied to each option element | `{}`
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="paper-fab-speed-dial">
<template>
<style>
.vertical ::content .dropdown-content {
@apply(--layout-vertical);
}
.horizontal ::content .dropdown-content {
@apply(--layout-horizontal);
}
::content .dropdown-content > * {
margin: 8px;
@apply(--paper-fab-speed-dial-option);
}
</style>
<content id="fabContainer" select=".dropdown-trigger"></content>
<iron-dropdown
id="dropdown"
open-animation-config="[[openAnimationConfig]]"
close-animation-config="[[closeAnimationConfig]]">
<content id="contentContainer" select=".dropdown-content"></content>
</iron-dropdown>
</template>
</dom-module>
<script>
(function(Polymer) {
Polymer({
is: 'paper-fab-speed-dial',
properties: {
/**
* The direction in which to expand the options. One of `top`, `bottom`
* `left` and `right`.
*/
direction: {
type: String,
value: 'bottom'
},
/**
* A pixel value for the distance of the first option fron the trigger
* button.
*/
offset: {
type: Number,
value: 66
},
/**
* An animation config. If provided, this will be used to animate the
* opening of the options dropdown.
*/
openAnimationConfig: {
type: Array,
value: function() {
return [{
name: 'fade-in-animation',
timing: {
delay: 150,
duration: 50
}
}, {
name: 'paper-square-grow-animation',
startSize: 56,
timing: {
delay: 150,
duration: 200
}
}];
}
},
/**
* An animation config. If provided, this will be used to animate the
* closing of the options dropdown.
*/
closeAnimationConfig: {
type: Array,
value: function() {
return [{
name: 'fade-out-animation',
timing: {
duration: 200
}
}];
}
}
},
observers: [
'_updateDropdown(direction, offset)'
],
ready: function() {
var fab = Polymer.dom(this.$.fabContainer).getDistributedNodes()[0];
fab.addEventListener('tap', function() {
this.$.dropdown.open();
}.bind(this));
var content = Polymer.dom(this.$.contentContainer).getDistributedNodes()[0];
content.addEventListener('tap', function() {
this.$.dropdown.close();
}.bind(this));
},
/**
* Show the speed dial options.
*/
open: function() {
this.$.dropdown.open();
},
/**
* Hide the speed dial options.
*/
close: function() {
this.$.dropdown.close();
},
_updateDropdown: function(direction, offset) {
var d = this.$.dropdown;
switch(direction) {
case 'bottom':
d.verticalAlign = 'top';
d.horizontalOffset = 0;
d.verticalOffset = offset;
d.classList.add('vertical');
d.classList.remove('horizontal');
break;
case 'top':
d.verticalAlign = 'bottom';
d.horizontalOffset = 0;
d.verticalOffset = offset;
d.classList.add('vertical');
d.classList.remove('horizontal');
break;
case 'right':
d.horizontalAlign = 'left';
d.horizontalOffset = offset;
d.verticalOffset = 0;
d.classList.add('horizontal');
d.classList.remove('vertical');
break;
case 'left':
d.horizontalAlign = 'right';
d.horizontalOffset = offset;
d.verticalOffset = 0;
d.classList.add('horizontal');
d.classList.remove('vertical');
break;
default:
throw 'Invalid direction. Must be one of [top, bottom, left, right].';
}
}
});
})(Polymer);
</script>