Home | History | Annotate | Download | only in core-header-panel 
      1 
      2 
      3   Polymer('core-header-panel', {
      4     
      5     /**
      6      * Fired when the content has been scrolled.  `details.target` returns
      7      * the scrollable element which you can use to access scroll info such as
      8      * `scrollTop`.
      9      *
     10      * @event scroll
     11      */
     12 
     13     publish: {
     14       /**
     15        * Controls header and scrolling behavior. Options are
     16        * `standard`, `seamed`, `waterfall`, `waterfall-tall`, 
     17        * `waterfall-medium-tall`, `scroll` and `cover`.
     18        * Default is `standard`.
     19        *
     20        * `standard`: The header is a step above the panel. The header will consume the 
     21        * panel at the point of entry, preventing it from passing through to the 
     22        * opposite side.
     23        *
     24        * `seamed`: The header is presented as seamed with the panel.
     25        *
     26        * `waterfall`: Similar to standard mode, but header is initially presented as 
     27        * seamed with panel, but then separates to form the step.
     28        *
     29        * `waterfall-tall`: The header is initially taller (`tall` class is added to 
     30        * the header).  As the user scrolls, the header separates (forming an edge)
     31        * while condensing (`tall` class is removed from the header).
     32        *
     33        * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
     34        *
     35        * `cover`: The panel covers the whole `core-header-panel` including the
     36        * header. This allows user to style the panel in such a way that the panel is
     37        * partially covering the header.
     38        *
     39        *     <style>
     40        *       core-header-panel[mode=cover]::shadow #mainContainer {
     41        *         left: 80px;
     42        *       }
     43        *       .content {
     44        *         margin: 60px 60px 60px 0;
     45        *       }
     46        *     </style>
     47        * 
     48        *     <core-header-panel mode="cover">
     49        *       <core-appbar class="tall">
     50        *         <core-icon-button icon="menu"></core-icon-button>
     51        *       </core-appbar>
     52        *       <div class="content"></div>
     53        *     </core-header-panel>
     54        *
     55        * @attribute mode
     56        * @type string
     57        * @default ''
     58        */
     59       mode: {value: '', reflect: true},
     60       
     61       /**
     62        * The class used in waterfall-tall mode.  Change this if the header
     63        * accepts a different class for toggling height, e.g. "medium-tall"
     64        *
     65        * @attribute tallClass
     66        * @type string
     67        * @default 'tall'
     68        */
     69       tallClass: 'tall',
     70       
     71       /**
     72        * If true, the drop-shadow is always shown no matter what mode is set to.
     73        *
     74        * @attribute shadow
     75        * @type boolean
     76        * @default false
     77        */
     78       shadow: false
     79     },
     80     
     81     domReady: function() {
     82       this.async('scroll');
     83     },
     84 
     85     modeChanged: function() {
     86       this.scroll();
     87     },
     88 
     89     get header() {
     90       return this.$.headerContent.getDistributedNodes()[0];
     91     },
     92     
     93     /**
     94      * Returns the scrollable element.
     95      *
     96      * @property scroller
     97      * @type Object
     98      */
     99     get scroller() {
    100       return this.mode === 'scroll' ? 
    101           this.$.outerContainer : this.$.mainContainer;
    102     },
    103     
    104     scroll: function() {
    105       var shadowMode = {'waterfall': 1, 'waterfall-tall': 1};
    106       var noShadow = {'seamed': 1, 'cover': 1, 'scroll': 1};
    107       var tallMode = {'waterfall-tall': 1};
    108       
    109       var main = this.$.mainContainer;
    110       var header = this.header;
    111       
    112       var sTop = main.scrollTop;
    113       var atTop = sTop === 0;
    114       
    115       if (header) {
    116         this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
    117             (atTop && shadowMode[this.mode] || noShadow[this.mode]));
    118         
    119         if (tallMode[this.mode]) {
    120           header.classList.toggle(this.tallClass, atTop || 
    121               main.scrollHeight < this.$.outerContainer.offsetHeight);
    122         }
    123         
    124         header.classList.toggle('animate', tallMode[this.mode]);
    125       }
    126       
    127       this.fire('scroll', {target: this.scroller}, this, false);
    128     }
    129 
    130   });
    131 
    132