src/third_party/polymer/components/core-header-panel/core-header-panel.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 `core-header-panel` contains a header section and a content panel section.
  12
  13 __Important:__ The `core-header-panel` will not display if its parent does not have a height.
  14
  15 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen
  16
  17     <body fullbleed layout vertical>
  18       <core-header-panel flex>
  19         <core-toolbar>
  20           <div>Hello World!</div>
  21         </core-toolbar>
  22       </core-header-panel>
  23     </body>
  24
  25 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:
  26
  27     html, body {
  28       height: 100%;
  29       margin: 0;
  30     }
  31     core-header-panel {
  32       height: 100%;
  33     }
  34
  35 Special support is provided for scrolling modes when one uses a core-toolbar or equivalent
  36 for the header section.
  37
  38 Example:
  39
  40     <core-header-panel>
  41       <core-toolbar>Header</core-toolbar>
  42       <div>Content goes here...</div>
  43     </core-header-panel>
  44
  45 If you want to use other than `core-toolbar` for the header, add
  46 `core-header` class to that element.
  47
  48 Example:
  49
  50     <core-header-panel>
  51       <div class="core-header">Header</div>
  52       <div>Content goes here...</div>
  53     </core-header-panel>
  54
  55 To have the content fits to the main area, use `fit` attribute.
  56
  57     <core-header-panel>
  58       <div class="core-header">standard</div>
  59       <div class="content" fit>content fits 100% below the header</div>
  60     </core-header-panel>
  61
  62 Use `mode` to control the header and scrolling behavior.
  63
  64 @group Polymer Core Elements
  65 @element core-header-panel
  66 @homepage github.io
  67 -->
  68
  69 <link rel="import" href="../polymer/polymer.html">
  70
  71 <polymer-element name="core-header-panel">
  72 <template>
  73
  74   <link rel="stylesheet" href="core-header-panel.css">
  75
  76   <div id="outerContainer" on-scroll="{{scroll}}" vertical layout>
  77
  78     <content id="headerContent" select="core-toolbar, .core-header"></content>
  79
  80     <div id="mainPanel" flex vertical layout>
  81
  82       <div id="mainContainer" flex?="{{mode !== 'cover'}}" on-scroll="{{scroll}}">
  83         <content id="mainContent" select="*"></content>
  84       </div>
  85
  86       <div id="dropShadow"></div>
  87
  88     </div>
  89
  90   </div>
  91
  92 </template>
  93 <script>
  94
  95   Polymer('core-header-panel', {
  96
  97     /**
  98      * Fired when the content has been scrolled.  `details.target` returns
  99      * the scrollable element which you can use to access scroll info such as
 100      * `scrollTop`.
 101      *
 102      * @event scroll
 103      */
 104
 105     publish: {
 106       /**
 107        * Controls header and scrolling behavior. Options are
 108        * `standard`, `seamed`, `waterfall`, `waterfall-tall`,
 109        * `waterfall-medium-tall`, `scroll` and `cover`.
 110        * Default is `standard`.
 111        *
 112        * `standard`: The header is a step above the panel. The header will consume the
 113        * panel at the point of entry, preventing it from passing through to the
 114        * opposite side.
 115        *
 116        * `seamed`: The header is presented as seamed with the panel.
 117        *
 118        * `waterfall`: Similar to standard mode, but header is initially presented as
 119        * seamed with panel, but then separates to form the step.
 120        *
 121        * `waterfall-tall`: The header is initially taller (`tall` class is added to
 122        * the header).  As the user scrolls, the header separates (forming an edge)
 123        * while condensing (`tall` class is removed from the header).
 124        *
 125        * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
 126        *
 127        * `cover`: The panel covers the whole `core-header-panel` including the
 128        * header. This allows user to style the panel in such a way that the panel is
 129        * partially covering the header.
 130        *
 131        *     <style>
 132        *       core-header-panel[mode=cover]::shadow #mainContainer {
 133        *         left: 80px;
 134        *       }
 135        *       .content {
 136        *         margin: 60px 60px 60px 0;
 137        *       }
 138        *     </style>
 139        *
 140        *     <core-header-panel mode="cover">
 141        *       <core-appbar class="tall">
 142        *         <core-icon-button icon="menu"></core-icon-button>
 143        *       </core-appbar>
 144        *       <div class="content"></div>
 145        *     </core-header-panel>
 146        *
 147        * @attribute mode
 148        * @type string
 149        * @default ''
 150        */
 151       mode: {value: '', reflect: true},
 152
 153       /**
 154        * The class used in waterfall-tall mode.  Change this if the header
 155        * accepts a different class for toggling height, e.g. "medium-tall"
 156        *
 157        * @attribute tallClass
 158        * @type string
 159        * @default 'tall'
 160        */
 161       tallClass: 'tall',
 162
 163       /**
 164        * If true, the drop-shadow is always shown no matter what mode is set to.
 165        *
 166        * @attribute shadow
 167        * @type boolean
 168        * @default false
 169        */
 170       shadow: false
 171     },
 172
 173     domReady: function() {
 174       this.async('scroll');
 175     },
 176
 177     modeChanged: function() {
 178       this.scroll();
 179     },
 180
 181     get header() {
 182       return this.$.headerContent.getDistributedNodes()[0];
 183     },
 184
 185     /**
 186      * Returns the scrollable element.
 187      *
 188      * @property scroller
 189      * @type Object
 190      */
 191     get scroller() {
 192       return this.mode === 'scroll' ?
 193           this.$.outerContainer : this.$.mainContainer;
 194     },
 195
 196     scroll: function() {
 197       var shadowMode = {'waterfall': 1, 'waterfall-tall': 1};
 198       var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
 199       var tallMode = {'waterfall-tall': 1};
 200
 201       var main = this.$.mainContainer;
 202       var header = this.header;
 203
 204       var sTop = main.scrollTop;
 205       var atTop = sTop === 0;
 206
 207       if (header) {
 208         this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
 209             (atTop && shadowMode[this.mode] || noShadow[this.mode]));
 210
 211         if (tallMode[this.mode]) {
 212           header.classList.toggle(this.tallClass, atTop ||
 213               main.scrollHeight < this.$.outerContainer.offsetHeight);
 214         }
 215
 216         header.classList.toggle('animate', tallMode[this.mode]);
 217       }
 218
 219       this.fire('scroll', {target: this.scroller}, this, false);
 220     }
 221
 222   });
 223
 224 </script>
 225 </polymer-element>