diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..5e6701a --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory" : "bower_components" +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ba45a03 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +coverage +node_modules +.idea +npm-debug.log diff --git a/.jsbeautifyrc b/.jsbeautifyrc new file mode 100644 index 0000000..37b4c27 --- /dev/null +++ b/.jsbeautifyrc @@ -0,0 +1,18 @@ +{ + "indent_size": 2, + "indent_char": " ", + "indent_level": 0, + "indent_with_tabs": false, + "preserve_newlines": true, + "max_preserve_newlines": 2, + "jslint_happy": false, + "brace_style": "end-expand", + "indent_scripts": "keep", + "keep_array_indentation": true, + "keep_function_indentation": false, + "space_before_conditional": true, + "break_chained_methods": false, + "eval_code": false, + "unescape_strings": false, + "wrap_line_length": 0 +} diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..8ff005c --- /dev/null +++ b/.jshintrc @@ -0,0 +1,28 @@ +{ + "globalstrict": true, + "debug": false, + "node": false, + "devel": true, + "boss": true, + "curly": false, + "eqeqeq": true, + "eqnull": true, + "expr": true, + "immed": true, + "loopfunc": true, + "noarg": true, + "onevar": false, + "quotmark": "single", + "smarttabs": true, + "trailing": true, + "undef": true, + "unused": false, + "globals": { + "angular": false, + "$": false, + "jQuery": false, + "Backbone": false, + "_": false, + "document": false + } +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..8e1229f --- /dev/null +++ b/.travis.yml @@ -0,0 +1,7 @@ +language: node_js +node_js: + - "0.10" +before_script: + - npm install -g bower + - bower install +script: "grunt" diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..3d0d600 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +Copyright 2015 Robert Pocklington +http://github.com/rpocklin/angular-scroll-animate + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..736848f --- /dev/null +++ b/README.md @@ -0,0 +1,123 @@ +# Angular Scroll Animate + +An Angular.js directive which allows you to perform any javascript actions (in the controller, or on the element) +when an element is scrolled into or out of, the users viewport, without requiring any other dependencies. + +# Motivation + +`ngAnimate` is great if you want animations based on showing or hiding elements based on some behaviour, but what +if you want to trigger behaviour when an element is scrolled into, or out of the user's view? + +The goal of this directive is to be small and focused around behaviour that changes when scrolled in and out of view, +without requiring jQuery. You can add / remove CSS classes in the callbacks, or execute any arbitrary javascript +you want, such as pre-loading of data or anything else. + +# Demo / Example + +[Demo](http://rpocklin.github.io/angular-scroll-animate/example/index.html) + + +# Inspiration +[ngAnimate](https://docs.angularjs.org/api/ngAnimate) +[angular-inview](https://github.com/thenikso/angular-inview) + +## Installation + +1. Install the plugin into your Angular.js project, manually or via + + `bower install angular-scroll-animate --save` + +1. Include `angular-scroll-animate.js` in your app: + + `` + +1. Add `angular-scroll-animate` as a new module dependency in your angular app. + + `var myapp = angular.module('myapp', ['angular-scroll-animate']);` + +1. Ensure you have a CSS class to mask the visibility of an element eg. + ```css + .hidden { + visibility: hidden; + } + ``` + + Add this to the elements class if you want it to be hidden initially when out of a user's view, + and remove it on the `animateElementIn` callback and add it back on `animateElementOut` callback. + +Example markup: + ```html + + + ``` + + ```javascript + // controller + $scope.cars = [ ... ]; + + $scope.animateElementIn = function($el) { + $el.removeClass('hidden'); + $el.addClass('animated fadeInUp'); + }; + + $scope.animateElementOut = function($el) { + $el.addClass('hidden'); + $el.removeClass('animated fadeInUp'); + }; + ``` + + +## Notes + +- `when-visible($el)`: [required] function (executed in the controller scope) which is called when the element + is scrolled into view. +- `when-not-visible($el)`: [optional] function (executed in the controller scope) which is called when the element is + moved out of view via scrolling. + +- `delay-percent="0.50"`: [optional] decimal value which represents how much of the element should be in the users + viewport before triggering the bound callback. `0.25` is set as a default, a lower value will make it more eager, + a higher value will make it lazier. + +- To ensure fast CSS3 transition rules are used for animations, I recommend either [velocity.js](http://julian.com/research/velocity/) or + [animate.css](https://daneden.github.io/animate.css/) which come with many pre-built CSS animation classes. + +- Default event bindings are on `scroll` `resize` and `orientationchange` of the document this directive is loaded in. + +## Running Locally + +1. Checkout git repository locally: `git clone git@github.com:rpocklin/angular-scroll-animate.git` +1. `npm install` +1. `bower install` +1. `grunt serve` +1. View `http://localhost:9000/example/` in your browser to see the example. + + +## Contributing + +1. Fork it +2. Create your feature branch (`git checkout -b my-new-feature`) +3. Commit your changes (`git commit -am 'Added some feature'`) +4. Push to the branch (`git push origin my-new-feature`) +5. Create a new Pull Request + + +## History + +* 0.8.0 Initial release + + +## TODO +- Add debounce timing +- Consider using events instead? +- Add refresh triggers on `resize` and `orientationchange` +- Add some tests +- Get more feedback and feedback on different browsers (especially mobile / tablets). + + +## License + +Released under the MIT License. See the [LICENSE][license] file for further details. + +[license]: https://github.com/rpocklin/angular-timeline/blob/master/LICENSE diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..4658204 --- /dev/null +++ b/bower.json @@ -0,0 +1,41 @@ +{ + "name": "angular-scroll-animate", + "version": "0.8.0", + "license": "MIT", + "main": [ + "dist/angular-scroll-animate.js" + ], + "keywords": [ + "angular", + "directive", + "scroll", + "animate", + "visible", + "view", + "viewport", + "lazy" + ], + "ignore": [ + "**/.*", + "*.yml", + ".jshintrc", + "node_modules", + "bower_components", + "example", + "Gruntfile.js", + "package.json", + "component.json", + "karma.conf.js", + "src" + ], + "dependencies": { + "angular": "^1.3.15" + }, + "devDependencies": { + "angular-mocks": "^1.3.15", + "sinon": "^1.9.0", + "jasmine-sinon": "^0.3.1", + "underscore": "^1.7.0", + "animate.css": "^3.1.0" + } +} diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..34be073 --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,56 @@ +// Karma configuration +// http://karma-runner.github.io/0.10/config/configuration-file.html + +module.exports = function(config) { + config.set({ + // base path, that will be used to resolve files and exclude + basePath: '', + + // testing framework to use (jasmine/mocha/q unit/...) + frameworks: ['jasmine'], + + // list of files / patterns to load in the browser + files: [ + 'bower_components/jquery/dist/jquery.js', + 'bower_components/angular/angular.js', + 'bower_components/underscore/underscore.js', + 'bower_components/sinonjs/sinon.js', + 'bower_components/jasmine-sinon/lib/jasmine-sinon.js', + 'bower_components/angular-mocks/angular-mocks.js', + 'src/**/*.html', + 'src/**/*.js' + ], + + exclude: [], + port: 8080, + logLevel: config.LOG_INFO, + singleRun: true, + autoWatch: false, + + // coverage reporter generates the coverage + reporters: ['progress', 'coverage'], + + preprocessors: { + 'src/!(*spec).js': ['coverage'], + 'src/**/*.html': ['ng-html2js'] + }, + + ngHtml2JsPreprocessor: { + // you might need to strip the main directory prefix in the URL request + stripPrefix: 'src/', + moduleName: 'templates' + }, + + // optionally, configure the reporter + coverageReporter: { + dir: 'coverage', + subdir: '.', + reporters: [ + {type: 'text-summary'}, + {type: 'lcov'}, + {type: 'clover'} + ] + } + }); +}; + diff --git a/package.json b/package.json new file mode 100644 index 0000000..ca9a196 --- /dev/null +++ b/package.json @@ -0,0 +1,52 @@ +{ + "name": "angular-scroll-animate", + "description": "", + "homepage": "https://github.com/rpocklin/angular-scroll-animate", + "author": "Robert Pocklington ", + "repository": { + "type": "git", + "url": "http://github.com/npm/npm.git" + }, + "keywords": [ + "angular", + "directive", + "scroll", + "animate", + "visible", + "view", + "viewport", + "lazy" + ], + "version": "0.8.0", + "license": "MIT", + "dependencies": { + "angular": "^1.3.15" + }, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-autoprefixer": "~0.7.3", + "grunt-cli": "~0.1.13", + "grunt-contrib-clean": "^0.6.0", + "grunt-contrib-concat": "^0.5.0", + "grunt-contrib-connect": "~0.8.0", + "grunt-contrib-jshint": "~0.7.1", + "grunt-contrib-watch": "~0.6.1", + "grunt-jsbeautifier": "~0.2.7", + "grunt-karma": "~0.6.2", + "grunt-karma-coveralls": "~2.3.0", + "grunt-ngdocs": "^0.2.5", + "grunt-sass": "^0.16.1", + "jshint-stylish": "~0.1.3", + "karma": "~0.10.9", + "karma-coverage": "~0.2.4", + "karma-jasmine": "~0.1.5", + "karma-ng-html2js-preprocessor": "~0.1.0", + "karma-phantomjs-launcher": "~0.1.4", + "load-grunt-tasks": "~0.6.0", + "phantomjs": "~1.9.7-15", + "time-grunt": "~0.2.1" + }, + "engines": { + "node": ">=0.10.0" + } +}