Snap the header when it revals

PolymerElements · Mar 8, 2016 · 6cf631f · 6cf631f
1 parent 5ef0414
commit 6cf631f
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 81 deletions.
diff --git a/app-header-layout/demo/demo1.html b/app-header-layout/demo/demo1.html
@@ -19,11 +19,11 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link rel="import" href="../../../font-roboto/roboto.html">
-  <link rel="import" href="../../../iron-flex-layout/classes/iron-flex-layout.html">
   <link rel="import" href="../../../iron-icons/iron-icons.html">
   <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../demo/sample-content.html">
   <link rel="import" href="../../app-header/app-header.html">
+  <link rel="import" href="../../app-scroll-effects/app-scroll-effects.html">
   <link rel="import" href="../../app-toolbar/app-toolbar.html">
   <link rel="import" href="../app-header-layout.html">
 
@@ -52,20 +52,22 @@
   <!-- default to use body scroller -->
   <app-header-layout>
 
-    <app-header condenses reveals>
+    <app-header effects="waterfall" condenses reveals>
       <app-toolbar>
         <paper-icon-button icon="menu"></paper-icon-button>
-        <div class="flex"></div>
+        <div title></div>
         <paper-icon-button icon="search"></paper-icon-button>
       </app-toolbar>
       <app-toolbar></app-toolbar>
       <app-toolbar>
         <div spacer title>My Drive</div>
       </app-toolbar>
     </app-header>
+
     <div content>
       <sample-content size="100"></sample-content>
     </div>
+
   </app-header-layout>
 
 </body>

diff --git a/app-header-layout/demo/demo2.html b/app-header-layout/demo/demo2.html
@@ -19,10 +19,10 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link rel="import" href="../../../font-roboto/roboto.html">
-  <link rel="import" href="../../../iron-flex-layout/classes/iron-flex-layout.html">
   <link rel="import" href="../../../iron-icons/iron-icons.html">
   <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../app-header/app-header.html">
+  <link rel="import" href="../../app-scroll-effects/app-scroll-effects.html">
   <link rel="import" href="../../app-toolbar/app-toolbar.html">
   <link rel="import" href="../../demo/sample-content.html">
   <link rel="import" href="../app-header-layout.html">
@@ -36,15 +36,19 @@
     body {
       margin: 0;
       font-family: 'Roboto', 'Noto', sans-serif;
+      background-color: #666;
     }
 
     app-header-layout {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      top: 100px;
+      right: 100px;
+      bottom: 100px;
+      left: 100px;
+      height: calc(100% - 200px);
       background-color: #eee;
+      overflow: hidden;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     }
 
     app-header {
@@ -63,10 +67,10 @@
 
   <!-- app-header-layout provides a scroller -->
   <app-header-layout has-scrolling-region>
-    <app-header condenses reveals>
+    <app-header effects="waterfall" condenses reveals>
       <app-toolbar>
         <paper-icon-button icon="menu"></paper-icon-button>
-        <div class="flex"></div>
+        <div title></div>
         <paper-icon-button icon="search"></paper-icon-button>
       </app-toolbar>
       <app-toolbar></app-toolbar>

diff --git a/app-header-layout/demo/music.html b/app-header-layout/demo/music.html
@@ -193,10 +193,13 @@ <h2>GIRL</h2>
     addEventListener('WebComponentsReady', function() {
 
       var topHeader = document.querySelector('.top-header');
+      var bgHeader = document.querySelector('.bg-header');
       var fadeBackgroundEffect = topHeader.createEffect('fade-background');
 
-      document.querySelector('.bg-header').addEventListener('app-header-transform', function(e) {
-        var isCondensed = e.detail.progress > 0.25;
+      window.addEventListener('scroll', function() {
+        var progress = bgHeader.getScrollState().progress;
+        var isCondensed = progress > 0.25;
+
         fadeBackgroundEffect.run(isCondensed ? 1 : 0);
         topHeader.shadow = isCondensed;
       });