| OLD | NEW |
| 1 Polymer({ | 1 Polymer({ |
| 2 | 2 |
| 3 is: 'iron-collapse', | 3 is: 'iron-collapse', |
| 4 | 4 |
| 5 behaviors: [ | 5 behaviors: [ |
| 6 Polymer.IronResizableBehavior | 6 Polymer.IronResizableBehavior |
| 7 ], | 7 ], |
| 8 | 8 |
| 9 properties: { | 9 properties: { |
| 10 | 10 |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 42 | 42 |
| 43 }, | 43 }, |
| 44 | 44 |
| 45 get dimension() { | 45 get dimension() { |
| 46 return this.horizontal ? 'width' : 'height'; | 46 return this.horizontal ? 'width' : 'height'; |
| 47 }, | 47 }, |
| 48 | 48 |
| 49 /** | 49 /** |
| 50 * `maxWidth` or `maxHeight`. | 50 * `maxWidth` or `maxHeight`. |
| 51 * @private | 51 * @private |
| 52 */ | 52 */ |
| 53 get _dimensionMax() { | 53 get _dimensionMax() { |
| 54 return this.horizontal ? 'maxWidth' : 'maxHeight'; | 54 return this.horizontal ? 'maxWidth' : 'maxHeight'; |
| 55 }, | 55 }, |
| 56 | 56 |
| 57 /** | 57 /** |
| 58 * `max-width` or `max-height`. | 58 * `max-width` or `max-height`. |
| 59 * @private | 59 * @private |
| 60 */ | 60 */ |
| 61 get _dimensionMaxCss() { | 61 get _dimensionMaxCss() { |
| 62 return this.horizontal ? 'max-width' : 'max-height'; | 62 return this.horizontal ? 'max-width' : 'max-height'; |
| (...skipping 28 matching lines...) Expand all Loading... |
| 91 }, | 91 }, |
| 92 | 92 |
| 93 hide: function() { | 93 hide: function() { |
| 94 this.opened = false; | 94 this.opened = false; |
| 95 }, | 95 }, |
| 96 | 96 |
| 97 /** | 97 /** |
| 98 * Updates the size of the element. | 98 * Updates the size of the element. |
| 99 * @param {string} size The new value for `maxWidth`/`maxHeight` as css prop
erty value, usually `auto` or `0px`. | 99 * @param {string} size The new value for `maxWidth`/`maxHeight` as css prop
erty value, usually `auto` or `0px`. |
| 100 * @param {boolean=} animated if `true` updates the size with an animation,
otherwise without. | 100 * @param {boolean=} animated if `true` updates the size with an animation,
otherwise without. |
| 101 */ | 101 */ |
| 102 updateSize: function(size, animated) { | 102 updateSize: function(size, animated) { |
| 103 // No change! | 103 // No change! |
| 104 var curSize = this.style[this._dimensionMax]; | 104 var curSize = this.style[this._dimensionMax]; |
| 105 if (curSize === size || (size === 'auto' && !curSize)) { | 105 if (curSize === size || (size === 'auto' && !curSize)) { |
| 106 return; | 106 return; |
| 107 } | 107 } |
| 108 | 108 |
| 109 this._updateTransition(false); | 109 this._updateTransition(false); |
| 110 // If we can animate, must do some prep work. | 110 // If we can animate, must do some prep work. |
| 111 if (animated && !this.noAnimation && this._isDisplayed) { | 111 if (animated && !this.noAnimation && this._isDisplayed) { |
| 112 // Animation will start at the current size. | 112 // Animation will start at the current size. |
| 113 var startSize = this._calcSize(); | 113 var startSize = this._calcSize(); |
| 114 // For `auto` we must calculate what is the final size for the animation
. | 114 // For `auto` we must calculate what is the final size for the animation
. |
| 115 // After the transition is done, _transitionEnd will set the size back t
o `auto`. | 115 // After the transition is done, _transitionEnd will set the size back t
o `auto`. |
| 116 if (size === 'auto') { | 116 if (size === 'auto') { |
| 117 this.style[this._dimensionMax] = ''; | 117 this.style[this._dimensionMax] = ''; |
| 118 size = this._calcSize(); | 118 size = this._calcSize(); |
| 119 } | 119 } |
| 120 // Go to startSize without animation. | 120 // Go to startSize without animation. |
| 121 this.style[this._dimensionMax] = startSize; | 121 this.style[this._dimensionMax] = startSize; |
| 122 // Force layout to ensure transition will go. Set offsetHeight to itself | 122 // Force layout to ensure transition will go. Set scrollTop to itself |
| 123 // so that compilers won't remove it. | 123 // so that compilers won't remove it. |
| 124 this.offsetHeight = this.offsetHeight; | 124 this.scrollTop = this.scrollTop; |
| 125 // Enable animation. | 125 // Enable animation. |
| 126 this._updateTransition(true); | 126 this._updateTransition(true); |
| 127 } | 127 } |
| 128 // Set the final size. | 128 // Set the final size. |
| 129 if (size === 'auto') { | 129 if (size === 'auto') { |
| 130 this.style[this._dimensionMax] = ''; | 130 this.style[this._dimensionMax] = ''; |
| 131 } else { | 131 } else { |
| 132 this.style[this._dimensionMax] = size; | 132 this.style[this._dimensionMax] = size; |
| 133 } | 133 } |
| 134 }, | 134 }, |
| (...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 194 if (rect[prop] !== 0) return true; | 194 if (rect[prop] !== 0) return true; |
| 195 } | 195 } |
| 196 return false; | 196 return false; |
| 197 }, | 197 }, |
| 198 | 198 |
| 199 _calcSize: function() { | 199 _calcSize: function() { |
| 200 return this.getBoundingClientRect()[this.dimension] + 'px'; | 200 return this.getBoundingClientRect()[this.dimension] + 'px'; |
| 201 } | 201 } |
| 202 | 202 |
| 203 }); | 203 }); |
| OLD | NEW |