add an option to keep the condensed header appears all the time and not

moves away
googlearchive · May 27, 2014 · dfb2b3d · dfb2b3d
1 parent 717d9a8
commit dfb2b3d
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 7 deletions.
diff --git a/core-scroll-header-panel.html b/core-scroll-header-panel.html
@@ -17,7 +17,7 @@
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-scroll-header-panel" attributes="tallMode noDissolve noReveal fixed headerHeight minHeaderHeight">
+<polymer-element name="core-scroll-header-panel" attributes="tallMode noDissolve noReveal fixed keepMinHeader headerHeight minHeaderHeight">
 <template>
 
   <link rel="stylesheet" href="core-scroll-header-panel.css">
@@ -61,6 +61,9 @@
     // 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.
@@ -75,6 +78,10 @@
 
     y: 0,
 
+    observe: {
+      'headerMargin fixed': 'setup'
+    },
+
     domReady: function() {
       this.async('measureHeaderHeight');
     },
@@ -85,14 +92,12 @@
 
     measureHeaderHeight: function() {
       var header = this.header;
-      // measure headerHeight if it is not already set
-      if (!this.headerHeight && this.header) {
+      if (this.header) {
         this.headerHeight = header.offsetHeight;
       }
     },
 
     headerHeightChanged: function() {
-      this.fixedChanged();
       if (this.minHeaderHeight) {
         this.minHeaderHeightChanged();
       } else {
@@ -102,10 +107,12 @@
     },
 
     minHeaderHeightChanged: function() {
-      this.headerMargin = this.headerHeight - this.minHeaderHeight;
+      if (this.headerHeight) {
+        this.headerMargin = this.headerHeight - this.minHeaderHeight;
+      }
     },
 
-    fixedChanged: function() {
+    setup: function() {
       var s = this.$.mainContainer.style;
       s.paddingTop = this.fixed ? null : this.headerHeight + 'px';
       s.top = this.fixed ? this.headerHeight + 'px' : null;
@@ -157,7 +164,8 @@
 
       var sTop = this.$.mainContainer.scrollTop;
 
-      var y = Math.min(this.headerHeight, Math.max(0, 
+      var y = Math.min(this.keepMinHeader ? 
+          this.headerMargin : this.headerHeight, Math.max(0, 
           (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop)));
 
       if (this.tallMode && this.prevScrollTop > sTop && sTop > this.headerMargin) {

diff --git a/demo.html b/demo.html
@@ -25,6 +25,7 @@
     <a href="demos/demo5.html">Demo5</a><br><br>
     <a href="demos/demo6.html">Demo6</a><br><br>
     <a href="demos/demo7.html">Demo7</a><br><br>
+    <a href="demos/demo8.html">Demo8</a><br><br>
 
 </body>
 </html>
diff --git a/demos/demo8.html b/demos/demo8.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>core-scroll-header-panel: demo8</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <script src="../../platform/platform.js"></script>
+
+  <link rel="import" href="../core-scroll-header-panel.html">
+  <link rel="import" href="lorem-ipsum.html">
+  <link rel="import" href="../../core-toolbar/core-toolbar.html">
+  <link rel="import" href="../../core-icon-button/core-icon-button.html">
+
+  <style shim-shadowdom>
+
+    body {
+      font-family: sans-serif;
+      color: #333;
+    }
+
+    core-scroll-header-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    core-scroll-header-panel::shadow #tallHeaderBg {
+      background-image: url(images/bg9.jpg);
+    }
+
+    core-scroll-header-panel::shadow #headerBg {
+      background-color: #673ab7;
+    }
+
+    core-toolbar {
+      color: #f1f1f1;
+      fill: #f1f1f1;
+    }
+
+    core-toolbar.tall {
+      height: 256px;
+    }
+
+    .bottom-text {
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+      font-size: 22px;
+      padding-bottom: 10px;
+    }
+
+    .subtitle {
+      padding-top: 4px;
+      font-size: 16px;
+      color: #ccc;
+    }
+
+    .content {
+      padding: 20px 20px 20px 68px;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <core-scroll-header-panel tallMode keepMinHeader minHeaderHeight="140">
+
+    <core-toolbar class="tall">
+
+      <core-icon-button icon="arrow-back"></core-icon-button>
+      <div flex></div>
+      <core-icon-button icon="thumb-up"></core-icon-button>
+      <core-icon-button icon="mail"></core-icon-button>
+
+      <div class="bottom indent bottom-text" self-end>
+        <div>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis</div>
+        <div class="subtitle">Iisque perfecto dissentiet cum et</div>
+      </div>
+
+    </core-toolbar>
+
+    <div class="content">
+
+      <lorem-ipsum paragraphs="100"></lorem-ipsum>
+
+    </div>
+
+  </core-scroll-header-panel>
+
+</body>
+</html>