• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright 2014 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
5cr.define('cr.ui.login', function() {
6  /**
7   * Constructs a slide manager for the user manager tutorial.
8   *
9   * @constructor
10   */
11  function UserManagerTutorial() {
12  }
13
14  cr.addSingletonGetter(UserManagerTutorial);
15
16  UserManagerTutorial.prototype = {
17    /**
18     * Tutorial slides.
19     */
20    slides_: ['slide-welcome',
21              'slide-your-chrome',
22              'slide-friends',
23              'slide-guests',
24              'slide-complete',
25              'slide-not-you'],
26
27    /**
28     * Current tutorial step, index in the slides array.
29     * @type {number}
30     */
31    currentStep_: 0,
32
33    /**
34     * Switches to the next tutorial step.
35     * @param {number} nextStepIndex Index of the next step.
36     */
37    toggleStep_: function(nextStepIndex) {
38      if (nextStepIndex > this.slides_.length)
39        return;
40
41      var currentStepId = this.slides_[this.currentStep_];
42      var nextStepId = this.slides_[nextStepIndex];
43      var oldStep = $(currentStepId);
44      var newStep = $(nextStepId);
45
46      newStep.classList.remove('hidden');
47
48      if (nextStepIndex != this.currentStep_)
49        oldStep.classList.add('hidden');
50
51      this.currentStep_ = nextStepIndex;
52
53      // The last tutorial step is an information bubble that ends the tutorial.
54      if (this.currentStep_ == this.slides_.length - 1)
55        this.endTutorial_();
56    },
57
58    next_: function() {
59      var nextStep = this.currentStep_ + 1;
60      this.toggleStep_(nextStep);
61    },
62
63    skip_: function() {
64      this.endTutorial_();
65      $('user-manager-tutorial').hidden = true;
66    },
67
68    /**
69     * Add user button click handler.
70     * @private
71     */
72    handleAddUserClick_: function(e) {
73      chrome.send('addUser');
74      $('user-manager-tutorial').hidden = true;
75      // Prevent further propagation of click event. Otherwise, the click event
76      // handler of document object will set wallpaper to user's wallpaper when
77      // there is only one existing user. See http://crbug.com/166477
78      e.stopPropagation();
79    },
80
81    endTutorial_: function(e) {
82      $('inner-container').classList.remove('disabled');
83    },
84
85    decorate: function() {
86      // Transitions between the tutorial slides.
87      for (var i = 0; i < this.slides_.length; ++i) {
88        var buttonNext = $(this.slides_[i] + '-next');
89        var buttonSkip = $(this.slides_[i] + '-skip');
90        if (buttonNext)
91          buttonNext.addEventListener('click', this.next_.bind(this));
92        if (buttonSkip)
93          buttonSkip.addEventListener('click', this.skip_.bind(this));
94      }
95      $('slide-add-user').addEventListener('click',
96          this.handleAddUserClick_.bind(this));
97    }
98  };
99
100  /**
101   * Initializes the tutorial manager.
102   */
103  UserManagerTutorial.startTutorial = function() {
104    $('user-manager-tutorial').hidden = false;
105
106    // If there's only one pod, show the slides to the side of the pod.
107    // Otherwise, center the slides and disable interacting with the pods
108    // while the tutorial is showing.
109    if ($('pod-row').pods.length == 1) {
110      $('slide-welcome').classList.add('single-pod');
111      $('slide-your-chrome').classList.add('single-pod');
112      $('slide-complete').classList.add('single-pod');
113    }
114
115    $('pod-row').focusPod();  // No focused pods.
116    $('inner-container').classList.add('disabled');
117  };
118
119  /**
120   * Initializes the tutorial manager.
121   */
122  UserManagerTutorial.initialize = function() {
123    UserManagerTutorial.getInstance().decorate();
124  };
125
126  // Export.
127  return {
128    UserManagerTutorial: UserManagerTutorial
129  };
130});
131