Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(157)

Side by Side Diff: third_party/polymer/v0_8/components/iron-collapse/iron-collapse.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698