@haxtheweb/haxcms-nodejs/dist/public/build/es6/node_modules/@polymer/neon-animation/demo/grid/animated-grid.js

HAXcms single and multisite nodejs server, api, and administration

/**
@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"../../../paper-styles/typography.js";import"../../../iron-flex-layout/iron-flex-layout.js";import"../shared-styles.js";import{Polymer as e}from"../../../polymer/lib/legacy/polymer-fn.js";import{dom as t}from"../../../polymer/lib/legacy/polymer.dom.js";import{html as l}from"../../../polymer/lib/utils/html-tag.js";import{NeonSharedElementAnimatableBehavior as i}from"../../neon-shared-element-animatable-behavior.js";e({_template:l`
    <style include="shared-styles">

      :host {
        display: block;
        background: #000;
      }

      .tile {
        display: inline-block;
        float: left;
        vertical-align: top;
        width: calc(100% / 6);
        height: calc(100% / 3);

        @apply --paper-font-title;
        @apply --layout-vertical;
        @apply --layout-center-center;
      }

      .tile:nth-of-type(1) {
        width: calc(100% / 3);
        height: calc(100% / 3 * 2);
      }

      .tile:nth-of-type(4) {
        width: calc(100% / 3);
      }

      .tile:nth-of-type(5) {
        width: calc(100% / 3);
        height: calc(100% / 3 * 2);
      }

      .tile:nth-of-type(8) {
        width: calc(100% / 3);
        height: calc(100% / 3);
      }

      .tile:nth-of-type(9) {
        position: absolute;
        top: calc(100% / 3 * 2);
        left: 0;
        width: calc(100% / 6);
        height: calc(100% / 3);
      }

      .tile:nth-of-type(10) {
        position: absolute;
        top: calc(100% / 3 * 2);
        left: calc(100% / 6);;
        width: calc(100% / 6);
        height: calc(100% / 3);
      }
    </style>

    <template is="dom-repeat" items="[[config]]">
      <div item="[[item]]" class$="[[_computeTileClass(item.color)]]" on-click="_onClick">
        <span>[[item.value]]</span>
      </div>
    </template>
  `,is:"animated-grid",behaviors:[i],properties:{config:{type:Array,value:function(){return[{value:1,color:"blue"},{value:2,color:"red"},{value:3,color:"blue"},{value:4,color:"green"},{value:5,color:"yellow"},{value:6,color:"blue"},{value:7,color:"red"},{value:8,color:"green"},{value:9,color:"yellow"},{value:10,color:"red"}]}},animationConfig:{type:Object,value:function(){return{exit:[{name:"ripple-animation",id:"ripple",fromPage:this},{name:"hero-animation",id:"hero",fromPage:this}]}}}},_computeTileClass:function(e){return"tile "+e+"-300"},_onClick:function(e){var l=t(e).rootTarget;l.item||(l=t(l).parentNode),this.sharedElements={hero:l,ripple:l},this.animationConfig.exit[0].gesture={x:e.x||e.pageX,y:e.y||e.pageY},this.fire("tile-click",{tile:l,data:l.item})}});