third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html - Issue 1984963002: Roll Polymer elements

Unified Diff: third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

Issue 1984963002: Roll Polymer elements (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 4 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/v1_0/components-chromium/app-layout/app-header-layout/compiled_resources2.gyp ('k') | third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

diff --git a/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html b/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

new file mode 100644

index 0000000000000000000000000000000000000000..c69ff88205793de8616bfa0780c499eb5dca511f

--- /dev/null

+++ b/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html

@@ -0,0 +1,336 @@

+<!--

+@license

+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

+--><html><head><link rel="import" href="../../polymer/polymer.html">

+<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">

+<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">

+<link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html">

+<!--

+app-header is container element for app-toolbars at the top of the screen that can have scroll

+effects. By default, an app-header moves away from the viewport when scrolling down and

+if using `reveals`, the header slides back when scrolling back up. For example:

+```html

+<app-header reveals>

+ <app-toolbar>

+ <div title>App name</div>

+ </app-toolbar>

+</app-header>

+```

+app-header can also condense when scrolling down. To achieve this behavior, the header

+must have a larger height than the `primary` element in the light DOM. For example:

+```html

+<app-header style="height: 96px;" condenses fixed>

+ <app-toolbar style="height: 64px;">

+ <div title>App name</div>

+ </app-toolbar>

+</app-header>

+```

+In this case the header is initially `96px` tall, and it shrinks to `64px` when scrolling down.

+That is what is meant by "condensing".

+### Primary element

+As the header condenses, the immediate children of app-header are stacked up.

+In this case, the primary element is the immediate child that would always stayed above

+the others as the header condenses. By default, the `primary` element is the first app-toolbar

+that is an immediate children of app-header.

+```html

+<app-header condenses>

+ <app-toolbar> Primary element </app-toolbar>

+</app-header>

+```

+```html

+<app-header condenses>

+ <app-toolbar></app-toolbar>

+ <app-toolbar primary> Primary element </app-toolbar>

+</app-header>

+```

+The primary element must be a direct child of app-header.

+### Scroll target

+The app-header's `scrollTarget` property allows to customize the scrollable element to which

+the header responds when the user scrolls. By default, app-header uses the document as

+the scroll target, but you can customize this property by setting the id of the element, e.g.

+```html

+<div id="scrollingRegion" style="overflow-y: auto;">

+ <app-header scroll-target="scrollingRegion">

+ </app-header>

+</div>

+```

+In this case, the `scrollTarget` property points to the outer div element. Alternatively,

+you can set this property programmatically:

+```js

+appHeader.scrollTarget = document.querySelector("#scrollingRegion");

+```

+## Backgrounds

+app-header has two background layers that can be used for styling when the header is condensed

+or when the scrollable element is scrolled to the top.

+## Scroll effects

+Scroll effects are _optional_ visual effects applied in app-header based on scroll position. For example,

+The [Material Design scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)

+recommends effects that can be installed via the `effects` property. e.g.

+```html

+<app-header effects="waterfall">

+ <app-toolbar>App name</app-toolbar>

+</app-header>

+```

+#### Importing the effects

+To use the scroll effects, you must explicitly import them in addition to `app-header`:

+```html

+<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">

+```

+#### List of effects

+* **blend-background**

+Fades in/out two background elements by applying CSS opacity based on scroll position.

+You can use this effect to smoothly change the background color or image of the header.

+For example, using the mixin `--app-header-background-rear-layer` lets you assign a different

+background when the header is condensed:

+```css

+app-header {

+ background-color: red;

+ --app-header-background-rear-layer: {

+ /* The header is blue when condensed */

+ background-color: blue;

+ };

+```

+* **fade-background**

+Upon scrolling past a threshold, this effect will trigger an opacity transition to

+fade in/out the backgrounds. Compared to the `blend-background` effect,

+this effect doesn't interpolate the opacity based on scroll position.

+* **parallax-background**

+A simple parallax effect that vertically translates the backgrounds based on a fraction

+of the scroll position. For example:

+```css

+app-header {

+ --app-header-background-front-layer: {

+ background-image: url(...);

+ };

+```

+```html

+<app-header style="height: 300px;" effects="parallax-background">

+ <app-toolbar>App name</app-toolbar>

+</app-header>

+```

+The fraction determines how far the background moves relative to the scroll position.

+This value can be assigned via the `scalar` config value and it is typically a value

+between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.

+* **resize-title**

+Progressively interpolates the size of the title from the element with the `title` attribute

+to the element with the `condensed-title` attribute as the header condenses. For example:

+```html

+<app-header condenses reveals effects="resize-title">

+ <app-toolbar>

+ <h4 condensed-title>App name</h4>

+ </app-toolbar>

+ <app-toolbar>

+ <h1 title>App name</h1>

+ </app-toolbar>

+</app-header>

+```

+* **resize-snapped-title**

+Upon scrolling past a threshold, this effect fades in/out the titles using opacity transitions.

+Similarly to `resize-title`, the `title` and `condensed-title` elements must be placed in the

+light DOM.

+* **waterfall**

+Toggles the shadow property in app-header to create a sense of depth (as recommended in the

+MD spec) between the header and the underneath content. You can change the shadow by

+customizing the `--app-header-shadow` mixin. For example:

+```css

+app-header {

+ --app-header-shadow: {

+ box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);

+ };

+```

+```html

+<app-header condenses reveals effects="waterfall">

+ <app-toolbar>

+ <h1 title>App name</h1>

+ </app-toolbar>

+</app-header>

+```

+* **material**

+Installs the waterfall, resize-title, blend-background and parallax-background effects.

+### Content attributes

+Attribute | Description | Default

+----------|---------------------|----------------------------------------

+`primary` | Element that remains at the top when the header condenses. | The first app-toolbar in the light DOM.

+## Styling

+Mixin | Description | Default

+------|-------------|----------

+`--app-header-background-front-layer` | Applies to the front layer of the background. | {}

+`--app-header-background-rear-layer` | Applies to the rear layer of the background. | {}

+`--app-header-shadow` | Applies to the shadow. | {}

+@group App Elements

+@element app-header

+@demo app-header/demo/blend-background-1.html Blend Background Image

+@demo app-header/demo/blend-background-2.html Blend 2 Background Images

+@demo app-header/demo/blend-background-3.html Blend Background Colors

+@demo app-header/demo/contacts.html Contacts Demo

+@demo app-header/demo/give.html Resize Snapped Title Demo

+@demo app-header/demo/music.html Reveals Demo

+@demo app-header/demo/no-effects.html Condenses and Reveals Demo

+@demo app-header/demo/notes.html Fixed with Dynamic Shadow Demo

+-->

+</head><body><dom-module id="app-header">

+ <template>

+ <style>

+ :host {

+ position: relative;

+ display: block;

+ transition-timing-function: linear;

+ transition-property: -webkit-transform;

+ transition-property: transform;

+ }

+ :host::after {

+ position: absolute;

+ right: 0px;

+ bottom: -5px;

+ left: 0px;

+ width: 100%;

+ height: 5px;

+ content: "";

+ transition: opacity 0.4s;

+ pointer-events: none;

+ opacity: 0;

+ box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);

+ will-change: opacity;

+ @apply(--app-header-shadow);

+ }

