chrome/browser/resources/settings/settings_page/settings_animated_pages.js

   1 // Copyright 2015 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
   7  * 'cr-settings-animated-pages' is a container for a page and animated subpages.
   8  * It provides a set of common behaviors and animations.
   9  *
  10  * Example:
  11  *
  12  *    <cr-settings-animated-pages current-route="{{currentRoute}}"
  13           route-root="advanced/privacy" redirect-root-route-to="advanced">
  14  *      <!-- Insert your section controls here -->
  15  *    </cr-settings-animated-pages>
  16  *
  17  * @group Chrome Settings Elements
  18  * @element cr-settings-animated-pages
  19  */
  20 Polymer({
  21   is: 'cr-settings-animated-pages',
  22
  23   properties: {
  24     /**
  25      * Contains the current route.
  26      */
  27     currentRoute: {
  28       type: Object,
  29       notify: true,
  30       observer: 'currentRouteChanged_',
  31     },
  32
  33     /**
  34      * Routes with this section activate this element. For instance, if this
  35      * property is 'search', and currentRoute.section is also set to 'search',
  36      * this element will display the subpage in currentRoute.subpage.
  37      */
  38     section: {
  39       type: String,
  40     },
  41   },
  42
  43   /** @override */
  44   created: function() {
  45     this.addEventListener('subpage-back', function() {
  46       assert(this.currentRoute.section == this.section);
  47       assert(this.currentRoute.subpage.length >= 1);
  48
  49       this.setSubpageChain(this.currentRoute.subpage.slice(0, -1));
  50     }.bind(this));
  51   },
  52
  53   /** @private */
  54   currentRouteChanged_: function(newRoute, oldRoute) {
  55     // route.section is only non-empty when the user is within a subpage.
  56     // When the user is not in a subpage, but on the Basic page, route.section
  57     // is an empty string.
  58     var newRouteIsSubpage = newRoute && newRoute.section == this.section;
  59     var oldRouteIsSubpage = oldRoute && oldRoute.section == this.section;
  60
  61     // If two routes are at the same level, or if either the new or old route is
  62     // not a subpage, fade in and out.
  63     if (!newRouteIsSubpage || !oldRouteIsSubpage ||
  64         newRoute.subpage.length == oldRoute.subpage.length) {
  65       this.$.animatedPages.exitAnimation = 'fade-out-animation';
  66       this.$.animatedPages.entryAnimation = 'fade-in-animation';
  67     } else {
  68       // For transitioning between subpages at different levels, slide.
  69       if (newRoute.subpage.length > oldRoute.subpage.length) {
  70         this.$.animatedPages.exitAnimation = 'slide-left-animation';
  71         this.$.animatedPages.entryAnimation = 'slide-from-right-animation';
  72       } else {
  73         this.$.animatedPages.exitAnimation = 'slide-right-animation';
  74         this.$.animatedPages.entryAnimation = 'slide-from-left-animation';
  75       }
  76     }
  77
  78     if (newRouteIsSubpage) {
  79       // TODO(tommycli): Support paths where the final component carries
  80       // data rather than referring to a specific subpage.
  81       // E.g. internet > internet/known-networks > internet/detail/wifi1_guid
  82       this.$.animatedPages.selected = newRoute.subpage.slice(-1)[0];
  83     } else {
  84       this.$.animatedPages.selected = '';
  85     }
  86   },
  87
  88   /**
  89    * Buttons in this pageset should use this method to transition to subpages.
  90    */
  91   setSubpageChain: function(subpage) {
  92     this.currentRoute = {
  93       page: this.currentRoute.page,
  94       section: subpage.length > 0 ? this.section : '',
  95       subpage: subpage,
  96     };
  97   },
  98 });