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

Side by Side Diff: third_party/polymer/v1_0/components/paper-scroll-header-panel/paper-scroll-header-panel.html

Issue 1187823002: Update Polymer components and re-run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 6 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 unified diff | Download patch
OLDNEW
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698