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

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/demos/shadow.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
5 <script src="../../platform/platform.js"></script>
6
7 <link href="../../core-icons/core-icons.html" rel="import">
8 <link href="../../core-icon-button/core-icon-button.html" rel="import">
9 <link href="../../core-toolbar/core-toolbar.html" rel="import">
10 <link href="../core-animated-pages.html" rel="import">
11
12 <style>
13 body {
14 font-family: sans-serif;
15 }
16
17 .toolbar {
18 background-color: steelblue;
19 }
20
21 </style>
22
23 </head>
24 <body unresolved fullbleed vertical layout>
25
26 <polymer-element name="grid-toc" attributes="items selected">
27 <template>
28 <style>
29 #container {
30 overflow: auto;
31 }
32
33 .card {
34 position: relative;
35 height: 150px;
36 width: 150px;
37 font-size: 50px;
38 margin: 8px;
39 background-color: tomato;
40 border-radius: 4px;
41 cursor: default;
42 }
43 </style>
44 <div id="container" on-tap="{{selectView}}" flex horizontal wrap around-ju stified layout hero-p>
45 <template repeat="{{item in items}}">
46 <div class="card" vertical center center-justified layout hero-id="ite m-{{item}}" hero?="{{selected === item + 1 || lastSelected === item + 1}}"><span cross-fade>{{item}}</span></div>
47 </template>
48 </div>
49 </template>
50 <script>
51 Polymer('grid-toc', {
52 selectedChanged: function(old) {
53 this.lastSelected = old;
54 },
55 selectView: function(e) {
56 var item = e.target.templateInstance.model.item;
57 if (item !== undefined) {
58 this.fire('grid-toc-select', {item: item});
59 }
60 }
61 });
62 </script>
63 </polymer-element>
64
65 <polymer-element name="grid-item" attributes="item isHero">
66 <template>
67 <style>
68 .view {
69 font-size: 250px;
70 background-color: tomato;
71 }
72 </style>
73 <div class="view" flex vertical center center-justified layout hero-id="it em-{{item}}" hero?="{{isHero}}">
74 <span cross-fade>{{item}}</span>
75 </div>
76 </template>
77 <script>
78 Polymer('grid-item', {
79 isSelected: false
80 })
81 </script>
82 </polymer-element>
83
84
85 <template is="auto-binding">
86 <core-toolbar class="toolbar">
87 <core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button>
88 <div flex>Stuff</div>
89 <core-icon-button icon="more-vert"></core-icon-button>
90 </core-toolbar>
91 <core-animated-pages id="pages" flex selected="0" on-core-animated-pages-tra nsition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
92
93 <grid-toc vertical id="toc" layout selected="{{$.pages.selected}}" items=" {{items}}" hero-p on-grid-toc-select="{{selectView}}"></grid-toc>
94
95 <template repeat="{{item in items}}">
96 <grid-item vertical layout item="{{item}}" hero-p isHero="{{$.pages.sele cted === item + 1 || $.pages.selected === 0}}"></grid-item>
97 </template>
98
99 </core-animated-pages>
100 </template>
101
102 <script>
103
104 addEventListener('template-bound', function(e) {
105 var scope = e.target;
106 var items = [], count=50;
107 for (var i=0; i < count; i++) {
108 items.push(i);
109 }
110
111 scope.items = items;
112
113 scope.selectView = function(e, detail) {
114 var i = detail.item;
115 this.$.pages.selected = i+1;
116 }
117
118 scope.back = function() {
119 this.lastSelected = this.$.pages.selected;
120 this.$.pages.selected = 0;
121 }
122
123 scope.transitionend = function() {
124 if (this.lastSelected) {
125 this.lastSelected = null;
126 }
127 }
128 })
129
130 </script>
131
132 </body>
133 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698