-
Notifications
You must be signed in to change notification settings - Fork 1
/
file-menu.html
executable file
·120 lines (99 loc) · 2.31 KB
/
file-menu.html
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
<!--
@license
Copyright (c) 2015 Winston Howes. All rights reserved.
This code may only be used under the MIT license found at https://github.com/winhowes/file-list/blob/master/LICENSE
-->
<link rel="import" href="../polymer/polymer.html">
<!--
An animatable dropdown menu.
Example:
<file-menu></file-menu>
@demo
-->
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<dom-module id="file-menu">
<style>
:host {
display: none;
background-color: #fff;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'file-menu',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
/**
* `opened` indicates the the dropdown is opened.
*/
opened: {
type: Boolean,
value: false
},
/**
* `opening` indicates the the dropdown is in the process of opening.
*/
opening: {
type: Boolean,
value: false
},
/**
* `animationConfig` is a configuration object for the dropdown's animations.
*/
animationConfig: {
type: Object,
value: function() {
return {
entry: [{
name: 'scale-up-animation',
transformOrigin: '100% 0',
timing: {
duration: 150
},
node: this
}]
};
}
}
},
listeners: {
'neon-animation-finish': '_onAnimationFinish'
},
/**
* `_onAnimationFinish` is callback for when an animation completes.
*/
_onAnimationFinish: function() {
if (this.opening) {
this.opening = false;
this.opened = true;
this.style.display = 'inline-block';
}
},
/**
* `show` shows the dropdown menu.
*/
show: function() {
if (!this.opened && !this.opening) {
this.opening = true;
this.playAnimation('entry');
this.style.display = 'inline-block';
}
},
/**
* `hide` hides the dropdown menu.
*/
hide: function() {
if (!this.opening) {
this.opened = false;
this.style.display = '';
}
}
});
</script>