update components
This commit is contained in:
parent
e5a4b3813f
commit
e65b47e772
19 changed files with 58 additions and 193 deletions
|
@ -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
|
||||
*/
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue