third_party/polymer/components/core-scroll-header-panel/core-scroll-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-scroll-header-panel` contains a header section and a content section.  The
  12 header is initially on the top part of the view but it scrolls away with the
  13 rest of the scrollable content.  Upon scrolling slightly up at any point, the
  14 header scrolls back into view.  This saves screen space and allows users to
  15 access important controls by easily moving them back to the view.
  16
  17 __Important:__ The `core-scroll-header-panel` will not display if its parent does not have a height.
  18
  19 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-scroll-header-panel` fill the screen
  20
  21     <body fullbleed layout vertical>
  22       <core-scroll-header-panel flex>
  23         <core-toolbar>
  24           <div>Hello World!</div>
  25         </core-toolbar>
  26       </core-scroll-header-panel>
  27     </body>
  28
  29 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scroll-header-panel` a height of 100%:
  30
  31     html, body {
  32       height: 100%;
  33       margin: 0;
  34     }
  35     core-scroll-header-panel {
  36       height: 100%;
  37     }
  38
  39 `core-scroll-header-panel` works well with `core-toolbar` but can use any element
  40 that represents a header by adding a `core-header` class to it.
  41
  42     <core-scroll-header-panel>
  43       <core-toolbar>Header</core-toolbar>
  44       <div>Content goes here...</div>
  45     </core-scroll-header-panel>
  46
  47 @group Polymer Core Elements
  48 @element core-scroll-header-panel
  49 @homepage github.io
  50 -->
  51
  52 <link rel="import" href="../polymer/polymer.html">
  53 <link rel="import" href="../core-resizable/core-resizable.html">
  54
  55 <polymer-element name="core-scroll-header-panel">
  56 <template>
  57
  58   <link rel="stylesheet" href="core-scroll-header-panel.css">
  59
  60   <div id="mainContainer">
  61
  62     <content id="mainContent" select=":not(core-toolbar):not(.core-header)"></content>
  63
  64   </div>
  65
  66   <div id="headerContainer">
  67
  68     <div class="bg-container">
  69       <div id="condensedHeaderBg"></div>
  70       <div id="headerBg"></div>
  71     </div>
  72
  73     <content id="headerContent" select="core-toolbar, .core-header"></content>
  74
  75   </div>
  76
  77 </template>
  78 <script>
  79 (function() {
  80
  81   Polymer(Polymer.mixin({
  82
  83     /**
  84      * Fired when the content has been scrolled.
  85      *
  86      * @event scroll
  87      */
  88
  89     /**
  90      * Fired when the header is transformed.
  91      *
  92      * @event core-header-transform
  93      */
  94
  95     publish: {
  96       /**
  97        * If true, the header's height will condense to `_condensedHeaderHeight`
  98        * as the user scrolls down from the top of the content area.
  99        *
 100        * @attribute condenses
 101        * @type boolean
 102        * @default false
 103        */
 104       condenses: false,
 105
 106       /**
 107        * If true, no cross-fade transition from one background to another.
 108        *
 109        * @attribute noDissolve
 110        * @type boolean
 111        * @default false
 112        */
 113       noDissolve: false,
 114
 115       /**
 116        * If true, the header doesn't slide back in when scrolling back up.
 117        *
 118        * @attribute noReveal
 119        * @type boolean
 120        * @default false
 121        */
 122       noReveal: false,
 123
 124       /**
 125        * If true, the header is fixed to the top and never moves away.
 126        *
 127        * @attribute fixed
 128        * @type boolean
 129        * @default false
 130        */
 131       fixed: false,
 132
 133       /**
 134        * If true, the condensed header is always shown and does not move away.
 135        *
 136        * @attribute keepCondensedHeader
 137        * @type boolean
 138        * @default false
 139        */
 140       keepCondensedHeader: false,
 141
 142       /**
 143        * The height of the header when it is at its full size.
 144        *
 145        * By default, the height will be measured when it is ready.  If the height
 146        * changes later the user needs to either set this value to reflect the
 147        * new height or invoke `measureHeaderHeight()`.
 148        *
 149        * @attribute headerHeight
 150        * @type number
 151        * @default 0
 152        */
 153       headerHeight: 0,
 154
 155       /**
 156        * The height of the header when it is condensed.
 157        *
 158        * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless
 159        * this is specified.
 160        *
 161        * @attribute condensedHeaderHeight
 162        * @type number
 163        * @default 0
 164        */
 165       condensedHeaderHeight: 0,
 166
 167       /**
 168        * By default, the top part of the header stays when the header is being
 169        * condensed.  Set this to true if you want the top part of the header
 170        * to be scrolled away.
 171        *
 172        * @attribute scrollAwayTopbar
 173        * @type boolean
 174        * @default false
 175        */
 176       scrollAwayTopbar: false
 177     },
 178
 179     prevScrollTop: 0,
 180
 181     headerMargin: 0,
 182
 183     y: 0,
 184
 185     observe: {
 186       'headerMargin fixed': 'setup'
 187     },
 188
 189     eventDelegates: {
 190       'core-resize': 'measureHeaderHeight'
 191     },
 192
 193     attached: function() {
 194       this.resizableAttachedHandler();
 195     },
 196
 197     ready: function() {
 198       this._scrollHandler = this.scroll.bind(this);
 199       this.scroller.addEventListener('scroll', this._scrollHandler);
 200     },
 201
 202     detached: function() {
 203       this.scroller.removeEventListener('scroll', this._scrollHandler);
 204       this.resizableDetachedHandler();
 205     },
 206
 207     domReady: function() {
 208       this.async('measureHeaderHeight');
 209     },
 210
 211     get header() {
 212       return this.$.headerContent.getDistributedNodes()[0];
 213     },
 214
 215     /**
 216      * Returns the scrollable element.
 217      *
 218      * @property scroller
 219      * @type Object
 220      */
 221     get scroller() {
 222       return this.$.mainContainer;
 223     },
 224
 225     /**
 226      * Invoke this to tell `core-scroll-header-panel` to re-measure the header's
 227      * height.
 228      *
 229      * @method measureHeaderHeight
 230      */
 231     measureHeaderHeight: function() {
 232       var header = this.header;
 233       if (header && header.offsetHeight) {
 234         this.headerHeight = header.offsetHeight;
 235       }
 236     },
 237
 238     headerHeightChanged: function() {
 239       if (!this.condensedHeaderHeight) {
 240         // assume _condensedHeaderHeight is 1/3 of the headerHeight
 241         this._condensedHeaderHeight = this.headerHeight * 1 / 3;
 242       }
 243       this.condensedHeaderHeightChanged();
 244     },
 245
 246     condensedHeaderHeightChanged: function() {
 247       if (this.condensedHeaderHeight) {
 248         this._condensedHeaderHeight = this.condensedHeaderHeight;
 249       }
 250       if (this.headerHeight) {
 251         this.headerMargin = this.headerHeight - this._condensedHeaderHeight;
 252       }
 253     },
 254
 255     condensesChanged: function() {
 256       if (this.condenses) {
 257         this.scroll();
 258       } else {
 259         // reset transform/opacity set on the header
 260         this.condenseHeader(null);
 261       }
 262     },
 263
 264     setup: function() {
 265       var s = this.scroller.style;
 266       s.paddingTop = this.fixed ? '' : this.headerHeight + 'px';
 267       s.top = this.fixed ? this.headerHeight + 'px' : '';
 268       if (this.fixed) {
 269         this.transformHeader(null);
 270       } else {
 271         this.scroll();
 272       }
 273     },
 274
 275     transformHeader: function(y) {
 276       var s = this.$.headerContainer.style;
 277       this.translateY(s, -y);
 278
 279       if (this.condenses) {
 280         this.condenseHeader(y);
 281       }
 282
 283       this.fire('core-header-transform', {y: y, height: this.headerHeight,
 284           condensedHeight: this._condensedHeaderHeight});
 285     },
 286
 287     condenseHeader: function(y) {
 288       var reset = y == null;
 289       // adjust top bar in core-header so the top bar stays at the top
 290       if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) {
 291         this.translateY(this.header.$.topBar.style,
 292             reset ? null : Math.min(y, this.headerMargin));
 293       }
 294       // transition header bg
 295       var hbg = this.$.headerBg.style;
 296       if (!this.noDissolve) {
 297         hbg.opacity = reset ? '' : (this.headerMargin - y) / this.headerMargin;
 298       }
 299       // adjust header bg so it stays at the center
 300       this.translateY(hbg, reset ? null : y / 2);
 301       // transition condensed header bg
 302       var chbg = this.$.condensedHeaderBg.style;
 303       if (!this.noDissolve) {
 304         chbg = this.$.condensedHeaderBg.style;
 305         chbg.opacity = reset ? '' : y / this.headerMargin;
 306         // adjust condensed header bg so it stays at the center
 307         this.translateY(chbg, reset ? null : y / 2);
 308       }
 309     },
 310
 311     translateY: function(s, y) {
 312       var t = y == null ? '' : 'translate3d(0, ' + y + 'px, 0)';
 313       setTransform(s, t);
 314     },
 315
 316     scroll: function(event) {
 317       if (!this.header) {
 318         return;
 319       }
 320
 321       var sTop = this.scroller.scrollTop;
 322
 323       var y = Math.min(this.keepCondensedHeader ?
 324           this.headerMargin : this.headerHeight, Math.max(0,
 325           (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop)));
 326
 327       if (this.condenses && this.prevScrollTop >= sTop && sTop > this.headerMargin) {
 328         y = Math.max(y, this.headerMargin);
 329       }
 330
 331       if (!event || !this.fixed && y !== this.y) {
 332         this.transformHeader(y);
 333       }
 334
 335       this.prevScrollTop = Math.max(sTop, 0);
 336       this.y = y;
 337
 338       if (event) {
 339         this.fire('scroll', {target: this.scroller}, this, false);
 340       }
 341     }
 342
 343   }, Polymer.CoreResizable));
 344
 345   //determine proper transform mechanizm
 346   if (document.documentElement.style.transform !== undefined) {
 347     var setTransform = function(style, string) {
 348       style.transform = string;
 349     }
 350   } else {
 351     var setTransform = function(style, string) {
 352       style.webkitTransform = string;
 353     }
 354   }
 355
 356 })();
 357
 358 </script>
 359 </polymer-element>