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