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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/v0_8/components/paper-scroll-header-panel/paper-scroll-header-panel.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 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
« no previous file with comments | « third_party/polymer/v0_8/components/paper-scroll-header-panel/index.html ('k') | third_party/polymer/v0_8/components/paper-slider/.bower.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/v0_8/components/paper-scroll-header-panel/paper-scroll-header-panel.html
diff --git a/third_party/polymer/v0_8/components/paper-scroll-header-panel/paper-scroll-header-panel.html b/third_party/polymer/v0_8/components/paper-scroll-header-panel/paper-scroll-header-panel.html
new file mode 100644
index 0000000000000000000000000000000000000000..3cb82f1b0620815405612e0d43ef7b5571fca930
--- /dev/null
+++ b/third_party/polymer/v0_8/components/paper-scroll-header-panel/paper-scroll-header-panel.html
@@ -0,0 +1,454 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+
+<!--
+`paper-scroll-header-panel` contains a header section and a content section. The
+header is initially on the top part of the view but it scrolls away with the
+rest of the scrollable content. Upon scrolling slightly up at any point, the
+header scrolls back into view. This saves screen space and allows users to
+access important controls by easily moving them back to the view.
+
+__Important:__ The `paper-scroll-header-panel` will not display if its parent does not have a height.
+
+Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `paper-scroll-header-panel` fill the screen
+
+ <body class="fullbleed layout vertical">
+ <paper-scroll-header-panel class="flex">
+ <paper-toolbar>
+ <div>Hello World!</div>
+ </paper-toolbar>
+ </paper-scroll-header-panel>
+ </body>
+
+or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
+
+ html, body {
+ height: 100%;
+ margin: 0;
+ }
+ paper-scroll-header-panel {
+ height: 100%;
+ }
+
+`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
+that represents a header by adding a `core-header` class to it.
+
+ <paper-scroll-header-panel>
+ <paper-toolbar>Header</paper-toolbar>
+ <div>Content goes here...</div>
+ </paper-scroll-header-panel>
+
+Styling scroll-header-panel:
+
+ To change background for toolbar when it is at its full size:
+
+ paper-scroll-header-panel {
+ --paper-scroll-header-panel-full-header: {
+ background-color: red;
+ };
+ }
+
+ To change the background for toolbar when it is condensed:
+
+ paper-scroll-header-panel {
+ --paper-scroll-header-panel-condensed-header: {
+ background-color: #f4b400;
+ };
+ }
+
+@group Paper Element
+@element paper-scrollheader-panel
+@demo demo/index.html
+@hero hero.svg
+-->
+
+<dom-module id="paper-scroll-header-panel">
+
+ <style>
+ :host {
+ display: block;
+ position: relative;
+ overflow: hidden;
+ }
+
+ #mainContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-overflow-scrolling: touch;
+ overflow-x: hidden;
+ overflow-_y: auto;
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+
+ #headerContainer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ }
+
+ .bg-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+
+ #headerBg {
+ @apply(--paper-scroll-header-panel-full-header);
+ }
+
+ #condensedHeaderBg {
+ @apply(--paper-scroll-header-panel-condensed-header);
+ }
+
+ #headerBg, #condensedHeaderBg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+ }
+
+ #condensedHeaderBg {
+ opacity: 0;
+ }
+ </style>
+ <template>
+ <div id="mainContainer">
+ <content id="mainContent" select=":not(paper-toolbar):not(.paper-header)"></content>
+ </div>
+ <div id="headerContainer">
+ <div class="bg-container">
+ <div id="condensedHeaderBg"></div>
+ <div id="headerBg"></div>
+ </div>
+ <content id="headerContent" select="paper-toolbar, .paper-header"></content>
+ </div>
+ </template>
+</dom-module>
+
+<script>
+(function() {
+
+ 'use strict';
+
+ Polymer({
+
+ /**
+ * Fired when the content has been scrolled.
+ *
+ * @event content-scroll
+ */
+
+ /**
+ * Fired when the header is transformed.
+ *
+ * @event paper-header-transform
+ */
+
+ is: 'paper-scroll-header-panel',
+
+ behaviors: [
+ Polymer.IronResizableBehavior
+ ],
+
+ properties: {
+
+ /**
+ * If true, the header's height will condense to `_condensedHeaderHeight`
+ * as the user scrolls down from the top of the content area.
+ */
+ condenses: {
+ type: Boolean,
+ value: false,
+ observer: '_condensesChanged'
+ },
+
+ /**
+ * If true, no cross-fade transition from one background to another.
+ */
+ noDissolve: {
+ type: Boolean,
+ value: false
+ },
+
+ /**
+ * If true, the header doesn't slide back in when scrolling back up.
+ */
+ noReveal: {
+ type: Boolean,
+ value: false
+ },
+
+ /**
+ * If true, the header is fixed to the top and never moves away.
+ */
+ fixed: {
+ type: Boolean,
+ value: false
+ },
+
+ /**
+ * If true, the condensed header is always shown and does not move away.
+ */
+ keepCondensedHeader: {
+ type: Boolean,
+ value: 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()`.
+ */
+ headerHeight: {
+ type: Number,
+ value: 0
+ },
+
+ /**
+ * The height of the header when it is condensed.
+ *
+ * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless
+ * this is specified.
+ */
+ condensedHeaderHeight: {
+ type: Number,
+ value: 0
+ },
+
+ /**
+ * By default, the top part of the header stays when the header is being
+ * condensed. Set this to true if you want the top part of the header
+ * to be scrolled away.
+ */
+ scrollAwayTopbar: {
+ type: Boolean,
+ value: false
+ },
+
+ _headerMargin: {
+ type: Number
+ },
+
+ _prevScrollTop: {
+ type: Number
+ },
+
+ _y: {
+ type: Number
+ }
+
+ },
+
+ observers: [
+ '_setup(_headerMargin, headerHeight, fixed)',
+ '_headerHeightChanged(headerHeight, condensedHeaderHeight)',
+ '_condensedHeaderHeightChanged(headerHeight, condensedHeaderHeight)'
+ ],
+
+ listeners: {
+ 'iron-resize': 'measureHeaderHeight'
+ },
+
+ ready: function() {
+ this.async(this.measureHeaderHeight, 5);
+ this._scrollHandler = this._scroll.bind(this);
+ this.scroller.addEventListener('scroll', this._scrollHandler);
+ },
+
+ detached: function() {
+ this.scroller.removeEventListener('scroll', this._scrollHandler);
+ },
+
+ /**
+ * Returns the header element.
+ *
+ * @property header
+ * @type Object
+ */
+ get header() {
+ return Polymer.dom(this.$.headerContent).getDistributedNodes()[0];
+ },
+
+ /**
+ * Returns the content element.
+ *
+ * @property content
+ * @type Object
+ */
+ get content() {
+ return Polymer.dom(this.$.mainContent).getDistributedNodes()[0];
+ },
+
+ /**
+ * Returns the scrollable element.
+ *
+ * @property scroller
+ * @type Object
+ */
+ get scroller() {
+ return this.$.mainContainer;
+ },
+
+ /**
+ * Invoke this to tell `paper-scroll-header-panel` to re-measure the header's
+ * height.
+ *
+ * @method measureHeaderHeight
+ */
+ measureHeaderHeight: function() {
+ var header = this.header;
+ if (header && header.offsetHeight) {
+ this.headerHeight = header.offsetHeight;
+ }
+ },
+
+ _headerHeightChanged: function() {
+ if (!this.condensedHeaderHeight) {
+ // assume condensedHeaderHeight is 1/3 of the headerHeight
+ this.condensedHeaderHeight = this.headerHeight * 1 / 3;
+ }
+ },
+
+ _condensedHeaderHeightChanged: function() {
+ 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('paper-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.scrollAwayTopbar && 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
+ if (!this.noDissolve) {
+ var chbg = this.$.condensedHeaderBg.style;
+ 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) {
+ var t = (y === null) ? '' : 'translate3d(0, ' + y + 'px, 0)';
+ setTransform(s, t);
+ },
+
+ _scroll: function(event) {
+ if (!this.header) {
+ return;
+ }
+
+ var sTop = this.scroller.scrollTop;
+
+ this._y = this._y || 0;
+ this._prevScrollTop = this._prevScrollTop || 0;
+
+ 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) {
+ this._transformHeader(y);
+ }
+
+ this._prevScrollTop = Math.max(sTop, 0);
+ this._y = y;
+
+ if (event) {
+ this.fire('content-scroll', {target: this.scroller}, this, false);
+ }
+ }
+
+ });
+
+ //determine proper transform mechanizm
+ if (document.documentElement.style.transform !== undefined) {
+ var setTransform = function(style, string) {
+ style.transform = string;
+ }
+ } else {
+ var setTransform = function(style, string) {
+ style.webkitTransform = string;
+ }
+ }
+
+})();
+
+</script>
« no previous file with comments | « third_party/polymer/v0_8/components/paper-scroll-header-panel/index.html ('k') | third_party/polymer/v0_8/components/paper-slider/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698