| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> | 9 --> |
| 10 | 10 |
| (...skipping 25 matching lines...) Expand all Loading... |
| 36 border: 1px solid #dedede; | 36 border: 1px solid #dedede; |
| 37 } | 37 } |
| 38 </style> | 38 </style> |
| 39 | 39 |
| 40 <iron-collapse> | 40 <iron-collapse> |
| 41 <div class="collapse-content"> | 41 <div class="collapse-content"> |
| 42 <div>Content goes here...</div> | 42 <div>Content goes here...</div> |
| 43 </div> | 43 </div> |
| 44 </iron-collapse> | 44 </iron-collapse> |
| 45 | 45 |
| 46 @group Polymer Core Elements | 46 @group Iron Elements |
| 47 @hero hero.svg |
| 48 @demo demo/index.html |
| 47 @element iron-collapse | 49 @element iron-collapse |
| 48 --> | 50 --> |
| 49 | 51 |
| 50 <dom-module id="iron-collapse"> | 52 <dom-module id="iron-collapse"> |
| 51 | 53 |
| 52 <style> | 54 <style> |
| 53 | 55 |
| 54 :host { | 56 :host { |
| 55 display: block; | 57 display: block; |
| 56 transition-duration: 300ms; | 58 transition-duration: 300ms; |
| (...skipping 22 matching lines...) Expand all Loading... |
| 79 Polymer({ | 81 Polymer({ |
| 80 | 82 |
| 81 is: 'iron-collapse', | 83 is: 'iron-collapse', |
| 82 | 84 |
| 83 properties: { | 85 properties: { |
| 84 | 86 |
| 85 /** | 87 /** |
| 86 * If true, the orientation is horizontal; otherwise is vertical. | 88 * If true, the orientation is horizontal; otherwise is vertical. |
| 87 * | 89 * |
| 88 * @attribute horizontal | 90 * @attribute horizontal |
| 89 * @type Boolean | |
| 90 * @default false | |
| 91 */ | 91 */ |
| 92 horizontal: { | 92 horizontal: { |
| 93 type: Boolean, | 93 type: Boolean, |
| 94 value: false, | 94 value: false, |
| 95 observer: 'horizontalChanged' | 95 observer: '_horizontalChanged' |
| 96 }, | 96 }, |
| 97 | 97 |
| 98 /** | 98 /** |
| 99 * Set opened to true to show the collapse element and to false to hide it
. | 99 * Set opened to true to show the collapse element and to false to hide it
. |
| 100 * | 100 * |
| 101 * @attribute opened | 101 * @attribute opened |
| 102 * @type Boolean | |
| 103 * @default false | |
| 104 */ | 102 */ |
| 105 opened: { | 103 opened: { |
| 106 type: Boolean, | 104 type: Boolean, |
| 107 value: false, | 105 value: false, |
| 108 notify: true, | 106 notify: true, |
| 109 observer: 'openedChanged' | 107 observer: '_openedChanged' |
| 110 } | 108 } |
| 111 | 109 |
| 112 }, | 110 }, |
| 113 | 111 |
| 112 hostAttributes: { |
| 113 role: 'group', |
| 114 'aria-expanded': 'false', |
| 115 tabindex: 0 |
| 116 }, |
| 117 |
| 114 listeners: { | 118 listeners: { |
| 115 transitionend: 'transitionEnd' | 119 transitionend: '_transitionEnd' |
| 116 }, | 120 }, |
| 117 | 121 |
| 118 ready: function() { | 122 ready: function() { |
| 119 // Avoid transition at the beginning e.g. page loads and enable | 123 // Avoid transition at the beginning e.g. page loads and enable |
| 120 // transitions only after the element is rendered and ready. | 124 // transitions only after the element is rendered and ready. |
| 121 this._enableTransition = true; | 125 this._enableTransition = true; |
| 122 }, | 126 }, |
| 123 | 127 |
| 124 horizontalChanged: function() { | |
| 125 this.dimension = this.horizontal ? 'width' : 'height'; | |
| 126 this.style.transitionProperty = this.dimension; | |
| 127 }, | |
| 128 | |
| 129 openedChanged: function() { | |
| 130 this[this.opened ? 'show' : 'hide'](); | |
| 131 }, | |
| 132 | |
| 133 /** | 128 /** |
| 134 * Toggle the opened state. | 129 * Toggle the opened state. |
| 135 * | 130 * |
| 136 * @method toggle | 131 * @method toggle |
| 137 */ | 132 */ |
| 138 toggle: function() { | 133 toggle: function() { |
| 139 this.opened = !this.opened; | 134 this.opened = !this.opened; |
| 140 }, | 135 }, |
| 141 | 136 |
| 142 show: function() { | 137 show: function() { |
| 143 this.toggleClass('iron-collapse-closed', false); | 138 this.toggleClass('iron-collapse-closed', false); |
| 144 this.updateSize('auto', false); | 139 this.updateSize('auto', false); |
| 145 var s = this.calcSize(); | 140 var s = this._calcSize(); |
| 146 this.updateSize('0px', false); | 141 this.updateSize('0px', false); |
| 147 // force layout to ensure transition will go | 142 // force layout to ensure transition will go |
| 148 this.offsetHeight; | 143 this.offsetHeight; |
| 149 this.updateSize(s, true); | 144 this.updateSize(s, true); |
| 150 }, | 145 }, |
| 151 | 146 |
| 152 hide: function() { | 147 hide: function() { |
| 153 this.toggleClass('iron-collapse-opened', false); | 148 this.toggleClass('iron-collapse-opened', false); |
| 154 this.updateSize(this.calcSize(), false); | 149 this.updateSize(this._calcSize(), false); |
| 155 // force layout to ensure transition will go | 150 // force layout to ensure transition will go |
| 156 this.offsetHeight; | 151 this.offsetHeight; |
| 157 this.updateSize('0px', true); | 152 this.updateSize('0px', true); |
| 158 }, | 153 }, |
| 159 | 154 |
| 160 updateSize: function(size, animated) { | 155 updateSize: function(size, animated) { |
| 161 this.enableTransition(animated); | 156 this.enableTransition(animated); |
| 162 var s = this.style; | 157 var s = this.style; |
| 163 var nochange = s[this.dimension] === size; | 158 var nochange = s[this.dimension] === size; |
| 164 s[this.dimension] = size; | 159 s[this.dimension] = size; |
| 165 if (animated && nochange) { | 160 if (animated && nochange) { |
| 166 this.transitionEnd(); | 161 this._transitionEnd(); |
| 167 } | 162 } |
| 168 }, | 163 }, |
| 169 | 164 |
| 170 calcSize: function() { | |
| 171 return this.getBoundingClientRect()[this.dimension] + 'px'; | |
| 172 }, | |
| 173 | |
| 174 enableTransition: function(enabled) { | 165 enableTransition: function(enabled) { |
| 175 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; | 166 this.style.transitionDuration = (enabled && this._enableTransition) ? '' :
'0s'; |
| 176 }, | 167 }, |
| 177 | 168 |
| 178 transitionEnd: function() { | 169 _horizontalChanged: function() { |
| 170 this.dimension = this.horizontal ? 'width' : 'height'; |
| 171 this.style.transitionProperty = this.dimension; |
| 172 }, |
| 173 |
| 174 _openedChanged: function() { |
| 175 this[this.opened ? 'show' : 'hide'](); |
| 176 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false'); |
| 177 |
| 178 }, |
| 179 |
| 180 _transitionEnd: function() { |
| 179 if (this.opened) { | 181 if (this.opened) { |
| 180 this.updateSize('auto', false); | 182 this.updateSize('auto', false); |
| 181 } | 183 } |
| 182 this.toggleClass('iron-collapse-closed', !this.opened); | 184 this.toggleClass('iron-collapse-closed', !this.opened); |
| 183 this.toggleClass('iron-collapse-opened', this.opened); | 185 this.toggleClass('iron-collapse-opened', this.opened); |
| 184 this.enableTransition(false); | 186 this.enableTransition(false); |
| 185 } | 187 }, |
| 188 |
| 189 _calcSize: function() { |
| 190 return this.getBoundingClientRect()[this.dimension] + 'px'; |
| 191 }, |
| 192 |
| 186 | 193 |
| 187 }); | 194 }); |
| 188 | 195 |
| 189 </script> | 196 </script> |
| OLD | NEW |