| OLD | NEW |
| 1 | 1 |
| 2 (function() { | 2 (function() { |
| 3 | 3 |
| 4 'use strict'; | 4 'use strict'; |
| 5 | 5 |
| 6 Polymer({ | 6 Polymer({ |
| 7 | 7 |
| 8 /** | 8 /** |
| 9 * Fired when the content has been scrolled. | 9 * Fired when the content has been scrolled. |
| 10 * | 10 * |
| (...skipping 209 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 220 this._condenseHeader(y); | 220 this._condenseHeader(y); |
| 221 } | 221 } |
| 222 | 222 |
| 223 this.fire('paper-header-transform', {y: y, height: this.headerHeight, | 223 this.fire('paper-header-transform', {y: y, height: this.headerHeight, |
| 224 condensedHeight: this.condensedHeaderHeight}); | 224 condensedHeight: this.condensedHeaderHeight}); |
| 225 }, | 225 }, |
| 226 | 226 |
| 227 _condenseHeader: function(y) { | 227 _condenseHeader: function(y) { |
| 228 var reset = (y === null); | 228 var reset = (y === null); |
| 229 | 229 |
| 230 // adjust top bar in core-header so the top bar stays at the top | 230 // adjust top bar in paper-header so the top bar stays at the top |
| 231 if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) { | 231 if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) { |
| 232 this._translateY(this.header.$.topBar.style, | 232 this._translateY(this.header.$.topBar.style, |
| 233 reset ? null : Math.min(y, this._headerMargin)); | 233 reset ? null : Math.min(y, this._headerMargin)); |
| 234 } | 234 } |
| 235 // transition header bg | 235 // transition header bg |
| 236 var hbg = this.$.headerBg.style; | 236 var hbg = this.$.headerBg.style; |
| 237 if (!this.noDissolve) { | 237 if (!this.noDissolve) { |
| 238 hbg.opacity = reset ? '' : (this._headerMargin - y) / this._headerMargin
; | 238 hbg.opacity = reset ? '' : (this._headerMargin - y) / this._headerMargin
; |
| 239 } | 239 } |
| 240 // adjust header bg so it stays at the center | 240 // adjust header bg so it stays at the center |
| 241 this._translateY(hbg, reset ? null : y / 2); | 241 this._translateY(hbg, reset ? null : y / 2); |
| 242 // transition condensed header bg | 242 // transition condensed header bg |
| 243 if (!this.noDissolve) { | 243 if (!this.noDissolve) { |
| 244 var chbg = this.$.condensedHeaderBg.style; | 244 var chbg = this.$.condensedHeaderBg.style; |
| 245 chbg = this.$.condensedHeaderBg.style; | 245 chbg = this.$.condensedHeaderBg.style; |
| 246 chbg.opacity = reset ? '' : y / this._headerMargin; | 246 chbg.opacity = reset ? '' : y / this._headerMargin; |
| 247 | 247 |
| 248 // adjust condensed header bg so it stays at the center | 248 // adjust condensed header bg so it stays at the center |
| 249 this._translateY(chbg, reset ? null : y / 2); | 249 this._translateY(chbg, reset ? null : y / 2); |
| 250 } | 250 } |
| 251 }, | 251 }, |
| 252 | 252 |
| 253 _translateY: function(s, y) { | 253 _translateY: function(s, y) { |
| 254 var t = (y === null) ? '' : 'translate3d(0, ' + y + 'px, 0)'; | 254 var t = (y === null) ? '' : 'translate3d(0, ' + y + 'px, 0)'; |
| 255 setTransform(s, t); | 255 setTransform(s, t); |
| 256 }, | 256 }, |
| 257 | 257 |
| 258 /** @param {Event=} event */ |
| 258 _scroll: function(event) { | 259 _scroll: function(event) { |
| 259 if (!this.header) { | 260 if (!this.header) { |
| 260 return; | 261 return; |
| 261 } | 262 } |
| 262 | 263 |
| 263 var sTop = this.scroller.scrollTop; | 264 var sTop = this.scroller.scrollTop; |
| 264 | 265 |
| 265 this._y = this._y || 0; | 266 this._y = this._y || 0; |
| 266 this._prevScrollTop = this._prevScrollTop || 0; | 267 this._prevScrollTop = this._prevScrollTop || 0; |
| 267 | 268 |
| 268 var y = Math.min(this.keepCondensedHeader ? | 269 var y = Math.min(this.keepCondensedHeader ? |
| 269 this._headerMargin : this.headerHeight, Math.max(0, | 270 this._headerMargin : this.headerHeight, Math.max(0, |
| 270 (this.noReveal ? sTop : this._y + sTop - this._prevScrollTop))); | 271 (this.noReveal ? sTop : this._y + sTop - this._prevScrollTop))); |
| 271 | 272 |
| 272 if (this.condenses && this._prevScrollTop >= sTop && sTop > this._headerMa
rgin) { | 273 if (this.condenses && this._prevScrollTop >= sTop && sTop > this._headerMa
rgin) { |
| 273 y = Math.max(y, this._headerMargin); | 274 y = Math.max(y, this._headerMargin); |
| 274 } | 275 } |
| 275 | 276 |
| 276 if (!event || !this.fixed && y !== this._y) { | 277 if (!event || !this.fixed && y !== this._y) { |
| 277 this._transformHeader(y); | 278 this._transformHeader(y); |
| 278 } | 279 } |
| 279 | 280 |
| 280 this._prevScrollTop = Math.max(sTop, 0); | 281 this._prevScrollTop = Math.max(sTop, 0); |
| 281 this._y = y; | 282 this._y = y; |
| 282 | 283 |
| 283 if (event) { | 284 if (event) { |
| 284 this.fire('content-scroll', {target: this.scroller}, this, false); | 285 this.fire('content-scroll', {target: this.scroller}, {cancelable: false}
); |
| 285 } | 286 } |
| 286 } | 287 } |
| 287 | 288 |
| 288 }); | 289 }); |
| 289 | 290 |
| 290 //determine proper transform mechanizm | 291 //determine proper transform mechanizm |
| 291 if (document.documentElement.style.transform !== undefined) { | 292 if (document.documentElement.style.transform !== undefined) { |
| 292 var setTransform = function(style, string) { | 293 var setTransform = function(style, string) { |
| 293 style.transform = string; | 294 style.transform = string; |
| 294 } | 295 } |
| 295 } else { | 296 } else { |
| 296 var setTransform = function(style, string) { | 297 var setTransform = function(style, string) { |
| 297 style.webkitTransform = string; | 298 style.webkitTransform = string; |
| 298 } | 299 } |
| 299 } | 300 } |
| 300 | 301 |
| 301 })(); | 302 })(); |
| 302 | 303 |
| OLD | NEW |