| OLD | NEW |
| (Empty) |
| 1 // Copyright 2016 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 'user-manager-tutorial' is the element that controls the | |
| 7 * tutorial steps for the user manager page. | |
| 8 */ | |
| 9 (function() { | |
| 10 | |
| 11 /** @enum {string} */ | |
| 12 var TutorialSteps = { | |
| 13 YOUR_CHROME: 'yourChrome', | |
| 14 FRIENDS: 'friends', | |
| 15 GUESTS: 'guests', | |
| 16 COMPLETE: 'complete', | |
| 17 NOT_YOU: 'notYou' | |
| 18 }; | |
| 19 | |
| 20 Polymer({ | |
| 21 is: 'user-manager-tutorial', | |
| 22 | |
| 23 behaviors: [ | |
| 24 I18nBehavior, | |
| 25 ], | |
| 26 | |
| 27 properties: { | |
| 28 /** | |
| 29 * True if the tutorial is currently hidden. | |
| 30 * @private {boolean} | |
| 31 */ | |
| 32 hidden_: { | |
| 33 type: Boolean, | |
| 34 value: true | |
| 35 }, | |
| 36 | |
| 37 /** | |
| 38 * Current tutorial step ID. | |
| 39 * @type {string} | |
| 40 */ | |
| 41 currentStep_: { | |
| 42 type: String, | |
| 43 value: '' | |
| 44 }, | |
| 45 | |
| 46 /** | |
| 47 * Enum values for the step IDs. | |
| 48 * @private {TutorialSteps} | |
| 49 */ | |
| 50 steps_: { | |
| 51 readOnly: true, | |
| 52 type: Object, | |
| 53 value: TutorialSteps | |
| 54 } | |
| 55 }, | |
| 56 | |
| 57 /** | |
| 58 * Determines whether a given step is displaying. | |
| 59 * @param {string} currentStep Index of the current step | |
| 60 * @param {string} step Name of the given step | |
| 61 * @return {boolean} | |
| 62 * @private | |
| 63 */ | |
| 64 isStepHidden_: function(currentStep, step) { | |
| 65 return currentStep != step; | |
| 66 }, | |
| 67 | |
| 68 /** | |
| 69 * Navigates to the next step. | |
| 70 * @param {!Event} event | |
| 71 * @private | |
| 72 */ | |
| 73 onNextTap_: function(event) { | |
| 74 var element = Polymer.dom(event).rootTarget; | |
| 75 this.currentStep_ = element.dataset.next; | |
| 76 }, | |
| 77 | |
| 78 /** | |
| 79 * Handler for the link in the last step. Takes user to the create-profile | |
| 80 * page in order to add a new profile. | |
| 81 * @param {!Event} event | |
| 82 * @private | |
| 83 */ | |
| 84 onAddUserTap_: function(event) { | |
| 85 this.onDissmissTap_(); | |
| 86 // Event is caught by user-manager-pages. | |
| 87 this.fire('change-page', {page: 'create-user-page'}); | |
| 88 }, | |
| 89 | |
| 90 /** | |
| 91 * Starts the tutorial. | |
| 92 */ | |
| 93 startTutorial: function() { | |
| 94 this.currentStep_ = TutorialSteps.YOUR_CHROME; | |
| 95 this.hidden_ = false; | |
| 96 | |
| 97 // If there's only one pod, show the steps to the side of the pod. | |
| 98 // Otherwise, center the steps and disable interacting with the pods | |
| 99 // while the tutorial is showing. | |
| 100 var podRow = /** @type {{focusPod: !function(), pods: !Array}} */ | |
| 101 ($('pod-row')); | |
| 102 | |
| 103 this.classList.toggle('single-pod', podRow.pods.length == 1); | |
| 104 | |
| 105 podRow.focusPod(); // No focused pods. | |
| 106 $('inner-container').classList.add('disabled'); | |
| 107 }, | |
| 108 | |
| 109 /** | |
| 110 * Ends the tutorial. | |
| 111 * @private | |
| 112 */ | |
| 113 onDissmissTap_: function() { | |
| 114 $('inner-container').classList.remove('disabled'); | |
| 115 this.hidden_ = true; | |
| 116 } | |
| 117 }); | |
| 118 })(); | |
| OLD | NEW |