Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(139)

Unified Diff: third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js

Issue 1862213002: Roll third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove obsolete appearance_browsertest.js, result of a previous bad merge. Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js
diff --git a/third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js b/third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js
index df95b6a0f32e8c73c360a5cdec3dbdfc55110f06..750fbbbd578b723e3114db18a6263ce28054f2ef 100644
--- a/third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js
+++ b/third_party/polymer/v1_0/components-chromium/iron-dropdown/iron-dropdown-extracted.js
@@ -77,8 +77,7 @@
* it is opened.
*/
positionTarget: {
- type: Object,
- observer: '_positionTargetChanged'
+ type: Object
},
/**
@@ -123,15 +122,6 @@
allowOutsideScroll: {
type: Boolean,
value: false
- },
-
- /**
- * We memoize the positionTarget bounding rectangle so that we can
- * limit the number of times it is queried per resize / relayout.
- * @type {?Object}
- */
- _positionRectMemo: {
- type: Object
}
},
@@ -140,13 +130,13 @@
},
observers: [
- '_updateOverlayPosition(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
+ '_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
],
attached: function() {
- if (this.positionTarget === undefined) {
- this.positionTarget = this._defaultPositionTarget;
- }
+ this.positionTarget = this.positionTarget || this._defaultPositionTarget;
+ // Memoize this to avoid expensive calculations & relayouts.
+ this._isRTL = window.getComputedStyle(this).direction == 'rtl';
},
/**
@@ -165,13 +155,6 @@
},
/**
- * 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.
*/
@@ -186,31 +169,32 @@
},
/**
- * The bounding rect of the position target.
+ * The horizontal align value, accounting for the RTL/LTR text direction.
*/
- get _positionRect() {
- if (!this._positionRectMemo && this.positionTarget) {
- this._positionRectMemo = this.positionTarget.getBoundingClientRect();
+ get _localeHorizontalAlign() {
+ // In RTL, "left" becomes "right".
+ if (this._isRTL) {
+ return this.horizontalAlign === 'right' ? 'left' : 'right';
+ } else {
+ return this.horizontalAlign;
}
-
- return this._positionRectMemo;
},
/**
* The horizontal offset value used to position the dropdown.
+ * @param {ClientRect} dropdownRect
+ * @param {ClientRect} positionRect
+ * @param {boolean=false} fromRight
+ * @return {number} pixels
+ * @private
*/
- get _horizontalAlignTargetValue() {
+ _horizontalAlignTargetValue: function(dropdownRect, positionRect, fromRight) {
var target;
-
- // 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;
+ if (fromRight) {
+ target = document.documentElement.clientWidth - positionRect.right - (this._fitWidth - dropdownRect.right);
} else {
- target = this._positionRect.left;
+ target = positionRect.left - dropdownRect.left;
}
-
target += this.horizontalOffset;
return Math.max(target, 0);
@@ -218,34 +202,25 @@
/**
* The vertical offset value used to position the dropdown.
+ * @param {ClientRect} dropdownRect
+ * @param {ClientRect} positionRect
+ * @param {boolean=false} fromBottom
+ * @return {number} pixels
+ * @private
*/
- get _verticalAlignTargetValue() {
+ _verticalAlignTargetValue: function(dropdownRect, positionRect, fromBottom) {
var target;
-
- if (this.verticalAlign === 'bottom') {
- target = document.documentElement.clientHeight - this._positionRect.bottom;
+ if (fromBottom) {
+ target = document.documentElement.clientHeight - positionRect.bottom - (this._fitHeight - dropdownRect.bottom);
} else {
- target = this._positionRect.top;
+ target = positionRect.top - dropdownRect.top;
}
-
target += this.verticalOffset;
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.
*
* @param {boolean} opened True if the dropdown is opened.
@@ -255,7 +230,8 @@
this.cancel();
} else {
this.cancelAnimation();
- this._prepareDropdown();
+ this.sizingTarget = this.containedElement || this.sizingTarget;
+ this._updateAnimationConfig();
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
}
},
@@ -269,6 +245,9 @@
}
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
+ if (this.withBackdrop) {
+ this.backdropElement.open();
+ }
this.$.contentWrapper.classList.add('animating');
this.playAnimation('open');
} else {
@@ -282,6 +261,9 @@
_renderClosed: function() {
Polymer.IronDropdownScrollManager.removeScrollLock(this);
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
+ if (this.withBackdrop) {
+ this.backdropElement.close();
+ }
this.$.contentWrapper.classList.add('animating');
this.playAnimation('close');
} else {
@@ -298,45 +280,13 @@
_onNeonAnimationFinish: function() {
this.$.contentWrapper.classList.remove('animating');
if (this.opened) {
- Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this);
+ Polymer.IronOverlayBehaviorImpl._finishRenderOpened.apply(this);
} else {
- Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this);
+ Polymer.IronOverlayBehaviorImpl._finishRenderClosed.apply(this);
}
},
/**
- * Called when an `iron-resize` event fires.
- */
- _onIronResize: function() {
- var containedElement = this.containedElement;
- var scrollTop;
- var scrollLeft;
-
- if (this.opened && containedElement) {
- scrollTop = containedElement.scrollTop;
- scrollLeft = containedElement.scrollLeft;
- }
-
- if (this.opened) {
- this._updateOverlayPosition();
- }
-
- Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
-
- if (this.opened && containedElement) {
- containedElement.scrollTop = scrollTop;
- containedElement.scrollLeft = scrollLeft;
- }
- },
-
- /**
- * Called when the `positionTarget` property changes.
- */
- _positionTargetChanged: function() {
- this._updateOverlayPosition();
- },
-
- /**
* Constructs the final animation config from different properties used
* to configure specific parts of the opening and closing animations.
*/
@@ -368,43 +318,73 @@
},
/**
- * Prepares the dropdown for opening by updating measured layout
- * values.
+ * Updates the overlay position based on configured horizontal
+ * and vertical alignment.
*/
- _prepareDropdown: function() {
- this.sizingTarget = this.containedElement || this.sizingTarget;
- this._updateAnimationConfig();
- this._updateOverlayPosition();
+ _updateOverlayPosition: function() {
+ if (this.isAttached) {
+ // This triggers iron-resize, and iron-overlay-behavior will call refit if needed.
+ this.notifyResize();
+ }
},
/**
- * Updates the overlay position based on configured horizontal
- * and vertical alignment, and re-memoizes these values for the sake
- * of behavior in `IronFitBehavior`.
+ * Useful to call this after the element, the window, or the `fitInfo`
+ * element has been resized. Will maintain the scroll position.
*/
- _updateOverlayPosition: function() {
- this._positionRectMemo = null;
+ refit: function () {
+ if (!this.opened) {
+ return
+ }
+ var containedElement = this.containedElement;
+ var scrollTop;
+ var scrollLeft;
- if (!this.positionTarget) {
- return;
+ if (containedElement) {
+ scrollTop = containedElement.scrollTop;
+ scrollLeft = containedElement.scrollLeft;
}
+ Polymer.IronFitBehavior.refit.apply(this, arguments);
- this.style[this._localeHorizontalAlign] =
- this._horizontalAlignTargetValue + 'px';
+ if (containedElement) {
+ containedElement.scrollTop = scrollTop;
+ containedElement.scrollLeft = scrollLeft;
+ }
+ },
- this.style[this.verticalAlign] =
- this._verticalAlignTargetValue + 'px';
+ /**
+ * Resets the target element's position and size constraints, and clear
+ * the memoized data.
+ */
+ resetFit: function() {
+ Polymer.IronFitBehavior.resetFit.apply(this, arguments);
- // NOTE(cdata): We re-memoize inline styles here, otherwise
- // calling `refit` from `IronFitBehavior` will reset inline styles
- // to whatever they were when the dropdown first opened.
- if (this._fitInfo) {
- this._fitInfo.inlineStyle[this.horizontalAlign] =
- this.style[this.horizontalAlign];
+ 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';
- this._fitInfo.inlineStyle[this.verticalAlign] =
- this.style[this.verticalAlign];
- }
+ 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;
},
/**

Powered by Google App Engine
This is Rietveld 408576698