third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html - Issue 1215543002: Remove Polymer 0.5.

Unified Diff: third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test 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 side-by-side diff with in-line comments

« no previous file with comments | « third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.css ('k') | third_party/polymer/components-chromium/core-animated-pages/core-animated-pages-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

deleted file mode 100644

index 990b3b66a4e431fde3eca4e7b0e6a54f7eaabc11..0000000000000000000000000000000000000000

--- a/third_party/polymer/components-chromium/core-animated-pages/core-animated-pages.html

+++ /dev/null

@@ -1,249 +0,0 @@

-<!--

- @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 href="../core-selector/core-selector.html" rel="import">

-<link href="../core-resizable/core-resizable.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>

- </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 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"></nested-page>

- </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

--->

-</head><body><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 charset="utf-8" src="core-animated-pages-extracted.js"></script></body></html>