update components

This commit is contained in:
Luke Pulverenti 2015-12-15 10:45:40 -05:00
parent abb1b78b2b
commit 27d49b3466
32 changed files with 739 additions and 380 deletions

View file

@ -100,8 +100,17 @@ method is called on the element.
/**
* A pixel value that will be added to the position calculated for the
* given `horizontalAlign`. Use a negative value to offset to the
* left, or a positive value to offset to the right.
* 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,
@ -111,8 +120,17 @@ method is called on the element.
/**
* A pixel value that will be added to the position calculated for the
* given `verticalAlign`. Use a negative value to offset towards the
* top, or a positive value to offset towards the bottom.
* 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,
@ -211,6 +229,13 @@ method is called on the element.
return this.focusTarget || this.containedElement;
},
/**
* Whether the text direction is RTL
*/
_isRTL: function() {
return window.getComputedStyle(this).direction == 'rtl';
},
/**
* The element that should be used to position the dropdown when
* it opens, if no position target is configured.
@ -242,7 +267,10 @@ method is called on the element.
get _horizontalAlignTargetValue() {
var target;
if (this.horizontalAlign === 'right') {
// In RTL, the direction flips, so what is "right" in LTR becomes "left".
var isRTL = this._isRTL();
if ((!isRTL && this.horizontalAlign === 'right') ||
(isRTL && this.horizontalAlign === 'left')) {
target = document.documentElement.clientWidth - this._positionRect.right;
} else {
target = this._positionRect.left;
@ -270,6 +298,18 @@ method is called on the element.
return Math.max(target, 0);
},
/**
* 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;
}
},
/**
* Called when the value of `opened` changes.
*
@ -418,7 +458,7 @@ method is called on the element.
return;
}
this.style[this.horizontalAlign] =
this.style[this._localeHorizontalAlign] =
this._horizontalAlignTargetValue + 'px';
this.style[this.verticalAlign] =
@ -452,4 +492,3 @@ method is called on the element.
})();
</script>
</dom-module>