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/.travis.yml b/.travis.yml index 15951aa..19ce3ce 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:unit:development + - grunt test:unit: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..3ea43d8 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 %>' ] } } }, @@ -238,7 +254,7 @@ module.exports = function (grunt) { cwd: './app/data', src: ['**/*', '*'], dest: '<%= config.outputDir %>data/' - }] + }], }, e2e: { files: [{ @@ -253,10 +269,7 @@ module.exports = function (grunt) { }, clean: { - beforeBuild: { - src: ['<%= config.outputDir %>', './docs'] - }, - afterTest: { + dist: { src: ['<%= config.outputDir %>'] } }, @@ -300,7 +313,7 @@ module.exports = function (grunt) { commitFiles: ['-a'], createTag: true, push: true, - pushTo: 'origin master' + pushTo: 'origin' } }, @@ -347,7 +360,7 @@ module.exports = function (grunt) { options: { imports: ['app/less/**/*.less'], csslint: { - csslintrc: './app/less/.csslintrc', + csslintrc: '.csslintrc', } } }, @@ -358,10 +371,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 +404,9 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-htmllint'); grunt.registerTask('build', [ - 'clean:beforeBuild', - 'minify' + 'clean', + 'concat', + 'uglify' ]); grunt.registerTask('release', [ @@ -396,57 +415,42 @@ 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', [ + 'clean:dist', 'less:production', 'ngconstant', 'minify', @@ -455,7 +459,7 @@ module.exports = function (grunt) { 'connect:servertest', 'protractor_webdriver', 'protractor:dist', - 'clean:afterTest' + 'clean:dist' ]); grunt.registerTask('default', ['build']); diff --git a/README.md b/README.md index 844069a..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: @@ -73,12 +74,12 @@ To get you started you can simply clone the repository and install the dependenc ### 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,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 @@ -134,7 +135,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 +144,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 +158,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,52 +177,20 @@ 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 - directives/ --> directives - {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 + {app}.js --> angular module 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 {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,17 +205,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. @@ -278,39 +233,21 @@ 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 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 +259,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 678cf87..dfe5ac2 100644 --- a/app/index.html +++ b/app/index.html @@ -42,25 +42,36 @@ -