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 |