Index: third_party/polymer/components/iron-dropdown/iron-dropdown.html |
diff --git a/third_party/polymer/components/iron-dropdown/iron-dropdown.html b/third_party/polymer/components/iron-dropdown/iron-dropdown.html |
index 263f1cb1b6126ae0908f0cd0c5f311c0a88089ec..21b074a5b13b938fe91a1ad20ef3d4f283923347 100644 |
--- a/third_party/polymer/components/iron-dropdown/iron-dropdown.html |
+++ b/third_party/polymer/components/iron-dropdown/iron-dropdown.html |
@@ -81,6 +81,7 @@ method is called on the element. |
/** |
* The orientation against which to align the dropdown content |
* horizontally relative to the dropdown trigger. |
+ * Overridden from `Polymer.IronFitBehavior`. |
*/ |
horizontalAlign: { |
type: String, |
@@ -91,6 +92,7 @@ method is called on the element. |
/** |
* The orientation against which to align the dropdown content |
* vertically relative to the dropdown trigger. |
+ * Overridden from `Polymer.IronFitBehavior`. |
*/ |
verticalAlign: { |
type: String, |
@@ -99,54 +101,6 @@ method is called on the element. |
}, |
/** |
- * A pixel value that will be added to the position calculated for the |
- * given `horizontalAlign`, in the direction of alignment. You can think |
- * of it as increasing or decreasing the distance to the side of the |
- * screen given by `horizontalAlign`. |
- * |
- * If `horizontalAlign` is "left", this offset will increase or decrease |
- * the distance to the left side of the screen: a negative offset will |
- * move the dropdown to the left; a positive one, to the right. |
- * |
- * Conversely if `horizontalAlign` is "right", this offset will increase |
- * or decrease the distance to the right side of the screen: a negative |
- * offset will move the dropdown to the right; a positive one, to the left. |
- */ |
- horizontalOffset: { |
- type: Number, |
- value: 0, |
- notify: true |
- }, |
- |
- /** |
- * A pixel value that will be added to the position calculated for the |
- * given `verticalAlign`, in the direction of alignment. You can think |
- * of it as increasing or decreasing the distance to the side of the |
- * screen given by `verticalAlign`. |
- * |
- * If `verticalAlign` is "top", this offset will increase or decrease |
- * the distance to the top side of the screen: a negative offset will |
- * move the dropdown upwards; a positive one, downwards. |
- * |
- * Conversely if `verticalAlign` is "bottom", this offset will increase |
- * or decrease the distance to the bottom side of the screen: a negative |
- * offset will move the dropdown downwards; a positive one, upwards. |
- */ |
- verticalOffset: { |
- type: Number, |
- value: 0, |
- notify: true |
- }, |
- |
- /** |
- * The element that should be used to position the dropdown when |
- * it is opened. |
- */ |
- positionTarget: { |
- type: Object |
- }, |
- |
- /** |
* An animation config. If provided, this will be used to animate the |
* opening of the dropdown. |
*/ |
@@ -199,12 +153,6 @@ method is called on the element. |
'_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)' |
], |
- attached: function() { |
- // Memoize this to avoid expensive calculations & relayouts. |
- this._isRTL = window.getComputedStyle(this).direction == 'rtl'; |
- this.positionTarget = this.positionTarget || this._defaultPositionTarget; |
- }, |
- |
/** |
* The element that is contained by the dropdown, if any. |
*/ |
@@ -220,70 +168,9 @@ method is called on the element. |
return this.focusTarget || this.containedElement; |
}, |
- /** |
- * The element that should be used to position the dropdown when |
- * it opens, if no position target is configured. |
- */ |
- get _defaultPositionTarget() { |
- var parent = Polymer.dom(this).parentNode; |
- |
- if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { |
- parent = parent.host; |
- } |
- |
- return parent; |
- }, |
- |
- /** |
- * The horizontal align value, accounting for the RTL/LTR text direction. |
- */ |
- get _localeHorizontalAlign() { |
- // In RTL, "left" becomes "right". |
- if (this._isRTL) { |
- return this.horizontalAlign === 'right' ? 'left' : 'right'; |
- } else { |
- return this.horizontalAlign; |
- } |
- }, |
- |
- /** |
- * The horizontal offset value used to position the dropdown. |
- * @param {ClientRect} dropdownRect |
- * @param {ClientRect} positionRect |
- * @param {boolean=} fromRight |
- * @return {number} pixels |
- * @private |
- */ |
- _horizontalAlignTargetValue: function(dropdownRect, positionRect, fromRight) { |
- var target; |
- if (fromRight) { |
- target = document.documentElement.clientWidth - positionRect.right - (this._fitWidth - dropdownRect.right); |
- } else { |
- target = positionRect.left - dropdownRect.left; |
- } |
- target += this.horizontalOffset; |
- |
- return Math.max(target, 0); |
- }, |
- |
- /** |
- * The vertical offset value used to position the dropdown. |
- * @param {ClientRect} dropdownRect |
- * @param {ClientRect} positionRect |
- * @param {boolean=} fromBottom |
- * @return {number} pixels |
- * @private |
- */ |
- _verticalAlignTargetValue: function(dropdownRect, positionRect, fromBottom) { |
- var target; |
- if (fromBottom) { |
- target = document.documentElement.clientHeight - positionRect.bottom - (this._fitHeight - dropdownRect.bottom); |
- } else { |
- target = positionRect.top - dropdownRect.top; |
- } |
- target += this.verticalOffset; |
- |
- return Math.max(target, 0); |
+ detached: function() { |
+ this.cancelAnimation(); |
+ Polymer.IronDropdownScrollManager.removeScrollLock(this); |
}, |
/** |
@@ -310,10 +197,7 @@ method is called on the element. |
* Overridden from `IronOverlayBehavior`. |
*/ |
_renderOpened: function() { |
- if (!this.noAnimations && this.animationConfig && this.animationConfig.open) { |
- if (this.withBackdrop) { |
- this.backdropElement.open(); |
- } |
+ if (!this.noAnimations && this.animationConfig.open) { |
this.$.contentWrapper.classList.add('animating'); |
this.playAnimation('open'); |
} else { |
@@ -325,10 +209,7 @@ method is called on the element. |
* Overridden from `IronOverlayBehavior`. |
*/ |
_renderClosed: function() { |
- if (!this.noAnimations && this.animationConfig && this.animationConfig.close) { |
- if (this.withBackdrop) { |
- this.backdropElement.close(); |
- } |
+ if (!this.noAnimations && this.animationConfig.close) { |
this.$.contentWrapper.classList.add('animating'); |
this.playAnimation('close'); |
} else { |
@@ -345,9 +226,9 @@ method is called on the element. |
_onNeonAnimationFinish: function() { |
this.$.contentWrapper.classList.remove('animating'); |
if (this.opened) { |
- Polymer.IronOverlayBehaviorImpl._finishRenderOpened.apply(this); |
+ this._finishRenderOpened(); |
} else { |
- Polymer.IronOverlayBehaviorImpl._finishRenderClosed.apply(this); |
+ this._finishRenderClosed(); |
} |
}, |
@@ -356,30 +237,14 @@ method is called on the element. |
* to configure specific parts of the opening and closing animations. |
*/ |
_updateAnimationConfig: function() { |
- var animationConfig = {}; |
- var animations = []; |
- |
- if (this.openAnimationConfig) { |
- // NOTE(cdata): When making `display:none` elements visible in Safari, |
- // the element will paint once in a fully visible state, causing the |
- // dropdown to flash before it fades in. We prepend an |
- // `opaque-animation` to fix this problem: |
- animationConfig.open = [{ |
- name: 'opaque-animation', |
- }].concat(this.openAnimationConfig); |
- animations = animations.concat(animationConfig.open); |
+ var animations = (this.openAnimationConfig || []).concat(this.closeAnimationConfig || []); |
+ for (var i = 0; i < animations.length; i++) { |
+ animations[i].node = this.containedElement; |
} |
- |
- if (this.closeAnimationConfig) { |
- animationConfig.close = this.closeAnimationConfig; |
- animations = animations.concat(animationConfig.close); |
- } |
- |
- animations.forEach(function(animation) { |
- animation.node = this.containedElement; |
- }, this); |
- |
- this.animationConfig = animationConfig; |
+ this.animationConfig = { |
+ open: this.openAnimationConfig, |
+ close: this.closeAnimationConfig |
+ }; |
}, |
/** |
@@ -394,65 +259,6 @@ method is called on the element. |
}, |
/** |
- * Useful to call this after the element, the window, or the `fitInfo` |
- * element has been resized. Will maintain the scroll position. |
- */ |
- refit: function () { |
- if (!this.opened) { |
- return |
- } |
- var containedElement = this.containedElement; |
- var scrollTop; |
- var scrollLeft; |
- |
- if (containedElement) { |
- scrollTop = containedElement.scrollTop; |
- scrollLeft = containedElement.scrollLeft; |
- } |
- Polymer.IronFitBehavior.refit.apply(this, arguments); |
- |
- if (containedElement) { |
- containedElement.scrollTop = scrollTop; |
- containedElement.scrollLeft = scrollLeft; |
- } |
- }, |
- |
- /** |
- * Resets the target element's position and size constraints, and clear |
- * the memoized data. |
- */ |
- resetFit: function() { |
- Polymer.IronFitBehavior.resetFit.apply(this, arguments); |
- |
- var hAlign = this._localeHorizontalAlign; |
- var vAlign = this.verticalAlign; |
- // Set to 0, 0 in order to discover any offset caused by parent stacking contexts. |
- this.style[hAlign] = this.style[vAlign] = '0px'; |
- |
- var dropdownRect = this.getBoundingClientRect(); |
- var positionRect = this.positionTarget.getBoundingClientRect(); |
- var horizontalValue = this._horizontalAlignTargetValue(dropdownRect, positionRect, hAlign === 'right'); |
- var verticalValue = this._verticalAlignTargetValue(dropdownRect, positionRect, vAlign === 'bottom'); |
- |
- this.style[hAlign] = horizontalValue + 'px'; |
- this.style[vAlign] = verticalValue + 'px'; |
- }, |
- |
- /** |
- * Overridden from `IronFitBehavior`. |
- * Ensure positionedBy has correct values for horizontally & vertically. |
- */ |
- _discoverInfo: function() { |
- Polymer.IronFitBehavior._discoverInfo.apply(this, arguments); |
- // Note(valdrin): in Firefox, an element with style `position: fixed; bottom: 90vh; height: 20vh` |
- // would have `getComputedStyle(element).top < 0` (instead of being `auto`) http://jsbin.com/cofired/3/edit?html,output |
- // This would cause IronFitBehavior's `constrain` to wrongly calculate sizes |
- // (it would use `top` instead of `bottom`), so we ensure we give the correct values. |
- this._fitInfo.positionedBy.horizontally = this._localeHorizontalAlign; |
- this._fitInfo.positionedBy.vertically = this.verticalAlign; |
- }, |
- |
- /** |
* Apply focus to focusTarget or containedElement |
*/ |
_applyFocus: function () { |