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

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/demos/nested.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 <!doctype html>
2 <html>
3 <head>
4 <title>core-animated-pages</title>
5 <script src="../../platform/platform.js"></script>
6 <link href="nested-animated-pages.html" rel="import">
7
8 <style>
9 body {
10 font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
11 margin: 0;
12 background: #f1f1f1;
13 }
14
15 nested-demo {
16 display: block;
17 position: absolute;
18 top: 0;
19 left: 0;
20 bottom: 0;
21 right: 0;
22 }
23 </style>
24 </head>
25 <body>
26
27 <polymer-element name="nested-demo">
28 <template>
29
30 <style>
31
32 core-animated-pages {
33 display: block;
34 position: absolute;
35 top: 0;
36 left: 0;
37 bottom: 0;
38 right: 0;
39 }
40
41 section {
42 text-align: center;
43 padding-top: 250px;
44 }
45
46 .square {
47 display: inline-block;
48 margin: 8px;
49 padding: 8px;
50 width: 200px;
51 height: 200px;
52 background-color: orange;
53 color: #fff;
54 }
55 </style>
56
57 <core-animated-pages selected="{{page}}" transitions="hero-transition cross- fade">
58
59 <section on-tap="{{transition}}" layout horizontal center-justified>
60
61 <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}} " cross-fade?="{{subpage !== 0}}">thing 1</div>
62 <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}} " cross-fade?="{{subpage !== 1}}">thing 2</div>
63
64 </section>
65
66 <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nest ed-animated-pages>
67
68 </core-animated-pages>
69 </template>
70 <script>
71
72 Polymer('nested-demo', {
73
74 page: 0,
75 subpage: 0,
76
77 transition: function(e) {
78
79 var el = e.target;
80 if (el.id === "thing1") {
81 this.subpage = 0;
82 } else {
83 this.subpage = 1;
84 }
85
86 setTimeout(function() {
87 this.page = 1;
88 }.bind(this), 200);
89 },
90
91 back: function() {
92 this.page = 0;
93 }
94
95 });
96
97 </script>
98 </polymer-element>
99
100 <nested-demo></nested-demo>
101
102 </body>
103 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698