| 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 |