Index: third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html |
diff --git a/third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html b/third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..eb24793fc43b9536172d7c5b7ffe3728eede8054 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html |
@@ -0,0 +1,240 @@ |
+<link href="../core-selector/core-selector.html" rel="import"> |
+ |
+<link href="transitions/hero-transition.html" rel="import"> |
+<link href="transitions/cross-fade.html" rel="import"> |
+ |
+<!-- |
+ |
+`core-animated-pages` selects one of its children "pages" to show and runs a transition |
+when switching between them. The transitions are designed to be pluggable, and can |
+accept any object that is an instance of a `core-transition-pages`. Transitions to run |
+are specified in the `transitions` attribute as a space-delimited string of `id`s of |
+transition elements. Several transitions are available with `core-animated-pages` by |
+default, including `hero-transition`, `cross-fade`, and `tile-cascade`. |
+ |
+Example: |
+ |
+ <style> |
+ #hero1 { |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ width: 300px; |
+ height: 300px; |
+ background-color: orange; |
+ } |
+ #hero2 { |
+ position: absolute; |
+ top: 200px; |
+ left: 300px; |
+ width: 300px; |
+ height: 300px; |
+ background-color: orange; |
+ } |
+ #bottom1, #bottom2 { |
+ position: absolute; |
+ bottom: 0; |
+ top: 0; |
+ left: 0; |
+ height: 50px; |
+ } |
+ #bottom1 { |
+ background-color: blue; |
+ } |
+ #bottom2 { |
+ background-color: green; |
+ } |
+ </style> |
+ // hero-transition and cross-fade are declared elsewhere |
+ <core-animated-pages transitions="hero-transition cross-fade"> |
+ <section id="page1"> |
+ <div id="hero1" hero-id="hero" hero></div> |
+ <div id="bottom1" cross-fade></div> |
+ </section> |
+ <section id="page2"> |
+ <div id="hero2" hero-id="hero" hero></div> |
+ <div id="bottom2" cross-fade></div> |
+ </section> |
+ </core-animated-pages> |
+ |
+In the above example, two transitions (`hero-transition` and `cross-fade`) are run when switching |
+between `page1` and `page2`. `hero-transition` transforms elements with the same `hero-id` such |
+that they appear to be shared across different pages. `cross-fade` fades out the elements marked |
+`cross-fade` in the outgoing page, and fades in those in the incoming page. See the individual |
+transition's documentation for specific details. |
+ |
+Finding elements to transition |
+------------------------------ |
+ |
+In general, a transition is applied to elements marked with a certain attribute. For example, |
+`hero-transition` applies the transition on elements with the `hero` and `hero-id` attribute. |
+Among the transitions included with `core-animated-pages`, script-based transitions such as |
+`hero-transition` generally look for elements up to one level of shadowRoot from the |
+`core-animated-pages` element, and CSS-based transitions such as `cross-fade` look for elements |
+within any shadowRoot within the `core-animated-pages` element. This means you can use |
+custom elements as pages and mark elements in their shadowRoots as heroes, or mark |
+elements in deeper shadowRoots with other transitions. |
+ |
+Example: |
+ |
+ <polymer-element name="x-el" noscript> |
+ <template> |
+ <style> |
+ #hero { |
+ position: absolute; |
+ top: 0; |
+ right: 0; |
+ width: 50px; |
+ height: 300px; |
+ background-color: blue; |
+ } |
+ </style> |
+ <div id="hero" hero-id="bar" hero></div> |
+ </template> |
+ </polymer-element> |
+ |
+ <polymer-element name="x-page-1" noscript> |
+ <template> |
+ <style> |
+ #hero1 { |
+ position: absolute; |
+ top: 0; |
+ left: 0; |
+ width: 300px; |
+ height: 300px; |
+ background-color: orange; |
+ } |
+ </style> |
+ <div id="hero1" hero-id="foo" hero></div> |
+ <div id="hero2" hero-id="bar" hero></div> |
+ </template> |
+ </polymer-element> |
+ |
+ <polymer-element name="x-page-2" noscript> |
+ <template> |
+ <style> |
+ #hero1 { |
+ position: absolute; |
+ top: 200px; |
+ left: 300px; |
+ width: 300px; |
+ height: 300px; |
+ background-color: orange; |
+ } |
+ #hero2 { |
+ background-color: blue; |
+ height: 150px; |
+ width: 400px; |
+ } |
+ </style> |
+ // The below element is one level of shadow from the core-animated-pages and will |
+ // be transitioned. |
+ <div id="hero1" hero-id="foo" hero></div> |
+ // The below element contains a hero inside its shadowRoot making it two levels away |
+ // from the core-animated-pages, and will not be transitioned. |
+ <x-el></x-el> |
+ </template> |
+ </polymer-element> |
+ |
+ <core-animated-pages transitions="hero-transition"> |
+ <x-page-1></x-page-1> |
+ <x-page-2></x-page-2> |
+ </core-animated-pages> |
+ |
+Note that the container element of the page does not participate in the transition. |
+ |
+ // This does not work |
+ <core-animated-pages transitions="cross-fade"> |
+ <section cross-fade></section> |
+ <section cross-fade></section> |
+ </core-animated-pages> |
+ |
+ // This works |
+ <core-animated-pages transitions="cross-fade"> |
+ <section> |
+ <div cross-fade></div> |
+ </section> |
+ <section> |
+ <div cross-fade></div> |
+ </section> |
+ </core-animated-pages> |
+ |
+Dynamically setting up transitions |
+---------------------------------- |
+ |
+An easy way to dynamically set up transitions dynamically is to use property binding on |
+the transition attributes. |
+ |
+Example: |
+ |
+ <core-animated-pages selected="{{selected}}"> |
+ <section id="page1"> |
+ <div hero-id="hero" hero></div> |
+ </section> |
+ <section id="page2"> |
+ <div id="foo" hero-id="hero" hero?="{{selected === 1 || selected === 0}}" cross-fade="{{selected === 2}}"></div> |
+ </section> |
+ <section id="page3"> |
+ </section> |
+ </core-animated-pages> |
+ |
+In the above example, the "foo" element only behaves as a hero element if transitioning between |
+`#page1` and `#page2`. It gets cross-faded when transition to or from `#page3`. |
+ |
+Nesting pages |
+------------- |
+ |
+It is possible to nest core-animated-pages elements for organization. Excessive nesting is |
+not encouraged, however, since it makes setting up the transition more complex. |
+ |
+To nest core-animated-pages, the page containing the nested core-animated-pages element should |
+have a `selectedItem` property bound to the `selectedItem` property of the nested element. This |
+will allow the outer core-animated-pages to know which nested page it is actually transitioning |
+to. |
+ |
+Example: |
+ |
+ <polymer-element name="nested-page" attributes="selectedItem"> |
+ <template> |
+ <core-animated-pages selectedItem="{{selectedItem}}"> |
+ ... |
+ </core-animated-pages> |
+ </template> |
+ </polymer-element> |
+ |
+ <core-animated-pages> |
+ <section id="page1"></section> |
+ <nested-page id="page2"></section> |
+ </core-animated-pages> |
+ |
+@element core-animated-pages |
+@extends core-selector |
+@status beta |
+@homepage github.io |
+--> |
+<!-- |
+Fired before a page transition occurs. Both pages involved in the transition are visible when |
+this event fires. This is useful if there is something the client needs to do when a page becomes |
+visible. |
+ |
+@event core-animated-pages-transition-prepare |
+--> |
+<!-- |
+Fired when a page transition completes. |
+ |
+@event core-animated-pages-transition-end |
+--> |
+<polymer-element name="core-animated-pages" extends="core-selector" notap="" attributes="transitions" assetpath=""> |
+ |
+<template> |
+ |
+ <link href="core-animated-pages.css" rel="stylesheet"> |
+ |
+ <shadow></shadow> |
+ |
+</template> |
+ |
+ |
+ |
+</polymer-element> |
+<script src="core-animated-pages-extracted.js"></script> |