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 " ], - "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks", - "moduleType": [ - "globals" - ], "keywords": [ "animation", - "CSS3", - "callbacks" + "css3", + "callbacks", + "plugin", + "jQuery" ], "license": "MIT", "private": true, @@ -23,9 +28,5 @@ "bower_components", "test", "tests" - ], - "dependencies": { - "jquery": "~1.11.0", - "animate.css": "~3.1.1" - } + ] } diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js new file mode 100644 index 0000000..46d3116 --- /dev/null +++ b/dist/jquery.animatecss.js @@ -0,0 +1,70 @@ +/*! animateCSS - v1.1.0 - 2014-05-21 +* https://github.com/craigmdennis/animatecss +* Copyright (c) 2014 Craig Dennis; Licensed MIT */ + +(function() { + 'use strict'; + var $; + + $ = jQuery; + + $.fn.extend({ + animateCSS: function(effect, options) { + var addClass, animate, callback, complete, init, removeClass, settings, transitionEnd, unhide; + settings = { + effect: effect, + delay: 0, + animationClass: "animated", + infinite: false, + callback: options, + debug: false + }; + transitionEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"; + settings = $.extend(settings, options); + init = function(element) { + return animate(element); + }; + animate = function(element) { + if (settings.infinite === true) { + settings.animationClass += " infinite"; + } + return setTimeout(function() { + unhide(element); + addClass(element); + return complete(element); + }, settings.delay); + }; + addClass = function(element) { + return element.addClass(settings.effect + " " + settings.animationClass + " "); + }; + unhide = function(element) { + if (element.css("visibility") === "hidden") { + element.css("visibility", "visible"); + } + if (element.is(":hidden")) { + return element.show(); + } + }; + removeClass = function(element) { + return element.removeClass(settings.effect + " " + settings.animationClass); + }; + callback = function(element) { + if (settings.infinite === false) { + removeClass(element); + } + if (typeof settings.callback === "function") { + return settings.callback.call(element); + } + }; + complete = function(element) { + return element.one(transitionEnd, function() { + return callback(element); + }); + }; + return this.each(function() { + return init($(this)); + }); + } + }); + +}).call(this); diff --git a/dist/jquery.animatecss.min.js b/dist/jquery.animatecss.min.js new file mode 100644 index 0000000..382859d --- /dev/null +++ b/dist/jquery.animatecss.min.js @@ -0,0 +1,5 @@ +/*! animateCSS - v1.1.0 - 2014-05-21 +* https://github.com/craigmdennis/animatecss +* Copyright (c) 2014 Craig Dennis; Licensed MIT */ + +(function(){"use strict";var a;a=jQuery,a.fn.extend({animateCSS:function(b,c){var d,e,f,g,h,i,j,k,l;return j={effect:b,delay:0,animationClass:"animated",infinite:!1,callback:c,debug:!1},k="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",j=a.extend(j,c),h=function(a){return e(a)},e=function(a){return j.infinite===!0&&(j.animationClass+=" infinite"),setTimeout(function(){return l(a),d(a),g(a)},j.delay)},d=function(a){return a.addClass(j.effect+" "+j.animationClass+" ")},l=function(a){return"hidden"===a.css("visibility")&&a.css("visibility","visible"),a.is(":hidden")?a.show():void 0},i=function(a){return a.removeClass(j.effect+" "+j.animationClass)},f=function(a){return j.infinite===!1&&i(a),"function"==typeof j.callback?j.callback.call(a):void 0},g=function(a){return a.one(k,function(){return f(a)})},this.each(function(){return h(a(this))})}})}).call(this); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..7052077 --- /dev/null +++ b/package.json @@ -0,0 +1,46 @@ +{ + "name": "animateCSS", + "version": "1.1.2", + "description": "Animate CSS jQuery Plugin", + "keywords": [ + "jquery-plugin", + "css3", + "animation", + "callbacks" + ], + "homepage": "https://github.com/craigmdennis/animateCSS", + "bugs": "https://github.com/craigmdennis/animateCSS/issues", + "author": { + "name": "Craig Dennis", + "email": "craigmdennis@gmail.com", + "url": "https://github.com/craigmdennis" + }, + "repository": { + "type": "git", + "url": "https://github.com/craigmdennis/animateCSS.git" + }, + "licenses": [ + { + "type": "MIT", + "url": "http://opensource.org/licenses/MIT" + } + ], + "devDependencies": { + "grunt-contrib-coffee": "~0.7.0", + "grunt-contrib-jade": "~0.11.0", + "grunt-contrib-jshint": "~0.7.2", + "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-uglify": "~0.2.7", + "grunt-contrib-watch": "~0.5.3", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-connect": "~0.5.0", + "grunt-bower-install": "~1.0.0", + "grunt-bump": "~0.0.14", + "grunt-newer": "~0.6.0", + "time-grunt": "~0.2.3", + "load-grunt-tasks": "~0.2.0", + "jshint-stylish": "~0.1.3", + "grunt": "~0.4.2", + "grunt-conventional-changelog": "~1.1.0" + } +} diff --git a/src/.jshintrc b/src/.jshintrc new file mode 100644 index 0000000..1f1ee1d --- /dev/null +++ b/src/.jshintrc @@ -0,0 +1,16 @@ +{ + "curly": true, + "eqeqeq": true, + "immed": true, + "latedef": true, + "newcap": true, + "noarg": true, + "sub": true, + "undef": true, + "unused": true, + "boss": true, + "eqnull": true, + "browser": true, + "devel" : true, + "predef": ["jQuery"] +} diff --git a/src/animatecss.coffee b/src/animatecss.coffee new file mode 100644 index 0000000..f113a43 --- /dev/null +++ b/src/animatecss.coffee @@ -0,0 +1,75 @@ +'use strict'; + +# Reference jQuery +$ = jQuery + +# Adds plugin object to jQuery +$.fn.extend + + # Change pluginName to your plugin's name. + animateCSS: (effect, options) -> + + # Default settings + settings = + effect: effect + delay: 0 + animationClass: "animated", + infinite: false + callback: options + debug: false + + # Vendor prefixed transition callbacks + transitionEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend" + + # Merge default settings with options. + settings = $.extend settings, options + + # Call everything we need, in order + init = ( element ) -> + animate( element ) + + # Add the animation effect with classes + animate = ( element ) -> + if settings.infinite == true + settings.animationClass += " infinite" + + # Run a timer regardless of delay (as 0 will fire instantly anyway) + setTimeout -> + unhide( element ) + addClass( element ) + complete( element ) + , settings.delay + + # Add the animation ad effect classes to kick everything off + addClass = ( element ) -> + element.addClass( settings.effect + " " + settings.animationClass + " ") + + # Check if the element has been hidden to start with + unhide = ( element ) -> + element.css("visibility", "visible") if element.css( "visibility" ) == "hidden" + element.show() if element.is(":hidden") + + # Remove the animation classes the were applied + removeClass = ( element ) -> + element.removeClass( settings.effect + " " + settings.animationClass ) + + callback = ( element ) -> + # Only remove the animation classes if `infinite` is false + removeClass( element ) if settings.infinite == false + + # Check if the callback is a function + if typeof settings.callback == "function" + # Execute the callback and return the origin element as `this` + settings.callback.call( element ) + + # Event triggered when the animation has finished + complete = ( element ) -> + element.one( transitionEnd, -> + callback( element ) + ) + + # Maintain chainability + return @each () -> + + # Pass in the element + init( $(this) );