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      * Title for the page header and navigation menu.
  29      */
  30     pageTitle: String,
  31
  32     /**
  33      * Name of the 'iron-icon' to show.
  34      */
  35     icon: String,
  36
  37     /**
  38      * True if the section should be expanded to take up the full height of
  39      * the page (except the toolbar). The title and icon of the section will be
  40      * hidden, and the section contents is expected to provide its own subtitle.
  41      */
  42     expanded: {
  43       type: Boolean,
  44       observer: 'expandedChanged',
  45     },
  46
  47     /**
  48      * Container that determines the sizing of expanded sections.
  49      */
  50     expandContainer: {
  51       type: Object,
  52       notify: true,
  53     },
  54
  55     animationConfig: {
  56       value: function() {
  57         return {
  58           expand: {
  59             name: 'expand-card-animation',
  60             node: this,
  61           },
  62           collapse: {
  63             name: 'collapse-card-animation',
  64             node: this,
  65           }
  66         };
  67       },
  68     },
  69   },
  70
  71   expandedChanged: function() {
  72     if (this.expanded) {
  73       this.playAnimation('expand');
  74     } else {
  75       this.playAnimation('collapse');
  76     }
  77   },
  78 });
  79
  80 Polymer({
  81   is: 'expand-card-animation',
  82
  83   behaviors: [
  84     Polymer.NeonAnimationBehavior
  85   ],
  86
  87   configure: function(config) {
  88     var node = config.node;
  89     var containerRect = node.expandContainer.getBoundingClientRect();
  90     var nodeRect = node.getBoundingClientRect();
  91
  92     // Save section's original height.
  93     node.unexpandedHeight = nodeRect.height;
  94
  95     var headerHeight = node.$.header.getBoundingClientRect().height;
  96     var newTop = containerRect.top - headerHeight;
  97     var newHeight = containerRect.height + headerHeight;
  98
  99     node.style.position = 'fixed';
 100
 101     this._effect = new KeyframeEffect(node, [
 102       {'top': nodeRect.top, 'height': nodeRect.height},
 103       {'top': newTop, 'height': newHeight},
 104     ], this.timingFromConfig(config));
 105     return this._effect;
 106   },
 107
 108   complete: function(config) {
 109     config.node.style.position = 'absolute';
 110     config.node.style.top =
 111         -config.node.$.header.getBoundingClientRect().height + 'px';
 112     config.node.style.bottom = 0;
 113   }
 114 });
 115
 116 Polymer({
 117   is: 'collapse-card-animation',
 118
 119   behaviors: [
 120     Polymer.NeonAnimationBehavior
 121   ],
 122
 123   configure: function(config) {
 124     var node = config.node;
 125
 126     var oldRect = node.getBoundingClientRect();
 127
 128     // Temporarily set position to static to determine new height.
 129     node.style.position = '';
 130     var newTop = node.getBoundingClientRect().top;
 131     var newHeight = node.unexpandedHeight;
 132
 133     node.style.position = 'fixed';
 134
 135     this._effect = new KeyframeEffect(node, [
 136       {'top': oldRect.top, 'height': oldRect.height},
 137       {'top': newTop, 'height': newHeight},
 138     ], this.timingFromConfig(config));
 139     return this._effect;
 140   },
 141
 142   complete: function(config) {
 143     config.node.style.position = '';
 144   }
 145 });