| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> | 9 --> |
| 10 | 10 |
| (...skipping 23 matching lines...) Expand all Loading... |
| 34 | 34 |
| 35 html, body { | 35 html, body { |
| 36 height: 100%; | 36 height: 100%; |
| 37 margin: 0; | 37 margin: 0; |
| 38 } | 38 } |
| 39 paper-scroll-header-panel { | 39 paper-scroll-header-panel { |
| 40 height: 100%; | 40 height: 100%; |
| 41 } | 41 } |
| 42 | 42 |
| 43 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem
ent | 43 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem
ent |
| 44 that represents a header by adding a `core-header` class to it. | 44 that represents a header by adding a `paper-header` class to it. |
| 45 | 45 |
| 46 <paper-scroll-header-panel> | 46 <paper-scroll-header-panel> |
| 47 <paper-toolbar>Header</paper-toolbar> | 47 <paper-toolbar>Header</paper-toolbar> |
| 48 <div>Content goes here...</div> | 48 <div>Content goes here...</div> |
| 49 </paper-scroll-header-panel> | 49 </paper-scroll-header-panel> |
| 50 | 50 |
| 51 Styling scroll-header-panel: | 51 Styling scroll-header-panel: |
| 52 | 52 |
| 53 To change background for toolbar when it is at its full size: | 53 To change background for toolbar when it is at its full size: |
| 54 | 54 |
| (...skipping 316 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 371 this._condenseHeader(y); | 371 this._condenseHeader(y); |
| 372 } | 372 } |
| 373 | 373 |
| 374 this.fire('paper-header-transform', {y: y, height: this.headerHeight, | 374 this.fire('paper-header-transform', {y: y, height: this.headerHeight, |
| 375 condensedHeight: this.condensedHeaderHeight}); | 375 condensedHeight: this.condensedHeaderHeight}); |
| 376 }, | 376 }, |
| 377 | 377 |
| 378 _condenseHeader: function(y) { | 378 _condenseHeader: function(y) { |
| 379 var reset = (y === null); | 379 var reset = (y === null); |
| 380 | 380 |
| 381 // adjust top bar in core-header so the top bar stays at the top | 381 // adjust top bar in paper-header so the top bar stays at the top |
| 382 if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) { | 382 if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) { |
| 383 this._translateY(this.header.$.topBar.style, | 383 this._translateY(this.header.$.topBar.style, |
| 384 reset ? null : Math.min(y, this._headerMargin)); | 384 reset ? null : Math.min(y, this._headerMargin)); |
| 385 } | 385 } |
| 386 // transition header bg | 386 // transition header bg |
| 387 var hbg = this.$.headerBg.style; | 387 var hbg = this.$.headerBg.style; |
| 388 if (!this.noDissolve) { | 388 if (!this.noDissolve) { |
| 389 hbg.opacity = reset ? '' : (this._headerMargin - y) / this._headerMargin
; | 389 hbg.opacity = reset ? '' : (this._headerMargin - y) / this._headerMargin
; |
| 390 } | 390 } |
| 391 // adjust header bg so it stays at the center | 391 // adjust header bg so it stays at the center |
| 392 this._translateY(hbg, reset ? null : y / 2); | 392 this._translateY(hbg, reset ? null : y / 2); |
| 393 // transition condensed header bg | 393 // transition condensed header bg |
| 394 if (!this.noDissolve) { | 394 if (!this.noDissolve) { |
| 395 var chbg = this.$.condensedHeaderBg.style; | 395 var chbg = this.$.condensedHeaderBg.style; |
| 396 chbg = this.$.condensedHeaderBg.style; | 396 chbg = this.$.condensedHeaderBg.style; |
| 397 chbg.opacity = reset ? '' : y / this._headerMargin; | 397 chbg.opacity = reset ? '' : y / this._headerMargin; |
| 398 | 398 |
| 399 // adjust condensed header bg so it stays at the center | 399 // adjust condensed header bg so it stays at the center |
| 400 this._translateY(chbg, reset ? null : y / 2); | 400 this._translateY(chbg, reset ? null : y / 2); |
| 401 } | 401 } |
| 402 }, | 402 }, |
| 403 | 403 |
| 404 _translateY: function(s, y) { | 404 _translateY: function(s, y) { |
| 405 var t = (y === null) ? '' : 'translate3d(0, ' + y + 'px, 0)'; | 405 var t = (y === null) ? '' : 'translate3d(0, ' + y + 'px, 0)'; |
| 406 setTransform(s, t); | 406 setTransform(s, t); |
| 407 }, | 407 }, |
| 408 | 408 |
| 409 /** @param {Event=} event */ |
| 409 _scroll: function(event) { | 410 _scroll: function(event) { |
| 410 if (!this.header) { | 411 if (!this.header) { |
| 411 return; | 412 return; |
| 412 } | 413 } |
| 413 | 414 |
| 414 var sTop = this.scroller.scrollTop; | 415 var sTop = this.scroller.scrollTop; |
| 415 | 416 |
| 416 this._y = this._y || 0; | 417 this._y = this._y || 0; |
| 417 this._prevScrollTop = this._prevScrollTop || 0; | 418 this._prevScrollTop = this._prevScrollTop || 0; |
| 418 | 419 |
| 419 var y = Math.min(this.keepCondensedHeader ? | 420 var y = Math.min(this.keepCondensedHeader ? |
| 420 this._headerMargin : this.headerHeight, Math.max(0, | 421 this._headerMargin : this.headerHeight, Math.max(0, |
| 421 (this.noReveal ? sTop : this._y + sTop - this._prevScrollTop))); | 422 (this.noReveal ? sTop : this._y + sTop - this._prevScrollTop))); |
| 422 | 423 |
| 423 if (this.condenses && this._prevScrollTop >= sTop && sTop > this._headerMa
rgin) { | 424 if (this.condenses && this._prevScrollTop >= sTop && sTop > this._headerMa
rgin) { |
| 424 y = Math.max(y, this._headerMargin); | 425 y = Math.max(y, this._headerMargin); |
| 425 } | 426 } |
| 426 | 427 |
| 427 if (!event || !this.fixed && y !== this._y) { | 428 if (!event || !this.fixed && y !== this._y) { |
| 428 this._transformHeader(y); | 429 this._transformHeader(y); |
| 429 } | 430 } |
| 430 | 431 |
| 431 this._prevScrollTop = Math.max(sTop, 0); | 432 this._prevScrollTop = Math.max(sTop, 0); |
| 432 this._y = y; | 433 this._y = y; |
| 433 | 434 |
| 434 if (event) { | 435 if (event) { |
| 435 this.fire('content-scroll', {target: this.scroller}, this, false); | 436 this.fire('content-scroll', {target: this.scroller}, {cancelable: false}
); |
| 436 } | 437 } |
| 437 } | 438 } |
| 438 | 439 |
| 439 }); | 440 }); |
| 440 | 441 |
| 441 //determine proper transform mechanizm | 442 //determine proper transform mechanizm |
| 442 if (document.documentElement.style.transform !== undefined) { | 443 if (document.documentElement.style.transform !== undefined) { |
| 443 var setTransform = function(style, string) { | 444 var setTransform = function(style, string) { |
| 444 style.transform = string; | 445 style.transform = string; |
| 445 } | 446 } |
| 446 } else { | 447 } else { |
| 447 var setTransform = function(style, string) { | 448 var setTransform = function(style, string) { |
| 448 style.webkitTransform = string; | 449 style.webkitTransform = string; |
| 449 } | 450 } |
| 450 } | 451 } |
| 451 | 452 |
| 452 })(); | 453 })(); |
| 453 | 454 |
| 454 </script> | 455 </script> |
| OLD | NEW |