| Index: third_party/polymer/components/iron-collapse/iron-collapse.html
|
| diff --git a/third_party/polymer/components/iron-collapse/iron-collapse.html b/third_party/polymer/components/iron-collapse/iron-collapse.html
|
| index 48939a260d91bacbad08a1a325088fc5648547d2..03e32f466596453dbbc0d2af3db7aab8a8fbd5bb 100644
|
| --- a/third_party/polymer/components/iron-collapse/iron-collapse.html
|
| +++ b/third_party/polymer/components/iron-collapse/iron-collapse.html
|
| @@ -27,7 +27,7 @@ will be collapsed. Use `opened` or `toggle()` to show/hide the content.
|
| this.$.collapse.toggle();
|
| }
|
|
|
| -`iron-collapse` adjusts the height/width of the collapsible element to show/hide
|
| +`iron-collapse` adjusts the max-height/max-width of the collapsible element to show/hide
|
| the content. So avoid putting padding/margin/border on the collapsible directly,
|
| and instead put a div inside and style that.
|
|
|
| @@ -52,25 +52,23 @@ and instead put a div inside and style that.
|
|
|
| <dom-module id="iron-collapse">
|
|
|
| - <style>
|
| -
|
| - :host {
|
| - display: block;
|
| - transition-duration: 300ms;
|
| - overflow: visible;
|
| - }
|
| -
|
| - :host(.iron-collapse-closed) {
|
| - display: none;
|
| - }
|
| + <template>
|
|
|
| - :host(:not(.iron-collapse-opened)) {
|
| - overflow: hidden;
|
| - }
|
| + <style>
|
| + :host {
|
| + display: block;
|
| + transition-duration: 300ms;
|
| + overflow: visible;
|
| + }
|
|
|
| - </style>
|
| + :host(.iron-collapse-closed) {
|
| + display: none;
|
| + }
|
|
|
| - <template>
|
| + :host(:not(.iron-collapse-opened)) {
|
| + overflow: hidden;
|
| + }
|
| + </style>
|
|
|
| <content></content>
|
|
|
| @@ -128,6 +126,22 @@ and instead put a div inside and style that.
|
| return this.horizontal ? 'width' : 'height';
|
| },
|
|
|
| + /**
|
| + * `maxWidth` or `maxHeight`.
|
| + * @private
|
| + */
|
| + get _dimensionMax() {
|
| + return this.horizontal ? 'maxWidth' : 'maxHeight';
|
| + },
|
| +
|
| + /**
|
| + * `max-width` or `max-height`.
|
| + * @private
|
| + */
|
| + get _dimensionMaxCss() {
|
| + return this.horizontal ? 'max-width' : 'max-height';
|
| + },
|
| +
|
| hostAttributes: {
|
| role: 'group',
|
| 'aria-hidden': 'true',
|
| @@ -160,9 +174,15 @@ and instead put a div inside and style that.
|
| this.opened = false;
|
| },
|
|
|
| + /**
|
| + * Updates the size of the element.
|
| + * @param {!String} size The new value for `maxWidth`/`maxHeight` as css property value, usually `auto` or `0px`.
|
| + * @param {boolean=} animated if `true` updates the size with an animation, otherwise without.
|
| + */
|
| updateSize: function(size, animated) {
|
| // No change!
|
| - if (this.style[this.dimension] === size) {
|
| + var curSize = this.style[this._dimensionMax];
|
| + if (curSize === size || (size === 'auto' && !curSize)) {
|
| return;
|
| }
|
|
|
| @@ -174,11 +194,11 @@ and instead put a div inside and style that.
|
| // For `auto` we must calculate what is the final size for the animation.
|
| // After the transition is done, _transitionEnd will set the size back to `auto`.
|
| if (size === 'auto') {
|
| - this.style[this.dimension] = size;
|
| + this.style[this._dimensionMax] = '';
|
| size = this._calcSize();
|
| }
|
| // Go to startSize without animation.
|
| - this.style[this.dimension] = startSize;
|
| + this.style[this._dimensionMax] = startSize;
|
| // Force layout to ensure transition will go. Set offsetHeight to itself
|
| // so that compilers won't remove it.
|
| this.offsetHeight = this.offsetHeight;
|
| @@ -186,7 +206,11 @@ and instead put a div inside and style that.
|
| this._updateTransition(true);
|
| }
|
| // Set the final size.
|
| - this.style[this.dimension] = size;
|
| + if (size === 'auto') {
|
| + this.style[this._dimensionMax] = '';
|
| + } else {
|
| + this.style[this._dimensionMax] = size;
|
| + }
|
| },
|
|
|
| /**
|
| @@ -197,7 +221,7 @@ and instead put a div inside and style that.
|
| * @deprecated since version 1.0.4
|
| */
|
| enableTransition: function(enabled) {
|
| - console.warn('`enableTransition()` is deprecated, use `noAnimation` instead.');
|
| + Polymer.Base._warn('`enableTransition()` is deprecated, use `noAnimation` instead.');
|
| this.noAnimation = !enabled;
|
| },
|
|
|
| @@ -206,8 +230,8 @@ and instead put a div inside and style that.
|
| },
|
|
|
| _horizontalChanged: function() {
|
| - this.style.transitionProperty = this.dimension;
|
| - var otherDimension = this.dimension === 'width' ? 'height' : 'width';
|
| + this.style.transitionProperty = this._dimensionMaxCss;
|
| + var otherDimension = this._dimensionMax === 'maxWidth' ? 'maxHeight' : 'maxWidth';
|
| this.style[otherDimension] = '';
|
| this.updateSize(this.opened ? 'auto' : '0px', false);
|
| },
|
| @@ -231,7 +255,7 @@ and instead put a div inside and style that.
|
|
|
| _transitionEnd: function() {
|
| if (this.opened) {
|
| - this.style[this.dimension] = 'auto';
|
| + this.style[this._dimensionMax] = '';
|
| }
|
| this.toggleClass('iron-collapse-closed', !this.opened);
|
| this.toggleClass('iron-collapse-opened', this.opened);
|
|
|