OLD | NEW |
1 | 1 (function() { |
2 (function() { | |
3 'use strict'; | 2 'use strict'; |
4 | 3 |
5 var PaperMenuButton = Polymer({ | 4 var PaperMenuButton = Polymer({ |
| 5 is: 'paper-menu-button', |
6 | 6 |
7 is: 'paper-menu-button', | 7 /** |
| 8 * Fired when the dropdown opens. |
| 9 * |
| 10 * @event paper-dropdown-open |
| 11 */ |
| 12 |
| 13 /** |
| 14 * Fired when the dropdown closes. |
| 15 * |
| 16 * @event paper-dropdown-close |
| 17 */ |
8 | 18 |
9 behaviors: [ | 19 behaviors: [ |
10 Polymer.IronA11yKeysBehavior, | 20 Polymer.IronA11yKeysBehavior, |
11 Polymer.IronControlState | 21 Polymer.IronControlState |
12 ], | 22 ], |
13 | 23 |
14 properties: { | 24 properties: { |
15 | 25 |
16 /** | 26 /** |
17 * True if the content is currently displayed. | 27 * True if the content is currently displayed. |
(...skipping 18 matching lines...) Expand all Loading... |
36 * The orientation against which to align the menu dropdown | 46 * The orientation against which to align the menu dropdown |
37 * vertically relative to the dropdown trigger. | 47 * vertically relative to the dropdown trigger. |
38 */ | 48 */ |
39 verticalAlign: { | 49 verticalAlign: { |
40 type: String, | 50 type: String, |
41 value: 'top', | 51 value: 'top', |
42 reflectToAttribute: true | 52 reflectToAttribute: true |
43 }, | 53 }, |
44 | 54 |
45 /** | 55 /** |
| 56 * A pixel value that will be added to the position calculated for the |
| 57 * given `horizontalAlign`. Use a negative value to offset to the |
| 58 * left, or a positive value to offset to the right. |
| 59 */ |
| 60 horizontalOffset: { |
| 61 type: Number, |
| 62 value: 0, |
| 63 notify: true |
| 64 }, |
| 65 |
| 66 /** |
| 67 * A pixel value that will be added to the position calculated for the |
| 68 * given `verticalAlign`. Use a negative value to offset towards the |
| 69 * top, or a positive value to offset towards the bottom. |
| 70 */ |
| 71 verticalOffset: { |
| 72 type: Number, |
| 73 value: 0, |
| 74 notify: true |
| 75 }, |
| 76 |
| 77 /** |
46 * Set to true to disable animations when opening and closing the | 78 * Set to true to disable animations when opening and closing the |
47 * dropdown. | 79 * dropdown. |
48 */ | 80 */ |
49 noAnimations: { | 81 noAnimations: { |
50 type: Boolean, | 82 type: Boolean, |
51 value: false | 83 value: false |
52 }, | 84 }, |
53 | 85 |
54 /** | 86 /** |
| 87 * Set to true to disable automatically closing the dropdown after |
| 88 * a selection has been made. |
| 89 */ |
| 90 ignoreActivate: { |
| 91 type: Boolean, |
| 92 value: false |
| 93 }, |
| 94 |
| 95 /** |
55 * An animation config. If provided, this will be used to animate the | 96 * An animation config. If provided, this will be used to animate the |
56 * opening of the dropdown. | 97 * opening of the dropdown. |
57 */ | 98 */ |
58 openAnimationConfig: { | 99 openAnimationConfig: { |
59 type: Object, | 100 type: Object, |
60 value: function() { | 101 value: function() { |
61 return [{ | 102 return [{ |
62 name: 'fade-in-animation', | 103 name: 'fade-in-animation', |
63 timing: { | 104 timing: { |
64 delay: 100, | 105 delay: 100, |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
119 | 160 |
120 listeners: { | 161 listeners: { |
121 'iron-activate': '_onIronActivate' | 162 'iron-activate': '_onIronActivate' |
122 }, | 163 }, |
123 | 164 |
124 /** | 165 /** |
125 * Make the dropdown content appear as an overlay positioned relative | 166 * Make the dropdown content appear as an overlay positioned relative |
126 * to the dropdown trigger. | 167 * to the dropdown trigger. |
127 */ | 168 */ |
128 open: function() { | 169 open: function() { |
129 this.fire('paper-open'); | 170 if (this.disabled) { |
| 171 return; |
| 172 } |
| 173 |
130 this.$.dropdown.open(); | 174 this.$.dropdown.open(); |
131 }, | 175 }, |
132 | 176 |
133 /** | 177 /** |
134 * Hide the dropdown content. | 178 * Hide the dropdown content. |
135 */ | 179 */ |
136 close: function() { | 180 close: function() { |
137 this.fire('paper-close'); | |
138 this.$.dropdown.close(); | 181 this.$.dropdown.close(); |
139 }, | 182 }, |
140 | 183 |
| 184 /** |
| 185 * When an `iron-activate` event is received, the dropdown should |
| 186 * automatically close on the assumption that a value has been chosen. |
| 187 * |
| 188 * @param {CustomEvent} event A CustomEvent instance with type |
| 189 * set to `"iron-activate"`. |
| 190 */ |
141 _onIronActivate: function(event) { | 191 _onIronActivate: function(event) { |
142 this.close(); | 192 if (!this.ignoreActivate) { |
| 193 this.close(); |
| 194 } |
| 195 }, |
| 196 |
| 197 /** |
| 198 * When the dropdown opens, the `paper-menu-button` fires `paper-open`. |
| 199 * When the dropdown closes, the `paper-menu-button` fires `paper-close`. |
| 200 * |
| 201 * @param {boolean} opened True if the dropdown is opened, otherwise false
. |
| 202 * @param {boolean} oldOpened The previous value of `opened`. |
| 203 */ |
| 204 _openedChanged: function(opened, oldOpened) { |
| 205 if (opened) { |
| 206 this.fire('paper-dropdown-open'); |
| 207 } else if (oldOpened != null) { |
| 208 this.fire('paper-dropdown-close'); |
| 209 } |
| 210 }, |
| 211 |
| 212 /** |
| 213 * If the dropdown is open when disabled becomes true, close the |
| 214 * dropdown. |
| 215 * |
| 216 * @param {boolean} disabled True if disabled, otherwise false. |
| 217 */ |
| 218 _disabledChanged: function(disabled) { |
| 219 Polymer.IronControlState._disabledChanged.apply(this, arguments); |
| 220 if (disabled && this.opened) { |
| 221 this.close(); |
| 222 } |
143 } | 223 } |
144 }); | 224 }); |
145 | 225 |
146 PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)'; | 226 PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)'; |
147 PaperMenuButton.MAX_ANIMATION_TIME_MS = 400; | 227 PaperMenuButton.MAX_ANIMATION_TIME_MS = 400; |
148 | 228 |
149 Polymer.PaperMenuButton = PaperMenuButton; | 229 Polymer.PaperMenuButton = PaperMenuButton; |
150 })(); | 230 })(); |
OLD | NEW |