UNPKG

@haxtheweb/haxcms-nodejs

Version:

HAXcms single and multisite nodejs server, api, and administration

35 lines (33 loc) 2.12 kB
/** @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://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 http://polymer.github.io/PATENTS.txt */ import"../../../polymer/polymer-legacy.js";import"../../../iron-flex-layout/iron-flex-layout.js";import{Polymer as i}from"../../../polymer/lib/legacy/polymer-fn.js";import{dom as e}from"../../../polymer/lib/legacy/polymer.dom.js";import{html as o}from"../../../polymer/lib/utils/html-tag.js";import{NeonSharedElementAnimatableBehavior as a}from"../../neon-shared-element-animatable-behavior.js";i({_template:o` <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> `,is:"circles-page",behaviors:[a],properties:{animationConfig:{type:Object}},listeners:{click:"_onClick"},attached:function(){if(!this.animationConfig){var i=e(this.root).querySelectorAll(".circle"),o=Array.from(i);this.animationConfig={entry:[{name:"cascaded-animation",animation:"scale-up-animation",nodes:o}],exit:[{name:"hero-animation",id:"hero",fromPage:this},{name:"cascaded-animation",animation:"scale-down-animation"}]}}},_onClick:function(i){var o=e(i).rootTarget;if(o.classList.contains("circle")){this.sharedElements={hero:o};for(var a,r=[],t=e(this.root).querySelectorAll(".circle"),l=0;a=t[l];l++)a!==i.target&&r.push(a);this.animationConfig.exit[1].nodes=r,this.fire("circle-click")}}});