| 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 592603004:
Revert "Polymer elements added to third_party/polymer." (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master