| OLD | NEW |
| 1 | 1 Polymer({ |
| 2 | 2 |
| 3 Polymer({ | |
| 4 | |
| 5 is: 'iron-collapse', | 3 is: 'iron-collapse', |
| 6 | 4 |
| 7 properties: { | 5 properties: { |
| 8 | 6 |
| 9 /** | 7 /** |
| 10 * If true, the orientation is horizontal; otherwise is vertical. | 8 * If true, the orientation is horizontal; otherwise is vertical. |
| 11 * | 9 * |
| 12 * @attribute horizontal | 10 * @attribute horizontal |
| 13 */ | 11 */ |
| 14 horizontal: { | 12 horizontal: { |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 49 /** | 47 /** |
| 50 * Toggle the opened state. | 48 * Toggle the opened state. |
| 51 * | 49 * |
| 52 * @method toggle | 50 * @method toggle |
| 53 */ | 51 */ |
| 54 toggle: function() { | 52 toggle: function() { |
| 55 this.opened = !this.opened; | 53 this.opened = !this.opened; |
| 56 }, | 54 }, |
| 57 | 55 |
| 58 show: function() { | 56 show: function() { |
| 59 this.toggleClass('iron-collapse-closed', false); | 57 this.opened = true; |
| 60 this.updateSize('auto', false); | |
| 61 var s = this._calcSize(); | |
| 62 this.updateSize('0px', false); | |
| 63 // force layout to ensure transition will go | |
| 64 this.offsetHeight; | |
| 65 this.updateSize(s, true); | |
| 66 }, | 58 }, |
| 67 | 59 |
| 68 hide: function() { | 60 hide: function() { |
| 69 this.toggleClass('iron-collapse-opened', false); | 61 this.opened = false; |
| 70 this.updateSize(this._calcSize(), false); | |
| 71 // force layout to ensure transition will go | |
| 72 this.offsetHeight; | |
| 73 this.updateSize('0px', true); | |
| 74 }, | 62 }, |
| 75 | 63 |
| 76 updateSize: function(size, animated) { | 64 updateSize: function(size, animated) { |
| 77 this.enableTransition(animated); | 65 this.enableTransition(animated); |
| 78 var s = this.style; | 66 var s = this.style; |
| 79 var nochange = s[this.dimension] === size; | 67 var nochange = s[this.dimension] === size; |
| 80 s[this.dimension] = size; | 68 s[this.dimension] = size; |
| 81 if (animated && nochange) { | 69 if (animated && nochange) { |
| 82 this._transitionEnd(); | 70 this._transitionEnd(); |
| 83 } | 71 } |
| 84 }, | 72 }, |
| 85 | 73 |
| 86 enableTransition: function(enabled) { | 74 enableTransition: function(enabled) { |
| 87 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; | 75 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; |
| 88 }, | 76 }, |
| 89 | 77 |
| 90 _horizontalChanged: function() { | 78 _horizontalChanged: function() { |
| 91 this.dimension = this.horizontal ? 'width' : 'height'; | 79 this.dimension = this.horizontal ? 'width' : 'height'; |
| 92 this.style.transitionProperty = this.dimension; | 80 this.style.transitionProperty = this.dimension; |
| 93 }, | 81 }, |
| 94 | 82 |
| 95 _openedChanged: function() { | 83 _openedChanged: function() { |
| 96 this[this.opened ? 'show' : 'hide'](); | 84 if (this.opened) { |
| 85 this.toggleClass('iron-collapse-closed', false); |
| 86 this.updateSize('auto', false); |
| 87 var s = this._calcSize(); |
| 88 this.updateSize('0px', false); |
| 89 // force layout to ensure transition will go |
| 90 /** @suppress {suspiciousCode} */ this.offsetHeight; |
| 91 this.updateSize(s, true); |
| 92 } |
| 93 else { |
| 94 this.toggleClass('iron-collapse-opened', false); |
| 95 this.updateSize(this._calcSize(), false); |
| 96 // force layout to ensure transition will go |
| 97 /** @suppress {suspiciousCode} */ this.offsetHeight; |
| 98 this.updateSize('0px', true); |
| 99 } |
| 97 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false'); | 100 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false'); |
| 98 | 101 |
| 99 }, | 102 }, |
| 100 | 103 |
| 101 _transitionEnd: function() { | 104 _transitionEnd: function() { |
| 102 if (this.opened) { | 105 if (this.opened) { |
| 103 this.updateSize('auto', false); | 106 this.updateSize('auto', false); |
| 104 } | 107 } |
| 105 this.toggleClass('iron-collapse-closed', !this.opened); | 108 this.toggleClass('iron-collapse-closed', !this.opened); |
| 106 this.toggleClass('iron-collapse-opened', this.opened); | 109 this.toggleClass('iron-collapse-opened', this.opened); |
| 107 this.enableTransition(false); | 110 this.enableTransition(false); |
| 108 }, | 111 }, |
| 109 | 112 |
| 110 _calcSize: function() { | 113 _calcSize: function() { |
| 111 return this.getBoundingClientRect()[this.dimension] + 'px'; | 114 return this.getBoundingClientRect()[this.dimension] + 'px'; |
| 112 }, | 115 }, |
| 113 | 116 |
| 114 | 117 |
| 115 }); | 118 }); |
| 116 | |
| OLD | NEW |