[cros] Layout for OOBE WebUI.

chrome/browser/resources/chromeos/oobe.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Out of the box experience flow (OOBE).
+ * This is the main code for the OOBE WebUI implementation.
+ */
+
+const steps = ['connect', 'eula', 'update'];
+
+cr.define('cr.ui', function() {
+  function Oobe() {
+  }
+
+  cr.addSingletonGetter(Oobe);
+
+  Oobe.localStrings_ = new LocalStrings();
+
+  Oobe.prototype = {
+    /**
+     * Current OOBE step, index in the steps array.
+     * @type {number}
+     */
+    currentStep_: 0,
+
+    /**
+     * Switches to the next OOBE step.
+     * @param {number} nextStep Index of the next step.
+     */
+    toggleStep_: function(nextStep) {
+      var offset = nextStep - this.currentStep_;
+      var oldstep = $(steps[this.currentStep_]);
+      var oldheader = $('header-' + steps[this.currentStep_]);
+      var newstep = $(steps[this.currentStep_ + offset]);

[Evan Stade, 2011/06/09 22:38:46]

again you are using offset here, and twice more below here where you don't need
to. Maybe you should just get rid of offset altogether, and change the checks in
the if and else if to nextStep > this.currentStep_

[Nikita (slow), 2011/06/10 09:21:39]

Done.

+      var newheader = $('header-' + steps[this.currentStep_ + offset]);
+
+      newstep.classList.remove('hidden');
+
+      // TODO(nkostylev): Support offset other than -1/1.
+      if (offset == 1) {
+        oldheader.classList.add('left');
+        oldstep.classList.add('left');
+        newheader.classList.remove('right');
+        newstep.classList.remove('right');
+      } else if (offset == -1) {
+        oldheader.classList.add('right');
+        oldstep.classList.add('right');
+        newheader.classList.remove('left');
+        newstep.classList.remove('left');
+      }
+
+      // Adjust inner container height based on new step's height.
+      $('inner-container').style.height =
+          $(steps[this.currentStep_ + offset]).offsetHeight;

[Evan Stade, 2011/06/09 22:38:46]

isn't this newstep?

[Nikita (slow), 2011/06/10 09:21:39]

Done.

+
+      oldstep.addEventListener('webkitTransitionEnd', function f(e) {
+        oldstep.removeEventListener('webkitTransitionEnd', f);
+        oldstep.classList.add('hidden');
+      });
+      this.currentStep_ = nextStep;
+      $('oobe').className = steps[this.currentStep_];
+    },
+  };
+
+  /**
+   * Initializes the OOBE flow.  This will cause all C++ handlers to
+   * be invoked to do final setup.
+   */
+  Oobe.initialize = function() {
+    // Adjust inner container height based on first step's height
+    $('inner-container').style.height = $(steps[0]).offsetHeight;
+
+    $('continue-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(1);

[Evan Stade, 2011/06/09 22:38:46]

don't you need to getInstance?

[Nikita (slow), 2011/06/10 09:21:39]

No, Oobe.toggleStep() is defined separately and it will call toggleStep_()

+    });
+    $('back-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(0);
+    });
+    $('accept-button').addEventListener('click', function(event) {
+      // TODO(nkostylev): Callback screen handler.
+      Oobe.toggleStep(2);
+    });
+
+    chrome.send('screenStateInitialize');
+  };
+
+  /**
+   * Switches to the next OOBE step.
+   * @param {number} nextStep Index of the next step.
+   */
+  Oobe.toggleStep = function(nextStep) {
+    Oobe.getInstance().toggleStep_(nextStep);
+  };
+
+  // Export
+  return {
+    Oobe: Oobe
+  };
+});
+
+var Oobe = cr.ui.Oobe;
+
+document.addEventListener('DOMContentLoaded', cr.ui.Oobe.initialize);