| OLD | NEW |
|---|
| (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 #container { |
| 22 overflow: auto; |
| 23 } |
| 24 |
| 25 .card { |
| 26 position: relative; |
| 27 height: 150px; |
| 28 width: 150px; |
| 29 font-size: 50px; |
| 30 margin: 8px; |
| 31 background-color: tomato; |
| 32 border-radius: 4px; |
| 33 cursor: default; |
| 34 } |
| 35 |
| 36 .view { |
| 37 font-size: 250px; |
| 38 background-color: tomato; |
| 39 } |
| 40 |
| 41 </style> |
| 42 |
| 43 </head> |
| 44 <body unresolved fullbleed vertical layout> |
| 45 <template is="auto-binding"> |
| 46 <core-toolbar class="toolbar"> |
| 47 <core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}"
on-tap="{{back}}"></core-icon-button> |
| 48 <div flex>Stuff</div> |
| 49 <core-icon-button icon="more-vert"></core-icon-button> |
| 50 </core-toolbar> |
| 51 <core-animated-pages id="pages" flex selected="0" on-core-animated-pages-tra
nsition-end="{{transitionend}}" transitions="cross-fade-all hero-transition"> |
| 52 |
| 53 <section vertical layout> |
| 54 |
| 55 <div id="container" flex horizontal wrap around-justified layout hero-p> |
| 56 <template repeat="{{item in items}}"> |
| 57 <div class="card" vertical center center-justified layout hero-id="i
tem-{{item}}" hero?="{{$.pages.selected === item + 1 || lastSelected === item +
1}}" on-tap="{{selectView}}"><span cross-fade>{{item}}</span></div> |
| 58 </template> |
| 59 </div> |
| 60 |
| 61 </section> |
| 62 |
| 63 <template repeat="{{item in items}}"> |
| 64 <section vertical layout> |
| 65 <div class="view" flex vertical center center-justified layout hero-id
="item-{{item}}" hero?="{{$.pages.selected === item + 1 || $.pages.selected ===
0}}"><span cross-fade>{{item}}</span></div> |
| 66 </section> |
| 67 </template> |
| 68 |
| 69 </core-animated-pages> |
| 70 </template> |
| 71 |
| 72 <script> |
| 73 |
| 74 addEventListener('template-bound', function(e) { |
| 75 var scope = e.target; |
| 76 var items = [], count=50; |
| 77 for (var i=0; i < count; i++) { |
| 78 items.push(i); |
| 79 } |
| 80 |
| 81 scope.items = items; |
| 82 |
| 83 scope.selectView = function(e) { |
| 84 var i = e.target.templateInstance.model.item; |
| 85 this.$.pages.selected = i+1; |
| 86 } |
| 87 |
| 88 scope.back = function() { |
| 89 this.lastSelected = this.$.pages.selected; |
| 90 console.log(this.lastSelected); |
| 91 this.$.pages.selected = 0; |
| 92 } |
| 93 |
| 94 scope.transitionend = function() { |
| 95 if (this.lastSelected) { |
| 96 this.lastSelected = null; |
| 97 } |
| 98 } |
| 99 }) |
| 100 |
| 101 </script> |
| 102 |
| 103 </body> |
| 104 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master