Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(65)

Unified Diff: third_party/polymer/components-chromium/core-scroll-header-panel/core-scroll-header-panel-extracted.js

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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);
+ }
+ }
+
+ });
+

Powered by Google App Engine
This is Rietveld 408576698