chrome/browser/resources/chromeos/first_run/first_run.js

   1 // Copyright 2013 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 First run UI.
   7  */
   8
   9 <include src="step.js">
  10
  11 // Transitions durations.
  12 /** @const  */ var DEFAULT_TRANSITION_DURATION_MS = 400;
  13 /** @const  */ var BG_TRANSITION_DURATION_MS = 800;
  14
  15 /**
  16  * Changes visibility of element with animated transition.
  17  * @param {Element} element Element which visibility should be changed.
  18  * @param {boolean} visible Whether element should be visible after transition.
  19  * @param {number=} opt_transitionDuration Time length of transition in
  20  *     milliseconds. Default value is DEFAULT_TRANSITION_DURATION_MS.
  21  * @param {function()=} opt_onFinished Called after transition has finished.
  22  */
  23 function changeVisibility(
  24     element, visible, opt_transitionDuration, opt_onFinished) {
  25   var classes = element.classList;
  26   // If target visibility is the same as current element visibility.
  27   if (classes.contains('transparent') === !visible) {
  28     if (opt_onFinished)
  29       opt_onFinished();
  30     return;
  31   }
  32   var transitionDuration = (opt_transitionDuration === undefined) ?
  33     cr.FirstRun.getDefaultTransitionDuration() : opt_transitionDuration;
  34   var style = element.style;
  35   var oldDurationValue = style.getPropertyValue('transition-duration');
  36   style.setProperty('transition-duration', transitionDuration + 'ms');
  37   var transition = visible ? 'show-animated' : 'hide-animated';
  38   classes.add(transition);
  39   classes.toggle('transparent');
  40   element.addEventListener('webkitTransitionEnd', function f() {
  41     element.removeEventListener('webkitTransitionEnd', f);
  42     classes.remove(transition);
  43     if (oldDurationValue)
  44       style.setProperty('transition-duration', oldDurationValue);
  45     else
  46       style.removeProperty('transition-duration');
  47     if (opt_onFinished)
  48       opt_onFinished();
  49   });
  50   ensureTransitionEndEvent(element, transitionDuration);
  51 }
  52
  53 cr.define('cr.FirstRun', function() {
  54   return {
  55     // Whether animated transitions are enabled.
  56     transitionsEnabled_: false,
  57
  58     // SVG element representing UI background.
  59     background_: null,
  60
  61     // Container for background.
  62     backgroundContainer_: null,
  63
  64     // Mask element describing transparent "holes" in background.
  65     mask_: null,
  66
  67     // Pattern used for creating rectangular holes.
  68     rectangularHolePattern_: null,
  69
  70     // Pattern used for creating round holes.
  71     roundHolePattern_: null,
  72
  73     // Dictionary keeping all available tutorial steps by their names.
  74     steps_: {},
  75
  76     // Element representing step currently shown for user.
  77     currentStep_: null,
  78
  79     /**
  80      * Initializes internal structures and preparing steps.
  81      */
  82     initialize: function() {
  83       disableTextSelectAndDrag();
  84       this.transitionsEnabled_ = loadTimeData.getBoolean('transitionsEnabled');
  85       this.background_ = $('background');
  86       this.backgroundContainer_ = $('background-container');
  87       this.mask_ = $('mask');
  88       this.rectangularHolePattern_ = $('rectangular-hole-pattern');
  89       this.rectangularHolePattern_.removeAttribute('id');
  90       this.roundHolePattern_ = $('round-hole-pattern');
  91       this.roundHolePattern_.removeAttribute('id');
  92       var stepElements = document.getElementsByClassName('step');
  93       for (var i = 0; i < stepElements.length; ++i) {
  94         var step = stepElements[i];
  95         cr.FirstRun.DecorateStep(step);
  96         this.steps_[step.getName()] = step;
  97       }
  98       this.setBackgroundVisible(true, function() {
  99         chrome.send('initialized');
 100       });
 101     },
 102
 103     /**
 104      * Hides all elements and background.
 105      */
 106     finalize: function() {
 107       // At first we hide holes (job 1) and current step (job 2) simultaneously,
 108       // then background.
 109       var jobsLeft = 2;
 110       var onJobDone = function() {
 111         --jobsLeft;
 112         if (jobsLeft)
 113           return;
 114         this.setBackgroundVisible(false, function() {
 115           chrome.send('finalized');
 116         });
 117       }.bind(this);
 118       this.doHideCurrentStep_(function(name) {
 119         if (name)
 120           chrome.send('stepHidden', [name]);
 121         onJobDone();
 122       });
 123       this.removeHoles(onJobDone);
 124     },
 125
 126     /**
 127      * Adds transparent rectangular hole to background.
 128      * @param {number} x X coordinate of top-left corner of hole.
 129      * @param {number} y Y coordinate of top-left corner of hole.
 130      * @param {number} widht Width of hole.
 131      * @param {number} height Height of hole.
 132      */
 133     addRectangularHole: function(x, y, width, height) {
 134       var hole = this.rectangularHolePattern_.cloneNode();
 135       hole.setAttribute('x', x);
 136       hole.setAttribute('y', y);
 137       hole.setAttribute('width', width);
 138       hole.setAttribute('height', height);
 139       this.mask_.appendChild(hole);
 140       setTimeout(function() {
 141         changeVisibility(hole, true);
 142       }, 0);
 143     },
 144
 145     /**
 146      * Adds transparent round hole to background.
 147      * @param {number} x X coordinate of circle center.
 148      * @param {number} y Y coordinate of circle center.
 149      * @param {number} radius Radius of circle.
 150      */
 151     addRoundHole: function(x, y, radius) {
 152       var hole = this.roundHolePattern_.cloneNode();
 153       hole.setAttribute('cx', x);
 154       hole.setAttribute('cy', y);
 155       hole.setAttribute('r', radius);
 156       this.mask_.appendChild(hole);
 157       setTimeout(function() {
 158         changeVisibility(hole, true);
 159       }, 0);
 160     },
 161
 162     /**
 163      * Removes all holes previously added by |addHole|.
 164      * @param {function=} opt_onHolesRemoved Called after all holes have been
 165      *     hidden.
 166      */
 167     removeHoles: function(opt_onHolesRemoved) {
 168       var mask = this.mask_;
 169       var holes = Array.prototype.slice.call(
 170           mask.getElementsByClassName('hole'));
 171       var holesLeft = holes.length;
 172       if (!holesLeft) {
 173         if (opt_onHolesRemoved)
 174           opt_onHolesRemoved();
 175         return;
 176       }
 177       holes.forEach(function(hole) {
 178         changeVisibility(hole, false, this.getDefaultTransitionDuration(),
 179             function() {
 180               mask.removeChild(hole);
 181               --holesLeft;
 182               if (!holesLeft && opt_onHolesRemoved)
 183                 opt_onHolesRemoved();
 184             });
 185       }.bind(this));
 186     },
 187
 188     /**
 189      * Hides currently active step and notifies chrome after step has been
 190      * hidden.
 191      */
 192     hideCurrentStep: function() {
 193       assert(this.currentStep_);
 194       this.doHideCurrentStep_(function(name) {
 195         chrome.send('stepHidden', [name]);
 196       });
 197     },
 198
 199     /**
 200      * Hides currently active step.
 201      * @param {function(string)=} opt_onStepHidden Called after step has been
 202      *     hidden.
 203      */
 204     doHideCurrentStep_: function(opt_onStepHidden) {
 205       if (!this.currentStep_) {
 206         if (opt_onStepHidden)
 207           opt_onStepHidden();
 208         return;
 209       }
 210       var name = this.currentStep_.getName();
 211       this.currentStep_.hide(true, function() {
 212         this.currentStep_ = null;
 213         if (opt_onStepHidden)
 214           opt_onStepHidden(name);
 215       }.bind(this));
 216     },
 217
 218     /**
 219      * Shows step with given name in given position.
 220      * @param {string} name Name of step.
 221      * @param {object} position Optional parameter with optional fields |top|,
 222      *     |right|, |bottom|, |left| used for step positioning.
 223      * @param {Array} pointWithOffset Optional parameter for positioning
 224      *     bubble. Contains [x, y, offset], where (x, y) - point to which bubble
 225      *     points, offset - distance between arrow and point.
 226      */
 227     showStep: function(name, position, pointWithOffset) {
 228       assert(!this.currentStep_);
 229       if (!this.steps_.hasOwnProperty(name))
 230         throw Error('Step "' + name + '" not found.');
 231       var step = this.steps_[name];
 232       if (position)
 233         step.setPosition(position);
 234       if (pointWithOffset)
 235         step.setPointsTo(pointWithOffset.slice(0, 2), pointWithOffset[2]);
 236       step.show(true, function(step) {
 237         step.focusDefaultControl();
 238         this.currentStep_ = step;
 239         chrome.send('stepShown', [name]);
 240       }.bind(this));
 241     },
 242
 243     /**
 244      * Sets visibility of the background.
 245      * @param {boolean} visibility Whether background should be visible.
 246      * @param {function()=} opt_onCompletion Called after visibility has
 247      *     changed.
 248      */
 249     setBackgroundVisible: function(visible, opt_onCompletion) {
 250       changeVisibility(this.backgroundContainer_, visible,
 251           this.getBackgroundTransitionDuration(), opt_onCompletion);
 252     },
 253
 254     /**
 255      * Returns default duration of animated transitions, in ms.
 256      */
 257     getDefaultTransitionDuration: function() {
 258       return this.transitionsEnabled_ ? DEFAULT_TRANSITION_DURATION_MS : 0;
 259     },
 260
 261     /**
 262      * Returns duration of transitions of background shield, in ms.
 263      */
 264     getBackgroundTransitionDuration: function() {
 265       return this.transitionsEnabled_ ? BG_TRANSITION_DURATION_MS : 0;
 266     }
 267   };
 268 });
 269
 270 /**
 271  * Initializes UI.
 272  */
 273 window.onload = function() {
 274   cr.FirstRun.initialize();
 275 };