OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 // Counter used to give animations unique names. | 5 // Counter used to give animations unique names. |
6 var animationCounter = 0; | 6 var animationCounter = 0; |
7 | 7 |
8 var animationEventTracker = new EventTracker(); | 8 var animationEventTracker = new EventTracker(); |
9 | 9 |
10 function addAnimation(code) { | 10 function addAnimation(code) { |
11 var name = 'anim' + animationCounter; | 11 var name = 'anim' + animationCounter; |
12 animationCounter++; | 12 animationCounter++; |
13 var rules = document.createTextNode( | 13 var rules = document.createTextNode('@keyframes ' + name + ' {' + code + '}'); |
14 '@keyframes ' + name + ' {' + code + '}'); | |
15 var el = document.createElement('style'); | 14 var el = document.createElement('style'); |
16 el.type = 'text/css'; | 15 el.type = 'text/css'; |
17 el.appendChild(rules); | 16 el.appendChild(rules); |
18 el.setAttribute('id', name); | 17 el.setAttribute('id', name); |
19 document.body.appendChild(el); | 18 document.body.appendChild(el); |
20 | 19 |
21 return name; | 20 return name; |
22 } | 21 } |
23 | 22 |
24 /** | 23 /** |
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
123 * @param {HTMLElement} el The element to hide. | 122 * @param {HTMLElement} el The element to hide. |
124 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no | 123 * @param {boolean=} opt_justShow Whether {@code el} should be hidden with no |
125 * animation. | 124 * animation. |
126 */ | 125 */ |
127 function fadeInOption(el, opt_justShow) { | 126 function fadeInOption(el, opt_justShow) { |
128 if (el.classList.contains('visible')) | 127 if (el.classList.contains('visible')) |
129 return; | 128 return; |
130 // To make the option visible during the first fade in. | 129 // To make the option visible during the first fade in. |
131 el.hidden = false; | 130 el.hidden = false; |
132 | 131 |
133 var leftColumn = assertInstanceof(el.querySelector('.left-column'), | 132 var leftColumn = |
134 HTMLElement); | 133 assertInstanceof(el.querySelector('.left-column'), HTMLElement); |
135 wrapContentsInDiv(leftColumn, ['invisible']); | 134 wrapContentsInDiv(leftColumn, ['invisible']); |
136 var rightColumn = assertInstanceof(el.querySelector('.right-column'), | 135 var rightColumn = |
137 HTMLElement); | 136 assertInstanceof(el.querySelector('.right-column'), HTMLElement); |
138 wrapContentsInDiv(rightColumn, ['invisible']); | 137 wrapContentsInDiv(rightColumn, ['invisible']); |
139 | 138 |
140 var toAnimate = el.querySelectorAll('.collapsible'); | 139 var toAnimate = el.querySelectorAll('.collapsible'); |
141 for (var i = 0; i < toAnimate.length; i++) | 140 for (var i = 0; i < toAnimate.length; i++) |
142 fadeInElement(assertInstanceof(toAnimate[i], HTMLElement), opt_justShow); | 141 fadeInElement(assertInstanceof(toAnimate[i], HTMLElement), opt_justShow); |
143 el.classList.add('visible'); | 142 el.classList.add('visible'); |
144 } | 143 } |
145 | 144 |
146 /** | 145 /** |
147 * Fades out a printing option existing under |el|. | 146 * Fades out a printing option existing under |el|. |
148 * @param {HTMLElement} el The element to hide. | 147 * @param {HTMLElement} el The element to hide. |
149 * @param {boolean=} opt_justHide Whether {@code el} should be hidden with no | 148 * @param {boolean=} opt_justHide Whether {@code el} should be hidden with no |
150 * animation. | 149 * animation. |
151 */ | 150 */ |
152 function fadeOutOption(el, opt_justHide) { | 151 function fadeOutOption(el, opt_justHide) { |
153 if (!el.classList.contains('visible')) | 152 if (!el.classList.contains('visible')) |
154 return; | 153 return; |
155 | 154 |
156 var leftColumn = assertInstanceof(el.querySelector('.left-column'), | 155 var leftColumn = |
157 HTMLElement); | 156 assertInstanceof(el.querySelector('.left-column'), HTMLElement); |
158 wrapContentsInDiv(leftColumn, ['visible']); | 157 wrapContentsInDiv(leftColumn, ['visible']); |
159 var rightColumn = assertInstanceof(el.querySelector('.right-column'), | 158 var rightColumn = |
160 HTMLElement); | 159 assertInstanceof(el.querySelector('.right-column'), HTMLElement); |
161 if (rightColumn) | 160 if (rightColumn) |
162 wrapContentsInDiv(rightColumn, ['visible']); | 161 wrapContentsInDiv(rightColumn, ['visible']); |
163 | 162 |
164 var toAnimate = el.querySelectorAll('.collapsible'); | 163 var toAnimate = el.querySelectorAll('.collapsible'); |
165 for (var i = 0; i < toAnimate.length; i++) { | 164 for (var i = 0; i < toAnimate.length; i++) { |
166 if (opt_justHide) { | 165 if (opt_justHide) { |
167 toAnimate[i].hidden = true; | 166 toAnimate[i].hidden = true; |
168 toAnimate[i].classList.add('closing'); | 167 toAnimate[i].classList.add('closing'); |
169 toAnimate[i].classList.remove('visible'); | 168 toAnimate[i].classList.remove('visible'); |
170 } else { | 169 } else { |
(...skipping 17 matching lines...) Expand all Loading... |
188 while (el.childNodes.length > 0) | 187 while (el.childNodes.length > 0) |
189 div.appendChild(el.firstChild); | 188 div.appendChild(el.firstChild); |
190 el.appendChild(div); | 189 el.appendChild(div); |
191 } | 190 } |
192 | 191 |
193 div.className = ''; | 192 div.className = ''; |
194 div.classList.add('collapsible'); | 193 div.classList.add('collapsible'); |
195 for (var i = 0; i < classes.length; i++) | 194 for (var i = 0; i < classes.length; i++) |
196 div.classList.add(classes[i]); | 195 div.classList.add(classes[i]); |
197 } | 196 } |
OLD | NEW |