| OLD | NEW |
| 1 (function() { | 1 (function() { |
| 2 'use strict'; | 2 'use strict'; |
| 3 | 3 |
| 4 Polymer({ | 4 Polymer({ |
| 5 is: 'paper-dropdown-menu', | 5 is: 'paper-dropdown-menu', |
| 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 18 matching lines...) Expand all Loading... |
| 29 */ | 29 */ |
| 30 selectedItemLabel: { | 30 selectedItemLabel: { |
| 31 type: String, | 31 type: String, |
| 32 notify: true, | 32 notify: true, |
| 33 computed: '_computeSelectedItemLabel(selectedItem)' | 33 computed: '_computeSelectedItemLabel(selectedItem)' |
| 34 }, | 34 }, |
| 35 | 35 |
| 36 /** | 36 /** |
| 37 * The last selected item. An item is selected if the dropdown menu has | 37 * The last selected item. An item is selected if the dropdown menu has |
| 38 * a child with class `dropdown-content`, and that child triggers an | 38 * a child with class `dropdown-content`, and that child triggers an |
| 39 * `iron-activate` event with the selected `item` in the `detail`. | 39 * `iron-select` event with the selected `item` in the `detail`. |
| 40 */ | 40 */ |
| 41 selectedItem: { | 41 selectedItem: { |
| 42 type: Object, | 42 type: Object, |
| 43 notify: true, | 43 notify: true, |
| 44 readOnly: true | 44 readOnly: true |
| 45 }, | 45 }, |
| 46 | 46 |
| 47 /** | 47 /** |
| 48 * The label for the dropdown. | 48 * The label for the dropdown. |
| 49 */ | 49 */ |
| (...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 103 keyBindings: { | 103 keyBindings: { |
| 104 'up down': 'open', | 104 'up down': 'open', |
| 105 'esc': 'close' | 105 'esc': 'close' |
| 106 }, | 106 }, |
| 107 | 107 |
| 108 hostAttributes: { | 108 hostAttributes: { |
| 109 role: 'group', | 109 role: 'group', |
| 110 'aria-haspopup': 'true' | 110 'aria-haspopup': 'true' |
| 111 }, | 111 }, |
| 112 | 112 |
| 113 attached: function() { |
| 114 // NOTE(cdata): Due to timing, a preselected value in a `IronSelectable` |
| 115 // child will cause an `iron-select` event to fire while the element is |
| 116 // still in a `DocumentFragment`. This has the effect of causing |
| 117 // handlers not to fire. So, we double check this value on attached: |
| 118 var contentElement = this.contentElement; |
| 119 if (contentElement && contentElement.selectedItem) { |
| 120 this._setSelectedItem(contentElement.selectedItem); |
| 121 } |
| 122 }, |
| 123 |
| 124 /** |
| 125 * The content element that is contained by the dropdown menu, if any. |
| 126 */ |
| 127 get contentElement() { |
| 128 return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
| 129 }, |
| 130 |
| 113 /** | 131 /** |
| 114 * Show the dropdown content. | 132 * Show the dropdown content. |
| 115 */ | 133 */ |
| 116 open: function() { | 134 open: function() { |
| 117 this.$.menuButton.open(); | 135 this.$.menuButton.open(); |
| 118 }, | 136 }, |
| 119 | 137 |
| 120 /** | 138 /** |
| 121 * Hide the dropdown content. | 139 * Hide the dropdown content. |
| 122 */ | 140 */ |
| 123 close: function() { | 141 close: function() { |
| 124 this.$.menuButton.close(); | 142 this.$.menuButton.close(); |
| 125 }, | 143 }, |
| 126 | 144 |
| 127 /** | 145 /** |
| 128 * A handler that is called when `iron-activate` is fired. | 146 * A handler that is called when `iron-select` is fired. |
| 129 * | 147 * |
| 130 * @param {CustomEvent} event An `iron-activate` event. | 148 * @param {CustomEvent} event An `iron-select` event. |
| 131 */ | 149 */ |
| 132 _onIronActivate: function(event) { | 150 _onIronSelect: function(event) { |
| 133 this._setSelectedItem(event.detail.item); | 151 this._setSelectedItem(event.detail.item); |
| 134 }, | 152 }, |
| 135 | 153 |
| 136 /** | 154 /** |
| 137 * A handler that is called when the dropdown is tapped. | 155 * A handler that is called when the dropdown is tapped. |
| 138 * | 156 * |
| 139 * @param {CustomEvent} event A tap event. | 157 * @param {CustomEvent} event A tap event. |
| 140 */ | 158 */ |
| 141 _onTap: function(event) { | 159 _onTap: function(event) { |
| 142 if (Polymer.Gestures.findOriginalTarget(event) === this) { | 160 if (Polymer.Gestures.findOriginalTarget(event) === this) { |
| (...skipping 24 matching lines...) Expand all Loading... |
| 167 */ | 185 */ |
| 168 _computeMenuVerticalOffset: function(noLabelFloat) { | 186 _computeMenuVerticalOffset: function(noLabelFloat) { |
| 169 // NOTE(cdata): These numbers are somewhat magical because they are | 187 // NOTE(cdata): These numbers are somewhat magical because they are |
| 170 // derived from the metrics of elements internal to `paper-input`'s | 188 // derived from the metrics of elements internal to `paper-input`'s |
| 171 // template. The metrics will change depending on whether or not the | 189 // template. The metrics will change depending on whether or not the |
| 172 // input has a floating label. | 190 // input has a floating label. |
| 173 return noLabelFloat ? -4 : 16; | 191 return noLabelFloat ? -4 : 16; |
| 174 } | 192 } |
| 175 }); | 193 }); |
| 176 })(); | 194 })(); |
| OLD | NEW |