From dd4cf48e48ebc3ed1c339999c74ed246c7742a89 Mon Sep 17 00:00:00 2001 From: frankiefu Date: Wed, 30 Jul 2014 17:15:19 -0700 Subject: [PATCH] make setting "condenses", "headerHeight" and "condensedHeaderHeight" dynamically work; add webkit-overflow-scrolling --- core-scroll-header-panel.css | 1 + core-scroll-header-panel.html | 101 ++++++++++++++++++++-------------- 2 files changed, 62 insertions(+), 40 deletions(-) diff --git a/core-scroll-header-panel.css b/core-scroll-header-panel.css index 0eca2f9..07a0956 100644 --- a/core-scroll-header-panel.css +++ b/core-scroll-header-panel.css @@ -21,6 +21,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN left: 0; box-sizing: border-box; -moz-box-sizing: border-box; + -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; } diff --git a/core-scroll-header-panel.html b/core-scroll-header-panel.html index 323b728..ae0f9e1 100644 --- a/core-scroll-header-panel.html +++ b/core-scroll-header-panel.html @@ -93,7 +93,7 @@ publish: { /** - * If true, the header's height will condense to `condensedHeaderHeight` + * If true, the header's height will condense to `_condensedHeaderHeight` * as the user scrolls down from the top of the content area. * * @attribute condenses @@ -153,12 +153,13 @@ /** * The height of the header when it is condensed. * - * By default, this will be 1/3 of `headerHeight`. + * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless + * this is specified. * * @attribute condensedHeaderHeight * @type number */ - condensedHeaderHeight: 0, + condensedHeaderHeight: 0 }, prevScrollTop: 0, @@ -191,26 +192,37 @@ }, headerHeightChanged: function() { - if (this.condensedHeaderHeight) { - this.condensedHeaderHeightChanged(); - } else { - // assume condensedHeaderHeight is 1/3 of the headerHeight - this.condensedHeaderHeight = this.headerHeight * 1 / 3; + if (!this.condensedHeaderHeight) { + // assume _condensedHeaderHeight is 1/3 of the headerHeight + this._condensedHeaderHeight = this.headerHeight * 1 / 3; } + this.condensedHeaderHeightChanged(); }, condensedHeaderHeightChanged: function() { + if (this.condensedHeaderHeight) { + this._condensedHeaderHeight = this.condensedHeaderHeight; + } if (this.headerHeight) { - this.headerMargin = this.headerHeight - this.condensedHeaderHeight; + this.headerMargin = this.headerHeight - this._condensedHeaderHeight; + } + }, + + condensesChanged: function() { + if (this.condenses) { + this.scroll(); + } else { + // reset transform/opacity set on the header + this.condenseHeader(null); } }, setup: function() { var s = this.scroller.style; - s.paddingTop = this.fixed ? null : this.headerHeight + 'px'; - s.top = this.fixed ? this.headerHeight + 'px' : null; + s.paddingTop = this.fixed ? '' : this.headerHeight + 'px'; + s.top = this.fixed ? this.headerHeight + 'px' : ''; if (this.fixed) { - this.transformHeader(0); + this.transformHeader(null); } else { this.scroll(); } @@ -221,36 +233,43 @@ this.translateY(s, -y); 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; - this.translateY(s, Math.min(y, this.headerMargin)); - } - // transition header bg - s = this.$.headerBg.style; - if (!this.noDissolve) { - s.opacity = (this.headerMargin - y) / this.headerMargin; - } - // adjust header bg so it stays at the center - this.translateY(s, y / 2); - // transition condensed header bg - if (!this.noDissolve) { - s = this.$.condensedHeaderBg.style; - s.opacity = y / this.headerMargin; - // adjust condensed header bg so it stays at the center - this.translateY(s, y / 2); - } + this.condenseHeader(y); } - this.fire('core-header-transform', - {y: y, height: this.headerHeight, condensedHeight: this.condensedHeaderHeight}); + this.fire('core-header-transform', {y: y, height: this.headerHeight, + condensedHeight: this._condensedHeaderHeight}); }, - + + condenseHeader: function(y) { + var reset = y == null; + // adjust top bar in core-header so the top bar stays at the top + if (this.header.$ && this.header.$.topBar) { + this.translateY(this.header.$.topBar.style, + reset ? null : Math.min(y, this.headerMargin)); + } + // transition header bg + var hbg = this.$.headerBg.style; + if (!this.noDissolve) { + hbg.opacity = reset ? '' : (this.headerMargin - y) / this.headerMargin; + } + // adjust header bg so it stays at the center + this.translateY(hbg, reset ? null : y / 2); + // transition condensed header bg + var chbg = this.$.condensedHeaderBg.style; + if (!this.noDissolve) { + chbg = this.$.condensedHeaderBg.style; + chbg.opacity = reset ? '' : y / this.headerMargin; + // adjust condensed header bg so it stays at the center + this.translateY(chbg, reset ? null : y / 2); + } + }, + translateY: function(s, y) { - s.transform = s.webkitTransform = 'translate3d(0, ' + y + 'px, 0)'; + s.transform = s.webkitTransform = y == null ? '' : + 'translate3d(0, ' + y + 'px, 0)'; }, - - scroll: function() { + + scroll: function(event) { if (!this.header) { return; } @@ -261,18 +280,20 @@ this.headerMargin : this.headerHeight, Math.max(0, (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop))); - if (this.condenses && this.prevScrollTop > sTop && sTop > this.headerMargin) { + if (this.condenses && this.prevScrollTop >= sTop && sTop > this.headerMargin) { y = Math.max(y, this.headerMargin); } - if (!this.fixed && y !== this.y) { + if (!event || !this.fixed && y !== this.y) { requestAnimationFrame(this.transformHeader.bind(this, y)); } this.prevScrollTop = sTop; this.y = y; - this.fire('scroll', {target: this.scroller}, this, false); + if (event) { + this.fire('scroll', {target: this.scroller}, this, false); + } } });