| Index: third_party/polymer/components-chromium/core-scroll-header-panel/core-scroll-header-panel-extracted.js
|
| diff --git a/third_party/polymer/components-chromium/core-scroll-header-panel/core-scroll-header-panel-extracted.js b/third_party/polymer/components-chromium/core-scroll-header-panel/core-scroll-header-panel-extracted.js
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..edba9697147606e42f2ce2dae1b5fa9873d4c341
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-scroll-header-panel/core-scroll-header-panel-extracted.js
|
| @@ -0,0 +1,223 @@
|
| +
|
| +
|
| + Polymer('core-scroll-header-panel', {
|
| +
|
| + /**
|
| + * Fired when the content has been scrolled.
|
| + *
|
| + * @event scroll
|
| + */
|
| +
|
| + /**
|
| + * 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 does not move 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 measured when it is ready. If the height
|
| + * changes later the 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, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless
|
| + * this is specified.
|
| + *
|
| + * @attribute condensedHeaderHeight
|
| + * @type number
|
| + */
|
| + condensedHeaderHeight: 0
|
| + },
|
| +
|
| + prevScrollTop: 0,
|
| +
|
| + headerMargin: 0,
|
| +
|
| + y: 0,
|
| +
|
| + observe: {
|
| + 'headerMargin fixed': 'setup'
|
| + },
|
| +
|
| + domReady: function() {
|
| + this.async('measureHeaderHeight');
|
| + },
|
| +
|
| + get header() {
|
| + return this.$.headerContent.getDistributedNodes()[0];
|
| + },
|
| +
|
| + get scroller() {
|
| + return this.$.mainContainer;
|
| + },
|
| +
|
| + measureHeaderHeight: function() {
|
| + var header = this.header;
|
| + if (this.header) {
|
| + this.headerHeight = header.offsetHeight;
|
| + }
|
| + },
|
| +
|
| + headerHeightChanged: function() {
|
| + 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;
|
| + }
|
| + },
|
| +
|
| + 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 ? '' : this.headerHeight + 'px';
|
| + s.top = this.fixed ? this.headerHeight + 'px' : '';
|
| + if (this.fixed) {
|
| + this.transformHeader(null);
|
| + } else {
|
| + this.scroll();
|
| + }
|
| + },
|
| +
|
| + transformHeader: function(y) {
|
| + var s = this.$.headerContainer.style;
|
| + this.translateY(s, -y);
|
| +
|
| + if (this.condenses) {
|
| + this.condenseHeader(y);
|
| + }
|
| +
|
| + 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 = y == null ? '' :
|
| + 'translate3d(0, ' + y + 'px, 0)';
|
| + },
|
| +
|
| + scroll: function(event) {
|
| + if (!this.header) {
|
| + return;
|
| + }
|
| +
|
| + var sTop = this.scroller.scrollTop;
|
| +
|
| + var y = Math.min(this.keepCondensedHeader ?
|
| + this.headerMargin : this.headerHeight, Math.max(0,
|
| + (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop)));
|
| +
|
| + if (this.condenses && this.prevScrollTop >= sTop && sTop > this.headerMargin) {
|
| + y = Math.max(y, this.headerMargin);
|
| + }
|
| +
|
| + if (!event || !this.fixed && y !== this.y) {
|
| + requestAnimationFrame(this.transformHeader.bind(this, y));
|
| + }
|
| +
|
| + this.prevScrollTop = sTop;
|
| + this.y = y;
|
| +
|
| + if (event) {
|
| + this.fire('scroll', {target: this.scroller}, this, false);
|
| + }
|
| + }
|
| +
|
| + });
|
| +
|
|
|