Feature/initial module

README.md

@@ -1,8 +1,47 @@
-# Angular Skrollr 
+# Angular Skrollr
 
 [![Build Status](https://travis-ci.org/thisissoon/angular-skrollr.svg?branch=master)](https://travis-ci.org/thisissoon/angular-skrollr)
 [![Coverage Status](https://coveralls.io/repos/thisissoon/angular-skrollr/badge.svg?branch=master)](https://coveralls.io/r/thisissoon/angular-skrollr?branch=master)
 
+Angular Skrollr wraps the skrollr.js library to provide a mechanisim for configuring, initialising skrollr and calling skrollr.refresh() when the DOM is updated.
+
+
+## Install
+
+```
+bower install angular-skrollr
+bower install skrollr
+```
+
+## Usage
+
+```js
+// 1. configure skrollr in your apps config
+var myApp = angular.module('myApp', []);
+myApp.config(["snSkrollrProvider", function(snSkrollrProvider) {
+  snSkrollrProvider.config({ smoothScrolling: true, ... });
+}]);
+
+// 2. initialise skrollr at runtime
+myApp.run(["snSkrollr", function(snSkrollr) {
+  snSkrollr.init();
+}])
+
+```
+
+```html
+<!-- 3. add the sn-skrollr directive, along with skrollr animation attributes, to the elements you wish to animate -->
+<div
+  sn-skrollr
+  data-100p-top="transform: translateY(900px)"
+  data-top="transform: translateY(0px)"
+  data--100p-top="transform: translateY(-900px)"
+>
+  ...
+</div>
+```
+
+
 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.
@@ -35,7 +74,7 @@ We have two kinds of dependencies in this project: tools and angular framework c
 The following tools require super user privileges so you will need to install them separately like so:
 
 ```
-sudo npm install -g bower 
+sudo npm install -g bower
 sudo npm install -g grunt-cli
 ```
 
@@ -98,11 +137,11 @@ To watch all files run:
 grunt serverall
 ```
 
-To run tests or compile less to css when the relevent files are updated. 
+To run tests or compile less to css when the relevent files are updated.
 
 ### Running the build script
 
-To create a build to deploy for a production environment simply run: 
+To create a build to deploy for a production environment simply run:
 
 ```
 grunt build
@@ -117,40 +156,21 @@ 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
 tests/                  --> test config and source files
   e2e/                  --> end-to-end specs
-    specs/              
+    specs/
       scenarios.js
     protractor.conf.js  --> config file for running e2e tests with Protractor
   unit/                 --> unit level specs/tests
@@ -216,7 +236,7 @@ grunt e2e
 ```
 
 Behind the scenes this will also run `webdriver-manager update && webdriver-manager start`. This will download and install the latest version of the stand-alone WebDriver tool and start the Selenium web server. This script will execute the end-to-end tests against the application being hosted on the
-development server. 
+development server.
 
 
 ## Contact

app/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<!-- build:[ng-app]:e2e sn.example.e2e -->
-<html lang="en" ng-app="sn.example">
+<!-- build:[ng-app]:e2e sn.skrollr.e2e -->
+<html lang="en" ng-app="sn.skrollr">
 <!-- /build -->
     <head>
         <meta charset="utf-8">
@@ -23,12 +23,7 @@
 
         <!-- 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>
         <!-- /build -->
         <!-- build:include:e2e ../tests/e2e/scripts.html --><!-- /build -->
 

app/js/skrollr.js

@@ -0,0 +1,64 @@
+"use strict";
+/**
+ * Wrap skrollr.js
+ * @author SOON_
+ * @module sn.skrollr
+ */
+angular.module("sn.skrollr", [])
+
+/**
+ * Provider to configuring skrollr
+ * @example
+ *      snSkrollrProvider.init({ smoothScrolling: true });
+ *      snSkrollr.init();
+ */
+.provider("snSkrollr", function snSkrollrProvider() {
+
+    var _this = this;
+
+    this.config = {};
+
+    this.$get = [
+        "$window",
+        "$document",
+        "$rootScope",
+        /**
+         * @constructor
+         * @param   {Object}  $window    angular wrapper for window
+         * @param   {Object}  $rootScope angular root application scope
+         */
+        function($window, $document, $rootScope) {
+
+            return {
+                init: function() {
+
+                    $document.ready(function () {
+                        $rootScope.$apply(function() {
+                            var s = $window.skrollr.init(_this.config);
+                        });
+                    });
+
+                }
+            };
+        }
+    ];
+})
+
+/**
+ * Refresh skrollrjs on element init
+ * @class  snSkrollr
+ */
+.directive("snSkrollr", [
+    "$window",
+    /**
+     * @constructor
+     */
+    function ($window){
+        return {
+            restrict: "AE",
+            link: function($scope, $element) {
+                $window.skrollr.refresh();
+            }
+        };
+    }
+]);

bower.json

@@ -20,7 +20,7 @@
   "private": false,
   "dependencies": {
     "angular": "^1.2.17",
-    "angular-route": "^1.2.17"
+    "skrollr": "~0.6.29"
   },
   "devDependencies": {
     "angular-mocks": "^1.2.17"

scripts.json

@@ -1,12 +1,8 @@
 {
     "vendor": [
-        "app/components/angular/angular.js",
-        "app/components/angular-route/angular-route.js"
+        "app/components/angular/angular.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/skrollr.js"
     ]
 }

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.skrollr.e2e
+ * @module sn.skrollr.e2e
  * @author SOON_
  */
-angular.module("sn.example.e2e", ["sn.example", "ngMockE2E"])
+angular.module("sn.skrollr.e2e", ["sn.skrollr", "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();
 
         }