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" 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'}}">
  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({
  96
  97     /**
  98      * Fired when the content has been scrolled.  `event.detail.target` returns
  99      * the scrollable element which you can use to access scroll info such as
 100      * `scrollTop`.
 101      *
 102      *     <core-header-panel on-scroll="{{scrollHandler}}">
 103      *       ...
 104      *     </core-header-panel>
 105      *
 106      *
 107      *     scrollHandler: function(event) {
 108      *       var scroller = event.detail.target;
 109      *       console.log(scroller.scrollTop);
 110      *     }
 111      *
 112      * @event scroll
 113      */
 114
 115     publish: {
 116       /**
 117        * Controls header and scrolling behavior. Options are
 118        * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
 119        * `cover`. Default is `standard`.
 120        *
 121        * `standard`: The header is a step above the panel. The header will consume the
 122        * panel at the point of entry, preventing it from passing through to the
 123        * opposite side.
 124        *
 125        * `seamed`: The header is presented as seamed with the panel.
 126        *
 127        * `waterfall`: Similar to standard mode, but header is initially presented as
 128        * seamed with panel, but then separates to form the step.
 129        *
 130        * `waterfall-tall`: The header is initially taller (`tall` class is added to
 131        * the header).  As the user scrolls, the header separates (forming an edge)
 132        * while condensing (`tall` class is removed from the header).
 133        *
 134        * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
 135        *
 136        * `cover`: The panel covers the whole `core-header-panel` including the
 137        * header. This allows user to style the panel in such a way that the panel is
 138        * partially covering the header.
 139        *
 140        *     <style>
 141        *       core-header-panel[mode=cover]::shadow #mainContainer {
 142        *         left: 80px;
 143        *       }
 144        *       .content {
 145        *         margin: 60px 60px 60px 0;
 146        *       }
 147        *     </style>
 148        *
 149        *     <core-header-panel mode="cover">
 150        *       <core-toolbar class="tall">
 151        *         <core-icon-button icon="menu"></core-icon-button>
 152        *       </core-toolbar>
 153        *       <div class="content"></div>
 154        *     </core-header-panel>
 155        *
 156        * @attribute mode
 157        * @type string
 158        * @default ''
 159        */
 160       mode: {value: '', reflect: true},
 161
 162       /**
 163        * The class used in waterfall-tall mode.  Change this if the header
 164        * accepts a different class for toggling height, e.g. "medium-tall"
 165        *
 166        * @attribute tallClass
 167        * @type string
 168        * @default 'tall'
 169        */
 170       tallClass: 'tall',
 171
 172       /**
 173        * If true, the drop-shadow is always shown no matter what mode is set to.
 174        *
 175        * @attribute shadow
 176        * @type boolean
 177        * @default false
 178        */
 179       shadow: false
 180     },
 181
 182     animateDuration: 200,
 183
 184     modeConfigs: {
 185       shadowMode: {'waterfall': 1, 'waterfall-tall': 1},
 186       noShadow: {'seamed': 1, 'cover': 1, 'scroll': 1},
 187       tallMode: {'waterfall-tall': 1},
 188       outerScroll: {'scroll': 1}
 189     },
 190
 191     ready: function() {
 192       this.scrollHandler = this.scroll.bind(this);
 193       this.addListener();
 194     },
 195
 196     detached: function() {
 197       this.removeListener(this.mode);
 198     },
 199
 200     addListener: function() {
 201       this.scroller.addEventListener('scroll', this.scrollHandler);
 202     },
 203
 204     removeListener: function(mode) {
 205       var s = this.getScrollerForMode(mode);
 206       s.removeEventListener('scroll', this.scrollHandler);
 207     },
 208
 209     domReady: function() {
 210       this.async('scroll');
 211     },
 212
 213     modeChanged: function(old) {
 214       var configs = this.modeConfigs;
 215       var header = this.header;
 216       if (header) {
 217         // in tallMode it may add tallClass to the header; so do the cleanup
 218         // when mode is changed from tallMode to not tallMode
 219         if (configs.tallMode[old] && !configs.tallMode[this.mode]) {
 220           header.classList.remove(this.tallClass);
 221           this.async(function() {
 222             header.classList.remove('animate');
 223           }, null, this.animateDuration);
 224         } else {
 225           header.classList.toggle('animate', configs.tallMode[this.mode]);
 226         }
 227       }
 228       if (configs && (configs.outerScroll[this.mode] || configs.outerScroll[old])) {
 229         this.removeListener(old);
 230         this.addListener();
 231       }
 232       this.scroll();
 233     },
 234
 235     get header() {
 236       return this.$.headerContent.getDistributedNodes()[0];
 237     },
 238
 239     getScrollerForMode: function(mode) {
 240       return this.modeConfigs.outerScroll[mode] ?
 241           this.$.outerContainer : this.$.mainContainer;
 242     },
 243
 244     /**
 245      * Returns the scrollable element.
 246      *
 247      * @property scroller
 248      * @type Object
 249      */
 250     get scroller() {
 251       return this.getScrollerForMode(this.mode);
 252     },
 253
 254     scroll: function() {
 255       var configs = this.modeConfigs;
 256       var main = this.$.mainContainer;
 257       var header = this.header;
 258
 259       var sTop = main.scrollTop;
 260       var atTop = sTop === 0;
 261
 262       this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
 263           (atTop && configs.shadowMode[this.mode] || configs.noShadow[this.mode]));
 264
 265       if (header && configs.tallMode[this.mode]) {
 266         header.classList.toggle(this.tallClass, atTop ||
 267             header.classList.contains(this.tallClass) &&
 268             main.scrollHeight < this.$.outerContainer.offsetHeight);
 269       }
 270
 271       this.fire('scroll', {target: this.scroller}, this, false);
 272     }
 273
 274   });
 275
 276 </script>
 277 </polymer-element>