| OLD | NEW |
| 1 (function() { | 1 (function() { |
| 2 'use strict'; | 2 'use strict'; |
| 3 | 3 |
| 4 var PaperMenuButton = Polymer({ | 4 var PaperMenuButton = Polymer({ |
| 5 is: 'paper-menu-button', | 5 is: 'paper-menu-button', |
| 6 | 6 |
| 7 /** | 7 /** |
| 8 * Fired when the dropdown opens. | 8 * Fired when the dropdown opens. |
| 9 * | 9 * |
| 10 * @event paper-dropdown-open | 10 * @event paper-dropdown-open |
| (...skipping 11 matching lines...) Expand all Loading... |
| 22 ], | 22 ], |
| 23 | 23 |
| 24 properties: { | 24 properties: { |
| 25 | 25 |
| 26 /** | 26 /** |
| 27 * True if the content is currently displayed. | 27 * True if the content is currently displayed. |
| 28 */ | 28 */ |
| 29 opened: { | 29 opened: { |
| 30 type: Boolean, | 30 type: Boolean, |
| 31 value: false, | 31 value: false, |
| 32 notify: true | 32 notify: true, |
| 33 observer: '_openedChanged' |
| 33 }, | 34 }, |
| 34 | 35 |
| 35 /** | 36 /** |
| 36 * The orientation against which to align the menu dropdown | 37 * The orientation against which to align the menu dropdown |
| 37 * horizontally relative to the dropdown trigger. | 38 * horizontally relative to the dropdown trigger. |
| 38 */ | 39 */ |
| 39 horizontalAlign: { | 40 horizontalAlign: { |
| 40 type: String, | 41 type: String, |
| 41 value: 'left', | 42 value: 'left', |
| 42 reflectToAttribute: true | 43 reflectToAttribute: true |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 80 */ | 81 */ |
| 81 noAnimations: { | 82 noAnimations: { |
| 82 type: Boolean, | 83 type: Boolean, |
| 83 value: false | 84 value: false |
| 84 }, | 85 }, |
| 85 | 86 |
| 86 /** | 87 /** |
| 87 * Set to true to disable automatically closing the dropdown after | 88 * Set to true to disable automatically closing the dropdown after |
| 88 * a selection has been made. | 89 * a selection has been made. |
| 89 */ | 90 */ |
| 90 ignoreActivate: { | 91 ignoreSelect: { |
| 91 type: Boolean, | 92 type: Boolean, |
| 92 value: false | 93 value: false |
| 93 }, | 94 }, |
| 94 | 95 |
| 95 /** | 96 /** |
| 96 * An animation config. If provided, this will be used to animate the | 97 * An animation config. If provided, this will be used to animate the |
| 97 * opening of the dropdown. | 98 * opening of the dropdown. |
| 98 */ | 99 */ |
| 99 openAnimationConfig: { | 100 openAnimationConfig: { |
| 100 type: Object, | 101 type: Object, |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 143 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER | 144 easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER |
| 144 } | 145 } |
| 145 }, { | 146 }, { |
| 146 name: 'paper-menu-shrink-height-animation', | 147 name: 'paper-menu-shrink-height-animation', |
| 147 timing: { | 148 timing: { |
| 148 duration: 200, | 149 duration: 200, |
| 149 easing: 'ease-in' | 150 easing: 'ease-in' |
| 150 } | 151 } |
| 151 }]; | 152 }]; |
| 152 } | 153 } |
| 154 }, |
| 155 |
| 156 /** |
| 157 * This is the element intended to be bound as the focus target |
| 158 * for the `iron-dropdown` contained by `paper-menu-button`. |
| 159 */ |
| 160 _dropdownContent: { |
| 161 type: Object |
| 153 } | 162 } |
| 154 }, | 163 }, |
| 155 | 164 |
| 156 hostAttributes: { | 165 hostAttributes: { |
| 157 role: 'group', | 166 role: 'group', |
| 158 'aria-haspopup': 'true' | 167 'aria-haspopup': 'true' |
| 159 }, | 168 }, |
| 160 | 169 |
| 161 listeners: { | 170 listeners: { |
| 162 'iron-activate': '_onIronActivate' | 171 'iron-select': '_onIronSelect' |
| 163 }, | 172 }, |
| 164 | 173 |
| 165 /** | 174 /** |
| 175 * The content element that is contained by the menu button, if any. |
| 176 */ |
| 177 get contentElement() { |
| 178 return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
| 179 }, |
| 180 |
| 181 /** |
| 166 * Make the dropdown content appear as an overlay positioned relative | 182 * Make the dropdown content appear as an overlay positioned relative |
| 167 * to the dropdown trigger. | 183 * to the dropdown trigger. |
| 168 */ | 184 */ |
| 169 open: function() { | 185 open: function() { |
| 170 if (this.disabled) { | 186 if (this.disabled) { |
| 171 return; | 187 return; |
| 172 } | 188 } |
| 173 | 189 |
| 174 this.$.dropdown.open(); | 190 this.$.dropdown.open(); |
| 175 }, | 191 }, |
| 176 | 192 |
| 177 /** | 193 /** |
| 178 * Hide the dropdown content. | 194 * Hide the dropdown content. |
| 179 */ | 195 */ |
| 180 close: function() { | 196 close: function() { |
| 181 this.$.dropdown.close(); | 197 this.$.dropdown.close(); |
| 182 }, | 198 }, |
| 183 | 199 |
| 184 /** | 200 /** |
| 185 * When an `iron-activate` event is received, the dropdown should | 201 * When an `iron-select` event is received, the dropdown should |
| 186 * automatically close on the assumption that a value has been chosen. | 202 * automatically close on the assumption that a value has been chosen. |
| 187 * | 203 * |
| 188 * @param {CustomEvent} event A CustomEvent instance with type | 204 * @param {CustomEvent} event A CustomEvent instance with type |
| 189 * set to `"iron-activate"`. | 205 * set to `"iron-select"`. |
| 190 */ | 206 */ |
| 191 _onIronActivate: function(event) { | 207 _onIronSelect: function(event) { |
| 192 if (!this.ignoreActivate) { | 208 if (!this.ignoreSelect) { |
| 193 this.close(); | 209 this.close(); |
| 194 } | 210 } |
| 195 }, | 211 }, |
| 196 | 212 |
| 197 /** | 213 /** |
| 198 * When the dropdown opens, the `paper-menu-button` fires `paper-open`. | 214 * When the dropdown opens, the `paper-menu-button` fires `paper-open`. |
| 199 * When the dropdown closes, the `paper-menu-button` fires `paper-close`. | 215 * When the dropdown closes, the `paper-menu-button` fires `paper-close`. |
| 200 * | 216 * |
| 201 * @param {boolean} opened True if the dropdown is opened, otherwise false
. | 217 * @param {boolean} opened True if the dropdown is opened, otherwise false
. |
| 202 * @param {boolean} oldOpened The previous value of `opened`. | 218 * @param {boolean} oldOpened The previous value of `opened`. |
| 203 */ | 219 */ |
| 204 _openedChanged: function(opened, oldOpened) { | 220 _openedChanged: function(opened, oldOpened) { |
| 205 if (opened) { | 221 if (opened) { |
| 222 // TODO(cdata): Update this when we can measure changes in distributed |
| 223 // children in an idiomatic way. |
| 224 // We poke this property in case the element has changed. This will |
| 225 // cause the focus target for the `iron-dropdown` to be updated as |
| 226 // necessary: |
| 227 this._dropdownContent = this.contentElement; |
| 206 this.fire('paper-dropdown-open'); | 228 this.fire('paper-dropdown-open'); |
| 207 } else if (oldOpened != null) { | 229 } else if (oldOpened != null) { |
| 208 this.fire('paper-dropdown-close'); | 230 this.fire('paper-dropdown-close'); |
| 209 } | 231 } |
| 210 }, | 232 }, |
| 211 | 233 |
| 212 /** | 234 /** |
| 213 * If the dropdown is open when disabled becomes true, close the | 235 * If the dropdown is open when disabled becomes true, close the |
| 214 * dropdown. | 236 * dropdown. |
| 215 * | 237 * |
| 216 * @param {boolean} disabled True if disabled, otherwise false. | 238 * @param {boolean} disabled True if disabled, otherwise false. |
| 217 */ | 239 */ |
| 218 _disabledChanged: function(disabled) { | 240 _disabledChanged: function(disabled) { |
| 219 Polymer.IronControlState._disabledChanged.apply(this, arguments); | 241 Polymer.IronControlState._disabledChanged.apply(this, arguments); |
| 220 if (disabled && this.opened) { | 242 if (disabled && this.opened) { |
| 221 this.close(); | 243 this.close(); |
| 222 } | 244 } |
| 223 } | 245 } |
| 224 }); | 246 }); |
| 225 | 247 |
| 226 PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)'; | 248 PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)'; |
| 227 PaperMenuButton.MAX_ANIMATION_TIME_MS = 400; | 249 PaperMenuButton.MAX_ANIMATION_TIME_MS = 400; |
| 228 | 250 |
| 229 Polymer.PaperMenuButton = PaperMenuButton; | 251 Polymer.PaperMenuButton = PaperMenuButton; |
| 230 })(); | 252 })(); |
| OLD | NEW |