From db659d48edf17dad835d7bc95a992a2e6c859bc9 Mon Sep 17 00:00:00 2001
From: Edward Opare-Aryee <ed@thisissoon.com>
Date: Mon, 6 Jun 2016 11:51:18 +0100
Subject: [PATCH 1/6] enable 'affix' mode when element is at top or above
 viewport

---
 app/index.html     |  2 ++
 app/js/smartNav.js | 30 +++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/index.html b/app/index.html
index 678cf87..5813cda 100644
--- a/app/index.html
+++ b/app/index.html
@@ -42,6 +42,8 @@
   <style>
     body {
       height: 10000px;
+      margin: 0;
+      padding: 0;
     }
 
     nav {
diff --git a/app/js/smartNav.js b/app/js/smartNav.js
index a12a988..6e800a0 100644
--- a/app/js/smartNav.js
+++ b/app/js/smartNav.js
@@ -90,13 +90,28 @@ angular.module('sn.smartNav', [
          * @method calMinimisedMode
          * @param  {Number}  scrollTop
          */
-        var calMinimisedMode = function calMinimisedMode(scrollTop){
-          if (scrollTop > $element[0].offsetHeight) {
+        var calMinimisedMode = function calMinimisedMode(){
+          var positionFromTop = $element[0].getBoundingClientRect().top;
+          if (positionFromTop <= 0 ) {
             $element.addClass('minimised-mode');
           } else {
             $element.removeClass('minimised-mode');
           }
         };
+        /**
+         * Calulate if the element is at top or above viewport
+         * so we can 'affix' it to top of the viewport.
+         * @private
+         * @method calAffixedMode
+         */
+        var calAffixedMode = function calAffixedMode(){
+          var positionFromTop = $element[0].getBoundingClientRect().top;
+          if (positionFromTop <= 0 ) {
+            $element.addClass('affix');
+          } else {
+            $element.removeClass('affix');
+          }
+        };
         /**
          * window `scroll` event handler.
          * Gets the current scroll postion and calulates
@@ -110,11 +125,20 @@ angular.module('sn.smartNav', [
               scrollTop = ( (doc && doc.scrollTop) || (body && body.scrollTop) || 0 );
 
           calScrollDir(scrollTop);
-          calMinimisedMode(scrollTop);
+          calMinimisedMode();
+          calAffixedMode();
 
           lastScrollTop = scrollTop;
         };
+        /**
+         * Clear event listeners
+         * @method onDestroy
+         */
+        var onDestroy = function onDestroy(){
+          angular.element($window).off('scroll', onScroll);
+        };
 
+        $scope.$on('$destroy', onDestroy);
         angular.element($window).on('scroll', onScroll);
       }
     };

From d254fb59f710d182a6ddc7ef7cfe08de1a00a537 Mon Sep 17 00:00:00 2001
From: Edward Opare-Aryee <ed@thisissoon.com>
Date: Mon, 6 Jun 2016 12:35:21 +0100
Subject: [PATCH 2/6] add unit test

---
 app/js/smartNav.js     |   7 +--
 tests/unit/smartNav.js | 138 ++++++++++++++++++++++++++++-------------
 2 files changed, 99 insertions(+), 46 deletions(-)

diff --git a/app/js/smartNav.js b/app/js/smartNav.js
index 6e800a0..d2c984f 100644
--- a/app/js/smartNav.js
+++ b/app/js/smartNav.js
@@ -90,9 +90,8 @@ angular.module('sn.smartNav', [
          * @method calMinimisedMode
          * @param  {Number}  scrollTop
          */
-        var calMinimisedMode = function calMinimisedMode(){
-          var positionFromTop = $element[0].getBoundingClientRect().top;
-          if (positionFromTop <= 0 ) {
+        var calMinimisedMode = function calMinimisedMode(scrollTop){
+          if (scrollTop > $element[0].offsetHeight) {
             $element.addClass('minimised-mode');
           } else {
             $element.removeClass('minimised-mode');
@@ -125,7 +124,7 @@ angular.module('sn.smartNav', [
               scrollTop = ( (doc && doc.scrollTop) || (body && body.scrollTop) || 0 );
 
           calScrollDir(scrollTop);
-          calMinimisedMode();
+          calMinimisedMode(scrollTop);
           calAffixedMode();
 
           lastScrollTop = scrollTop;
diff --git a/tests/unit/smartNav.js b/tests/unit/smartNav.js
index ad47388..00a0d82 100644
--- a/tests/unit/smartNav.js
+++ b/tests/unit/smartNav.js
@@ -2,67 +2,121 @@
 
 describe('sn.smartNav', function (){
 
-  var element, $scope, $rootScope, $document, $window;
+  var element, $scope, $rootScope, $document, $window, isolatedScope;
 
   beforeEach(module('sn.smartNav'));
 
-  beforeEach(inject(function (_$rootScope_, $compile, $injector) {
-    $rootScope = _$rootScope_;
+  describe('element at top of page', function (){
 
-    $scope = $rootScope.$new();
+    beforeEach(inject(function (_$rootScope_, $compile, $injector) {
+      $rootScope = _$rootScope_;
 
-    $window = $injector.get('$window');
+      $scope = $rootScope.$new();
 
-    $document = $injector.get('$document');
-    $document[0] = {
-      body: {
-        scrollTop: 0
+      $window = $injector.get('$window');
+
+      $document = $injector.get('$document');
+      $document[0] = {
+        body: {
+          scrollTop: 0
+        }
       }
-    }
 
-    element = '<nav sn-smart-nav style="height: 160px"></nav>';
+      element = '<nav sn-smart-nav style="height: 160px"></nav>';
 
-    element = $compile(element)($scope);
-    $scope.$digest();
+      element = $compile(element)($scope);
+      $scope.$digest();
 
-  }));
+      isolatedScope = element.isolateScope();
 
-  it('should add "scrolling-down" class', function(){
-    $document[0].body.scrollTop = 0;
-    angular.element($window).triggerHandler('scroll');
-    expect(element.hasClass('scrolling-down')).toBe(false);
+    }));
 
-    $document[0].body.scrollTop = 100;
-    angular.element($window).triggerHandler('scroll');
-    expect(element.hasClass('scrolling-down')).toBe(true);
-  });
+    afterEach(function(){
+      $rootScope.$broadcast('$destroy');
+    });
+
+    it('should add "scrolling-down" class', function(){
+      $document[0].body.scrollTop = 0;
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('scrolling-down')).toBe(false);
+
+      $document[0].body.scrollTop = 100;
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('scrolling-down')).toBe(true);
+    });
 
-  it('should add "scrolling-up" class', function(){
-    $document[0].documentElement = {
-      scrollTop: 0
-    };
-    $document[0].body = undefined;
+    it('should add "scrolling-up" class', function(){
+      $document[0].documentElement = {
+        scrollTop: 0
+      };
+      $document[0].body = undefined;
+
+      $document[0].documentElement.scrollTop = 0;
+      angular.element($window).triggerHandler('scroll');
+
+      $document[0].documentElement.scrollTop = 100;
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('scrolling-up')).toBe(false);
 
-    $document[0].documentElement.scrollTop = 0;
-    angular.element($window).triggerHandler('scroll');
+      $document[0].documentElement.scrollTop = 0;
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('scrolling-up')).toBe(true);
+    });
 
-    $document[0].documentElement.scrollTop = 100;
-    angular.element($window).triggerHandler('scroll');
-    expect(element.hasClass('scrolling-up')).toBe(false);
+    it('should add "minimised-mode" class', function(){
+      $document[0].body.scrollTop = 0;
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('minimised-mode')).toBe(false);
+
+      $document[0].body.scrollTop = 200;
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('minimised-mode')).toBe(true);
+    });
 
-    $document[0].documentElement.scrollTop = 0;
-    angular.element($window).triggerHandler('scroll');
-    expect(element.hasClass('scrolling-up')).toBe(true);
   });
 
-  it('should add "minimised-mode" class', function(){
-    $document[0].body.scrollTop = 0;
-    angular.element($window).triggerHandler('scroll');
-    expect(element.hasClass('minimised-mode')).toBe(false);
+  describe('element not at top of page', function (){
+
+    beforeEach(inject(function (_$rootScope_, $compile, $injector) {
+      $rootScope = _$rootScope_;
+
+      $scope = $rootScope.$new();
+
+      $window = $injector.get('$window');
+
+      $document = $injector.get('$document');
+      $document[0] = {
+        body: {
+          scrollTop: 0
+        }
+      }
+
+      element = '<nav sn-smart-nav style="height: 160px; margin-top: 200px;"></nav>';
+
+      element = $compile(element)($scope);
+      $scope.$digest();
+
+    }));
+
+    it('should add "affix" class', function(){
+      element[0].getBoundingClientRect = function(){
+        return {
+          top: 100
+        }
+      };
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('affix')).toBe(false);
+
+      element[0].getBoundingClientRect = function(){
+        return {
+          top: -200
+        }
+      };
+      angular.element($window).triggerHandler('scroll');
+      expect(element.hasClass('affix')).toBe(true);
+    });
 
-    $document[0].body.scrollTop = 200;
-    angular.element($window).triggerHandler('scroll');
-    expect(element.hasClass('minimised-mode')).toBe(true);
   });
 
+
 });

From dc8b9606dbadd7c62ef406783a39dcbbe56457b3 Mon Sep 17 00:00:00 2001
From: Edward Opare-Aryee <ed@thisissoon.com>
Date: Mon, 6 Jun 2016 13:08:39 +0100
Subject: [PATCH 3/6] update package.json to fix build

---
 .travis.yml                  |   7 +-
 Gruntfile.js                 | 173 +++++++++++++++++------------------
 README.md                    |  91 +++++-------------
 app/index.html               |   7 ++
 package.json                 |  47 +++++-----
 tests/e2e/specs/scenarios.js |  19 +++-
 6 files changed, 155 insertions(+), 189 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 15951aa..d29d68e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "0.12"
+  - "6.1"
 env:
   global:
     - secure: h8dx7ZK94tKsp965RwL+PjUfoOcgiGYSKnwyRGPnK4Acjgl+UhhdtOW0SkgjRW2PLr2Umpfi8jKGoS3cJCiLL4vQvDmPJ6xS3BmVYWImVJwt2vCShDc6O1z82ebUE5F9QagBapYFOG3r8dOUqEYKsL+9WLsGRckLQpvQCo0EIt948UoqoVosKKD7ALaPHKeYCeAiRthCiWrN7jTnTm5U92bLtiMIZEBZrVzHpFxnUA33TIFgnkeSCyf5sO/iwjRrGO3IEXyVOKisjzXkug/ODjVXH33M5IJl7sZ+R2ZGtCQHh0CZNDI6oyAhzz9QaItA0V1YtzvbcdyAzPsP2a2izM6EgQGsnVEm2A5BzIdo4AtUalHxssf4e9kerE8cDDKruEZhNVP5lZ8wxP5Dw9Tl704AUCDDzqJZFnf8/wwg+Vyc6+hHj5TBw5vPmoNy/yBQ9GnAYvrBUba5NJ+4aDYtxzn9Qq5JuckUiQsfKUGdYNKC/wFg0U1NR+7RA0WBnp0NyTyaGtKe6oRydIaXGX1km5aqNDIgsEqMzpZULRIHfJiOF3MIVOoZesvx/14amHpuB60XxUwVUhqjRMRQ6Fmy0gjQheTVK5LTPDJxl6vMB6wXe7F6sjeO21XlZkv5oVwgzg1p+TIgrQ7dVS+fFcCnBy8ncwF6RXVr2opZtU3i76A=
@@ -10,10 +10,11 @@ before_install:
   - webdriver-manager update
 install:
   - npm install
+  - bower install
 script:
   - grunt test:development
-  - grunt test
-  - grunt e2e --ci
+  - grunt test:production
+  - grunt test:e2e --ci
 after_success:
   - ./node_modules/coveralls/bin/coveralls.js < coverage/lcov.info
 addons:
diff --git a/Gruntfile.js b/Gruntfile.js
index 804943b..68ea3be 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -7,8 +7,8 @@ module.exports = function (grunt) {
   var base = grunt.option('base-dir') || '',
       env = grunt.option('env') || 'development',
       protractorConf = grunt.option('ci') ?
-        './tests/e2e/protractor.saucelabs.conf.js' :
-        './tests/e2e/protractor.conf.js' ;
+                      './tests/e2e/protractor.saucelabs.conf.js':
+                      './tests/e2e/protractor.conf.js';
 
   grunt.initConfig({
 
@@ -35,8 +35,8 @@ module.exports = function (grunt) {
           livereload: true,
           middleware: function ( connect, options, middlewares ) {
             var rules = (base === 'dist') ?
-                [ '^/[^\.]*$ /index.html' ] :
-            [ '^/app/[^\.]*$ /app/index.html' ];
+                        [ '^/[^\.]*$ ./index.html' ] :
+                        [ '^/app/[^\.]*$ ./app/index.html' ];
             middlewares.unshift( modRewrite( rules ) );
             return middlewares;
           }
@@ -48,7 +48,7 @@ module.exports = function (grunt) {
           livereload: false,
           base: '<%= config.outputDir %>',
           middleware: function ( connect, options, middlewares ) {
-            var rules = [ '^/[^\.]*$ /index.html' ];
+            var rules = [ '^/[^\.]*$ ./index.html' ];
             middlewares.unshift( modRewrite( rules ) );
             return middlewares;
           }
@@ -58,40 +58,53 @@ module.exports = function (grunt) {
 
     watch: {
       options: {
-        nospawn: false,
-        livereload: true
+        spawn: true,
+        livereload: true,
+        event: ['changed', 'added', 'deleted']
       },
-      css: {
+      html: {
         files: [
-          './app/index.html',
-
-          './app/less/*.less',
-          './app/less/**/*.less',
-          './app/less/**/**/*.less',
+          'app/index.html',
 
-          './app/partials/*.html',
-          './app/partials/**/*.html',
-          './app/partials/**/**/*.html',
+          'app/partials/*.html',
+          'app/partials/**/*.html',
+          'app/partials/**/**/*.html',
 
-          './modules/*.html',
-          './modules/**/*.html',
-          './modules/**/**/*.html'
+          'modules/*.html',
+          'modules/**/*.html',
+          'modules/**/**/*.html'
+        ],
+        tasks: ['htmllint']
+      },
+      css: {
+        files: [
+          'app/less/*.less',
+          'app/less/**/*.less',
+          'app/less/**/**/*.less'
         ],
-        tasks: ['less:development']
+        tasks: ['lesslint','less:development']
       },
       javascript: {
         files: [
-          './scripts.json',
+          'app/data/*.json',
+          'app/data/**/*.json',
+          'app/data/**/**/*.json',
 
-          './app/js/*.js',
-          './app/js/**/*.js',
-          './app/js/**/**/*.js',
+          'app/js/*.js',
+          'app/js/**/*.js',
+          'app/js/**/**/*.js',
 
-          './tests/unit/*.js',
-          './tests/unit/**/*.js',
-          './tests/unit/**/**/*.js'
+          'tests/unit/*.js',
+          'tests/unit/**/*.js',
+          'tests/unit/**/**/*.js'
         ],
-        tasks: ['sails-linker', 'test:development']
+        tasks: ['jshint', 'test:unit:development']
+      },
+      scriptsJson: {
+        files: [
+          'scripts.json'
+        ],
+        tasks: ['sails-linker']
       }
     },
 
@@ -131,12 +144,14 @@ module.exports = function (grunt) {
     jasmine: {
       options: {
         vendor: ['<%= config.vendorFiles %>'],
-        helpers:['./app/components/angular-mocks/angular-mocks.js'],
-        specs: ['./tests/unit/**/*.js'],
+        helpers:['app/components/angular-mocks/angular-mocks.js'],
+        specs: ['tests/unit/**/*.js'],
         keepRunner: true,
       },
       development: {
-        src: ['<%= config.applicationFiles %>'],
+        src: [
+          '<%= config.applicationFiles %>'
+        ],
         options: {
           template: require('grunt-template-jasmine-istanbul'),
           templateOptions: {
@@ -182,27 +197,28 @@ module.exports = function (grunt) {
 
     concat: {
       options: {
-        sourceMap: false,
+        sourceMap: true,
         separator: ';',
         banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
         '<%= grunt.template.today(\'yyyy-mm-dd\') %> */\n'
       },
       production: {
-        src: '<%= config.applicationFiles %>',
+        src: ['<%= config.applicationFiles %>'],
         dest: '<%= config.outputDir %><%= pkg.name %>.js'
       }
     },
 
     uglify: {
       options: {
-        sourceMap: false,
+        sourceMap: true,
+        sourceMapIncludeSources: true,
         enclose: { window: 'window' },
         banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
         '<%= grunt.template.today(\'yyyy-mm-dd\') %> */\n'
       },
       production: {
         files: {
-          '<%= config.outputDir %><%= pkg.name %>.min.js': [ '<%= config.outputDir %><%= pkg.name %>.js' ]
+          '<%= config.outputDir %><%= pkg.name %>.min.js': [ '<%= config.applicationFiles %>' ]
         }
       }
     },
@@ -239,24 +255,11 @@ module.exports = function (grunt) {
           src: ['**/*', '*'],
           dest: '<%= config.outputDir %>data/'
         }]
-      },
-      e2e: {
-        files: [{
-          expand: true,
-          src: ['<%= config.vendorFiles %>'],
-          dest: '<%= config.outputDir %>',
-          rename: function(dest, src) {
-            return dest + src.replace('app/','');
-          }
-        }]
       }
     },
 
     clean: {
-      beforeBuild: {
-        src: ['<%= config.outputDir %>', './docs']
-      },
-      afterTest: {
+      dist: {
         src: ['<%= config.outputDir %>']
       }
     },
@@ -300,7 +303,7 @@ module.exports = function (grunt) {
         commitFiles: ['-a'],
         createTag: true,
         push: true,
-        pushTo: 'origin master'
+        pushTo: 'origin'
       }
     },
 
@@ -347,7 +350,7 @@ module.exports = function (grunt) {
       options: {
         imports: ['app/less/**/*.less'],
         csslint: {
-          csslintrc: './app/less/.csslintrc',
+          csslintrc: '.csslintrc',
         }
       }
     },
@@ -358,10 +361,15 @@ module.exports = function (grunt) {
      */
     htmllint: {
       options: {
-        force: true,
-        htmllintrc: './app/partials/.htmllintrc'
+        htmllintrc: '.htmllintrc'
       },
-      src: ['./app/*.html','./app/partials/**/*.html']
+      src: [
+        './app/index.html',
+
+        './app/partials/*.html',
+        './app/partials/**/*.html',
+        './app/partials/**/**/*.html'
+      ]
     }
 
   });
@@ -386,8 +394,9 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-htmllint');
 
   grunt.registerTask('build', [
-    'clean:beforeBuild',
-    'minify'
+    'clean',
+    'concat',
+    'uglify'
   ]);
 
   grunt.registerTask('release', [
@@ -396,66 +405,48 @@ module.exports = function (grunt) {
     'bump-commit'
   ]);
 
-  grunt.registerTask('minify', [
-    'concat',
-    'uglify'
-  ]);
-
   grunt.registerTask('server', [
-    'less:development',
-    'ngconstant',
-    'sails-linker',
+    'precompile',
     'connect:server',
-    'watch:css'
+    'watch'
   ]);
 
-  grunt.registerTask('serverjs', [
+  grunt.registerTask('precompile', [
     'less:development',
     'ngconstant',
-    'sails-linker',
-    'connect:server',
-    'watch:javascript'
+    'sails-linker'
   ]);
 
-  grunt.registerTask('serverall', [
-    'less:development',
-    'ngconstant',
-    'sails-linker',
-    'connect:server',
-    'watch'
+  grunt.registerTask('minify', [
+    'concat',
+    'uglify'
   ]);
 
   grunt.registerTask('lint', [
     'htmllint',
-    'lesslint'
+    'lesslint',
+    'jshint'
   ]);
 
-  grunt.registerTask('test', [
-    'clean:beforeBuild',
+  grunt.registerTask('test:unit:development', [
     'ngconstant',
-    'jshint',
-    'minify',
-    'jasmine:production',
-    'clean:afterTest'
+    'jasmine:development'
   ]);
 
-  grunt.registerTask('test:development', [
+  grunt.registerTask('test:unit:production', [
     'ngconstant',
-    'jshint',
-    'jasmine:development'
+    'minify',
+    'jasmine:production'
   ]);
 
-  grunt.registerTask('e2e', [
-    'clean:beforeBuild',
+  grunt.registerTask('test:e2e', [
+    'uglify',
     'less:production',
-    'ngconstant',
-    'minify',
     'copy',
     'processhtml:e2e',
     'connect:servertest',
     'protractor_webdriver',
-    'protractor:dist',
-    'clean:afterTest'
+    'protractor:dist'
   ]);
 
   grunt.registerTask('default', ['build']);
diff --git a/README.md b/README.md
index 844069a..f829ed0 100644
--- a/README.md
+++ b/README.md
@@ -67,18 +67,23 @@ This project structure is based on the [angular-start](https://github.com/thisis
 The project is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
 
 
+This project structure is based on the [angular-start](https://github.com/angular/angular-start) 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.
+
+
 ## Getting Started
 
 To get you started you can simply clone the repository and install the dependencies:
 
 ### Clone the Angular Smart Nav repository
 
-Clone the angular-start repository using [git][git]:
+Clone the angular-smart-nav repository using [git][git]:
 
 ```
 cd path/to/parent/directory
-git clone git@github.com:thisissoon/angular-start.git
-cd angular-start
+git clone git@github.com:thisissoon/angular-smart-nav.git
+cd angular-smart-nav
 ```
 
 
@@ -94,7 +99,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
 ```
 
@@ -134,7 +139,7 @@ And this will download the bootstrap package from bower and also update the `bow
 
 ### Run the Application
 
-We have preconfigured the project with a simple development web server.  The simplest way to start
+We have preconfigured the project with a simple development web server. The simplest way to start
 this server is:
 
 ```
@@ -143,25 +148,11 @@ grunt server
 
 Now browse to the app at `http://localhost:8000/app/`.
 
-If you are doing any javascript development you can instead run:
-
-```
-grunt serverjs
-```
-
-To run tests as well every time a javascript file is updated
-
-To watch all files run:
-
-```
-grunt serverall
-```
-
-To run tests or compile less to css when the relevent files are updated. 
+This command will watch all source files and run tests every time a javascript file is updated, compile less when a less file is updated and lint js/html/less files when they 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 -env production
@@ -171,13 +162,13 @@ The build files will then be in the `dist/` directory.
 
 ### Creating a new release
 
-To create a new release simply run: 
+To create a new release simply run:
 
 ```
 grunt release --setversion X.Y.Z
 ```
 
-Where `X.Y.Z` is the new version number. This will update `package.json` 
+Where `X.Y.Z` is the new version number. This will update `package.json`
 and `bower.json` with the new version number and then run `grunt build` before
 committing the changes to git.
 
@@ -190,40 +181,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 applied 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 applied 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 applied 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 applied 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     
+        {module}.js
     partials/           --> angular view partials (partial html templates)
       partial1.html
       partial2.html
-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
@@ -250,17 +222,17 @@ The angular-seed app comes preconfigured with unit tests. These are written in
 The easiest way to run the unit tests is to do:
 
 ```
-grunt test
+grunt test:unit:development
 ```
 
 This script will start the Jasmine test runner to execute the unit tests. You can also run:
 
 ```
-grunt serverjs
+grunt server
 ```
 
 Where the grunt watch command will sit and watch the source and test files for changes and then re-run the tests whenever any of them change.
-This is the recommended strategy; if you unit tests are being run every time you save a file then
+This is the recommended strategy; if your unit tests are being run every time you save a file then
 you receive instant feedback on any changes that break the expected code functionality.
 
 
@@ -285,32 +257,13 @@ Once you have ensured that the development web server hosting our application is
 and WebDriver is updated, you can run the end-to-end tests using the supplied grunt task:
 
 ```
-grunt e2e
+grunt test: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.
 
 
-### Docker
-
-Angular Smart Nav can be run under docker to ease portability. This section will describe how to get the application up and running under docker.
-
-Once you have docker running the first thing to do is pull the docker image.
-
-    $ docker pull soon/angular-start
-
-#### Building the Docker Image
-
-To build the image locally run:
-
-    $ docker build -t soon/angular-start .
-
-#### Running the Application
-
-    $ docker run --rm -it soon/angular-start
-
-
 ## Contact
 
 For more information on AngularJS please check out http://angularjs.org/
@@ -322,6 +275,4 @@ For more information on AngularJS please check out http://angularjs.org/
 [node]: http://nodejs.org
 [protractor]: https://github.com/angular/protractor
 [jasmine]: http://pivotal.github.com/jasmine/
-[karma]: http://karma-runner.github.io
 [travis]: https://travis-ci.org/
-[http-server]: https://github.com/nodeapps/http-server
diff --git a/app/index.html b/app/index.html
index 5813cda..d29e248 100644
--- a/app/index.html
+++ b/app/index.html
@@ -69,6 +69,13 @@
     <li><a href="#">Item 4</a></li>
   </nav>
 
+  <nav sn-smart-nav>
+    <li><a href="#">Item 1</a></li>
+    <li><a href="#">Item 2</a></li>
+    <li><a href="#">Item 3</a></li>
+    <li><a href="#">Item 4</a></li>
+  </nav>
+
   <!--[if lt IE 8]>
     <p>Your browser is <strong>ancient</strong> and will not work with this site. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
diff --git a/package.json b/package.json
index f32b0a9..d102492 100644
--- a/package.json
+++ b/package.json
@@ -5,37 +5,36 @@
   "description": "Show or hide a navbar when scrolling in any particular direction and or minimise nav when scrolling pass the navbar",
   "repository": "https://github.com/thisissoon/angular-smart-nav",
   "license": "MIT",
-  "dependencies": {
-    "bower": "~1.5.3",
-    "grunt": "~0.4.5"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "connect-livereload": "~0.5.3",
-    "connect-modrewrite": "~0.8.2",
-    "coveralls": "~2.11.2",
-    "grunt-bump": "~0.6.0",
-    "grunt-contrib-clean": "~0.6.0",
-    "grunt-contrib-concat": "~0.5.1",
-    "grunt-contrib-connect": "~0.11.2",
-    "grunt-contrib-copy": "~0.8.0",
-    "grunt-contrib-jasmine": "~0.9.2",
-    "grunt-contrib-jshint": "~0.11.1",
-    "grunt-contrib-less": "~1.0.1",
-    "grunt-contrib-uglify": "~0.9.1",
-    "grunt-contrib-watch": "~0.6.1",
-    "grunt-contrib-yuidoc": "~0.10.0",
+    "bower": "~1.5.3",
+    "connect-livereload": "~0.5.4",
+    "connect-modrewrite": "~0.9.0",
+    "coveralls": "~2.11.9",
+    "grunt": "~0.4.5",
+    "grunt-bump": "~0.7.0",
+    "grunt-contrib-clean": "~1.0.0",
+    "grunt-contrib-concat": "~1.0.0",
+    "grunt-contrib-connect": "~1.0.1",
+    "grunt-contrib-copy": "~1.0.0",
+    "grunt-contrib-jasmine": "~1.0.0",
+    "grunt-contrib-jshint": "~1.0.0",
+    "grunt-contrib-less": "~1.2.0",
+    "grunt-contrib-uglify": "~1.0.1",
+    "grunt-contrib-watch": "~1.0.0",
+    "grunt-contrib-yuidoc": "~1.0.0",
     "grunt-htmllint": "~0.2.7",
-    "grunt-lesslint": "~1.4.0",
-    "grunt-ng-constant": "~1.1.0",
-    "grunt-processhtml": "~0.3.7",
+    "grunt-lesslint": "~3.1.0",
+    "grunt-ng-constant": "~2.0.1",
+    "grunt-processhtml": "~0.3.13",
     "grunt-protractor-runner": "~2.1.0",
     "grunt-protractor-webdriver": "~0.2.5",
     "grunt-sails-linker": "~0.10.1",
-    "grunt-template-jasmine-istanbul": "~0.3.3",
+    "grunt-template-jasmine-istanbul": "~0.4.0",
     "protractor": "~2.5.1",
-    "yuidoc-bootstrap-theme": "~1.0.4"
+    "yuidoc-bootstrap-theme": "~1.0.6"
   },
   "scripts": {
-    "postinstall": "bower install"
+    "test": "grunt test:unit:development"
   }
 }
diff --git a/tests/e2e/specs/scenarios.js b/tests/e2e/specs/scenarios.js
index 2a14756..8a78c22 100644
--- a/tests/e2e/specs/scenarios.js
+++ b/tests/e2e/specs/scenarios.js
@@ -5,7 +5,8 @@
 describe('sn.smartNav', function() {
   describe('snSmartNav directive', function() {
 
-    var nav = {};
+    var nav = {},
+        secondNav = {};
 
     beforeEach(function(){
       browser.manage().deleteAllCookies();
@@ -13,6 +14,7 @@ describe('sn.smartNav', function() {
       browser.waitForAngular();
       browser.driver.sleep(2000);
       nav = element.all(by.css('nav')).first();
+      secondNav = element.all(by.css('nav'))[1];
     });
 
     it('should not contain any classes from smartNav directive', function() {
@@ -56,5 +58,20 @@ describe('sn.smartNav', function() {
       expect(nav.getAttribute('class')).toContain('minimised-mode');
     });
 
+    it('should add "affix" class', function() {
+      browser.executeScript('scrollTo(0,0)');
+      browser.driver.sleep(2000);
+      expect(nav.getAttribute('class')).not.toContain('affix');
+
+      browser.executeScript('scrollTo(0,100)');
+      browser.executeScript('scrollTo(0,200)');
+      browser.driver.sleep(2000);
+      expect(nav.getAttribute('class')).toContain('affix');
+
+      browser.executeScript('scrollTo(0,300)');
+      browser.driver.sleep(2000);
+      expect(nav.getAttribute('class')).toContain('affix');
+    });
+
   });
 });

From 6510a3b8d60e7525b98cdd6d1d7e409890c0de90 Mon Sep 17 00:00:00 2001
From: Edward Opare-Aryee <ed@thisissoon.com>
Date: Thu, 9 Jun 2016 15:55:18 +0100
Subject: [PATCH 4/6] fix e2e tests

---
 .csslintrc                             | 19 +++++++++++++++++++
 .htmllintrc                            | 13 +++++++++++++
 Gruntfile.js                           | 17 +++++++++++++++--
 app/index.html                         |  6 ++----
 tests/e2e/protractor.conf.js           | 17 ++++++++---------
 tests/e2e/protractor.saucelabs.conf.js |  8 +++-----
 6 files changed, 60 insertions(+), 20 deletions(-)
 create mode 100644 .csslintrc
 create mode 100644 .htmllintrc

diff --git a/.csslintrc b/.csslintrc
new file mode 100644
index 0000000..005b862
--- /dev/null
+++ b/.csslintrc
@@ -0,0 +1,19 @@
+{
+  "adjoining-classes": false,
+  "box-sizing": false,
+  "box-model": false,
+  "compatible-vendor-prefixes": false,
+  "floats": false,
+  "font-sizes": false,
+  "gradients": false,
+  "important": false,
+  "known-properties": false,
+  "outline-none": false,
+  "qualified-headings": false,
+  "regex-selectors": false,
+  "shorthand": false,
+  "text-indent": false,
+  "unique-headings": false,
+  "universal-selector": false,
+  "unqualified-attributes": false
+}
diff --git a/.htmllintrc b/.htmllintrc
new file mode 100644
index 0000000..34a4ec0
--- /dev/null
+++ b/.htmllintrc
@@ -0,0 +1,13 @@
+{
+  "attr-name-style": "dash",
+  "attr-quote-style": "double",
+  "id-class-style": "dash",
+  "indent-style": "spaces",
+  "indent-width": 2,
+  "line-end-style": "lf",
+  "attr-req-value": false,
+  "html-req-lang": true,
+  "title-max-length": 120,
+  "img-req-src": false,
+  "tag-bans": ["!style"]
+}
diff --git a/Gruntfile.js b/Gruntfile.js
index 68ea3be..3ea43d8 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -254,6 +254,16 @@ module.exports = function (grunt) {
           cwd: './app/data',
           src: ['**/*', '*'],
           dest: '<%= config.outputDir %>data/'
+        }],
+      },
+      e2e: {
+        files: [{
+          expand: true,
+          src: ['<%= config.vendorFiles %>'],
+          dest: '<%= config.outputDir %>',
+          rename: function(dest, src) {
+            return dest + src.replace('app/','');
+          }
         }]
       }
     },
@@ -440,13 +450,16 @@ module.exports = function (grunt) {
   ]);
 
   grunt.registerTask('test:e2e', [
-    'uglify',
+    'clean:dist',
     'less:production',
+    'ngconstant',
+    'minify',
     'copy',
     'processhtml:e2e',
     'connect:servertest',
     'protractor_webdriver',
-    'protractor:dist'
+    'protractor:dist',
+    'clean:dist'
   ]);
 
   grunt.registerTask('default', ['build']);
diff --git a/app/index.html b/app/index.html
index d29e248..20fb001 100644
--- a/app/index.html
+++ b/app/index.html
@@ -107,10 +107,8 @@
     var app = angular.module('myApp', ['sn.smartNav']);
   </script>
 
-  <!-- build:js:e2e inline components/angular-mocks/angular-mocks.js -->
-  <!-- /build -->
-  <!-- build:js:e2e inline ../tests/e2e/app.e2e.js -->
-  <!-- /build -->
+  <!-- build:js:e2e inline components/angular-mocks/angular-mocks.js --><!-- /build -->
+  <!-- build:js:e2e inline ../tests/e2e/app.e2e.js --><!-- /build -->
 
 </body>
 
diff --git a/tests/e2e/protractor.conf.js b/tests/e2e/protractor.conf.js
index 3fb4bfe..72437cb 100644
--- a/tests/e2e/protractor.conf.js
+++ b/tests/e2e/protractor.conf.js
@@ -62,16 +62,15 @@ exports.config = {
   // https://code.google.com/p/selenium/wiki/DesiredCapabilities
   // and
   // https://code.google.com/p/selenium/source/browse/javascript/webdriver/capabilities.js
-  // capabilities: {
-  //   'browserName': 'chrome'
-  // },
-  //
-
-  multiCapabilities: [{
-    'browserName': 'firefox'
-  }, {
+  capabilities: {
     'browserName': 'chrome'
-  }],
+  },
+
+  // multiCapabilities: [{
+  //   'browserName': 'firefox'
+  // }, {
+  //   'browserName': 'chrome'
+  // }],
 
   // ----- More information for your tests ----
   //
diff --git a/tests/e2e/protractor.saucelabs.conf.js b/tests/e2e/protractor.saucelabs.conf.js
index 2818177..adae588 100644
--- a/tests/e2e/protractor.saucelabs.conf.js
+++ b/tests/e2e/protractor.saucelabs.conf.js
@@ -67,14 +67,12 @@ exports.config = {
     'appiumVersion': '1.4.11',
     'deviceOrientation': 'portrait'
   },{
-    'browserName': 'Safari',
+    'browserName': 'iphone',
     'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER,
     'build': process.env.TRAVIS_BUILD_NUMBER,
-    'name':  pkg.name + ' (Safari: iOS 8.2) Build: ' + process.env.TRAVIS_BUILD_NUMBER,
-    'platformVersion': '8.2',
-    'platformName': 'iOS',
+    'name':  pkg.name + ' (Safari: iOS) Build: ' + process.env.TRAVIS_BUILD_NUMBER,
+    'platform': 'OS X 10.10',
     'deviceName': 'iPhone 6',
-    'appiumVersion': '1.3.7',
     'deviceOrientation': 'portrait'
   }],
 

From d7ad00fb225298bbb643e06592130e7f243de662 Mon Sep 17 00:00:00 2001
From: Edward Opare-Aryee <ed@thisissoon.com>
Date: Thu, 9 Jun 2016 16:20:43 +0100
Subject: [PATCH 5/6] fix tests

---
 .travis.yml                            |   4 +-
 app/index.html                         |   8 +-
 dist/angular-smart-nav.js              | 123 -------------------------
 dist/angular-smart-nav.min.js          |   2 -
 tests/e2e/protractor.saucelabs.conf.js |  13 ++-
 tests/e2e/specs/scenarios.js           |  10 +-
 6 files changed, 20 insertions(+), 140 deletions(-)
 delete mode 100644 dist/angular-smart-nav.js
 delete mode 100644 dist/angular-smart-nav.min.js

diff --git a/.travis.yml b/.travis.yml
index d29d68e..19ce3ce 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,8 +12,8 @@ install:
   - npm install
   - bower install
 script:
-  - grunt test:development
-  - grunt test:production
+  - grunt test:unit:development
+  - grunt test:unit:production
   - grunt test:e2e --ci
 after_success:
   - ./node_modules/coveralls/bin/coveralls.js < coverage/lcov.info
diff --git a/app/index.html b/app/index.html
index 20fb001..dfe5ac2 100644
--- a/app/index.html
+++ b/app/index.html
@@ -49,27 +49,29 @@
     nav {
       background-color: #e7e7e7;
       height: 100px;
+      overflow: hidden;
       text-align: center;
+      white-space: nowrap;
     }
 
     nav > li {
       display: inline-block;
       line-height: 60px;
-      padding: 20px;
+      padding: 20px 5px;
     }
   </style>
 
 </head>
 <body>
 
-  <nav sn-smart-nav>
+  <nav class="first" sn-smart-nav>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
   </nav>
 
-  <nav sn-smart-nav>
+  <nav class="second" sn-smart-nav>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
diff --git a/dist/angular-smart-nav.js b/dist/angular-smart-nav.js
deleted file mode 100644
index cc1b92d..0000000
--- a/dist/angular-smart-nav.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*! angular-smart-nav - v0.0.2 - 2015-11-03 */
-'use strict';
-/**
- * Module that detects the last scroll direction and
- * current scroll position to then add classes for
- * when the user is scrolling up or down the page
- * to show/hide the nav when scrolling in any particular
- * direction. Also when the user has scrolled beyond the
- * height of header adds a class to allow the nav to be
- * minimized or hidden.
- *
- * When the user has scrolled down the page the class
- * `scrolling-down` will be added, when scrolling up
- * `scrolling-up`. If the user has scrolled beyond the
- * height of the nav the class `minimised-mode`.
- *
- * @module   sn.smartNav
- * @main     sn.smartNav
- * @author   SOON_
- */
-angular.module('sn.smartNav', [
-
-])
-/**
- * @example
- *  `<nav sn-smart-nav></nav>`
- * @class   snSmartNav
- * @param   {Service} $window   : Angular.js wrapper for window Object
- * @param   {Service} $document : Angular.js wrapper for document Object
- */
-.directive('snSmartNav',[
-  '$window',
-  '$document',
-  function ($window, $document){
-    return {
-      restrict: 'A',
-      scope: {},
-      link: function($scope, $element){
-        /**
-         * The last recorded scrollTop position
-         * @private
-         * @property lastScrollTop
-         * @type     {Number}
-         */
-        var lastScrollTop = 0;
-        /**
-         * True if the last scroll direction was down the page
-         * @private
-         * @property scrollingDown
-         * @type     {Boolean}
-         */
-        var scrollingDown = false;
-        /**
-         * @method isScrollingDown
-         * @private
-         * @param  {Number}  currentScrollTop
-         * @return {Boolean} True if last scroll direction is down
-         */
-        var isScrollingDown = function isScrollingDown(currentScrollTop){
-          return currentScrollTop > lastScrollTop;
-        };
-        /**
-         * @method isScrollingUp
-         * @private
-         * @param  {Number}  currentScrollTop
-         * @return {Boolean} True if last scroll direction is up
-         */
-        var isScrollingUp = function isScrollingUp(currentScrollTop){
-          return currentScrollTop < lastScrollTop;
-        };
-        /**
-         * Calulate the current scroll direction and add relevent classes
-         * @private
-         * @method calScrollDir
-         * @param  {Number} scrollTop
-         */
-        var calScrollDir = function calScrollDir(scrollTop){
-          if ( scrollingDown && isScrollingUp(scrollTop) ) {
-            scrollingDown = false;
-            $element.removeClass('scrolling-down');
-            $element.addClass('scrolling-up');
-          } else if ( !scrollingDown && isScrollingDown(scrollTop) ){
-            scrollingDown = true;
-            $element.removeClass('scrolling-up');
-            $element.addClass('scrolling-down');
-          }
-        };
-        /**
-         * Calulate if the user has scrolled beyond the height of the element
-         * @private
-         * @method calMinimisedMode
-         * @param  {Number}  scrollTop
-         */
-        var calMinimisedMode = function calMinimisedMode(scrollTop){
-          if (scrollTop > $element[0].offsetHeight) {
-            $element.addClass('minimised-mode');
-          } else {
-            $element.removeClass('minimised-mode');
-          }
-        };
-        /**
-         * window `scroll` event handler.
-         * Gets the current scroll postion and calulates
-         * scroll direction and whether to enable minimise mode
-         * @private
-         * @method onScroll
-         */
-        var onScroll = function onScroll() {
-          var doc = $document[0].documentElement,
-              body = $document[0].body,
-              scrollTop = ( (doc && doc.scrollTop) || (body && body.scrollTop) || 0 );
-
-          calScrollDir(scrollTop);
-          calMinimisedMode(scrollTop);
-
-          lastScrollTop = scrollTop;
-        };
-
-        angular.element($window).on('scroll', onScroll);
-      }
-    };
-  }
-]);
diff --git a/dist/angular-smart-nav.min.js b/dist/angular-smart-nav.min.js
deleted file mode 100644
index c45bf79..0000000
--- a/dist/angular-smart-nav.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! angular-smart-nav - v0.0.2 - 2015-11-03 */
-!function(a){"use strict";angular.module("sn.smartNav",[]).directive("snSmartNav",["$window","$document",function(a,b){return{restrict:"A",scope:{},link:function(c,d){var e=0,f=!1,g=function(a){return a>e},h=function(a){return e>a},i=function(a){f&&h(a)?(f=!1,d.removeClass("scrolling-down"),d.addClass("scrolling-up")):!f&&g(a)&&(f=!0,d.removeClass("scrolling-up"),d.addClass("scrolling-down"))},j=function(a){a>d[0].offsetHeight?d.addClass("minimised-mode"):d.removeClass("minimised-mode")},k=function(){var a=b[0].documentElement,c=b[0].body,d=a&&a.scrollTop||c&&c.scrollTop||0;i(d),j(d),e=d};angular.element(a).on("scroll",k)}}}])}(window);
\ No newline at end of file
diff --git a/tests/e2e/protractor.saucelabs.conf.js b/tests/e2e/protractor.saucelabs.conf.js
index adae588..1f999f1 100644
--- a/tests/e2e/protractor.saucelabs.conf.js
+++ b/tests/e2e/protractor.saucelabs.conf.js
@@ -20,7 +20,7 @@ exports.config = {
   ],
 
   // Saucelabs capabilities reference
-  // https://docs.saucelabs.com/reference/platforms-configurator/#/
+  // https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/
   multiCapabilities: [{
     'browserName': 'chrome',
     'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER,
@@ -64,15 +64,18 @@ exports.config = {
     'platformName': 'Android',
     'platformVersion': '5.1',
     'deviceName': 'Android Emulator',
-    'appiumVersion': '1.4.11',
+    'deviceType': 'phone',
+    'appiumVersion': '1.5.2',
     'deviceOrientation': 'portrait'
   },{
-    'browserName': 'iphone',
+    'browserName': 'Safari',
     'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER,
     'build': process.env.TRAVIS_BUILD_NUMBER,
-    'name':  pkg.name + ' (Safari: iOS) Build: ' + process.env.TRAVIS_BUILD_NUMBER,
-    'platform': 'OS X 10.10',
+    'name':  pkg.name + ' (Safari: iOS 9.2) Build: ' + process.env.TRAVIS_BUILD_NUMBER,
+    'platformVersion': '9.2',
+    'platformName': 'iOS',
     'deviceName': 'iPhone 6',
+    'appiumVersion': '1.5.2',
     'deviceOrientation': 'portrait'
   }],
 
diff --git a/tests/e2e/specs/scenarios.js b/tests/e2e/specs/scenarios.js
index 8a78c22..01da82e 100644
--- a/tests/e2e/specs/scenarios.js
+++ b/tests/e2e/specs/scenarios.js
@@ -13,8 +13,8 @@ describe('sn.smartNav', function() {
       browser.get('http://127.0.0.1:8000/');
       browser.waitForAngular();
       browser.driver.sleep(2000);
-      nav = element.all(by.css('nav')).first();
-      secondNav = element.all(by.css('nav'))[1];
+      nav = element.all(by.css('nav.first')).first();
+      secondNav = element.all(by.css('nav.second')).first();
     });
 
     it('should not contain any classes from smartNav directive', function() {
@@ -61,16 +61,16 @@ describe('sn.smartNav', function() {
     it('should add "affix" class', function() {
       browser.executeScript('scrollTo(0,0)');
       browser.driver.sleep(2000);
-      expect(nav.getAttribute('class')).not.toContain('affix');
+      expect(secondNav.getAttribute('class')).not.toContain('affix');
 
       browser.executeScript('scrollTo(0,100)');
       browser.executeScript('scrollTo(0,200)');
       browser.driver.sleep(2000);
-      expect(nav.getAttribute('class')).toContain('affix');
+      expect(secondNav.getAttribute('class')).toContain('affix');
 
       browser.executeScript('scrollTo(0,300)');
       browser.driver.sleep(2000);
-      expect(nav.getAttribute('class')).toContain('affix');
+      expect(secondNav.getAttribute('class')).toContain('affix');
     });
 
   });

From a3623a86416dfd01a9bb47b361a63a5856ee8247 Mon Sep 17 00:00:00 2001
From: Edward Opare-Aryee <ed@thisissoon.com>
Date: Thu, 9 Jun 2016 17:20:57 +0100
Subject: [PATCH 6/6] update README.md

---
 README.md                     |  32 +++------
 app/js/smartNav.js            |   4 ++
 dist/angular-smart-nav.js     | 123 ++++++++++++++++++++++++++++++++++
 dist/angular-smart-nav.min.js |   2 +
 4 files changed, 137 insertions(+), 24 deletions(-)
 create mode 100644 dist/angular-smart-nav.js
 create mode 100644 dist/angular-smart-nav.min.js

diff --git a/README.md b/README.md
index f829ed0..787b6a9 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ The directive will add the following classes to your nav:
 - `scrolling-down`: when the user is scrolling down the page
 - `scrolling-up`: when the user is scrolling up the page
 - `minimised-mode`: when the user has scrolled beyond the height of the nav
+- `affix`: If the element is at the top of the viewport or above it then the class `affix` will be added
 
 You still have to add your own custom styling to the nav to hide, show or minimise the navbar. The following will hide the nav when scrolling down and display it again when scrolling up:
 
@@ -67,11 +68,6 @@ This project structure is based on the [angular-start](https://github.com/thisis
 The project is preconfigured to install the Angular framework and a bunch of development and testing tools for instant web development gratification.
 
 
-This project structure is based on the [angular-start](https://github.com/angular/angular-start) 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.
-
-
 ## Getting Started
 
 To get you started you can simply clone the repository and install the dependencies:
@@ -99,14 +95,14 @@ 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 grunt-cli
+sudo npm install -g bower grunt-cli
 ```
 
-We have preconfigured `npm` to automatically run `bower` so we can simply do:
+Then install all tooling and libraries:
 
 ```
 npm install
+bower install
 ```
 
 Behind the scenes this will also call `bower install`.  You should find that you have two new
@@ -183,16 +179,7 @@ app/                    --> all of the files to be used in production
   components/           --> all of our javascript libraries (installed using bower)
   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
-      directives/       --> directives
-        {module}.js
-    partials/           --> angular view partials (partial html templates)
-      partial1.html
-      partial2.html
+    {app}.js            --> angular module
 tests/                  --> test config and source files
   e2e/                  --> end-to-end specs
     specs/
@@ -200,14 +187,10 @@ tests/                  --> test config and source files
     protractor.conf.js  --> config file for running e2e tests with Protractor
   unit/                 --> unit level specs/tests
     {app}/              --> follows the same folder structure as javascript files in app folder
-      controllers/      --> controller folder
-        {view}Ctrl.js   --> view controller tests
-      directives/
-        {module}.js     --> module directive test
 
 ```
 
-## Testing
+### Testing
 
 There are two kinds of tests in the angular-seed application: Unit tests and End to End tests.
 
@@ -250,7 +233,8 @@ correctly. Therefore, our web server needs to be serving up the application, so
 can interact with it. To run end to end tests we first need to install protractor with global permissions. You may need to run this command with superuser privileges:
 
 ```
-npm install -g protractor && webdriver-manager update
+npm install -g protractor
+webdriver-manager update
 ```
 
 Once you have ensured that the development web server hosting our application is up and running
diff --git a/app/js/smartNav.js b/app/js/smartNav.js
index d2c984f..3ccc214 100644
--- a/app/js/smartNav.js
+++ b/app/js/smartNav.js
@@ -13,6 +13,10 @@
  * `scrolling-up`. If the user has scrolled beyond the
  * height of the nav the class `minimised-mode`.
  *
+ * If the element is at the top of the viewport or above
+ * it then the class `affix` will be added. This is useful
+ * for making an element sticky when user has scrolled to it
+ *
  * @module   sn.smartNav
  * @main     sn.smartNav
  * @author   SOON_
diff --git a/dist/angular-smart-nav.js b/dist/angular-smart-nav.js
new file mode 100644
index 0000000..cc1b92d
--- /dev/null
+++ b/dist/angular-smart-nav.js
@@ -0,0 +1,123 @@
+/*! angular-smart-nav - v0.0.2 - 2015-11-03 */
+'use strict';
+/**
+ * Module that detects the last scroll direction and
+ * current scroll position to then add classes for
+ * when the user is scrolling up or down the page
+ * to show/hide the nav when scrolling in any particular
+ * direction. Also when the user has scrolled beyond the
+ * height of header adds a class to allow the nav to be
+ * minimized or hidden.
+ *
+ * When the user has scrolled down the page the class
+ * `scrolling-down` will be added, when scrolling up
+ * `scrolling-up`. If the user has scrolled beyond the
+ * height of the nav the class `minimised-mode`.
+ *
+ * @module   sn.smartNav
+ * @main     sn.smartNav
+ * @author   SOON_
+ */
+angular.module('sn.smartNav', [
+
+])
+/**
+ * @example
+ *  `<nav sn-smart-nav></nav>`
+ * @class   snSmartNav
+ * @param   {Service} $window   : Angular.js wrapper for window Object
+ * @param   {Service} $document : Angular.js wrapper for document Object
+ */
+.directive('snSmartNav',[
+  '$window',
+  '$document',
+  function ($window, $document){
+    return {
+      restrict: 'A',
+      scope: {},
+      link: function($scope, $element){
+        /**
+         * The last recorded scrollTop position
+         * @private
+         * @property lastScrollTop
+         * @type     {Number}
+         */
+        var lastScrollTop = 0;
+        /**
+         * True if the last scroll direction was down the page
+         * @private
+         * @property scrollingDown
+         * @type     {Boolean}
+         */
+        var scrollingDown = false;
+        /**
+         * @method isScrollingDown
+         * @private
+         * @param  {Number}  currentScrollTop
+         * @return {Boolean} True if last scroll direction is down
+         */
+        var isScrollingDown = function isScrollingDown(currentScrollTop){
+          return currentScrollTop > lastScrollTop;
+        };
+        /**
+         * @method isScrollingUp
+         * @private
+         * @param  {Number}  currentScrollTop
+         * @return {Boolean} True if last scroll direction is up
+         */
+        var isScrollingUp = function isScrollingUp(currentScrollTop){
+          return currentScrollTop < lastScrollTop;
+        };
+        /**
+         * Calulate the current scroll direction and add relevent classes
+         * @private
+         * @method calScrollDir
+         * @param  {Number} scrollTop
+         */
+        var calScrollDir = function calScrollDir(scrollTop){
+          if ( scrollingDown && isScrollingUp(scrollTop) ) {
+            scrollingDown = false;
+            $element.removeClass('scrolling-down');
+            $element.addClass('scrolling-up');
+          } else if ( !scrollingDown && isScrollingDown(scrollTop) ){
+            scrollingDown = true;
+            $element.removeClass('scrolling-up');
+            $element.addClass('scrolling-down');
+          }
+        };
+        /**
+         * Calulate if the user has scrolled beyond the height of the element
+         * @private
+         * @method calMinimisedMode
+         * @param  {Number}  scrollTop
+         */
+        var calMinimisedMode = function calMinimisedMode(scrollTop){
+          if (scrollTop > $element[0].offsetHeight) {
+            $element.addClass('minimised-mode');
+          } else {
+            $element.removeClass('minimised-mode');
+          }
+        };
+        /**
+         * window `scroll` event handler.
+         * Gets the current scroll postion and calulates
+         * scroll direction and whether to enable minimise mode
+         * @private
+         * @method onScroll
+         */
+        var onScroll = function onScroll() {
+          var doc = $document[0].documentElement,
+              body = $document[0].body,
+              scrollTop = ( (doc && doc.scrollTop) || (body && body.scrollTop) || 0 );
+
+          calScrollDir(scrollTop);
+          calMinimisedMode(scrollTop);
+
+          lastScrollTop = scrollTop;
+        };
+
+        angular.element($window).on('scroll', onScroll);
+      }
+    };
+  }
+]);
diff --git a/dist/angular-smart-nav.min.js b/dist/angular-smart-nav.min.js
new file mode 100644
index 0000000..c45bf79
--- /dev/null
+++ b/dist/angular-smart-nav.min.js
@@ -0,0 +1,2 @@
+/*! angular-smart-nav - v0.0.2 - 2015-11-03 */
+!function(a){"use strict";angular.module("sn.smartNav",[]).directive("snSmartNav",["$window","$document",function(a,b){return{restrict:"A",scope:{},link:function(c,d){var e=0,f=!1,g=function(a){return a>e},h=function(a){return e>a},i=function(a){f&&h(a)?(f=!1,d.removeClass("scrolling-down"),d.addClass("scrolling-up")):!f&&g(a)&&(f=!0,d.removeClass("scrolling-up"),d.addClass("scrolling-down"))},j=function(a){a>d[0].offsetHeight?d.addClass("minimised-mode"):d.removeClass("minimised-mode")},k=function(){var a=b[0].documentElement,c=b[0].body,d=a&&a.scrollTop||c&&c.scrollTop||0;i(d),j(d),e=d};angular.element(a).on("scroll",k)}}}])}(window);
\ No newline at end of file