| 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 116 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 127 | 127 |
| 128 listeners: { | 128 listeners: { |
| 129 'neon-animation-finish': '_onNeonAnimationFinish' | 129 'neon-animation-finish': '_onNeonAnimationFinish' |
| 130 }, | 130 }, |
| 131 | 131 |
| 132 observers: [ | 132 observers: [ |
| 133 '_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign
, verticalOffset, horizontalOffset)' | 133 '_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign
, verticalOffset, horizontalOffset)' |
| 134 ], | 134 ], |
| 135 | 135 |
| 136 attached: function() { | 136 attached: function() { |
| 137 this.positionTarget = this.positionTarget || this._defaultPositionTarg
et; | |
| 138 // Memoize this to avoid expensive calculations & relayouts. | 137 // Memoize this to avoid expensive calculations & relayouts. |
| 139 this._isRTL = window.getComputedStyle(this).direction == 'rtl'; | 138 this._isRTL = window.getComputedStyle(this).direction == 'rtl'; |
| 139 this.positionTarget = this.positionTarget || this._defaultPositionTarg
et; |
| 140 }, | 140 }, |
| 141 | 141 |
| 142 /** | 142 /** |
| 143 * The element that is contained by the dropdown, if any. | 143 * The element that is contained by the dropdown, if any. |
| 144 */ | 144 */ |
| 145 get containedElement() { | 145 get containedElement() { |
| 146 return Polymer.dom(this.$.content).getDistributedNodes()[0]; | 146 return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
| 147 }, | 147 }, |
| 148 | 148 |
| 149 /** | 149 /** |
| (...skipping 27 matching lines...) Expand all Loading... |
| 177 return this.horizontalAlign === 'right' ? 'left' : 'right'; | 177 return this.horizontalAlign === 'right' ? 'left' : 'right'; |
| 178 } else { | 178 } else { |
| 179 return this.horizontalAlign; | 179 return this.horizontalAlign; |
| 180 } | 180 } |
| 181 }, | 181 }, |
| 182 | 182 |
| 183 /** | 183 /** |
| 184 * The horizontal offset value used to position the dropdown. | 184 * The horizontal offset value used to position the dropdown. |
| 185 * @param {ClientRect} dropdownRect | 185 * @param {ClientRect} dropdownRect |
| 186 * @param {ClientRect} positionRect | 186 * @param {ClientRect} positionRect |
| 187 * @param {boolean=false} fromRight | 187 * @param {boolean=} fromRight |
| 188 * @return {number} pixels | 188 * @return {number} pixels |
| 189 * @private | 189 * @private |
| 190 */ | 190 */ |
| 191 _horizontalAlignTargetValue: function(dropdownRect, positionRect, fromRi
ght) { | 191 _horizontalAlignTargetValue: function(dropdownRect, positionRect, fromRi
ght) { |
| 192 var target; | 192 var target; |
| 193 if (fromRight) { | 193 if (fromRight) { |
| 194 target = document.documentElement.clientWidth - positionRect.right -
(this._fitWidth - dropdownRect.right); | 194 target = document.documentElement.clientWidth - positionRect.right -
(this._fitWidth - dropdownRect.right); |
| 195 } else { | 195 } else { |
| 196 target = positionRect.left - dropdownRect.left; | 196 target = positionRect.left - dropdownRect.left; |
| 197 } | 197 } |
| 198 target += this.horizontalOffset; | 198 target += this.horizontalOffset; |
| 199 | 199 |
| 200 return Math.max(target, 0); | 200 return Math.max(target, 0); |
| 201 }, | 201 }, |
| 202 | 202 |
| 203 /** | 203 /** |
| 204 * The vertical offset value used to position the dropdown. | 204 * The vertical offset value used to position the dropdown. |
| 205 * @param {ClientRect} dropdownRect | 205 * @param {ClientRect} dropdownRect |
| 206 * @param {ClientRect} positionRect | 206 * @param {ClientRect} positionRect |
| 207 * @param {boolean=false} fromBottom | 207 * @param {boolean=} fromBottom |
| 208 * @return {number} pixels | 208 * @return {number} pixels |
| 209 * @private | 209 * @private |
| 210 */ | 210 */ |
| 211 _verticalAlignTargetValue: function(dropdownRect, positionRect, fromBott
om) { | 211 _verticalAlignTargetValue: function(dropdownRect, positionRect, fromBott
om) { |
| 212 var target; | 212 var target; |
| 213 if (fromBottom) { | 213 if (fromBottom) { |
| 214 target = document.documentElement.clientHeight - positionRect.bottom
- (this._fitHeight - dropdownRect.bottom); | 214 target = document.documentElement.clientHeight - positionRect.bottom
- (this._fitHeight - dropdownRect.bottom); |
| 215 } else { | 215 } else { |
| 216 target = positionRect.top - dropdownRect.top; | 216 target = positionRect.top - dropdownRect.top; |
| 217 } | 217 } |
| 218 target += this.verticalOffset; | 218 target += this.verticalOffset; |
| 219 | 219 |
| 220 return Math.max(target, 0); | 220 return Math.max(target, 0); |
| 221 }, | 221 }, |
| 222 | 222 |
| 223 /** | 223 /** |
| 224 * Called when the value of `opened` changes. | 224 * Called when the value of `opened` changes. |
| 225 * | 225 * Overridden from `IronOverlayBehavior` |
| 226 * @param {boolean} opened True if the dropdown is opened. | |
| 227 */ | 226 */ |
| 228 _openedChanged: function(opened) { | 227 _openedChanged: function() { |
| 229 if (opened && this.disabled) { | 228 if (this.opened && this.disabled) { |
| 230 this.cancel(); | 229 this.cancel(); |
| 231 } else { | 230 } else { |
| 232 this.cancelAnimation(); | 231 this.cancelAnimation(); |
| 233 this.sizingTarget = this.containedElement || this.sizingTarget; | 232 this.sizingTarget = this.containedElement || this.sizingTarget; |
| 234 this._updateAnimationConfig(); | 233 this._updateAnimationConfig(); |
| 234 if (this.opened && !this.allowOutsideScroll) { |
| 235 Polymer.IronDropdownScrollManager.pushScrollLock(this); |
| 236 } else { |
| 237 Polymer.IronDropdownScrollManager.removeScrollLock(this); |
| 238 } |
| 235 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); | 239 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); |
| 236 } | 240 } |
| 237 }, | 241 }, |
| 238 | 242 |
| 239 /** | 243 /** |
| 240 * Overridden from `IronOverlayBehavior`. | 244 * Overridden from `IronOverlayBehavior`. |
| 241 */ | 245 */ |
| 242 _renderOpened: function() { | 246 _renderOpened: function() { |
| 243 if (!this.allowOutsideScroll) { | |
| 244 Polymer.IronDropdownScrollManager.pushScrollLock(this); | |
| 245 } | |
| 246 | |
| 247 if (!this.noAnimations && this.animationConfig && this.animationConfig
.open) { | 247 if (!this.noAnimations && this.animationConfig && this.animationConfig
.open) { |
| 248 if (this.withBackdrop) { | 248 if (this.withBackdrop) { |
| 249 this.backdropElement.open(); | 249 this.backdropElement.open(); |
| 250 } | 250 } |
| 251 this.$.contentWrapper.classList.add('animating'); | 251 this.$.contentWrapper.classList.add('animating'); |
| 252 this.playAnimation('open'); | 252 this.playAnimation('open'); |
| 253 } else { | 253 } else { |
| 254 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments)
; | 254 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments)
; |
| 255 } | 255 } |
| 256 }, | 256 }, |
| 257 | 257 |
| 258 /** | 258 /** |
| 259 * Overridden from `IronOverlayBehavior`. | 259 * Overridden from `IronOverlayBehavior`. |
| 260 */ | 260 */ |
| 261 _renderClosed: function() { | 261 _renderClosed: function() { |
| 262 Polymer.IronDropdownScrollManager.removeScrollLock(this); | |
| 263 if (!this.noAnimations && this.animationConfig && this.animationConfig
.close) { | 262 if (!this.noAnimations && this.animationConfig && this.animationConfig
.close) { |
| 264 if (this.withBackdrop) { | 263 if (this.withBackdrop) { |
| 265 this.backdropElement.close(); | 264 this.backdropElement.close(); |
| 266 } | 265 } |
| 267 this.$.contentWrapper.classList.add('animating'); | 266 this.$.contentWrapper.classList.add('animating'); |
| 268 this.playAnimation('close'); | 267 this.playAnimation('close'); |
| 269 } else { | 268 } else { |
| 270 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments)
; | 269 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments)
; |
| 271 } | 270 } |
| 272 }, | 271 }, |
| (...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 393 _applyFocus: function () { | 392 _applyFocus: function () { |
| 394 var focusTarget = this.focusTarget || this.containedElement; | 393 var focusTarget = this.focusTarget || this.containedElement; |
| 395 if (focusTarget && this.opened && !this.noAutoFocus) { | 394 if (focusTarget && this.opened && !this.noAutoFocus) { |
| 396 focusTarget.focus(); | 395 focusTarget.focus(); |
| 397 } else { | 396 } else { |
| 398 Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments); | 397 Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments); |
| 399 } | 398 } |
| 400 } | 399 } |
| 401 }); | 400 }); |
| 402 })(); | 401 })(); |
| OLD | NEW |