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

Side by Side Diff: chrome/browser/resources/chromeos/oobe.js

Issue 7058048: [cros] Layout for OOBE WebUI. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: refactoring Created 9 years, 6 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 | Annotate | Revision Log
OLDNEW
(Empty)
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file.
4
5 /**
6 * @fileoverview Out of the box experience flow (OOBE).
7 * This is the main code for the OOBE WebUI implementation.
8 */
9
10 const steps = ['connect', 'eula', 'update'];
11
12 cr.define('cr.ui', function() {
13 /**
14 * Constructs an Out of box controller. It manages initialization of screens,
15 * transitions, error messages display.
16 *
17 * @constructor
18 */
19 function Oobe() {
20 }
21
22 cr.addSingletonGetter(Oobe);
23
24 Oobe.localStrings_ = new LocalStrings();
25
26 Oobe.prototype = {
27 /**
28 * Current OOBE step, index in the steps array.
29 * @type {number}
30 */
31 currentStep_: 0,
32
33 /**
34 * Switches to the next OOBE step.
35 * @param {number} nextStepIndex Index of the next step.
36 */
37 toggleStep_: function(nextStepIndex) {
38 var currentStepId = steps[this.currentStep_];
39 var nextStepId = steps[nextStepIndex];
40 var oldStep = $(currentStepId);
41 var oldHeader = $('header-' + currentStepId);
42 var newStep = $(nextStepId);
43 var newHeader = $('header-' + nextStepId);
44
45 newStep.classList.remove('hidden');
46
47 if (nextStepIndex > this.currentStep_) {
48 oldHeader.classList.add('left');
49 oldStep.classList.add('left');
50 newHeader.classList.remove('right');
51 newStep.classList.remove('right');
52 } else if (nextStepIndex < this.currentStep_) {
53 oldHeader.classList.add('right');
54 oldStep.classList.add('right');
55 newHeader.classList.remove('left');
56 newStep.classList.remove('left');
57 }
58
59 // Adjust inner container height based on new step's height.
60 $('inner-container').style.height = newStep.offsetHeight;
61
62 oldStep.addEventListener('webkitTransitionEnd', function f(e) {
63 oldStep.removeEventListener('webkitTransitionEnd', f);
64 oldStep.classList.add('hidden');
65 });
66 this.currentStep_ = nextStepIndex;
67 $('oobe').className = nextStepId;
68 },
69 };
70
71 /**
72 * Initializes the OOBE flow. This will cause all C++ handlers to
73 * be invoked to do final setup.
74 */
75 Oobe.initialize = function() {
76 // Adjust inner container height based on first step's height
77 $('inner-container').style.height = $(steps[0]).offsetHeight;
78
79 $('continue-button').addEventListener('click', function(event) {
80 // TODO(nkostylev): Callback screen handler.
81 Oobe.toggleStep(1);
82 });
83 $('back-button').addEventListener('click', function(event) {
84 // TODO(nkostylev): Callback screen handler.
85 Oobe.toggleStep(0);
86 });
87 $('accept-button').addEventListener('click', function(event) {
88 // TODO(nkostylev): Callback screen handler.
89 Oobe.toggleStep(2);
90 });
91
92 chrome.send('screenStateInitialize');
93 };
94
95 /**
96 * Switches to the next OOBE step.
97 * @param {number} nextStepIndex Index of the next step.
98 */
99 Oobe.toggleStep = function(nextStepIndex) {
100 Oobe.getInstance().toggleStep_(nextStepIndex);
101 };
102
103 // Export
104 return {
105 Oobe: Oobe
106 };
107 });
108
109 var Oobe = cr.ui.Oobe;
110
111 document.addEventListener('DOMContentLoaded', cr.ui.Oobe.initialize);
OLDNEW
« no previous file with comments | « chrome/browser/resources/chromeos/oobe.html ('k') | chrome/browser/resources/chromeos/proxy_settings.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698