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-flex-layout/iron-flex-layout.html">
12<link rel="import" href="../../neon-animatable-behavior.html">
13<link rel="import" href="../../neon-animation-runner-behavior.html">
14<link rel="import" href="../../../paper-styles/shadow.html">
15<link rel="import" href="animated-grid.html">
16
17<dom-module id="full-page">
18  <template>
19    <style>
20      :host {
21        background: black;
22        visibility: hidden;
23        @apply(--layout-vertical);
24      }
25
26      .toolbar {
27        background: #9c27b0;
28        height: 72px;
29        z-index: 1;
30        @apply(--shadow-elevation-2dp);
31      }
32
33      animated-grid {
34        height: calc(100% - 72px);
35        @apply(--layout-flex);
36      }
37    </style>
38
39    <div id="toolbar" class="toolbar"></div>
40    <animated-grid id="grid"></animated-grid>
41
42  </template>
43</dom-module>
44
45<script>
46
47Polymer({
48
49  is: 'full-page',
50
51  behaviors: [
52    Polymer.NeonAnimatableBehavior,
53    Polymer.NeonAnimationRunnerBehavior
54  ],
55
56  properties: {
57
58    animationConfig: {
59      type: Object,
60      value: function() {
61        return {
62          'entry': [{
63            name: 'slide-from-top-animation',
64            node: this.$.toolbar
65          }, {
66            animatable: this.$.grid,
67            type: 'entry'
68          }]
69        };
70      }
71    }
72
73  },
74
75  show: function() {
76    this.style.visibility = 'visible';
77    this.playAnimation('entry');
78  }
79
80});
81
82</script>
83