Home | History | Annotate | Download | only in tiles 
      1 <!--
      2 @license
      3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      7 Code distributed by Google as part of the polymer project is also
      8 subject 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 = event.target;
     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