+ :host([shadow])::after {

+ opacity: 1;

+ }

+ #contentContainer > ::content [condensed-title] {

+ -webkit-transform-origin: left top;

+ transform-origin: left top;

+ white-space: nowrap;

+ opacity: 0;

+ }

+ #contentContainer > ::content [title] {

+ -webkit-transform-origin: left top;

+ transform-origin: left top;

+ white-space: nowrap;

+ }

+ #background {

+ @apply(--layout-fit);

+ overflow: hidden;

+ }

+ #backgroundFrontLayer,

+ #backgroundRearLayer {

+ @apply(--layout-fit);

+ height: 100%;

+ pointer-events: none;

+ background-size: cover;

+ }

+ #backgroundFrontLayer {

+ @apply(--app-header-background-front-layer);

+ }

+ #backgroundRearLayer {

+ opacity: 0;

+ @apply(--app-header-background-rear-layer);

+ }

+ #contentContainer {

+ position: relative;

+ width: 100%;

+ height: 100%;

+ }

+ :host([disabled]),

+ :host([disabled])::after,

+ :host([disabled]) #backgroundFrontLayer,

+ :host([disabled]) #backgroundRearLayer,

+ :host([disabled]) ::content > app-toolbar:first-of-type,

+ :host([disabled]) ::content > [primary],

+ /* Silent scrolling should not run CSS transitions */

+ :host-context(.app-layout-silent-scroll),

+ :host-context(.app-layout-silent-scroll)::after,

+ :host-context(.app-layout-silent-scroll) #backgroundFrontLayer,

+ :host-context(.app-layout-silent-scroll) #backgroundRearLayer,

+ :host-context(.app-layout-silent-scroll) ::content > app-toolbar:first-of-type,

+ :host-context(.app-layout-silent-scroll) ::content > [primary] {

+ transition: none !important;

+ }

+ </style>

+ <div id="background">

+ <div id="backgroundRearLayer"></div>

+ <div id="backgroundFrontLayer"></div>

+ </div>

+ <div id="contentContainer">

+ <content id="content"></content>

+ </div>

+ </template>

+ </dom-module>

+<script src="app-header-extracted.js"></script></body></html>