| OLD | NEW |
| (Empty) |
| 1 (function() { | |
| 2 'use strict'; | |
| 3 | |
| 4 var config = { | |
| 5 ANIMATION_CUBIC_BEZIER: 'cubic-bezier(.3,.95,.5,1)', | |
| 6 MAX_ANIMATION_TIME_MS: 400 | |
| 7 }; | |
| 8 | |
| 9 var PaperMenuButton = Polymer({ | |
| 10 is: 'paper-menu-button', | |
| 11 | |
| 12 /** | |
| 13 * Fired when the dropdown opens. | |
| 14 * | |
| 15 * @event paper-dropdown-open | |
| 16 */ | |
| 17 | |
| 18 /** | |
| 19 * Fired when the dropdown closes. | |
| 20 * | |
| 21 * @event paper-dropdown-close | |
| 22 */ | |
| 23 | |
| 24 behaviors: [ | |
| 25 Polymer.IronA11yKeysBehavior, | |
| 26 Polymer.IronControlState | |
| 27 ], | |
| 28 | |
| 29 properties: { | |
| 30 /** | |
| 31 * True if the content is currently displayed. | |
| 32 */ | |
| 33 opened: { | |
| 34 type: Boolean, | |
| 35 value: false, | |
| 36 notify: true, | |
| 37 observer: '_openedChanged' | |
| 38 }, | |
| 39 | |
| 40 /** | |
| 41 * The orientation against which to align the menu dropdown | |
| 42 * horizontally relative to the dropdown trigger. | |
| 43 */ | |
| 44 horizontalAlign: { | |
| 45 type: String, | |
| 46 value: 'left', | |
| 47 reflectToAttribute: true | |
| 48 }, | |
| 49 | |
| 50 /** | |
| 51 * The orientation against which to align the menu dropdown | |
| 52 * vertically relative to the dropdown trigger. | |
| 53 */ | |
| 54 verticalAlign: { | |
| 55 type: String, | |
| 56 value: 'top', | |
| 57 reflectToAttribute: true | |
| 58 }, | |
| 59 | |
| 60 /** | |
| 61 * If true, the `horizontalAlign` and `verticalAlign` properties will | |
| 62 * be considered preferences instead of strict requirements when | |
| 63 * positioning the dropdown and may be changed if doing so reduces | |
| 64 * the area of the dropdown falling outside of `fitInto`. | |
| 65 */ | |
| 66 dynamicAlign: { | |
| 67 type: Boolean | |
| 68 }, | |
| 69 | |
| 70 /** | |
| 71 * A pixel value that will be added to the position calculated for the | |
| 72 * given `horizontalAlign`. Use a negative value to offset to the | |
| 73 * left, or a positive value to offset to the right. | |
| 74 */ | |
| 75 horizontalOffset: { | |
| 76 type: Number, | |
| 77 value: 0, | |
| 78 notify: true | |
| 79 }, | |
| 80 | |
| 81 /** | |
| 82 * A pixel value that will be added to the position calculated for the | |
| 83 * given `verticalAlign`. Use a negative value to offset towards the | |
| 84 * top, or a positive value to offset towards the bottom. | |
| 85 */ | |
| 86 verticalOffset: { | |
| 87 type: Number, | |
| 88 value: 0, | |
| 89 notify: true | |
| 90 }, | |
| 91 | |
| 92 /** | |
| 93 * If true, the dropdown will be positioned so that it doesn't overlap | |
| 94 * the button. | |
| 95 */ | |
| 96 noOverlap: { | |
| 97 type: Boolean | |
| 98 }, | |
| 99 | |
| 100 /** | |
| 101 * Set to true to disable animations when opening and closing the | |
| 102 * dropdown. | |
| 103 */ | |
| 104 noAnimations: { | |
| 105 type: Boolean, | |
| 106 value: false | |
| 107 }, | |
| 108 | |
| 109 /** | |
| 110 * Set to true to disable automatically closing the dropdown after | |
| 111 * a selection has been made. | |
| 112 */ | |
| 113 ignoreSelect: { | |
| 114 type: Boolean, | |
| 115 value: false | |
| 116 }, | |
| 117 | |
| 118 /** | |
| 119 * Set to true to enable automatically closing the dropdown after an | |
| 120 * item has been activated, even if the selection did not change. | |
| 121 */ | |
| 122 closeOnActivate: { | |
| 123 type: Boolean, | |
| 124 value: false | |
| 125 }, | |
| 126 | |
| 127 /** | |
| 128 * An animation config. If provided, this will be used to animate the | |
| 129 * opening of the dropdown. | |
| 130 */ | |
| 131 openAnimationConfig: { | |
| 132 type: Object, | |
| 133 value: function() { | |
| 134 return [{ | |
| 135 name: 'fade-in-animation', | |
| 136 timing: { | |
| 137 delay: 100, | |
| 138 duration: 200 | |
| 139 } | |
| 140 }, { | |
| 141 name: 'paper-menu-grow-width-animation', | |
| 142 timing: { | |
| 143 delay: 100, | |
| 144 duration: 150, | |
| 145 easing: config.ANIMATION_CUBIC_BEZIER | |
| 146 } | |
| 147 }, { | |
| 148 name: 'paper-menu-grow-height-animation', | |
| 149 timing: { | |
| 150 delay: 100, | |
| 151 duration: 275, | |
| 152 easing: config.ANIMATION_CUBIC_BEZIER | |
| 153 } | |
| 154 }]; | |
| 155 } | |
| 156 }, | |
| 157 | |
| 158 /** | |
| 159 * An animation config. If provided, this will be used to animate the | |
| 160 * closing of the dropdown. | |
| 161 */ | |
| 162 closeAnimationConfig: { | |
| 163 type: Object, | |
| 164 value: function() { | |
| 165 return [{ | |
| 166 name: 'fade-out-animation', | |
| 167 timing: { | |
| 168 duration: 150 | |
| 169 } | |
| 170 }, { | |
| 171 name: 'paper-menu-shrink-width-animation', | |
| 172 timing: { | |
| 173 delay: 100, | |
| 174 duration: 50, | |
| 175 easing: config.ANIMATION_CUBIC_BEZIER | |
| 176 } | |
| 177 }, { | |
| 178 name: 'paper-menu-shrink-height-animation', | |
| 179 timing: { | |
| 180 duration: 200, | |
| 181 easing: 'ease-in' | |
| 182 } | |
| 183 }]; | |
| 184 } | |
| 185 }, | |
| 186 | |
| 187 /** | |
| 188 * By default, the dropdown will constrain scrolling on the page | |
| 189 * to itself when opened. | |
| 190 * Set to true in order to prevent scroll from being constrained | |
| 191 * to the dropdown when it opens. | |
| 192 */ | |
| 193 allowOutsideScroll: { | |
| 194 type: Boolean, | |
| 195 value: false | |
| 196 }, | |
| 197 | |
| 198 /** | |
| 199 * Whether focus should be restored to the button when the menu closes
. | |
| 200 */ | |
| 201 restoreFocusOnClose: { | |
| 202 type: Boolean, | |
| 203 value: true | |
| 204 }, | |
| 205 | |
| 206 /** | |
| 207 * This is the element intended to be bound as the focus target | |
| 208 * for the `iron-dropdown` contained by `paper-menu-button`. | |
| 209 */ | |
| 210 _dropdownContent: { | |
| 211 type: Object | |
| 212 } | |
| 213 }, | |
| 214 | |
| 215 hostAttributes: { | |
| 216 role: 'group', | |
| 217 'aria-haspopup': 'true' | |
| 218 }, | |
| 219 | |
| 220 listeners: { | |
| 221 'iron-activate': '_onIronActivate', | |
| 222 'iron-select': '_onIronSelect' | |
| 223 }, | |
| 224 | |
| 225 /** | |
| 226 * The content element that is contained by the menu button, if any. | |
| 227 */ | |
| 228 get contentElement() { | |
| 229 return Polymer.dom(this.$.content).getDistributedNodes()[0]; | |
| 230 }, | |
| 231 | |
| 232 /** | |
| 233 * Toggles the drowpdown content between opened and closed. | |
| 234 */ | |
| 235 toggle: function() { | |
| 236 if (this.opened) { | |
| 237 this.close(); | |
| 238 } else { | |
| 239 this.open(); | |
| 240 } | |
| 241 }, | |
| 242 | |
| 243 /** | |
| 244 * Make the dropdown content appear as an overlay positioned relative | |
| 245 * to the dropdown trigger. | |
| 246 */ | |
| 247 open: function() { | |
| 248 if (this.disabled) { | |
| 249 return; | |
| 250 } | |
| 251 | |
| 252 this.$.dropdown.open(); | |
| 253 }, | |
| 254 | |
| 255 /** | |
| 256 * Hide the dropdown content. | |
| 257 */ | |
| 258 close: function() { | |
| 259 this.$.dropdown.close(); | |
| 260 }, | |
| 261 | |
| 262 /** | |
| 263 * When an `iron-select` event is received, the dropdown should | |
| 264 * automatically close on the assumption that a value has been chosen. | |
| 265 * | |
| 266 * @param {CustomEvent} event A CustomEvent instance with type | |
| 267 * set to `"iron-select"`. | |
| 268 */ | |
| 269 _onIronSelect: function(event) { | |
| 270 if (!this.ignoreSelect) { | |
| 271 this.close(); | |
| 272 } | |
| 273 }, | |
| 274 | |
| 275 /** | |
| 276 * Closes the dropdown when an `iron-activate` event is received if | |
| 277 * `closeOnActivate` is true. | |
| 278 * | |
| 279 * @param {CustomEvent} event A CustomEvent of type 'iron-activate'. | |
| 280 */ | |
| 281 _onIronActivate: function(event) { | |
| 282 if (this.closeOnActivate) { | |
| 283 this.close(); | |
| 284 } | |
| 285 }, | |
| 286 | |
| 287 /** | |
| 288 * When the dropdown opens, the `paper-menu-button` fires `paper-open`. | |
| 289 * When the dropdown closes, the `paper-menu-button` fires `paper-close`
. | |
| 290 * | |
| 291 * @param {boolean} opened True if the dropdown is opened, otherwise fal
se. | |
| 292 * @param {boolean} oldOpened The previous value of `opened`. | |
| 293 */ | |
| 294 _openedChanged: function(opened, oldOpened) { | |
| 295 if (opened) { | |
| 296 // TODO(cdata): Update this when we can measure changes in distribut
ed | |
| 297 // children in an idiomatic way. | |
| 298 // We poke this property in case the element has changed. This will | |
| 299 // cause the focus target for the `iron-dropdown` to be updated as | |
| 300 // necessary: | |
| 301 this._dropdownContent = this.contentElement; | |
| 302 this.fire('paper-dropdown-open'); | |
| 303 } else if (oldOpened != null) { | |
| 304 this.fire('paper-dropdown-close'); | |
| 305 } | |
| 306 }, | |
| 307 | |
| 308 /** | |
| 309 * If the dropdown is open when disabled becomes true, close the | |
| 310 * dropdown. | |
| 311 * | |
| 312 * @param {boolean} disabled True if disabled, otherwise false. | |
| 313 */ | |
| 314 _disabledChanged: function(disabled) { | |
| 315 Polymer.IronControlState._disabledChanged.apply(this, arguments); | |
| 316 if (disabled && this.opened) { | |
| 317 this.close(); | |
| 318 } | |
| 319 }, | |
| 320 | |
| 321 __onIronOverlayCanceled: function(event) { | |
| 322 var uiEvent = event.detail; | |
| 323 var target = Polymer.dom(uiEvent).rootTarget; | |
| 324 var trigger = this.$.trigger; | |
| 325 var path = Polymer.dom(uiEvent).path; | |
| 326 | |
| 327 if (path.indexOf(trigger) > -1) { | |
| 328 event.preventDefault(); | |
| 329 } | |
| 330 } | |
| 331 }); | |
| 332 | |
| 333 Object.keys(config).forEach(function (key) { | |
| 334 PaperMenuButton[key] = config[key]; | |
| 335 }); | |
| 336 | |
| 337 Polymer.PaperMenuButton = PaperMenuButton; | |
| 338 })(); | |
| OLD | NEW |