From dcad5ded4814af1e2753fadb3bc62c4925323cfc Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 2 Jun 2014 14:30:52 -0700
Subject: [PATCH] merge #2

---
 bower.json                    |   1 +
 core-scroll-header-panel.html | 130 +++++++++++++++++++++++-----------
 demos/demo2.html              |   4 +-
 demos/demo3.html              |   4 +-
 demos/demo4.html              |   6 +-
 demos/demo5.html              |   6 +-
 demos/demo6.html              |   6 +-
 demos/demo7.html              |   6 +-
 demos/demo8.html              |   2 +-
 9 files changed, 108 insertions(+), 57 deletions(-)

diff --git a/bower.json b/bower.json
index 746f029..843a268 100644
--- a/bower.json
+++ b/bower.json
@@ -3,6 +3,7 @@
   "private": true,
   "dependencies": {
     "core-icon-button": "Polymer/core-icon-button#master",
+    "core-media-query": "Polymer/core-media-query#master",
     "core-toolbar": "Polymer/core-toolbar#master"
   }
 }
\ No newline at end of file
diff --git a/core-scroll-header-panel.html b/core-scroll-header-panel.html
index 950be86..7b160cc 100644
--- a/core-scroll-header-panel.html
+++ b/core-scroll-header-panel.html
@@ -17,14 +17,14 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-scroll-header-panel" attributes="tallMode noDissolve noReveal fixed keepMinHeader headerHeight minHeaderHeight">
+<polymer-element name="core-scroll-header-panel">
 <template>
 
   <link rel="stylesheet" href="core-scroll-header-panel.css">
 
   <div id="mainContainer" on-scroll="{{scroll}}">
   
-    <content id="mainContent" select=".content"></content>
+    <content id="mainContent" select="[content], .content"></content>
     
   </div>
   
@@ -47,33 +47,83 @@
      *
      * @event scroll
      */
-    
-    // If true, header is a tall header and as user scrolls, it condenses to 
-    // make more room for the content area.
-    tallMode: false,
-    
-    // If true, no cross-fade transition from one background to another.
-    noDissolve: false,
-    
-    // If true, the header doesn't slide back in when scrolling back up.
-    noReveal: false,
-    
-    // If true, the header is fixed to the top and never moves away.
-    fixed: false,
-    
-    // If true, the min/condensed header is always shown and not moves away.
-    keepMinHeader: false,
-    
-    // The height of the header when it is at its full size. scroll-header-panel
-    // will try to measure the header height so users usually don't need to 
-    // set this.
-    headerHeight: 0,
-    
-    // The height of the header when it is condensed.  scroll-header-panel will
-    // set this value to be 1/3 of the headerHeight.  Override the default value
-    // if you want a different height.
-    minHeaderHeight: 0,
-    
+     
+    /**
+     * Fired when the header is transformed.
+     *
+     * @event core-header-transform
+     */
+     
+    publish: {
+      /**
+       * If true, the header's height will condense to `condensedHeaderHeight`
+       * as the user scrolls down from the top of the content area.
+       *
+       * @attribute condenses
+       * @type boolean
+       * @default false
+       */
+      condenses: false,
+
+      /**
+       * If true, no cross-fade transition from one background to another.
+       *
+       * @attribute noDissolve
+       * @type boolean
+       * @default false
+       */
+      noDissolve: false,
+
+      /**
+       * If true, the header doesn't slide back in when scrolling back up.
+       *
+       * @attribute noReveal
+       * @type boolean
+       * @default false
+       */
+      noReveal: false,
+
+      /**
+       * If true, the header is fixed to the top and never moves away.
+       *
+       * @attribute fixed
+       * @type boolean
+       * @default false
+       */
+      fixed: false,
+      
+      /**
+       * If true, the condensed header is always shown and not moves away.
+       *
+       * @attribute keepCondensedHeader
+       * @type boolean
+       * @default false
+       */
+      keepCondensedHeader: false,
+
+      /**
+       * The height of the header when it is at its full size.
+       *
+       * By default, the height will be measused when it is ready.  If the height
+       * changes later user needs to either set this value to reflect the new
+       * height or invoke `measureHeaderHeight()`.
+       *
+       * @attribute headerHeight
+       * @type number
+       */
+      headerHeight: 0,
+
+      /**
+       * The height of the header when it is condensed.
+       *
+       * By default, this will be 1/3 of `headerHeight`.
+       *
+       * @attribute condensedHeaderHeight
+       * @type number
+       */
+      condensedHeaderHeight: 0,
+    },
+
     prevScrollTop: 0,
     
     y: 0,
