merge #2

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"
   }
 }

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);
       }
 

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>

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>

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)';

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)';

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)';

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)';

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">