Feature/initial velocity directives

README.md

@@ -3,6 +3,59 @@
 [![Build Status](https://travis-ci.org/thisissoon/angular-velocity.svg?branch=develop)](https://travis-ci.org/thisissoon/angular-velocity)
 [![Coverage Status](https://coveralls.io/repos/thisissoon/angular-velocity/badge.svg)](https://coveralls.io/r/thisissoon/angular-velocity)
 
+These velocity directives configure velocity.js keyframe animations on an element.
+
+```
+bower install angular-velocity-animate
+bower install velocity
+```
+
+## Basic Usage:
+
+```html
+
+  <!-- add "sn-velocty" directive to the animation target element -->
+  <div sn-velocity data-keyframes="[{'properties': { opacity: 0 }, 'options': { duration: 1000 }},{'properties': { opacity: 1 },'options': { duration: 1000 }}]">
+    ...
+  </div>
+
+```
+The `data-keyframes` attribute takes an array of velocity.js animation keyframes. See the [Velocity Docs](http://julian.com/research/velocity/#propertiesMap) for available properties and options.
+
+
+## Animation Groups:
+
+The `sn-velocity-group` directive can be used to animate a number of elements together.
+
+```html
+
+  <!-- wrap the target elements with the "sn-velocty-group" directive -->
+  <sn-velocity-group data-keyframes="animationKeyframes">
+    <div id="#elem1"></div>
+    <div id="#elem2"></div>
+  </sn-velocity-group>
+
+```
+The `data-keyframes` attribute of `sn-velocity-group` takes an object of element identifiers. Each key in the object should hold an array of velocity.js animation keyframes as per the `sn-velocity` directive.
+
+```json
+
+{
+  "#elem1": [{
+    "properties": { "opacity": "1" },
+    "options": { "duration": "1000", "loop": true }
+  }],
+  "#elem2": [{
+      "properties": { "left": "+=100" },
+      "options": { "duration": "1000" }
+  },{
+      "properties": { "opacity": "-=100" },
+      "options": { "duration": "1000" }
+  }]
+}
+
+```
+
 This project structure is based on the [angular-seed](https://github.com/angular/angular-seed) application skeleton for a typical [AngularJS](http://angularjs.org/) web app.
 
 The project is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.

app/js/directives/snVelocity.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * Angular wrapper for velocityjs
+ * @author SOON_
+ * @module sn.velocity.snVelocity
+ * @class  snVelocity
+ * @example <sn-velocity data-keyframes="[{'properties': { opacity: 0 }, 'options': { duration: 1000 }},{'properties': { opacity: 1 },'options': { duration: 1000 }}]"></sn-velocity>
+ */
+angular.module("sn.velocity.snVelocity", []).directive("snVelocity",[
+    /**
+     * @constructor
+     */
+    function() {
+        return {
+            restrict: "A",
+            scope: {
+                "keyframes": "="
+            },
+            link: function($scope, $element){
+
+                angular.forEach($scope.keyframes, function(value){
+                    Velocity($element, value.properties, value.options);
+                });
+
+            }
+        }
+    }
+]);

app/js/directives/snVelocityGroup.js

@@ -0,0 +1,43 @@
+"use strict";
+/**
+ * @author SOON_
+ * @module sn.velocity.snVelocityGroup
+ * @class  snVelocityGroup
+ * @example <sn-velocity-group data-keyframes=""></sn-velocity-group>
+ */
+angular.module("sn.velocity.snVelocityGroup", [
+    "sn.velocity.snVelocity"
+])
+
+.directive("snVelocityGroup",[
+    "$compile",
+    "$rootScope",
+    /**
+     * @constructor
+     *
+     * @param   {Service} $compile   angular template compiler
+     * @param   {Object}  $rootScope
+     */
+    function($compile, $rootScope) {
+        return {
+            restrict: "E",
+            scope: {
+                "keyframes": "="
+            },
+            link: function($scope, $element){
+
+                angular.forEach($scope.keyframes, function(keyframes, key){
+                    var animateElement = angular.element($element[0].querySelector(key));
+                    var scope = $rootScope.$new();
+                    scope.keyframes = keyframes;
+
+                    animateElement.attr("sn-velocity", "");
+                    animateElement.attr("data-keyframes", "keyframes");
+
+                    $compile(animateElement)(scope);
+                });
+
+            }
+        }
+    }
+]);

app/js/sn.velocity.js

@@ -0,0 +1,11 @@
+"use strict";
+/**
+ * Angular wrapper for velocityjs animation library
+ * @requires velocityjs {@link https://github.com/julianshapiro/velocity}
+ * @module sn.velocity
+ * @author SOON_
+ */
+angular.module("sn.velocity", [
+    "sn.velocity.snVelocity",
+    "sn.velocity.snVelocityGroup"
+])