| OLD | NEW |
| (Empty) | |
| 1 |
| 2 (function() { |
| 3 'use strict'; |
| 4 |
| 5 Polymer({ |
| 6 is: 'iron-dropdown', |
| 7 |
| 8 behaviors: [ |
| 9 Polymer.IronControlState, |
| 10 Polymer.IronA11yKeysBehavior, |
| 11 Polymer.IronOverlayBehavior, |
| 12 Polymer.NeonAnimationRunnerBehavior |
| 13 ], |
| 14 |
| 15 properties: { |
| 16 /** |
| 17 * The orientation against which to align the dropdown content |
| 18 * horizontally relative to the dropdown trigger. |
| 19 */ |
| 20 horizontalAlign: { |
| 21 type: String, |
| 22 value: 'left', |
| 23 reflectToAttribute: true |
| 24 }, |
| 25 |
| 26 /** |
| 27 * The orientation against which to align the dropdown content |
| 28 * vertically relative to the dropdown trigger. |
| 29 */ |
| 30 verticalAlign: { |
| 31 type: String, |
| 32 value: 'top', |
| 33 reflectToAttribute: true |
| 34 }, |
| 35 |
| 36 /** |
| 37 * The element that should be used to position the dropdown when |
| 38 * it is opened. |
| 39 */ |
| 40 positionTarget: { |
| 41 type: Object, |
| 42 observer: '_positionTargetChanged' |
| 43 }, |
| 44 |
| 45 /** |
| 46 * An animation config. If provided, this will be used to animate the |
| 47 * opening of the dropdown. |
| 48 */ |
| 49 openAnimationConfig: { |
| 50 type: Object |
| 51 }, |
| 52 |
| 53 /** |
| 54 * An animation config. If provided, this will be used to animate the |
| 55 * closing of the dropdown. |
| 56 */ |
| 57 closeAnimationConfig: { |
| 58 type: Object |
| 59 }, |
| 60 |
| 61 /** |
| 62 * Set to true to disable animations when opening and closing the |
| 63 * dropdown. |
| 64 */ |
| 65 noAnimations: { |
| 66 type: Boolean, |
| 67 value: false |
| 68 }, |
| 69 |
| 70 /** |
| 71 * We memoize the positionTarget bounding rectangle so that we can |
| 72 * limit the number of times it is queried per resize / relayout. |
| 73 * @type {?Object} |
| 74 */ |
| 75 _positionRectMemo: { |
| 76 type: Object |
| 77 } |
| 78 }, |
| 79 |
| 80 listeners: { |
| 81 'neon-animation-finish': '_onNeonAnimationFinish' |
| 82 }, |
| 83 |
| 84 observers: [ |
| 85 '_updateOverlayPosition(verticalAlign, horizontalAlign)' |
| 86 ], |
| 87 |
| 88 attached: function() { |
| 89 if (this.positionTarget === undefined) { |
| 90 this.positionTarget = this._defaultPositionTarget; |
| 91 } |
| 92 }, |
| 93 |
| 94 /** |
| 95 * The element that is contained by the dropdown, if any. |
| 96 */ |
| 97 get containedElement() { |
| 98 return Polymer.dom(this.$.content).getDistributedNodes()[0]; |
| 99 }, |
| 100 |
| 101 get _defaultPositionTarget() { |
| 102 var parent = Polymer.dom(this).parentNode; |
| 103 |
| 104 if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { |
| 105 parent = parent.host; |
| 106 } |
| 107 |
| 108 return parent; |
| 109 }, |
| 110 |
| 111 get _positionRect() { |
| 112 if (!this._positionRectMemo && this.positionTarget) { |
| 113 this._positionRectMemo = this.positionTarget.getBoundingClientRect()
; |
| 114 } |
| 115 |
| 116 return this._positionRectMemo; |
| 117 }, |
| 118 |
| 119 get _horizontalAlignTargetValue() { |
| 120 var target; |
| 121 |
| 122 if (this.horizontalAlign === 'right') { |
| 123 target = document.documentElement.clientWidth - this._positionRect.r
ight; |
| 124 } else { |
| 125 target = this._positionRect.left; |
| 126 } |
| 127 |
| 128 return Math.max(target, 0); |
| 129 }, |
| 130 |
| 131 get _verticalAlignTargetValue() { |
| 132 var target; |
| 133 |
| 134 if (this.verticalAlign === 'bottom') { |
| 135 target = document.documentElement.clientHeight - this._positionRect.
bottom; |
| 136 } else { |
| 137 target = this._positionRect.top; |
| 138 } |
| 139 |
| 140 return Math.max(target, 0); |
| 141 }, |
| 142 |
| 143 _openedChanged: function(opened) { |
| 144 if (opened && this.disabled) { |
| 145 this.cancel(); |
| 146 } else { |
| 147 this._cancelAnimations(); |
| 148 this._prepareDropdown(); |
| 149 Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments
); |
| 150 } |
| 151 }, |
| 152 |
| 153 _renderOpened: function() { |
| 154 Polymer.IronDropdownScrollManager.pushScrollLock(this); |
| 155 if (!this.noAnimations && this.animationConfig && this.animationConfig
.open) { |
| 156 this.$.contentWrapper.classList.add('animating'); |
| 157 this.playAnimation('open'); |
| 158 } else { |
| 159 this._focusContent(); |
| 160 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments)
; |
| 161 } |
| 162 }, |
| 163 |
| 164 _renderClosed: function() { |
| 165 Polymer.IronDropdownScrollManager.removeScrollLock(this); |
| 166 if (!this.noAnimations && this.animationConfig && this.animationConfig
.close) { |
| 167 this.$.contentWrapper.classList.add('animating'); |
| 168 this.playAnimation('close'); |
| 169 } else { |
| 170 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments)
; |
| 171 } |
| 172 }, |
| 173 |
| 174 _onNeonAnimationFinish: function() { |
| 175 this.$.contentWrapper.classList.remove('animating'); |
| 176 if (this.opened) { |
| 177 Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this); |
| 178 } else { |
| 179 Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this); |
| 180 } |
| 181 }, |
| 182 |
| 183 _onIronResize: function() { |
| 184 var containedElement = this.containedElement; |
| 185 var scrollTop; |
| 186 var scrollLeft; |
| 187 |
| 188 if (containedElement) { |
| 189 scrollTop = containedElement.scrollTop; |
| 190 scrollLeft = containedElement.scrollLeft; |
| 191 } |
| 192 |
| 193 if (this.opened) { |
| 194 this._updateOverlayPosition(); |
| 195 } |
| 196 |
| 197 Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments); |
| 198 |
| 199 if (containedElement) { |
| 200 containedElement.scrollTop = scrollTop; |
| 201 containedElement.scrollLeft = scrollLeft; |
| 202 } |
| 203 }, |
| 204 |
| 205 _positionTargetChanged: function() { |
| 206 this._updateOverlayPosition(); |
| 207 }, |
| 208 |
| 209 _cancelAnimations: function() { |
| 210 this.cancelAnimation(); |
| 211 }, |
| 212 |
| 213 _updateAnimationConfig: function() { |
| 214 var animationConfig = {}; |
| 215 var animations = []; |
| 216 |
| 217 if (this.openAnimationConfig) { |
| 218 // NOTE(cdata): When making `display:none` elements visible in Safar
i, |
| 219 // the element will paint once in a fully visible state, causing the |
| 220 // dropdown to flash before it fades in. We prepend an |
| 221 // `opaque-animation` to fix this problem: |
| 222 animationConfig.open = [{ |
| 223 name: 'opaque-animation', |
| 224 }].concat(this.openAnimationConfig); |
| 225 animations = animations.concat(animationConfig.open); |
| 226 } |
| 227 |
| 228 if (this.closeAnimationConfig) { |
| 229 animationConfig.close = this.closeAnimationConfig; |
| 230 animations = animations.concat(animationConfig.close); |
| 231 } |
| 232 |
| 233 animations.forEach(function(animation) { |
| 234 animation.node = this.containedElement; |
| 235 }, this); |
| 236 |
| 237 this.animationConfig = animationConfig; |
| 238 }, |
| 239 |
| 240 _prepareDropdown: function() { |
| 241 this.sizingTarget = this.containedElement || this.sizingTarget; |
| 242 this._updateAnimationConfig(); |
| 243 this._updateOverlayPosition(); |
| 244 }, |
| 245 |
| 246 _updateOverlayPosition: function() { |
| 247 this._positionRectMemo = null; |
| 248 |
| 249 if (!this.positionTarget) { |
| 250 return; |
| 251 } |
| 252 |
| 253 this.style[this.horizontalAlign] = |
| 254 this._horizontalAlignTargetValue + 'px'; |
| 255 |
| 256 this.style[this.verticalAlign] = |
| 257 this._verticalAlignTargetValue + 'px'; |
| 258 |
| 259 // NOTE(cdata): We re-memoize inline styles here, otherwise |
| 260 // calling `refit` from `IronFitBehavior` will reset inline styles |
| 261 // to whatever they were when the dropdown first opened. |
| 262 if (this._fitInfo) { |
| 263 this._fitInfo.inlineStyle[this.horizontalAlign] = |
| 264 this.style[this.horizontalAlign]; |
| 265 |
| 266 this._fitInfo.inlineStyle[this.verticalAlign] = |
| 267 this.style[this.verticalAlign]; |
| 268 } |
| 269 }, |
| 270 |
| 271 _focusContent: function() { |
| 272 if (this.containedElement) { |
| 273 this.containedElement.focus(); |
| 274 } |
| 275 } |
| 276 }); |
| 277 })(); |
| 278 |
| OLD | NEW |