src/chrome/browser/resources/user_manager/user_manager_tutorial.js

   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
   5 cr.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 });