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

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

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 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
(Empty)
1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9
10 <!--
11 `core-collapse` creates a collapsible block of content. By default, the content
12 will be collapsed. Use `opened` to show/hide the content.
13
14 <button on-click="{{toggle}}">toggle collapse</button>
15
16 <core-collapse id="collapse">
17 ...
18 </core-collapse>
19
20 ...
21
22 toggle: function() {
23 this.$.collapse.toggle();
24 }
25
26 @group Polymer Core Elements
27 @element core-collapse
28 -->
29
30 <link rel="import" href="../polymer/polymer.html">
31
32 <link rel="stylesheet" href="core-collapse.css" shim-shadowdom>
33
34 <polymer-element name="core-collapse" attributes="target horizontal opened durat ion fixedSize">
35 <template>
36
37 <content></content>
38
39 </template>
40 <script>
41
42 Polymer('core-collapse', {
43 /**
44 * Fired when the target element has been resized as a result of the opened
45 * state changing.
46 *
47 * @event core-resize
48 */
49
50 /**
51 * The target element.
52 *
53 * @attribute target
54 * @type object
55 * @default null
56 */
57 target: null,
58
59 /**
60 * If true, the orientation is horizontal; otherwise is vertical.
61 *
62 * @attribute horizontal
63 * @type boolean
64 * @default false
65 */
66 horizontal: false,
67
68 /**
69 * Set opened to true to show the collapse element and to false to hide it.
70 *
71 * @attribute opened
72 * @type boolean
73 * @default false
74 */
75 opened: false,
76
77 /**
78 * Collapsing/expanding animation duration in second.
79 *
80 * @attribute duration
81 * @type number
82 * @default 0.33
83 */
84 duration: 0.33,
85
86 /**
87 * If true, the size of the target element is fixed and is set
88 * on the element. Otherwise it will try to
89 * use auto to determine the natural size to use
90 * for collapsing/expanding.
91 *
92 * @attribute fixedSize
93 * @type boolean
94 * @default false
95 */
96 fixedSize: false,
97
98 created: function() {
99 this.transitionEndListener = this.transitionEnd.bind(this);
100 },
101
102 ready: function() {
103 this.target = this.target || this;
104 },
105
106 domReady: function() {
107 this.async(function() {
108 this.afterInitialUpdate = true;
109 });
110 },
111
112 detached: function() {
113 if (this.target) {
114 this.removeListeners(this.target);
115 }
116 },
117
118 targetChanged: function(old) {
119 if (old) {
120 this.removeListeners(old);
121 }
122 if (!this.target) {
123 return;
124 }
125 this.isTargetReady = !!this.target;
126 this.classList.toggle('core-collapse-closed', this.target !== this);
127 this.target.style.overflow = 'hidden';
128 this.horizontalChanged();
129 this.addListeners(this.target);
130 // set core-collapse-closed class initially to hide the target
131 this.toggleClosedClass(true);
132 this.update();
133 },
134
135 addListeners: function(node) {
136 node.addEventListener('transitionend', this.transitionEndListener);
137 },
138
139 removeListeners: function(node) {
140 node.removeEventListener('transitionend', this.transitionEndListener);
141 },
142
143 horizontalChanged: function() {
144 this.dimension = this.horizontal ? 'width' : 'height';
145 },
146
147 openedChanged: function() {
148 this.update();
149 },
150
151 /**
152 * Toggle the opened state.
153 *
154 * @method toggle
155 */
156 toggle: function() {
157 this.opened = !this.opened;
158 },
159
160 setTransitionDuration: function(duration) {
161 var s = this.target.style;
162 s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
163 if (duration === 0) {
164 this.async('transitionEnd');
165 }
166 },
167
168 transitionEnd: function() {
169 if (this.opened && !this.fixedSize) {
170 this.updateSize('auto', null);
171 }
172 this.setTransitionDuration(null);
173 this.toggleClosedClass(!this.opened);
174 this.asyncFire('core-resize', null, this.target);
175 },
176
177 toggleClosedClass: function(closed) {
178 this.hasClosedClass = closed;
179 this.target.classList.toggle('core-collapse-closed', closed);
180 },
181
182 updateSize: function(size, duration, forceEnd) {
183 this.setTransitionDuration(duration);
184 this.calcSize();
185 var s = this.target.style;
186 var nochange = s[this.dimension] === size;
187 s[this.dimension] = size;
188 // transitonEnd will not be called if the size has not changed
189 if (forceEnd && nochange) {
190 this.transitionEnd();
191 }
192 },
193
194 update: function() {
195 if (!this.target) {
196 return;
197 }
198 if (!this.isTargetReady) {
199 this.targetChanged();
200 }
201 this.horizontalChanged();
202 this[this.opened ? 'show' : 'hide']();
203 },
204
205 calcSize: function() {
206 return this.target.getBoundingClientRect()[this.dimension] + 'px';
207 },
208
209 getComputedSize: function() {
210 return getComputedStyle(this.target)[this.dimension];
211 },
212
213 show: function() {
214 this.toggleClosedClass(false);
215 // for initial update, skip the expanding animation to optimize
216 // performance e.g. skip calcSize
217 if (!this.afterInitialUpdate) {
218 this.transitionEnd();
219 return;
220 }
221 if (!this.fixedSize) {
222 this.updateSize('auto', null);
223 var s = this.calcSize();
224 this.updateSize(0, null);
225 }
226 this.async(function() {
227 this.updateSize(this.size || s, this.duration, true);
228 });
229 },
230
231 hide: function() {
232 // don't need to do anything if it's already hidden
233 if (this.hasClosedClass && !this.fixedSize) {
234 return;
235 }
236 if (this.fixedSize) {
237 // save the size before hiding it
238 this.size = this.getComputedSize();
239 } else {
240 this.updateSize(this.calcSize(), null);
241 }
242 this.async(function() {
243 this.updateSize(0, this.duration);
244 });
245 }
246
247 });
248
249 </script>
250 </polymer-element>
OLDNEW
« no previous file with comments | « third_party/polymer/components/core-collapse/core-collapse.css ('k') | third_party/polymer/components/core-collapse/demo.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698