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-shared-element-animatable-behavior.html">
13
14<dom-module id="circles-page">
15  <template>
16    <style>
17      :host {
18        @apply(--layout-horizontal);
19        @apply(--layout-center-center);
20      }
21
22      .circle {
23        display: inline-block;
24        box-sizing: border-box;
25        width: 100px;
26        height: 100px;
27        margin: 16px;
28        border-radius: 50%;
29        background: var(--color-one);
30      }
31    </style>
32
33    <div>
34      <div class="circle"></div>
35      <div class="circle"></div>
36      <div class="circle"></div>
37      <div class="circle"></div>
38    </div>
39
40  </template>
41
42</dom-module>
43
44<script>
45
46  Polymer({
47
48    is: 'circles-page',
49
50    behaviors: [
51      Polymer.NeonSharedElementAnimatableBehavior
52    ],
53
54    properties: {
55
56      animationConfig: {
57        value: function() {
58          var circles = Polymer.dom(this.root).querySelectorAll('.circle');
59          var circlesArray = Array.prototype.slice.call(circles);
60          return {
61            'entry': [{
62              name: 'cascaded-animation',
63              animation: 'scale-up-animation',
64              nodes: circlesArray
65            }],
66
67            'exit': [{
68              name: 'hero-animation',
69              id: 'hero',
70              fromPage: this
71            }, {
72              name: 'cascaded-animation',
73              animation: 'scale-down-animation'
74            }]
75          };
76        }
77      }
78    },
79
80    listeners: {
81      'click': '_onClick'
82    },
83
84    _onClick: function(event) {
85      var target = Polymer.dom(event).rootTarget;
86      if (target.classList.contains('circle')) {
87        // configure the page animation
88        this.sharedElements = {
89          'hero': target
90        };
91
92        var nodesToScale = [];
93        var circles = Polymer.dom(this.root).querySelectorAll('.circle');
94        for (var node, index = 0; node = circles[index]; index++) {
95          if (node !== event.target) {
96            nodesToScale.push(node);
97          }
98        }
99        this.animationConfig['exit'][1].nodes = nodesToScale;
100
101        this.fire('circle-click');
102      }
103    }
104
105  });
106
107</script>
108