1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<link rel="import" href="../../../polymer/polymer.html">
11<link rel="import" href="../../../iron-icons/iron-icons.html">
12<link rel="import" href="../../../iron-icon/iron-icon.html">
13<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
14<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
15<link rel="import" href="../../../paper-item/paper-item.html">
16<link rel="import" href="../../../paper-item/paper-item-body.html">
17<link rel="import" href="../../../paper-styles/color.html">
18<link rel="import" href="../../neon-animatable-behavior.html">
19
20<dom-module id="list-view">
21  <template>
22    <style>
23      :host {
24        @apply(--layout-vertical);
25      }
26
27      .main {
28        @apply(--layout-flex);
29        @apply(--layout-scroll);
30      }
31
32      iron-icon {
33        color: var(--google-grey-500);
34      }
35    </style>
36    <paper-toolbar class="medium-tall">
37      <paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
38    </paper-toolbar>
39
40    <div class="main">
41
42        <template is="dom-repeat" items="[[data]]">
43
44          <paper-item>
45            <paper-item-body two-line>
46              <div>[[item.fileName]]</div>
47              <div secondary>[[item.modifiedDate]]</div>
48            </paper-item-body>
49            <iron-icon icon="info"></iron-icon>
50          </paper-item>
51
52        </template>
53
54    </div>
55
56  </template>
57
58</dom-module>
59
60<script>
61
62  Polymer({
63
64    is: 'list-view',
65
66    behaviors: [
67      Polymer.NeonAnimatableBehavior
68    ],
69
70    listeners: {
71      'click': '_onClick'
72    },
73
74    properties: {
75
76      data: {
77        type: Array,
78        value: function() {
79          return [];
80        }
81      },
82
83      animationConfig: {
84        type: Object,
85        value: function() {
86          return {
87            'entry': [{
88              name: 'fade-in-animation',
89              node: this.$.button
90            }],
91
92            'exit': [{
93              name: 'fade-out-animation',
94              node: this.$.button
95            }, {
96              name: 'hero-animation',
97              id: 'hero',
98              fromPage: this
99            }]
100          };
101        }
102      }
103
104    },
105
106    _onClick: function(event) {
107      var target = event.target;
108      while (target !== this && !target._templateInstance) {
109        target = target.parentNode;
110      }
111
112      // configure the page animation
113      this.sharedElements = {
114        'hero': target,
115      };
116
117      this.fire('item-click', {
118        item: target,
119      });
120    }
121
122  });
123
124</script>
125