| OLD | NEW |
| 1 (function() { | 1 (function() { |
| 2 'use strict'; | 2 'use strict'; |
| 3 | 3 |
| 4 Polymer({ | 4 Polymer({ |
| 5 is: 'iron-dropdown', | 5 is: 'iron-dropdown', |
| 6 | 6 |
| 7 behaviors: [ | 7 behaviors: [ |
| 8 Polymer.IronControlState, | 8 Polymer.IronControlState, |
| 9 Polymer.IronA11yKeysBehavior, | 9 Polymer.IronA11yKeysBehavior, |
| 10 Polymer.IronOverlayBehavior, | 10 Polymer.IronOverlayBehavior, |
| (...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 95 }, | 95 }, |
| 96 | 96 |
| 97 /** | 97 /** |
| 98 * The element that should be focused when the dropdown opens. | 98 * The element that should be focused when the dropdown opens. |
| 99 * @deprecated | 99 * @deprecated |
| 100 */ | 100 */ |
| 101 get _focusTarget() { | 101 get _focusTarget() { |
| 102 return this.focusTarget || this.containedElement; | 102 return this.focusTarget || this.containedElement; |
| 103 }, | 103 }, |
| 104 | 104 |
| 105 detached: function() { |
| 106 this.cancelAnimation(); |
| 107 Polymer.IronDropdownScrollManager.removeScrollLock(this); |
| 108 }, |
| 109 |
| 105 /** | 110 /** |
| 106 * Called when the value of `opened` changes. | 111 * Called when the value of `opened` changes. |
| 107 * Overridden from `IronOverlayBehavior` | 112 * Overridden from `IronOverlayBehavior` |
| 108 */ | 113 */ |
| 109 _openedChanged: function() { | 114 _openedChanged: function() { |
| 110 if (this.opened && this.disabled) { | 115 if (this.opened && this.disabled) { |
| 111 this.cancel(); | 116 this.cancel(); |
| 112 } else { | 117 } else { |
| 113 this.cancelAnimation(); | 118 this.cancelAnimation(); |
| 114 this.sizingTarget = this.containedElement || this.sizingTarget; | 119 this.sizingTarget = this.containedElement || this.sizingTarget; |
| 115 this._updateAnimationConfig(); | 120 this._updateAnimationConfig(); |
| 116 if (this.opened && !this.allowOutsideScroll) { | 121 if (this.opened && !this.allowOutsideScroll) { |
| 117 Polymer.IronDropdownScrollManager.pushScrollLock(this); | 122 Polymer.IronDropdownScrollManager.pushScrollLock(this); |
| 118 } else { | 123 } else { |
| 119 Polymer.IronDropdownScrollManager.removeScrollLock(this); | 124 Polymer.IronDropdownScrollManager.removeScrollLock(this); |
| 120 } | 125 } |
| 121 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); | 126 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); |
| 122 } | 127 } |
| 123 }, | 128 }, |
| 124 | 129 |
| 125 /** | 130 /** |
| 126 * Overridden from `IronOverlayBehavior`. | 131 * Overridden from `IronOverlayBehavior`. |
| 127 */ | 132 */ |
| 128 _renderOpened: function() { | 133 _renderOpened: function() { |
| 129 if (!this.noAnimations && this.animationConfig && this.animationConfig
.open) { | 134 if (!this.noAnimations && this.animationConfig.open) { |
| 130 if (this.withBackdrop) { | |
| 131 this.backdropElement.open(); | |
| 132 } | |
| 133 this.$.contentWrapper.classList.add('animating'); | 135 this.$.contentWrapper.classList.add('animating'); |
| 134 this.playAnimation('open'); | 136 this.playAnimation('open'); |
| 135 } else { | 137 } else { |
| 136 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments)
; | 138 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments)
; |
| 137 } | 139 } |
| 138 }, | 140 }, |
| 139 | 141 |
| 140 /** | 142 /** |
| 141 * Overridden from `IronOverlayBehavior`. | 143 * Overridden from `IronOverlayBehavior`. |
| 142 */ | 144 */ |
| 143 _renderClosed: function() { | 145 _renderClosed: function() { |
| 144 if (!this.noAnimations && this.animationConfig && this.animationConfig
.close) { | 146 if (!this.noAnimations && this.animationConfig.close) { |
| 145 if (this.withBackdrop) { | |
| 146 this.backdropElement.close(); | |
| 147 } | |
| 148 this.$.contentWrapper.classList.add('animating'); | 147 this.$.contentWrapper.classList.add('animating'); |
| 149 this.playAnimation('close'); | 148 this.playAnimation('close'); |
| 150 } else { | 149 } else { |
| 151 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments)
; | 150 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments)
; |
| 152 } | 151 } |
| 153 }, | 152 }, |
| 154 | 153 |
| 155 /** | 154 /** |
| 156 * Called when animation finishes on the dropdown (when opening or | 155 * Called when animation finishes on the dropdown (when opening or |
| 157 * closing). Responsible for "completing" the process of opening or | 156 * closing). Responsible for "completing" the process of opening or |
| 158 * closing the dropdown by positioning it or setting its display to | 157 * closing the dropdown by positioning it or setting its display to |
| 159 * none. | 158 * none. |
| 160 */ | 159 */ |
| 161 _onNeonAnimationFinish: function() { | 160 _onNeonAnimationFinish: function() { |
| 162 this.$.contentWrapper.classList.remove('animating'); | 161 this.$.contentWrapper.classList.remove('animating'); |
| 163 if (this.opened) { | 162 if (this.opened) { |
| 164 Polymer.IronOverlayBehaviorImpl._finishRenderOpened.apply(this); | 163 this._finishRenderOpened(); |
| 165 } else { | 164 } else { |
| 166 Polymer.IronOverlayBehaviorImpl._finishRenderClosed.apply(this); | 165 this._finishRenderClosed(); |
| 167 } | 166 } |
| 168 }, | 167 }, |
| 169 | 168 |
| 170 /** | 169 /** |
| 171 * Constructs the final animation config from different properties used | 170 * Constructs the final animation config from different properties used |
| 172 * to configure specific parts of the opening and closing animations. | 171 * to configure specific parts of the opening and closing animations. |
| 173 */ | 172 */ |
| 174 _updateAnimationConfig: function() { | 173 _updateAnimationConfig: function() { |
| 175 var animationConfig = {}; | 174 var animations = (this.openAnimationConfig || []).concat(this.closeAni
mationConfig || []); |
| 176 var animations = []; | 175 for (var i = 0; i < animations.length; i++) { |
| 177 | 176 animations[i].node = this.containedElement; |
| 178 if (this.openAnimationConfig) { | |
| 179 // NOTE(cdata): When making `display:none` elements visible in Safar
i, | |
| 180 // the element will paint once in a fully visible state, causing the | |
| 181 // dropdown to flash before it fades in. We prepend an | |
| 182 // `opaque-animation` to fix this problem: | |
| 183 animationConfig.open = [{ | |
| 184 name: 'opaque-animation', | |
| 185 }].concat(this.openAnimationConfig); | |
| 186 animations = animations.concat(animationConfig.open); | |
| 187 } | 177 } |
| 188 | 178 this.animationConfig = { |
| 189 if (this.closeAnimationConfig) { | 179 open: this.openAnimationConfig, |
| 190 animationConfig.close = this.closeAnimationConfig; | 180 close: this.closeAnimationConfig |
| 191 animations = animations.concat(animationConfig.close); | 181 }; |
| 192 } | |
| 193 | |
| 194 animations.forEach(function(animation) { | |
| 195 animation.node = this.containedElement; | |
| 196 }, this); | |
| 197 | |
| 198 this.animationConfig = animationConfig; | |
| 199 }, | 182 }, |
| 200 | 183 |
| 201 /** | 184 /** |
| 202 * Updates the overlay position based on configured horizontal | 185 * Updates the overlay position based on configured horizontal |
| 203 * and vertical alignment. | 186 * and vertical alignment. |
| 204 */ | 187 */ |
| 205 _updateOverlayPosition: function() { | 188 _updateOverlayPosition: function() { |
| 206 if (this.isAttached) { | 189 if (this.isAttached) { |
| 207 // This triggers iron-resize, and iron-overlay-behavior will call re
fit if needed. | 190 // This triggers iron-resize, and iron-overlay-behavior will call re
fit if needed. |
| 208 this.notifyResize(); | 191 this.notifyResize(); |
| 209 } | 192 } |
| 210 }, | 193 }, |
| 211 | 194 |
| 212 /** | 195 /** |
| 213 * Useful to call this after the element, the window, or the `fitInfo` | |
| 214 * element has been resized. Will maintain the scroll position. | |
| 215 */ | |
| 216 refit: function () { | |
| 217 if (!this.opened) { | |
| 218 return | |
| 219 } | |
| 220 var containedElement = this.containedElement; | |
| 221 var scrollTop; | |
| 222 var scrollLeft; | |
| 223 | |
| 224 if (containedElement) { | |
| 225 scrollTop = containedElement.scrollTop; | |
| 226 scrollLeft = containedElement.scrollLeft; | |
| 227 } | |
| 228 Polymer.IronFitBehavior.refit.apply(this, arguments); | |
| 229 | |
| 230 if (containedElement) { | |
| 231 containedElement.scrollTop = scrollTop; | |
| 232 containedElement.scrollLeft = scrollLeft; | |
| 233 } | |
| 234 }, | |
| 235 | |
| 236 /** | |
| 237 * Apply focus to focusTarget or containedElement | 196 * Apply focus to focusTarget or containedElement |
| 238 */ | 197 */ |
| 239 _applyFocus: function () { | 198 _applyFocus: function () { |
| 240 var focusTarget = this.focusTarget || this.containedElement; | 199 var focusTarget = this.focusTarget || this.containedElement; |
| 241 if (focusTarget && this.opened && !this.noAutoFocus) { | 200 if (focusTarget && this.opened && !this.noAutoFocus) { |
| 242 focusTarget.focus(); | 201 focusTarget.focus(); |
| 243 } else { | 202 } else { |
| 244 Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments); | 203 Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments); |
| 245 } | 204 } |
| 246 } | 205 } |
| 247 }); | 206 }); |
| 248 })(); | 207 })(); |
| OLD | NEW |