OLD | NEW |
| (Empty) |
1 | |
2 | |
3 Polymer({ | |
4 | |
5 is: 'iron-collapse', | |
6 | |
7 properties: { | |
8 | |
9 /** | |
10 * If true, the orientation is horizontal; otherwise is vertical. | |
11 * | |
12 * @attribute horizontal | |
13 */ | |
14 horizontal: { | |
15 type: Boolean, | |
16 value: false, | |
17 observer: '_horizontalChanged' | |
18 }, | |
19 | |
20 /** | |
21 * Set opened to true to show the collapse element and to false to hide it
. | |
22 * | |
23 * @attribute opened | |
24 */ | |
25 opened: { | |
26 type: Boolean, | |
27 value: false, | |
28 notify: true, | |
29 observer: '_openedChanged' | |
30 } | |
31 | |
32 }, | |
33 | |
34 hostAttributes: { | |
35 role: 'group', | |
36 'aria-expanded': 'false', | |
37 tabindex: 0 | |
38 }, | |
39 | |
40 listeners: { | |
41 transitionend: '_transitionEnd' | |
42 }, | |
43 | |
44 ready: function() { | |
45 // Avoid transition at the beginning e.g. page loads and enable | |
46 // transitions only after the element is rendered and ready. | |
47 this._enableTransition = true; | |
48 }, | |
49 | |
50 /** | |
51 * Toggle the opened state. | |
52 * | |
53 * @method toggle | |
54 */ | |
55 toggle: function() { | |
56 this.opened = !this.opened; | |
57 }, | |
58 | |
59 show: function() { | |
60 this.toggleClass('iron-collapse-closed', false); | |
61 this.updateSize('auto', false); | |
62 var s = this._calcSize(); | |
63 this.updateSize('0px', false); | |
64 // force layout to ensure transition will go | |
65 this.offsetHeight; | |
66 this.updateSize(s, true); | |
67 }, | |
68 | |
69 hide: function() { | |
70 this.toggleClass('iron-collapse-opened', false); | |
71 this.updateSize(this._calcSize(), false); | |
72 // force layout to ensure transition will go | |
73 this.offsetHeight; | |
74 this.updateSize('0px', true); | |
75 }, | |
76 | |
77 updateSize: function(size, animated) { | |
78 this.enableTransition(animated); | |
79 var s = this.style; | |
80 var nochange = s[this.dimension] === size; | |
81 s[this.dimension] = size; | |
82 if (animated && nochange) { | |
83 this._transitionEnd(); | |
84 } | |
85 }, | |
86 | |
87 enableTransition: function(enabled) { | |
88 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; | |
89 }, | |
90 | |
91 _horizontalChanged: function() { | |
92 this.dimension = this.horizontal ? 'width' : 'height'; | |
93 this.style.transitionProperty = this.dimension; | |
94 }, | |
95 | |
96 _openedChanged: function() { | |
97 this[this.opened ? 'show' : 'hide'](); | |
98 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false'); | |
99 | |
100 }, | |
101 | |
102 _transitionEnd: function() { | |
103 if (this.opened) { | |
104 this.updateSize('auto', false); | |
105 } | |
106 this.toggleClass('iron-collapse-closed', !this.opened); | |
107 this.toggleClass('iron-collapse-opened', this.opened); | |
108 this.enableTransition(false); | |
109 }, | |
110 | |
111 _calcSize: function() { | |
112 return this.getBoundingClientRect()[this.dimension] + 'px'; | |
113 }, | |
114 | |
115 | |
116 }); | |
117 | |
OLD | NEW |