5 <script src="../../platform/platform.js"></script>
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">
14 font-family: sans-serif;
18 background-color: steelblue;
24 <body unresolved fullbleed vertical layout>
26 <polymer-element name="grid-toc" attributes="items selected">
39 background-color: tomato;
44 <div id="container" on-tap="{{selectView}}" flex horizontal wrap around-justified layout hero-p>
45 <template repeat="{{item in items}}">
46 <div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{selected === item + 1 || lastSelected === item + 1}}"><span cross-fade>{{item}}</span></div>
52 selectedChanged: function(old) {
53 this.lastSelected = old;
55 selectView: function(e) {
56 var item = e.target.templateInstance.model.item;
57 if (item !== undefined) {
58 this.fire('grid-toc-select', {item: item});
65 <polymer-element name="grid-item" attributes="item isHero">
70 background-color: tomato;
73 <div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{isHero}}">
74 <span cross-fade>{{item}}</span>
78 Polymer('grid-item', {
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>
89 <core-icon-button icon="more-vert"></core-icon-button>
91 <core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
93 <grid-toc vertical id="toc" layout selected="{{$.pages.selected}}" items="{{items}}" hero-p on-grid-toc-select="{{selectView}}"></grid-toc>
95 <template repeat="{{item in items}}">
96 <grid-item vertical layout item="{{item}}" hero-p isHero="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"></grid-item>
99 </core-animated-pages>
104 addEventListener('template-bound', function(e) {
105 var scope = e.target;
106 var items = [], count=50;
107 for (var i=0; i < count; i++) {
113 scope.selectView = function(e, detail) {
115 this.$.pages.selected = i+1;
118 scope.back = function() {
119 this.lastSelected = this.$.pages.selected;
120 this.$.pages.selected = 0;
123 scope.transitionend = function() {
124 if (this.lastSelected) {
125 this.lastSelected = null;