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

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

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 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 @license
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
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
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
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12
13 <!--
14 `iron-collapse` creates a collapsible block of content. By default, the content
15 will be collapsed. Use `opened` or `toggle()` to show/hide the content.
16
17 <button on-click="{{toggle}}">toggle collapse</button>
18
19 <iron-collapse id="collapse">
20 <div>Content goes here...</div>
21 </iron-collapse>
22
23 ...
24
25 toggle: function() {
26 this.$.collapse.toggle();
27 }
28
29 `iron-collapse` adjusts the height/width of the collapsible element to show/hide
30 the content. So avoid putting padding/margin/border on the collapsible directly ,
31 and instead put a div inside and style that.
32
33 <style>
34 .collapse-content {
35 padding: 15px;
36 border: 1px solid #dedede;
37 }
38 </style>
39
40 <iron-collapse>
41 <div class="collapse-content">
42 <div>Content goes here...</div>
43 </div>
44 </iron-collapse>
45
46 @group Iron Elements
47 @hero hero.svg
48 @demo demo/index.html
49 @element iron-collapse
50 -->
51
52 <dom-module id="iron-collapse">
53
54 <style>
55
56 :host {
57 display: block;
58 transition-duration: 300ms;
59 }
60
61 :host(.iron-collapse-closed) {
62 display: none;
63 }
64
65 :host(:not(.iron-collapse-opened)) {
66 overflow: hidden;
67 }
68
69 </style>
70
71 <template>
72
73 <content></content>
74
75 </template>
76
77 </dom-module>
78
79 <script>
80
81 Polymer({
82
83 is: 'iron-collapse',
84
85 properties: {
86
87 /**
88 * If true, the orientation is horizontal; otherwise is vertical.
89 *
90 * @attribute horizontal
91 */
92 horizontal: {
93 type: Boolean,
94 value: false,
95 observer: '_horizontalChanged'
96 },
97
98 /**
99 * Set opened to true to show the collapse element and to false to hide it .
100 *
101 * @attribute opened
102 */
103 opened: {
104 type: Boolean,
105 value: false,
106 notify: true,
107 observer: '_openedChanged'
108 }
109
110 },
111
112 hostAttributes: {
113 role: 'group',
114 'aria-expanded': 'false'
115 },
116
117 listeners: {
118 transitionend: '_transitionEnd'
119 },
120
121 ready: function() {
122 // Avoid transition at the beginning e.g. page loads and enable
123 // transitions only after the element is rendered and ready.
124 this._enableTransition = true;
125 },
126
127 /**
128 * Toggle the opened state.
129 *
130 * @method toggle
131 */
132 toggle: function() {
133 this.opened = !this.opened;
134 },
135
136 show: function() {
137 this.toggleClass('iron-collapse-closed', false);
138 this.updateSize('auto', false);
139 var s = this._calcSize();
140 this.updateSize('0px', false);
141 // force layout to ensure transition will go
142 this.offsetHeight;
143 this.updateSize(s, true);
144 },
145
146 hide: function() {
147 this.toggleClass('iron-collapse-opened', false);
148 this.updateSize(this._calcSize(), false);
149 // force layout to ensure transition will go
150 this.offsetHeight;
151 this.updateSize('0px', true);
152 },
153
154 updateSize: function(size, animated) {
155 this.enableTransition(animated);
156 var s = this.style;
157 var nochange = s[this.dimension] === size;
158 s[this.dimension] = size;
159 if (animated && nochange) {
160 this._transitionEnd();
161 }
162 },
163
164 enableTransition: function(enabled) {
165 this.style.transitionDuration = (enabled && this._enableTransition) ? '' : '0s';
166 },
167
168 _horizontalChanged: function() {
169 this.dimension = this.horizontal ? 'width' : 'height';
170 this.style.transitionProperty = this.dimension;
171 },
172
173 _openedChanged: function() {
174 this[this.opened ? 'show' : 'hide']();
175 this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
176
177 },
178
179 _transitionEnd: function() {
180 if (this.opened) {
181 this.updateSize('auto', false);
182 }
183 this.toggleClass('iron-collapse-closed', !this.opened);
184 this.toggleClass('iron-collapse-opened', this.opened);
185 this.enableTransition(false);
186 },
187
188 _calcSize: function() {
189 return this.getBoundingClientRect()[this.dimension] + 'px';
190 },
191
192
193 });
194
195 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698