Merge 02d18aa into b9e08d2

thisissoon · Jan 30, 2015 · ee66bc1 · ee66bc1
2 parents b9e08d2 + 02d18aa
commit ee66bc1
Show file tree

Hide file tree

Showing 16 changed files with 238 additions and 288 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,61 @@
 [![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.
+
+
+## Install
+```
+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.
@@ -117,34 +172,15 @@ The build files will then be in the `dist/` directory.
 
 app/                    --> all of the files to be used in production
   components/           --> all of our javascript libraries (installed using bower)
-  css/                  --> css files
-    app.css             --> default stylesheet (generated using less)
-  img/                  --> image files
-  less/                 --> less folder
-    default/            --> styling appied to all screen sizes (e.g. fonts, colors etc..)
-      core/             --> core styling applied to all screen sizes 
-      modules/          --> module styling applied to all screen sizes
-    large/              --> styling appied to large screen screen sizes (overrides styling in default folder)
-      core/             --> core styling applied to large screen screen sizes
-      modules/          --> module styling applied to large screen screen sizes 
-    tablet/             --> styling appied to tablet screen sizes (overrides styling in default folder)
-      core/             --> core styling applied to tablet screens 
-      modules/          --> module styling applied to tablet screens
-    mobile/             --> styling appied to mobile screen sizes (overrides styling in default folder)
-      core/             --> core styling applied to mobile screens 
-      modules/          --> module styling applied to mobile screens  
   index.html            --> app layout file (the main html template file of the app)
   js/                   --> javascript files
     {app}/              --> angular module javascript files
       {app}.js          --> angular module initialisation
       config.js         --> angular module config
       controllers/      --> controllers
-        {view}Ctrl.js   
+        {view}Ctrl.js
       directives/       --> directives
-        {module}.js     
-    partials/           --> angular view partials (partial html templates)
-      partial1.html
-      partial2.html
+        {module}.js
 modules/                --> static html files for building and testing styling and mark up
   {module}/
     index.html

diff --git a/app/index.html b/app/index.html
@@ -1,34 +1,27 @@
 <!DOCTYPE html>
-<!-- build:[ng-app]:e2e sn.example.e2e -->
-<html lang="en" ng-app="sn.example">
+<!-- build:[ng-app]:e2e sn.velocity.e2e -->
+<html lang="en" ng-app="sn.velocity">
 <!-- /build -->
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
         <meta name="fragment" content="!" />
-        <title>SOON_ AngularJS Template</title>
+        <title>SOON_ Velocity Directives</title>
         <!-- build:template
         <base href="/">
         /build -->
         <!-- build:remove -->
         <base href="/app/">
         <!-- /build -->
-        <!-- build:css css/all.min.css -->
-        <link rel="stylesheet" href="css/all.css"/>
-        <!-- /build -->
     </head>
     <body>
 
-        <ng-view></ng-view>
-
         <!-- build:js js/app.min.js -->
         <script src="components/angular/angular.js"></script>
-        <script src="components/angular-route/angular-route.js"></script>
 
-        <script src="js/soon-example/app.js"></script>
-        <script src="js/soon-example/config.js"></script>
-        <script src="js/soon-example/controllers/SearchCtrl.js"></script>
-        <script src="js/soon-example/controllers/ResultsCtrl.js"></script>
+        <script src="js/angular-velocity.js"></script>
+        <script src="js/directives/velocity.js"></script>
+        <script src="js/directives/velocity-group.js"></script>
         <!-- /build -->
         <!-- build:include:e2e ../tests/e2e/scripts.html --><!-- /build -->
 

diff --git a/app/js/angular-velocity.js b/app/js/angular-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"
+]);
diff --git a/app/js/directives/velocity-group.js b/app/js/directives/velocity-group.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);
+                });
+
+            }
+        };
+    }
+]);
diff --git a/app/js/directives/velocity.js b/app/js/directives/velocity.js
@@ -0,0 +1,29 @@
+"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",[
+    "$window",
+    /**
+     * @constructor
+     */
+    function($window) {
+        return {
+            restrict: "A",
+            scope: {
+                "keyframes": "="
+            },
+            link: function($scope, $element){
+
+                angular.forEach($scope.keyframes, function(value){
+                    $window.Velocity($element, value.properties, value.options);
+                });
+
+            }
+        };
+    }
+]);
diff --git a/app/js/soon-example/app.js b/app/js/soon-example/app.js
diff --git a/app/js/soon-example/config.js b/app/js/soon-example/config.js
diff --git a/app/js/soon-example/controllers/ResultsCtrl.js b/app/js/soon-example/controllers/ResultsCtrl.js
diff --git a/app/js/soon-example/controllers/SearchCtrl.js b/app/js/soon-example/controllers/SearchCtrl.js
diff --git a/scripts.json b/scripts.json
@@ -4,9 +4,8 @@
         "app/components/angular-route/angular-route.js"
     ],
     "application": [
-        "app/js/soon-example/app.js",
-        "app/js/soon-example/config.js",
-        "app/js/soon-example/controllers/SearchCtrl.js",
-        "app/js/soon-example/controllers/ResultsCtrl.js"
+        "app/js/angular-velocity.js",
+        "app/js/directives/velocity-group.js",
+        "app/js/directives/velocity.js"
     ]
 }
diff --git a/tests/e2e/app.js b/tests/e2e/app.js
@@ -3,16 +3,15 @@
  * This module runs e2e test by setting up a module to make our
  * backend assertions e.g. mock the responses from our api before
  * lauching our actual application.
- * @main   sn.example.e2e
- * @module sn.example.e2e
+ * @main   sn.velocity.e2e
+ * @module sn.velocity.e2e
  * @author SOON_
  */
-angular.module("sn.example.e2e", ["sn.example", "ngMockE2E"])
+angular.module("sn.velocity.e2e", ["sn.velocity", "ngMockE2E"])
     .run([
         "$httpBackend",
         function ($httpBackend) {
 
-            $httpBackend.whenGET(/.*\/maps\/api\/geocode\/json.*/).respond({ "results" : [ { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "United Kingdom", "short_name" : "GB", "types" : [ "country", "political" ] } ], "formatted_address" : "London, UK", "geometry" : { "bounds" : { "northeast" : { "lat" : 51.6723432, "lng" : 0.148271 }, "southwest" : { "lat" : 51.38494009999999, "lng" : -0.3514683 } }, "location" : { "lat" : 51.5073509, "lng" : -0.1277583 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 51.6723432, "lng" : 0.148271 }, "southwest" : { "lat" : 51.38494009999999, "lng" : -0.3514683 } } }, "types" : [ "locality", "political" ] }, { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "Middlesex County", "short_name" : "Middlesex County", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Ontario", "short_name" : "ON", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "Canada", "short_name" : "CA", "types" : [ "country", "political" ] } ], "formatted_address" : "London, ON, Canada", "geometry" : { "bounds" : { "northeast" : { "lat" : 43.073245, "lng" : -81.1063879 }, "southwest" : { "lat" : 42.824517, "lng" : -81.390852 } }, "location" : { "lat" : 42.9869502, "lng" : -81.243177 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 43.073245, "lng" : -81.1063879 }, "southwest" : { "lat" : 42.824517, "lng" : -81.390852 } } }, "types" : [ "locality", "political" ] }, { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "Laurel County", "short_name" : "Laurel County", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Kentucky", "short_name" : "KY", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "United States", "short_name" : "US", "types" : [ "country", "political" ] } ], "formatted_address" : "London, KY, USA", "geometry" : { "bounds" : { "northeast" : { "lat" : 37.1522599, "lng" : -84.03595709999999 }, "southwest" : { "lat" : 37.0797589, "lng" : -84.126262 } }, "location" : { "lat" : 37.1289771, "lng" : -84.08326459999999 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 37.1522599, "lng" : -84.03595709999999 }, "southwest" : { "lat" : 37.0797589, "lng" : -84.126262 } } }, "types" : [ "locality", "political" ] }, { "address_components" : [ { "long_name" : "London", "short_name" : "London", "types" : [ "locality", "political" ] }, { "long_name" : "Madison County", "short_name" : "Madison County", "types" : [ "administrative_area_level_2", "political" ] }, { "long_name" : "Ohio", "short_name" : "OH", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "United States", "short_name" : "US", "types" : [ "country", "political" ] }, { "long_name" : "43140", "short_name" : "43140", "types" : [ "postal_code" ] } ], "formatted_address" : "London, OH 43140, USA", "geometry" : { "bounds" : { "northeast" : { "lat" : 39.921786, "lng" : -83.3899969 }, "southwest" : { "lat" : 39.85928, "lng" : -83.47892299999999 } }, "location" : { "lat" : 39.8864493, "lng" : -83.4482529 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 39.921786, "lng" : -83.3899969 }, "southwest" : { "lat" : 39.85928, "lng" : -83.47892299999999 } } }, "types" : [ "locality", "political" ] } ], "status" : "OK" });
             $httpBackend.whenGET(/partials\/.*/).passThrough();
 
         }