diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..6ad533f --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "src/bower_components" +} diff --git a/.editorconfig b/.editorconfig index 8951c39..5d415a3 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,4 +1,4 @@ -# editorconfig.org +# http://editorconfig.org root = true [*] @@ -9,3 +9,6 @@ end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore index 0e382fa..98a6a5b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,5 @@ node_modules -.tmp -.sass-cache bower_components - +/.tmp +/test .DS_Store -.sublime-workspace diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..1d35ce1 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,21 @@ +{ + "node": true, + "browser": true, + "esnext": true, + "bitwise": true, + "camelcase": true, + "curly": true, + "eqeqeq": true, + "immed": true, + "indent": 2, + "latedef": true, + "newcap": true, + "noarg": true, + "quotmark": "single", + "regexp": true, + "undef": true, + "unused": true, + "strict": true, + "trailing": true, + "smarttabs": true +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..2cdacaf --- /dev/null +++ b/.travis.yml @@ -0,0 +1,4 @@ +language: node_js +node_js: + - '0.10' + - '0.8' diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..95017fd --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,20 @@ + +## 1.1.0 (2014-05-21) + + +#### Features + +* add the ability to use animation loops ([b477632b](https://github.com/craigmdennis/animatecss/commit/b477632bc87f6d96d7ed2fd0ced0aec296c35952)) + + +#### Breaking Changes + +* Delay can no longer be specified in the plugin shorthand ([89e7da1a](https://github.com/craigmdennis/animatecss/commit/89e7da1af66ba58c0078b426353b281b227c6844)) + +Before: + +`$('#your-id').animateCSS('fadeIn', 2000);` + +After: + +`$('#your-id').animateCSS('fadeIn', {delay:2000});` diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..17f3c43 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,26 @@ +# Contributing + +## Important notes +Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory! + +### Code style +Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** + +## Modifying the code +First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. + +Test that Grunt's CLI and Bower are installed by running `grunt --version` and `bower --version`. If the commands aren't found, run `npm install -g grunt-cli bower`. For more information about installing the tools, see the [getting started with Grunt guide](http://gruntjs.com/getting-started) or [bower.io](http://bower.io/) respectively. + +1. Fork and clone the repo. +1. Run `npm install` to install all build dependencies (including Grunt). +1. Run `bower install` to install the front-end dependencies. +1. Run `grunt` to grunt this project. + +Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. + +## Submitting pull requests + +1. Create a new branch, please don't work in your `master` branch directly. +1. Fix stuff. +1. Update the documentation to reflect any changes. +1. Push to your fork and submit a pull request. diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..925a884 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,175 @@ +'use strict'; + +module.exports = function (grunt) { + // Load all grunt tasks + require('load-grunt-tasks')(grunt); + // Show elapsed time at the end + require('time-grunt')(grunt); + + // Project configuration. + grunt.initConfig({ + // Metadata. + pkg: grunt.file.readJSON('package.json'), + banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' + + '<%= grunt.template.today("yyyy-mm-dd") %>\n' + + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + + ' Licensed MIT */\n\n', + // Task configuration. + clean: { + files: ['dist', '.tmp'] + }, + + concat: { + options: { + banner: '<%= banner %>', + stripBanners: true + }, + dist: { + src: ['.tmp/<%= pkg.name %>.js'], + dest: 'dist/jquery.<%= pkg.name %>.js' + } + }, + + uglify: { + options: { + banner: '<%= banner %>' + }, + dist: { + src: '<%= concat.dist.dest %>', + dest: 'dist/jquery.<%= pkg.name %>.min.js' + } + }, + + jade: { + options: { + pretty: true + }, + dist: { + files: [{ + expand: true, + cwd: 'test/', + dest: '.tmp/', + src: '*.jade', + ext: '.html' + }] + }, + }, + + coffee: { + dist: { + files: [{ + expand: true, + cwd: 'src', + src: '{,*/}*.coffee', + dest: '.tmp/', + ext: '.js' + }] + } + }, + + jshint: { + options: { + reporter: require('jshint-stylish') + }, + gruntfile: { + options: { + jshintrc: '.jshintrc' + }, + src: 'Gruntfile.js' + }, + dist: { + options: { + jshintrc: 'src/.jshintrc' + }, + src: ['.tmp/{,*/}*.js'] + } + }, + + watch: { + gruntfile: { + files: '<%= jshint.gruntfile.src %>', + tasks: ['jshint:gruntfile'] + }, + jade: { + files: ['test/*.jade'], + tasks: ['jade'] + }, + coffee: { + files: ['src/{,*/}*.coffee'], + tasks: ['coffee'] + }, + livereload: { + options: { + livereload: '<%= connect.options.livereload %>' + }, + files: [ + '.tmp/{,*/}*.*', + ] + } + }, + + bump: { + options: { + files: ['package.json', 'bower.json', '<%= pkg.name %>.jquery.json'], + push: true, + pushTo: 'origin', + createTag: true, + tagName: 'v%VERSION%', + tagMessage: 'Version %VERSION%', + commitFiles: '<%= bump.options.files %>', + commitMessage: 'Bumped version to v%VERSION%' + } + }, + + changelog: { + options: { + editor: 'atom -w' + } + }, + + connect: { + options: { + hostname: '0.0.0.0', + livereload: 35729, + port: 9000 + }, + livereload: { + options: { + open: true, + base: [ + '.tmp/', + 'src/' + ] + } + }, + } + }); + + // Default task. + grunt.registerTask('default', [ + 'clean', + 'compile', + 'jshint:dist', + 'concat', + 'uglify', + ]); + + // Compile Jade and CoffeeScript + grunt.registerTask('compile', [ + 'newer:coffee', + 'newer:jade' + ]); + + // Server task + grunt.registerTask('server', function () { + grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); + grunt.task.run(['serve']); + }); + + grunt.registerTask('serve', [ + 'compile', // jade, coffeescript + 'connect', + 'watch' + ]); +}; diff --git a/README.md b/README.md index 8248133..504c02c 100644 --- a/README.md +++ b/README.md @@ -1,44 +1,104 @@ -Use the animate.css animations from http://daneden.me/animate/ +# Animate CSS jQuery Plugin -## USAGE: +A jQuery plugin to dynamically apply [Dan Eden's animate.css][animate.css] animations with callbacks -Basic -
+[animate.css]: http://daneden.github.io/animate.css/
+
+## Getting Started
+
+Download the [production version][min] or the [development version][max].
+
+[min]: https://raw.github.com/craigmdennis/animateCSS/master/dist/jquery.animatecss.min.js
+[max]: https://raw.github.com/craigmdennis/animateCSS/master/dist/jquery.animatecss.js
+
+In your web page:
+
+```html
+
+
+
+```
+
+## Documentation
+
+```js
+{
+ infinite: false, // True or False
+ animationClass: "animate", // Can be any class
+ delay: 0 // Can be any value (in ms)
+ callback: // Any function
+}
+```
+
+When using `infinite: true` and a delay, the delay will only occur before the first loop, not on every loop.
+
+## Examples
+
+### Basic
+```js
$('#your-id').animateCSS('fadeIn');
-
+```
-With callback
-
+### With callback
+```js
$('#your-id').animateCSS('fadeIn', function(){
- alert('Boom! Animation Complete');
+ console.log('Boom! Animation Complete');
});
-
+```
-With delay (in ms)
-
-$('#your-id').animateCSS('fadeIn', 500);
-
+### With delay (in ms)
+```js
+$('#your-id').animateCSS('fadeIn', {delay: 500});
+```
-With delay AND callback
-
-$('#your-id').animateCSS('fadeIn', 1000, function(){
- alert('Boom! Animation Complete');
+### With delay AND callback
+```js
+$('#your-id').animateCSS('fadeIn', {
+ delay: 1000,
+ callback: function(){
+ console.log('Boom! Animation Complete');
+ }
+});
+```
+
+### Chain multiple animations
+If you use the standard jQuery chaining mechanism, each animation will fire at the same time so you have to include the next animation in the callback.
+```js
+$('#your-id').animateCSS('fadeInUp', function() {
+ console.log('Boom! First animation Complete');
+ $(this).animateCSS("fadeOutUp", function(){
+ console.log('Boom Boom! Second animation Complete');
+ })
});
-
+```
+
+### Offset animations
+You can offset animations by using the delay mechanism
+```js
+$('#your-id').animateCSS('fadeIn');
+$('#another-id').animateCSS('fadeIn', {delay:100});
+```
If you want to hide an element when the page loads and then apply an effect, it might look something like this:
-
-<style>
- .js #your-id {
- visibility:hidden;
- }
-</style>
+```css
+.js #your-id {
+ visibility:hidden;
+}
+```
+```js
$(window).load( function(){
- $('#your-id').animateCSS('fadeIn', 1000, function(){
- alert('Boom! Animation Complete');
- });
+ $('#your-id').animateCSS('fadeIn', function(){
+ alert('Boom! Animation Complete');
+ });
});
-
+```
+
+## Release History
+Please consult the official [changelog][changelog]
-Remember to use a .js (or .no-js depending on how you role) so that the element still displays for non javascript users (and Google previews).
\ No newline at end of file
+[changelog]: https://github.com/craigmdennis/animateCSS/blob/master/CHANGELOG.md
diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json
index f279f24..c53c919 100644
--- a/animateCSS.jquery.json
+++ b/animateCSS.jquery.json
@@ -1,28 +1,31 @@
{
- "name": "animateCSS",
- "title": "jQuery animateCSS",
- "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
- "keywords": [
- "animation",
- "CSS3",
- "callbacks"
- ],
- "version": "1.0.6",
- "author": {
- "name": "Craig Dennis",
- "url": "https://github.com/craigmdennis",
- "email": "hello@craigmdennis.com"
- },
- "licenses": [
- {
- "type": "MIT",
- "url": "https://github.com/craigmdennis/animateCSS/blob/master/LICENCE"
- }
- ],
- "bugs": "https://github.com/craigmdennis/animateCSS/issues",
- "homepage": "https://github.com/craigmdennis/animateCSS",
- "docs": "https://github.com/craigmdennis/animateCSS",
- "dependencies": {
- "jquery": ">=1.5.0"
+ "name": "animateCSS",
+ "title": "Animate CSS jQuery Plugin",
+ "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
+ "version": "1.1.2",
+ "homepage": "https://github.com/craigmdennis/animateCSS.git",
+ "author": {
+ "name": "Craig Dennis",
+ "url": "https://github.com/craigmdennis"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/craigmdennis/animateCSS.git"
+ },
+ "bugs": "https://github.com/craigmdennis/animateCSS/issues",
+ "licenses": [
+ {
+ "type": "MIT",
+ "url": "http://opensource.org/licenses/MIT"
}
-}
\ No newline at end of file
+ ],
+ "dependencies": {
+ "jquery": "~1.11.0"
+ },
+ "keywords": [
+ "jquery-plugin",
+ "animation",
+ "callbacks",
+ "css3"
+ ]
+}
diff --git a/animateCSS.js b/animateCSS.js
deleted file mode 100644
index fa09c73..0000000
--- a/animateCSS.js
+++ /dev/null
@@ -1,82 +0,0 @@
-(function ($, window, document, undefined) {
-
- // Function-level strict mode syntax
- 'use strict';
-
- $.fn.animateCSS = function (effect, delay, callback) {
-
- // Return this to maintain chainability
- return this.each(function () {
-
- // Cache $(this) for speed and compression
- var $this = $(this),
- transitionEnd = "webkitAnimationEnd oanimationend msAnimationEnd animationend",
- animated = "animated",
- visibility = "visibility",
- visible = "visible",
- hidden = "hidden";
-
- // Create a function we can call later
- function run() {
-
- // Add the animation effect with classes
- $this.addClass( animated + " " + effect);
-
- // Check if the elemenr has been hidden to start with
- if ($this.css( visibility ) === hidden) {
-
- // If it has, show it (after the class has been added)
- $this.css( visibility, visible);
-
- }
-
- // If the element is hidden
- if ($this.is(":" + hidden)) {
-
- // Show it
- $this.show();
-
- }
-
- // Event triggered when the animation has finished
- $this.bind( transitionEnd, function () {
-
- // Remove the classes so they can be added again later
- $this.removeClass(animated + " " + effect);
-
- // Add a callback event
- if (typeof callback === "function") {
-
- // Execute the callback
- callback.call(this);
-
- // Unbind the event handlers
- $this.unbind( transitionEnd );
-
- }
-
- });
-
- }
-
- // Check if delay exists or if it"s a callback
- if (!delay || typeof delay === "function") {
-
- // If it"s a callback, move it to callback so we can call it later
- callback = delay;
-
- // Run the animation (without delay)
- run();
-
- } else {
-
- // Start a counter so we can delay the animation if required
- setTimeout( run, delay );
-
- }
-
- });
-
- };
-
-})(jQuery, window, document);
diff --git a/animateCSS.min.js b/animateCSS.min.js
deleted file mode 100644
index ceb36ca..0000000
--- a/animateCSS.min.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(e,t,n,r){"use strict";e.fn.animateCSS=function(t,n,r){return this.each(function(){function l(){i.addClass(o+" "+t);if(i.css(u)===f){i.css(u,a)}if(i.is(":"+f)){i.show()}i.bind(s,function(){i.removeClass(o+" "+t);if(typeof r==="function"){r.call(this);i.unbind(s)}})}var i=e(this),s="webkitAnimationEnd oanimationend msAnimationEnd animationend",o="animated",u="visibility",a="visible",f="hidden";if(!n||typeof n==="function"){r=n;l()}else{setTimeout(l,n)}})}})(jQuery,window,document)
diff --git a/bower.json b/bower.json
index b504ba9..f4127b4 100644
--- a/bower.json
+++ b/bower.json
@@ -1,19 +1,24 @@
{
"name": "animateCSS",
- "main": "animateCSS.js",
- "version": "1.0.6",
+ "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
+ "main": "dist/jquery.animatecss.js",
+ "version": "1.1.2",
+ "dependencies": {
+ "animate.css": "~3.1.1"
+ },
+ "devDependencies": {
+ "jquery": "~1.11.0"
+ },
"homepage": "https://github.com/craigmdennis/animateCSS",
"authors": [
"Craig Dennis