first commit

.gitignore

@@ -0,0 +1,2 @@
+.idea
+bower_components

bower.json

@@ -0,0 +1,32 @@
+{
+  "name": "cascaded-grid-animation",
+  "main": "cascaded-grid-animation.html",
+  "authors": [
+    "SPAHI4 <[email protected]>"
+  ],
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "cascade",
+    "animation",
+    "hierarchical display",
+    "grid"
+  ],
+  "ignore": [
+    "/.*",
+    "/test/"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0",
+    "neon-elements": "polymerelements/neon-elements"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "hydrolysis": "^1.24.1"
+  }
+}

cascaded-grid-animation.html

@@ -0,0 +1,147 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../neon-animation/neon-animation-behavior.html">
+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
+<link rel="import" href="../neon-animation/web-animations.html">
+
+<!--
+`<cascaded-grid-animation>` applies an animation on an array of elements with a delay between each.
+the delay defaults to 100ms.
+
+Configuration:
+```
+{
+  name: 'cascaded-grid-animation',
+  nodes: <array-of-nodes>,
+  timing: <animation-timing>,
+  onlyVisible: <boolean-value>
+}
+```
+
+Usage:
+```
+    Polymer({
+
+      is: 'demo-grid',
+
+      behaviors: [
+        Polymer.NeonAnimationRunnerBehavior
+      ],
+
+      properties: {
+        animationConfig: {
+          type: Object,
+          value: function () {
+            return {
+              'reveal': [{
+                name: 'cascaded-grid-animation',
+                nodes: Polymer.dom(this.root).querySelectorAll('.grid > div')
+              }]
+            };
+          }
+        }
+      }
+
+    });
+```
+-->
+
+<script>
+
+  'use strict';
+
+  Polymer({
+
+    is: 'cascaded-grid-animation',
+
+    behaviors: [Polymer.NeonAnimationBehavior],
+
+    /**
+     * @param {{
+   *   nodes: !Array<!Element>,
+   *   nodeDelay: (number|undefined),
+   *   timing: (Object|undefined),
+   *   onlyVisible: (Boolean|undefined)
+   *  }} config
+     */
+    configure: function configure(config) {
+      this._animations = [];
+      var nodes = config.nodes;
+      var effects = [];
+      var nodeDelay = config.nodeDelay || 100;
+      var onlyVisible = config.onlyVisible || true;
+
+      config.timing = config.timing || {};
+      config.timing.delay = config.timing.delay || 0;
+
+      var oldDelay = config.timing.delay;
+      var abortedConfigure;
+      var x = 1;
+      var y = 1;
+      var axis = [];
+      var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+      var i = 0;
+      var lastNode;
+
+      // compute coordinates for each node
+      if (nodes.length) Array.prototype.forEach.call(nodes, function (node, index) {
+        i++;
+        var oldRect = (lastNode || node).getBoundingClientRect();
+        var rect = node.getBoundingClientRect();
+        if (onlyVisible && oldRect.top > windowHeight) return; // do not animate not visible nodes
+        if (oldRect.left > rect.left) {
+          x = 1;
+          ++y;
+        } else if(oldRect.left !== rect.left) {
+          ++x;
+        }
+        axis.push({x: x, y: y});
+        lastNode = node;
+      });
+
+      for (var node, index = 0; node = nodes[index]; index++) {
+        if (!axis[index]) break;
+        config.timing.delay = Math.sqrt(Math.pow(axis[index].x, 2) + Math.pow(axis[index].y, 2)) * nodeDelay; // use Pythagorean theorem
+        config.node = node;
+
+        var animation = document.createElement('fade-in-animation');
+        if (animation.isNeonAnimation) {
+          var effect = animation.configure(config);
+          this._animations.push(animation);
+          effects.push(effect);
+        } else {
+          console.warn(this.is + ': fade-in-animation not found!');
+          abortedConfigure = true;
+          break;
+        }
+
+        var animation = document.createElement('scale-up-animation');
+        if (animation.isNeonAnimation) {
+          var effect = animation.configure(config);
+          this._animations.push(animation);
+          effects.push(effect);
+        } else {
+          console.warn(this.is + ': scale-up-animation not found!');
+          abortedConfigure = true;
+          break;
+        }
+      }
+      config.timing.delay = oldDelay;
+      config.node = null;
+      // if a bad animation was configured, abort config.
+      if (abortedConfigure) {
+        return;
+      }
+
+      this._effect = new GroupEffect(effects);
+      return this._effect;
+    },
+
+    complete: function complete() {
+      for (var animation, index = 0; animation = this._animations[index]; index++) {
+        animation.complete(animation.config);
+      }
+    }
+  });
+
+</script>

demo/demo-grid.html

@@ -0,0 +1,63 @@
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../neon-animation/neon-animation-runner-behavior.html">
+
+<dom-module id="demo-grid">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    .grid {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .grid div {
+      width: 150px;
+      height: 150px;
+      background-color: #03a9f4;
+      border-radius: 2px;
+      margin: 10px;
+    }
+  </style>
+  <template>
+
+    <div class="grid">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+  </template>
+  <script>
+    Polymer({
+
+      is: 'demo-grid',
+
+      behaviors: [
+        Polymer.NeonAnimationRunnerBehavior
+      ],
+
+      properties: {
+        animationConfig: {
+          type: Object,
+          value: function () {
+            return {
+              'reveal': [{
+                name: 'cascaded-grid-animation',
+                nodes: Polymer.dom(this.root).querySelectorAll('.grid > div')
+              }]
+            };
+          }
+        }
+      }
+
+    });
+  </script>
+</dom-module>

demo/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <title>cascaded-grid-animation demo</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+
+    <link rel="import" href="../cascaded-grid-animation.html">
+    <link rel="import" href="./demo-grid.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+    </style>
+    <style>
+      .vertical-section-container {
+        max-width: 580px !important;
+      }
+    </style>
+  </head>
+  <body unresolved>
+
+    <div class="vertical-section-container centered">
+      <h3>Basic cascaded-grid-animation Demo</h3>
+      <demo-snippet>
+          <button id="play">Play animation</button>
+          <demo-grid id="grid"></demo-grid>
+      </demo-snippet>
+    </div>
+    <script>
+      document.querySelector('#play').addEventListener('click', function () {
+        document.querySelector('#grid').playAnimation('reveal');
+      })
+    </script>
+  </body>
+</html>

index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>cascaded-grid-animation</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+  <body>
+    <iron-component-page></iron-component-page>
+  </body>
+</html>

test/cascaded-grid-animation_test.html

@@ -0,0 +1,32 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>cascaded-grid-animation test</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../cascaded-grid-animation.html">
+  </head>
+  <body>
+
+    <test-fixture id="basic">
+      <template>
+        <cascaded-grid-animation></cascaded-grid-animation>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('cascaded-grid-animation', function() {
+
+        test('instantiating the element works', function() {
+          let element = fixture('basic');
+          assert.equal(element.is, 'cascaded-grid-animation');
+        });
+
+      });
+    </script>
+  </body>
+</html>