OLD | NEW |
1 // Copyright 2013 The Chromium Authors. All rights reserved. | 1 // Copyright 2013 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 /** | 5 /** |
6 * @fileoverview First run UI. | 6 * @fileoverview First run UI. |
7 */ | 7 */ |
8 | 8 |
9 // <include src="step.js"> | 9 // <include src="step.js"> |
10 | 10 |
(...skipping 12 matching lines...) Expand all Loading... |
23 function changeVisibility( | 23 function changeVisibility( |
24 element, visible, opt_transitionDuration, opt_onFinished) { | 24 element, visible, opt_transitionDuration, opt_onFinished) { |
25 var classes = element.classList; | 25 var classes = element.classList; |
26 // If target visibility is the same as current element visibility. | 26 // If target visibility is the same as current element visibility. |
27 if (classes.contains('transparent') === !visible) { | 27 if (classes.contains('transparent') === !visible) { |
28 if (opt_onFinished) | 28 if (opt_onFinished) |
29 opt_onFinished(); | 29 opt_onFinished(); |
30 return; | 30 return; |
31 } | 31 } |
32 var transitionDuration = (opt_transitionDuration === undefined) ? | 32 var transitionDuration = (opt_transitionDuration === undefined) ? |
33 cr.FirstRun.getDefaultTransitionDuration() : opt_transitionDuration; | 33 cr.FirstRun.getDefaultTransitionDuration() : |
| 34 opt_transitionDuration; |
34 var style = element.style; | 35 var style = element.style; |
35 var oldDurationValue = style.getPropertyValue('transition-duration'); | 36 var oldDurationValue = style.getPropertyValue('transition-duration'); |
36 style.setProperty('transition-duration', transitionDuration + 'ms'); | 37 style.setProperty('transition-duration', transitionDuration + 'ms'); |
37 var transition = visible ? 'show-animated' : 'hide-animated'; | 38 var transition = visible ? 'show-animated' : 'hide-animated'; |
38 classes.add(transition); | 39 classes.add(transition); |
39 classes.toggle('transparent'); | 40 classes.toggle('transparent'); |
40 element.addEventListener('transitionend', function f() { | 41 element.addEventListener('transitionend', function f() { |
41 element.removeEventListener('transitionend', f); | 42 element.removeEventListener('transitionend', f); |
42 classes.remove(transition); | 43 classes.remove(transition); |
43 if (oldDurationValue) | 44 if (oldDurationValue) |
(...skipping 119 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
163 }, 0); | 164 }, 0); |
164 }, | 165 }, |
165 | 166 |
166 /** | 167 /** |
167 * Removes all holes previously added by |addHole|. | 168 * Removes all holes previously added by |addHole|. |
168 * @param {function=} opt_onHolesRemoved Called after all holes have been | 169 * @param {function=} opt_onHolesRemoved Called after all holes have been |
169 * hidden. | 170 * hidden. |
170 */ | 171 */ |
171 removeHoles: function(opt_onHolesRemoved) { | 172 removeHoles: function(opt_onHolesRemoved) { |
172 var mask = this.mask_; | 173 var mask = this.mask_; |
173 var holes = Array.prototype.slice.call( | 174 var holes = |
174 mask.getElementsByClassName('hole')); | 175 Array.prototype.slice.call(mask.getElementsByClassName('hole')); |
175 var holesLeft = holes.length; | 176 var holesLeft = holes.length; |
176 if (!holesLeft) { | 177 if (!holesLeft) { |
177 if (opt_onHolesRemoved) | 178 if (opt_onHolesRemoved) |
178 opt_onHolesRemoved(); | 179 opt_onHolesRemoved(); |
179 return; | 180 return; |
180 } | 181 } |
181 holes.forEach(function(hole) { | 182 holes.forEach(function(hole) { |
182 changeVisibility(hole, false, this.getDefaultTransitionDuration(), | 183 changeVisibility( |
183 function() { | 184 hole, false, this.getDefaultTransitionDuration(), function() { |
184 mask.removeChild(hole); | 185 mask.removeChild(hole); |
185 --holesLeft; | 186 --holesLeft; |
186 if (!holesLeft && opt_onHolesRemoved) | 187 if (!holesLeft && opt_onHolesRemoved) |
187 opt_onHolesRemoved(); | 188 opt_onHolesRemoved(); |
188 }); | 189 }); |
189 }.bind(this)); | 190 }.bind(this)); |
190 }, | 191 }, |
191 | 192 |
192 /** | 193 /** |
193 * Hides currently active step and notifies chrome after step has been | 194 * Hides currently active step and notifies chrome after step has been |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
244 }.bind(this)); | 245 }.bind(this)); |
245 }, | 246 }, |
246 | 247 |
247 /** | 248 /** |
248 * Sets visibility of the background. | 249 * Sets visibility of the background. |
249 * @param {boolean} visibility Whether background should be visible. | 250 * @param {boolean} visibility Whether background should be visible. |
250 * @param {function()=} opt_onCompletion Called after visibility has | 251 * @param {function()=} opt_onCompletion Called after visibility has |
251 * changed. | 252 * changed. |
252 */ | 253 */ |
253 setBackgroundVisible: function(visible, opt_onCompletion) { | 254 setBackgroundVisible: function(visible, opt_onCompletion) { |
254 changeVisibility(this.backgroundContainer_, visible, | 255 changeVisibility( |
| 256 this.backgroundContainer_, visible, |
255 this.getBackgroundTransitionDuration(), opt_onCompletion); | 257 this.getBackgroundTransitionDuration(), opt_onCompletion); |
256 }, | 258 }, |
257 | 259 |
258 /** | 260 /** |
259 * Returns default duration of animated transitions, in ms. | 261 * Returns default duration of animated transitions, in ms. |
260 */ | 262 */ |
261 getDefaultTransitionDuration: function() { | 263 getDefaultTransitionDuration: function() { |
262 return this.transitionsEnabled_ ? DEFAULT_TRANSITION_DURATION_MS : 0; | 264 return this.transitionsEnabled_ ? DEFAULT_TRANSITION_DURATION_MS : 0; |
263 }, | 265 }, |
264 | 266 |
265 /** | 267 /** |
266 * Returns duration of transitions of background shield, in ms. | 268 * Returns duration of transitions of background shield, in ms. |
267 */ | 269 */ |
268 getBackgroundTransitionDuration: function() { | 270 getBackgroundTransitionDuration: function() { |
269 return this.transitionsEnabled_ ? BG_TRANSITION_DURATION_MS : 0; | 271 return this.transitionsEnabled_ ? BG_TRANSITION_DURATION_MS : 0; |
270 } | 272 } |
271 }; | 273 }; |
272 }); | 274 }); |
273 | 275 |
274 /** | 276 /** |
275 * Initializes UI. | 277 * Initializes UI. |
276 */ | 278 */ |
277 window.onload = function() { | 279 window.onload = function() { |
278 cr.FirstRun.initialize(); | 280 cr.FirstRun.initialize(); |
279 }; | 281 }; |
OLD | NEW |