update components

This commit is contained in:
Luke Pulverenti 2016-05-05 21:02:24 -04:00
parent e5a4b3813f
commit e65b47e772
19 changed files with 58 additions and 193 deletions

View file

@ -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,
@ -98,54 +100,6 @@ method is called on the element.
reflectToAttribute: true
},
/**
* 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,72 +168,6 @@ 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);
},
/**
* Called when the value of `opened` changes.
* Overridden from `IronOverlayBehavior`
@ -417,41 +299,6 @@ method is called on the element.
}
},
/**
* 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
*/