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

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

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 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 unified diff | Download patch
OLDNEW
(Empty)
1 <link href="../core-selector/core-selector.html" rel="import">
2
3 <link href="transitions/hero-transition.html" rel="import">
4 <link href="transitions/cross-fade.html" rel="import">
5
6 <!--
7
8 `core-animated-pages` selects one of its children "pages" to show and runs a tra nsition
9 when switching between them. The transitions are designed to be pluggable, and c an
10 accept any object that is an instance of a `core-transition-pages`. Transitions to run
11 are specified in the `transitions` attribute as a space-delimited string of `id` s of
12 transition elements. Several transitions are available with `core-animated-pages ` by
13 default, including `hero-transition`, `cross-fade`, and `tile-cascade`.
14
15 Example:
16
17 <style>
18 #hero1 {
19 position: absolute;
20 top: 0;
21 left: 0;
22 width: 300px;
23 height: 300px;
24 background-color: orange;
25 }
26 #hero2 {
27 position: absolute;
28 top: 200px;
29 left: 300px;
30 width: 300px;
31 height: 300px;
32 background-color: orange;
33 }
34 #bottom1, #bottom2 {
35 position: absolute;
36 bottom: 0;
37 top: 0;
38 left: 0;
39 height: 50px;
40 }
41 #bottom1 {
42 background-color: blue;
43 }
44 #bottom2 {
45 background-color: green;
46 }
47 </style>
48 // hero-transition and cross-fade are declared elsewhere
49 <core-animated-pages transitions="hero-transition cross-fade">
50 <section id="page1">
51 <div id="hero1" hero-id="hero" hero></div>
52 <div id="bottom1" cross-fade></div>
53 </section>
54 <section id="page2">
55 <div id="hero2" hero-id="hero" hero></div>
56 <div id="bottom2" cross-fade></div>
57 </section>
58 </core-animated-pages>
59
60 In the above example, two transitions (`hero-transition` and `cross-fade`) are r un when switching
61 between `page1` and `page2`. `hero-transition` transforms elements with the same `hero-id` such
62 that they appear to be shared across different pages. `cross-fade` fades out the elements marked
63 `cross-fade` in the outgoing page, and fades in those in the incoming page. See the individual
64 transition's documentation for specific details.
65
66 Finding elements to transition
67 ------------------------------
68
69 In general, a transition is applied to elements marked with a certain attribute. For example,
70 `hero-transition` applies the transition on elements with the `hero` and `hero-i d` attribute.
71 Among the transitions included with `core-animated-pages`, script-based transiti ons such as
72 `hero-transition` generally look for elements up to one level of shadowRoot from the
73 `core-animated-pages` element, and CSS-based transitions such as `cross-fade` lo ok for elements
74 within any shadowRoot within the `core-animated-pages` element. This means you c an use
75 custom elements as pages and mark elements in their shadowRoots as heroes, or ma rk
76 elements in deeper shadowRoots with other transitions.
77
78 Example:
79
80 <polymer-element name="x-el" noscript>
81 <template>
82 <style>
83 #hero {
84 position: absolute;
85 top: 0;
86 right: 0;
87 width: 50px;
88 height: 300px;
89 background-color: blue;
90 }
91 </style>
92 <div id="hero" hero-id="bar" hero></div>
93 </template>
94 </polymer-element>
95
96 <polymer-element name="x-page-1" noscript>
97 <template>
98 <style>
99 #hero1 {
100 position: absolute;
101 top: 0;
102 left: 0;
103 width: 300px;
104 height: 300px;
105 background-color: orange;
106 }
107 </style>
108 <div id="hero1" hero-id="foo" hero></div>
109 <div id="hero2" hero-id="bar" hero></div>
110 </template>
111 </polymer-element>
112
113 <polymer-element name="x-page-2" noscript>
114 <template>
115 <style>
116 #hero1 {
117 position: absolute;
118 top: 200px;
119 left: 300px;
120 width: 300px;
121 height: 300px;
122 background-color: orange;
123 }
124 #hero2 {
125 background-color: blue;
126 height: 150px;
127 width: 400px;
128 }
129 </style>
130 // The below element is one level of shadow from the core-animated-pages a nd will
131 // be transitioned.
132 <div id="hero1" hero-id="foo" hero></div>
133 // The below element contains a hero inside its shadowRoot making it two l evels away
134 // from the core-animated-pages, and will not be transitioned.
135 <x-el></x-el>
136 </template>
137 </polymer-element>
138
139 <core-animated-pages transitions="hero-transition">
140 <x-page-1></x-page-1>
141 <x-page-2></x-page-2>
142 </core-animated-pages>
143
144 Note that the container element of the page does not participate in the transiti on.
145
146 // This does not work
147 <core-animated-pages transitions="cross-fade">
148 <section cross-fade></section>
149 <section cross-fade></section>
150 </core-animated-pages>
151
152 // This works
153 <core-animated-pages transitions="cross-fade">
154 <section>
155 <div cross-fade></div>
156 </section>
157 <section>
158 <div cross-fade></div>
159 </section>
160 </core-animated-pages>
161
162 Dynamically setting up transitions
163 ----------------------------------
164
165 An easy way to dynamically set up transitions dynamically is to use property bin ding on
166 the transition attributes.
167
168 Example:
169
170 <core-animated-pages selected="{{selected}}">
171 <section id="page1">
172 <div hero-id="hero" hero></div>
173 </section>
174 <section id="page2">
175 <div id="foo" hero-id="hero" hero?="{{selected === 1 || selected === 0}} " cross-fade="{{selected === 2}}"></div>
176 </section>
177 <section id="page3">
178 </section>
179 </core-animated-pages>
180
181 In the above example, the "foo" element only behaves as a hero element if transi tioning between
182 `#page1` and `#page2`. It gets cross-faded when transition to or from `#page3`.
183
184 Nesting pages
185 -------------
186
187 It is possible to nest core-animated-pages elements for organization. Excessive nesting is
188 not encouraged, however, since it makes setting up the transition more complex.
189
190 To nest core-animated-pages, the page containing the nested core-animated-pages element should
191 have a `selectedItem` property bound to the `selectedItem` property of the neste d element. This
192 will allow the outer core-animated-pages to know which nested page it is actuall y transitioning
193 to.
194
195 Example:
196
197 <polymer-element name="nested-page" attributes="selectedItem">
198 <template>
199 <core-animated-pages selectedItem="{{selectedItem}}">
200 ...
201 </core-animated-pages>
202 </template>
203 </polymer-element>
204
205 <core-animated-pages>
206 <section id="page1"></section>
207 <nested-page id="page2"></section>
208 </core-animated-pages>
209
210 @element core-animated-pages
211 @extends core-selector
212 @status beta
213 @homepage github.io
214 -->
215 <!--
216 Fired before a page transition occurs. Both pages involved in the transition are visible when
217 this event fires. This is useful if there is something the client needs to do wh en a page becomes
218 visible.
219
220 @event core-animated-pages-transition-prepare
221 -->
222 <!--
223 Fired when a page transition completes.
224
225 @event core-animated-pages-transition-end
226 -->
227 <polymer-element name="core-animated-pages" extends="core-selector" notap="" att ributes="transitions" assetpath="">
228
229 <template>
230
231 <link href="core-animated-pages.css" rel="stylesheet">
232
233 <shadow></shadow>
234
235 </template>
236
237
238
239 </polymer-element>
240 <script src="core-animated-pages-extracted.js"></script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698