| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 @license | |
| 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 | |
| 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 | |
| 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 | |
| 9 --> | |
| 10 | |
| 11 <link rel="import" href="../polymer/polymer.html"> | |
| 12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | |
| 13 | |
| 14 <!-- | |
| 15 `paper-scroll-header-panel` contains a header section and a content section. Th
e | |
| 16 header is initially on the top part of the view but it scrolls away with the | |
| 17 rest of the scrollable content. Upon scrolling slightly up at any point, the | |
| 18 header scrolls back into view. This saves screen space and allows users to | |
| 19 access important controls by easily moving them back to the view. | |
| 20 | |
| 21 __Important:__ The `paper-scroll-header-panel` will not display if its parent do
es not have a height. | |
| 22 | |
| 23 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att
rs.html), you can easily make the `paper-scroll-header-panel` fill the screen | |
| 24 | |
| 25 <body class="fullbleed layout vertical"> | |
| 26 <paper-scroll-header-panel class="flex"> | |
| 27 <paper-toolbar> | |
| 28 <div>Hello World!</div> | |
| 29 </paper-toolbar> | |
| 30 </paper-scroll-header-panel> | |
| 31 </body> | |
| 32 | |
| 33 or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-sc
roll-header-panel` a height of 100%: | |
| 34 | |
| 35 html, body { | |
| 36 height: 100%; | |
| 37 margin: 0; | |
| 38 } | |
| 39 paper-scroll-header-panel { | |
| 40 height: 100%; | |
| 41 } | |
| 42 | |
| 43 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any elem
ent | |
| 44 that represents a header by adding a `paper-header` class to it. | |
| 45 | |
| 46 <paper-scroll-header-panel> | |
| 47 <paper-toolbar>Header</paper-toolbar> | |
| 48 <div>Content goes here...</div> | |
| 49 </paper-scroll-header-panel> | |
| 50 | |
| 51 Styling scroll-header-panel: | |
| 52 | |
| 53 To change background for toolbar when it is at its full size: | |
| 54 | |
| 55 paper-scroll-header-panel { | |
| 56 --paper-scroll-header-panel-full-header: { | |
| 57 background-color: red; | |
| 58 }; | |
| 59 } | |
| 60 | |
| 61 To change the background for toolbar when it is condensed: | |
| 62 | |
| 63 paper-scroll-header-panel { | |
| 64 --paper-scroll-header-panel-condensed-header: { | |
| 65 background-color: #f4b400; | |
| 66 }; | |
| 67 } | |
| 68 | |
| 69 @group Paper Element | |
| 70 @element paper-scrollheader-panel | |
| 71 @demo demo/index.html | |
| 72 @hero hero.svg | |
| 73 --> | |
| 74 | |
| 75 <dom-module id="paper-scroll-header-panel"> | |
| 76 | |
| 77 <style> | |
| 78 :host { | |
| 79 display: block; | |
| 80 position: relative; | |
| 81 overflow: hidden; | |
| 82 } | |
| 83 | |
| 84 #mainContainer { | |
| 85 position: absolute; | |
| 86 top: 0; | |
| 87 right: 0; | |
| 88 bottom: 0; | |
| 89 left: 0; | |
| 90 box-sizing: border-box; | |
| 91 -moz-box-sizing: border-box; | |
| 92 -webkit-overflow-scrolling: touch; | |
| 93 overflow-x: hidden; | |
| 94 overflow-_y: auto; | |
| 95 -webkit-transform: translateZ(0); | |
| 96 transform: translateZ(0); | |
| 97 } | |
| 98 | |
| 99 #headerContainer { | |
| 100 position: absolute; | |
| 101 top: 0; | |
| 102 right: 0; | |
| 103 left: 0; | |
| 104 } | |
| 105 | |
| 106 .bg-container { | |
| 107 position: absolute; | |
| 108 top: 0; | |
| 109 left: 0; | |
| 110 width: 100%; | |
| 111 height: 100%; | |
| 112 overflow: hidden; | |
| 113 } | |
| 114 | |
| 115 #headerBg { | |
| 116 @apply(--paper-scroll-header-panel-full-header); | |
| 117 } | |
| 118 | |
| 119 #condensedHeaderBg { | |
| 120 @apply(--paper-scroll-header-panel-condensed-header); | |
| 121 } | |
| 122 | |
| 123 #headerBg, #condensedHeaderBg { | |
| 124 position: absolute; | |
| 125 top: 0; | |
| 126 left: 0; | |
| 127 width: 100%; | |
| 128 height: 100%; | |
| 129 background-repeat: no-repeat; | |
| 130 background-size: cover; | |
| 131 background-position: center center; | |
| 132 } | |
| 133 | |
| 134 #condensedHeaderBg { | |
| 135 opacity: 0; | |
| 136 } | |
| 137 </style> | |
| 138 <template> | |
| 139 <div id="mainContainer"> | |
| 140 <content id="mainContent" select=":not(paper-toolbar):not(.paper-header)">
</content> | |
| 141 </div> | |
| 142 <div id="headerContainer"> | |
| 143 <div class="bg-container"> | |
| 144 <div id="condensedHeaderBg"></div> | |
| 145 <div id="headerBg"></div> | |
| 146 </div> | |
| 147 <content id="headerContent" select="paper-toolbar, .paper-header"></conten
t> | |
| 148 </div> | |
| 149 </template> | |
| 150 </dom-module> | |
| 151 | |
| 152 <script> | |
| 153 (function() { | |
| 154 | |
| 155 'use strict'; | |
| 156 | |
| 157 Polymer({ | |
| 158 | |
| 159 /** | |
| 160 * Fired when the content has been scrolled. | |
| 161 * | |
| 162 * @event content-scroll | |
| 163 */ | |
| 164 | |
| 165 /** | |
| 166 * Fired when the header is transformed. | |
| 167 * | |
| 168 * @event paper-header-transform | |
| 169 */ | |
| 170 | |
| 171 is: 'paper-scroll-header-panel', | |
| 172 | |
| 173 behaviors: [ | |
| 174 Polymer.IronResizableBehavior | |
| 175 ], | |
| 176 | |
| 177 properties: { | |
| 178 | |
| 179 /** | |
| 180 * If true, the header's height will condense to `_condensedHeaderHeight` | |
| 181 * as the user scrolls down from the top of the content area. | |
| 182 */ | |
| 183 condenses: { | |
| 184 type: Boolean, | |
| 185 value: false, | |
| 186 observer: '_condensesChanged' | |
| 187 }, | |
| 188 | |
| 189 /** | |
| 190 * If true, no cross-fade transition from one background to another. | |
| 191 */ | |
| 192 noDissolve: { | |
| 193 type: Boolean, | |
| 194 value: false | |
| 195 }, | |
| 196 | |
| 197 /** | |
| 198 * If true, the header doesn't slide back in when scrolling back up. | |
| 199 */ | |
| 200 noReveal: { | |
| 201 type: Boolean, | |
| 202 value: false | |
| 203 }, | |
| 204 | |
| 205 /** | |
| 206 * If true, the header is fixed to the top and never moves away. | |
| 207 */ | |
| 208 fixed: { | |
| 209 type: Boolean, | |
| 210 value: false | |
| 211 }, | |
| 212 | |
| 213 /** | |
| 214 * If true, the condensed header is always shown and does not move away. | |
| 215 */ | |
| 216 keepCondensedHeader: { | |
| 217 type: Boolean, | |
| 218 value: false | |
| 219 }, | |
| 220 | |
| 221 /** | |
| 222 * The height of the header when it is at its full size. | |
| 223 * | |
| 224 * By default, the height will be measured when it is ready. If the heigh
t | |
| 225 * changes later the user needs to either set this value to reflect the | |
| 226 * new height or invoke `measureHeaderHeight()`. | |
| 227 */ | |
| 228 headerHeight: { | |
| 229 type: Number, | |
| 230 value: 0 | |
| 231 }, | |
| 232 | |
| 233 /** | |
| 234 * The height of the header when it is condensed. | |
| 235 * | |
| 236 * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless | |
| 237 * this is specified. | |
| 238 */ | |
| 239 condensedHeaderHeight: { | |
| 240 type: Number, | |
| 241 value: 0 | |
| 242 }, | |
| 243 | |
| 244 /** | |
| 245 * By default, the top part of the header stays when the header is being | |
| 246 * condensed. Set this to true if you want the top part of the header | |
| 247 * to be scrolled away. | |
| 248 */ | |
| 249 scrollAwayTopbar: { | |
| 250 type: Boolean, | |
| 251 value: false | |
| 252 }, | |
| 253 | |
| 254 _headerMargin: { | |
| 255 type: Number | |
| 256 }, | |
| 257 | |
| 258 _prevScrollTop: { | |
| 259 type: Number | |
| 260 }, | |
| 261 | |
| 262 _y: { | |
| 263 type: Number | |
| 264 } | |
| 265 | |
| 266 }, | |
| 267 | |
| 268 observers: [ | |
| 269 '_setup(_headerMargin, headerHeight, fixed)', | |
| 270 '_headerHeightChanged(headerHeight, condensedHeaderHeight)', | |
| 271 '_condensedHeaderHeightChanged(headerHeight, condensedHeaderHeight)' | |
| 272 ], | |
| 273 | |
| 274 listeners: { | |
| 275 'iron-resize': 'measureHeaderHeight' | |
| 276 }, | |
| 277 | |
| 278 ready: function() { | |
| 279 this.async(this.measureHeaderHeight, 5); | |
| 280 this._scrollHandler = this._scroll.bind(this); | |
| 281 this.scroller.addEventListener('scroll', this._scrollHandler); | |
| 282 }, | |
| 283 | |
| 284 detached: function() { | |
| 285 this.scroller.removeEventListener('scroll', this._scrollHandler); | |
| 286 }, | |
| 287 | |
| 288 /** | |
| 289 * Returns the header element. | |
| 290 * | |
| 291 * @property header | |
| 292 * @type Object | |
| 293 */ | |
| 294 get header() { | |
| 295 return Polymer.dom(this.$.headerContent).getDistributedNodes()[0]; | |
| 296 }, | |
| 297 | |
| 298 /** | |
| 299 * Returns the content element. | |
| 300 * | |
| 301 * @property content | |
| 302 * @type Object | |
| 303 */ | |
| 304 get content() { | |
| 305 return Polymer.dom(this.$.mainContent).getDistributedNodes()[0]; | |
| 306 }, | |
| 307 | |
| 308 /** | |
| 309 * Returns the scrollable element. | |
| 310 * | |
| 311 * @property scroller | |
| 312 * @type Object | |
| 313 */ | |
| 314 get scroller() { | |
| 315 return this.$.mainContainer; | |
| 316 }, | |
| 317 | |
| 318 /** | |
| 319 * Invoke this to tell `paper-scroll-header-panel` to re-measure the header'
s | |
| 320 * height. | |
| 321 * | |
| 322 * @method measureHeaderHeight | |
| 323 */ | |
| 324 measureHeaderHeight: function() { | |
| 325 var header = this.header; | |
| 326 if (header && header.offsetHeight) { | |
| 327 this.headerHeight = header.offsetHeight; | |
| 328 } | |
| 329 }, | |
| 330 | |
| 331 _headerHeightChanged: function() { | |
| 332 if (!this.condensedHeaderHeight) { | |
| 333 // assume condensedHeaderHeight is 1/3 of the headerHeight | |
| 334 this.condensedHeaderHeight = this.headerHeight * 1 / 3; | |
| 335 } | |
| 336 }, | |
| 337 | |
| 338 _condensedHeaderHeightChanged: function() { | |
| 339 if (this.headerHeight) { | |
| 340 this._headerMargin = this.headerHeight - this.condensedHeaderHeight; | |
| 341 } | |
| 342 }, | |
| 343 | |
| 344 _condensesChanged: function() { | |
| 345 if (this.condenses) { | |
| 346 this._scroll(); | |
| 347 } else { | |
| 348 // reset transform/opacity set on the header | |
| 349 this._condenseHeader(null); | |
| 350 } | |
| 351 }, | |
| 352 | |
| 353 _setup: function() { | |
| 354 var s = this.scroller.style; | |
| 355 s.paddingTop = this.fixed ? '' : this.headerHeight + 'px'; | |
| 356 | |
| 357 s.top = this.fixed ? this.headerHeight + 'px' : ''; | |
| 358 | |
| 359 if (this.fixed) { | |
| 360 this._transformHeader(null); | |
| 361 } else { | |
| 362 this._scroll(); | |
| 363 } | |
| 364 }, | |
| 365 | |
| 366 _transformHeader: function(y) { | |
| 367 var s = this.$.headerContainer.style; | |
| 368 this._translateY(s, -y); | |
| 369 | |
| 370 if (this.condenses) { | |
| 371 this._condenseHeader(y); | |
| 372 } | |
| 373 | |
| 374 this.fire('paper-header-transform', {y: y, height: this.headerHeight, | |
| 375 condensedHeight: this.condensedHeaderHeight}); | |
| 376 }, | |
| 377 | |
| 378 _condenseHeader: function(y) { | |
| 379 var reset = (y === null); | |
| 380 | |
| 381 // adjust top bar in paper-header so the top bar stays at the top | |
| 382 if (!this.scrollAwayTopbar && this.header.$ && this.header.$.topBar) { | |
| 383 this._translateY(this.header.$.topBar.style, | |
| 384 reset ? null : Math.min(y, this._headerMargin)); | |
| 385 } | |
| 386 // transition header bg | |
| 387 var hbg = this.$.headerBg.style; | |
| 388 if (!this.noDissolve) { | |
| 389 hbg.opacity = reset ? '' : (this._headerMargin - y) / this._headerMargin
; | |
| 390 } | |
| 391 // adjust header bg so it stays at the center | |
| 392 this._translateY(hbg, reset ? null : y / 2); | |
| 393 // transition condensed header bg | |
| 394 if (!this.noDissolve) { | |
| 395 var chbg = this.$.condensedHeaderBg.style; | |
| 396 chbg = this.$.condensedHeaderBg.style; | |
| 397 chbg.opacity = reset ? '' : y / this._headerMargin; | |
| 398 | |
| 399 // adjust condensed header bg so it stays at the center | |
| 400 this._translateY(chbg, reset ? null : y / 2); | |
| 401 } | |
| 402 }, | |
| 403 | |
| 404 _translateY: function(s, y) { | |
| 405 var t = (y === null) ? '' : 'translate3d(0, ' + y + 'px, 0)'; | |
| 406 setTransform(s, t); | |
| 407 }, | |
| 408 | |
| 409 /** @param {Event=} event */ | |
| 410 _scroll: function(event) { | |
| 411 if (!this.header) { | |
| 412 return; | |
| 413 } | |
| 414 | |
| 415 var sTop = this.scroller.scrollTop; | |
| 416 | |
| 417 this._y = this._y || 0; | |
| 418 this._prevScrollTop = this._prevScrollTop || 0; | |
| 419 | |
| 420 var y = Math.min(this.keepCondensedHeader ? | |
| 421 this._headerMargin : this.headerHeight, Math.max(0, | |
| 422 (this.noReveal ? sTop : this._y + sTop - this._prevScrollTop))); | |
| 423 | |
| 424 if (this.condenses && this._prevScrollTop >= sTop && sTop > this._headerMa
rgin) { | |
| 425 y = Math.max(y, this._headerMargin); | |
| 426 } | |
| 427 | |
| 428 if (!event || !this.fixed && y !== this._y) { | |
| 429 this._transformHeader(y); | |
| 430 } | |
| 431 | |
| 432 this._prevScrollTop = Math.max(sTop, 0); | |
| 433 this._y = y; | |
| 434 | |
| 435 if (event) { | |
| 436 this.fire('content-scroll', {target: this.scroller}, {cancelable: false}
); | |
| 437 } | |
| 438 } | |
| 439 | |
| 440 }); | |
| 441 | |
| 442 //determine proper transform mechanizm | |
| 443 if (document.documentElement.style.transform !== undefined) { | |
| 444 var setTransform = function(style, string) { | |
| 445 style.transform = string; | |
| 446 } | |
| 447 } else { | |
| 448 var setTransform = function(style, string) { | |
| 449 style.webkitTransform = string; | |
| 450 } | |
| 451 } | |
| 452 | |
| 453 })(); | |
| 454 | |
| 455 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1221923003:
Update bower.json for Polymer elements and add PRESUBMIT.py (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master