@@ -98,17 +148,17 @@
     },
     
     headerHeightChanged: function() {
-      if (this.minHeaderHeight) {
-        this.minHeaderHeightChanged();
+      if (this.condensedHeaderHeight) {
+        this.condensedHeaderHeightChanged();
       } else {
-        // assume minHeaderHeight is 1/3 of the headerHeight
-        this.minHeaderHeight = this.headerHeight * 1 / 3;
+        // assume condensedHeaderHeight is 1/3 of the headerHeight
+        this.condensedHeaderHeight = this.headerHeight * 1 / 3;
       }
     },
     
-    minHeaderHeightChanged: function() {
+    condensedHeaderHeightChanged: function() {
       if (this.headerHeight) {
-        this.headerMargin = this.headerHeight - this.minHeaderHeight;
+        this.headerMargin = this.headerHeight - this.condensedHeaderHeight;
       }
     },
     
@@ -127,7 +177,7 @@
       var s = this.$.headerContainer.style;
       this.translateY(s, -y);
       
-      if (this.tallMode) {
+      if (this.condenses) {
         // adjust top bar in core-header so the top bar stays at the top
         if (this.header.$ && this.header.$.topBar) {
           s = this.header.$.topBar.style;
@@ -149,8 +199,8 @@
         }
       }
       
-      this.fire('core-header-transform', 
-          {y: y, h: this.headerHeight, minh: this.minHeaderHeight});
+      this.fire('core-header-transform',
+          {y: y, height: this.headerHeight, condensedHeight: this.condensedHeaderHeight});
     },
     
     translateY: function(s, y) {
@@ -164,11 +214,11 @@
       
       var sTop = this.$.mainContainer.scrollTop;
       
-      var y = Math.min(this.keepMinHeader ? 
+      var y = Math.min(this.keepCondensedHeader ? 
           this.headerMargin : this.headerHeight, Math.max(0, 
           (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop)));
       
-      if (this.tallMode && this.prevScrollTop > sTop && sTop > this.headerMargin) {
+      if (this.condenses && this.prevScrollTop > sTop && sTop > this.headerMargin) {
         y = Math.max(y, this.headerMargin);
       }
       
diff --git a/demos/demo2.html b/demos/demo2.html
index 48e4555..bc65ed6 100644
--- a/demos/demo2.html
+++ b/demos/demo2.html
@@ -52,8 +52,8 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode>
-  
+  <core-scroll-header-panel condenses>
+
     <core-toolbar class="tall">
     
       <core-icon-button icon="arrow-back"></core-icon-button>
diff --git a/demos/demo3.html b/demos/demo3.html
index 764b67b..be37b7b 100644
--- a/demos/demo3.html
+++ b/demos/demo3.html
@@ -54,8 +54,8 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode noReveal noDissolve>
-  
+  <core-scroll-header-panel condenses noReveal noDissolve>
+
     <core-toolbar class="tall">
     
       <div flex></div>
diff --git a/demos/demo4.html b/demos/demo4.html
index fd7e32a..1d32b01 100644
--- a/demos/demo4.html
+++ b/demos/demo4.html
@@ -63,8 +63,8 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode>
-  
+  <core-scroll-header-panel condenses>
+
     <core-toolbar class="tall">
     
       <core-icon-button icon="arrow-back"></core-icon-button>
@@ -89,7 +89,7 @@
     
     addEventListener('core-header-transform', function(e) {
       var d = e.detail
-      var m = d.h - d.minh;
+      var m = d.height - d.condensedHeight;
       var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
       titleStyle.webkitTransform = titleStyle.transform = 
           'scale(' + scale + ') translateZ(0)';
diff --git a/demos/demo5.html b/demos/demo5.html
index f2d14b0..1748b1f 100644
--- a/demos/demo5.html
+++ b/demos/demo5.html
@@ -63,8 +63,8 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode>
-  
+  <core-scroll-header-panel condenses>
+
     <core-toolbar class="tall">
     
       <core-icon-button icon="arrow-back"></core-icon-button>
@@ -89,7 +89,7 @@
     
     addEventListener('core-header-transform', function(e) {
       var d = e.detail
-      var m = d.h - d.minh;
+      var m = d.height - d.condensedHeight;
       var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
       titleStyle.webkitTransform = titleStyle.transform = 
           'scale(' + scale + ') translateZ(0)';
diff --git a/demos/demo6.html b/demos/demo6.html
index 22128b5..ae67602 100644
--- a/demos/demo6.html
+++ b/demos/demo6.html
@@ -67,8 +67,8 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode minHeaderHeight="64">
-  
+  <core-scroll-header-panel condenses condensedHeaderHeight="64">
+
     <core-toolbar class="tall">
     
       <core-icon-button icon="arrow-back"></core-icon-button>
@@ -93,7 +93,7 @@
     
     addEventListener('core-header-transform', function(e) {
       var d = e.detail
-      var m = d.h - d.minh;
+      var m = d.height - d.condensedHeight;
       var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
       titleStyle.webkitTransform = titleStyle.transform = 
           'scale(' + scale + ') translateZ(0)';
diff --git a/demos/demo7.html b/demos/demo7.html
index 707bde9..cd83155 100644
--- a/demos/demo7.html
+++ b/demos/demo7.html
@@ -64,8 +64,8 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode>
-  
+  <core-scroll-header-panel condenses>
+
     <core-toolbar class="tall">
     
       <core-icon-button icon="arrow-back"></core-icon-button>
@@ -100,7 +100,7 @@ <h3>Resize window to toggle between fixed header and scrolled header</h3>
     
     addEventListener('core-header-transform', function(e) {
       var d = e.detail
-      var m = d.h - d.minh;
+      var m = d.height - d.condensedHeight;
       var scale = Math.max(0.75, (m - d.y) / (m / 0.25)  + 0.75);
       titleStyle.webkitTransform = titleStyle.transform = 
           'scale(' + scale + ') translateZ(0)';
diff --git a/demos/demo8.html b/demos/demo8.html
index f4290bb..3ecbdf3 100644
--- a/demos/demo8.html
+++ b/demos/demo8.html
@@ -76,7 +76,7 @@
 </head>
 <body unresolved>
 
-  <core-scroll-header-panel tallMode keepMinHeader minHeaderHeight="140">
+  <core-scroll-header-panel condenses keepCondensedHeader condensedHeaderHeight="140">
   
     <core-toolbar class="tall">