chrome/browser/resources/settings/settings_page/settings_section.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-section' shows a paper material themed section with a header
   8  * which shows its page title and icon.
   9  *
  10  * Example:
  11  *
  12  *    <cr-settings-section page-title="[[pageTitle]]" icon="[[icon]]">
  13  *      <!-- Insert your section controls here -->
  14  *    </cr-settings-section>
  15  *
  16  * @group Chrome Settings Elements
  17  * @element cr-settings-section
  18  */
  19 Polymer({
  20   is: 'cr-settings-section',
  21
  22   behaviors: [
  23     Polymer.NeonAnimationRunnerBehavior,
  24   ],
  25
  26   properties: {
  27     /**
  28      * The current active route.
  29      */
  30     currentRoute: {
  31       type: Object,
  32       observer: 'currentRouteChanged_',
  33     },
  34
  35     /**
  36      * The section is expanded to a full-page view when this property matches
  37      * currentRoute.section.
  38      */
  39     section: {
  40       type: String,
  41     },
  42
  43     /**
  44      * Title for the page header and navigation menu.
  45      */
  46     pageTitle: String,
  47
  48     /**
  49      * Name of the 'iron-icon' to show.
  50      */
  51     icon: String,
  52
  53     /**
  54      * Container that determines the sizing of expanded sections.
  55      */
  56     expandContainer: {
  57       type: Object,
  58       notify: true,
  59     },
  60
  61     animationConfig: {
  62       value: function() {
  63         return {
  64           expand: {
  65             name: 'expand-card-animation',
  66             node: this,
  67           },
  68           collapse: {
  69             name: 'collapse-card-animation',
  70             node: this,
  71           }
  72         };
  73       },
  74     },
  75   },
  76
  77   /** @private */
  78   expanded_: false,
  79
  80   /** @private */
  81   currentRouteChanged_: function() {
  82     var expanded = this.currentRoute.section == this.section;
  83
  84     if (expanded == this.expanded_)
  85       return;
  86
  87     this.expanded_ = expanded;
  88     this.playAnimation(expanded ? 'expand' : 'collapse');
  89   },
  90 });
  91
  92 Polymer({
  93   is: 'expand-card-animation',
  94
  95   behaviors: [
  96     Polymer.NeonAnimationBehavior
  97   ],
  98
  99   configure: function(config) {
 100     var node = config.node;
 101     var containerRect = node.expandContainer.getBoundingClientRect();
 102     var nodeRect = node.getBoundingClientRect();
 103
 104     // Save section's original height.
 105     node.unexpandedHeight = nodeRect.height;
 106
 107     var headerHeight = node.$.header.getBoundingClientRect().height;
 108     var newTop = containerRect.top - headerHeight;
 109     var newHeight = containerRect.height + headerHeight;
 110
 111     node.style.position = 'fixed';
 112     node.style.zIndex = '1';
 113
 114     this._effect = new KeyframeEffect(node, [
 115       {'top': nodeRect.top + 'px', 'height': nodeRect.height + 'px'},
 116       {'top': newTop + 'px', 'height': newHeight + 'px'},
 117     ], this.timingFromConfig(config));
 118     return this._effect;
 119   },
 120
 121   complete: function(config) {
 122     config.node.style.position = 'absolute';
 123     config.node.style.top =
 124         -config.node.$.header.getBoundingClientRect().height + 'px';
 125     config.node.style.bottom = 0;
 126   }
 127 });
 128
 129 Polymer({
 130   is: 'collapse-card-animation',
 131
 132   behaviors: [
 133     Polymer.NeonAnimationBehavior
 134   ],
 135
 136   configure: function(config) {
 137     var node = config.node;
 138
 139     var oldRect = node.getBoundingClientRect();
 140
 141     // Temporarily set position to static to determine new height.
 142     node.style.position = '';
 143     var newTop = node.getBoundingClientRect().top;
 144
 145     // TODO(tommycli): This value is undefined when the user navigates to a
 146     // subpage directly by URL instead of from the settings root. Find a better
 147     // method than using 200 as a dummy height.
 148     var newHeight = node.unexpandedHeight || 200;
 149
 150     node.style.position = 'fixed';
 151
 152     this._effect = new KeyframeEffect(node, [
 153       {'top': oldRect.top + 'px', 'height': oldRect.height + 'px'},
 154       {'top': newTop + 'px', 'height': newHeight + 'px'},
 155     ], this.timingFromConfig(config));
 156     return this._effect;
 157   },
 158
 159   complete: function(config) {
 160     config.node.style.position = '';
 161     config.node.style.zIndex = '0';
 162   }
 163 });