<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –> <link rel=“import” href=“../../../polymer/polymer.html”> <link rel=“import” href=“../../../iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../../neon-shared-element-animatable-behavior.html”>

<dom-module id=“circles-page”>

<template>
  <style>
    :host {
      @apply(--layout-horizontal);
      @apply(--layout-center-center);
    }

    .circle {
      display: inline-block;
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      margin: 16px;
      border-radius: 50%;
      background: var(--color-one);
    }
  </style>

  <div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>

</template>

</dom-module>

<script>

Polymer({

  is: 'circles-page',

  behaviors: [
    Polymer.NeonSharedElementAnimatableBehavior
  ],

  properties: {

    animationConfig: {
      value: function() {
        var circles = Polymer.dom(this.root).querySelectorAll('.circle');
        var circlesArray = Array.prototype.slice.call(circles);
        return {
          'entry': [{
            name: 'cascaded-animation',
            animation: 'scale-up-animation',
            nodes: circlesArray
          }],

          'exit': [{
            name: 'hero-animation',
            id: 'hero',
            fromPage: this
          }, {
            name: 'cascaded-animation',
            animation: 'scale-down-animation'
          }]
        };
      }
    }
  },

  listeners: {
    'click': '_onClick'
  },

  _onClick: function(event) {
    var target = event.target;
    if (target.classList.contains('circle')) {
      // configure the page animation
      this.sharedElements = {
        'hero': target
      };

      var nodesToScale = [];
      var circles = Polymer.dom(this.root).querySelectorAll('.circle');
      for (var node, index = 0; node = circles[index]; index++) {
        if (node !== event.target) {
          nodesToScale.push(node);
        }
      }
      this.animationConfig['exit'][1].nodes = nodesToScale;

      this.fire('circle-click');
    }
  }

});

</script>