Date: Tue, 20 May 2014 02:59:55 +0100
Subject: [PATCH 01/19] Initial structural commit for v1.1
---
.bowerrc | 3 +
.editorconfig | 5 +-
.gitignore | 10 +---
.jshintrc | 21 +++++++
.travis.yml | 4 ++
CONTRIBUTING.md | 32 +++++++++++
Gruntfile.js | 103 +++++++++++++++++++++++++++++++++
README.md | 61 ++++++++------------
animateCSS.jquery.json | 55 +++++++++---------
animateCSS.js | 82 ---------------------------
animateCSS.min.js | 1 -
bower.json | 30 +++++-----
package.json | 37 ++++++++++++
src/.jshintrc | 15 +++++
src/animatecss.js | 122 ++++++++++++++++++++++++++++++++++++++++
test/.jshintrc | 32 +++++++++++
test/animatecss.html | 27 +++++++++
test/animatecss_test.js | 62 ++++++++++++++++++++
18 files changed, 534 insertions(+), 168 deletions(-)
create mode 100644 .bowerrc
create mode 100644 .jshintrc
create mode 100644 .travis.yml
create mode 100644 CONTRIBUTING.md
create mode 100644 Gruntfile.js
delete mode 100644 animateCSS.js
delete mode 100644 animateCSS.min.js
create mode 100644 package.json
create mode 100644 src/.jshintrc
create mode 100644 src/animatecss.js
create mode 100644 test/.jshintrc
create mode 100644 test/animatecss.html
create mode 100644 test/animatecss_test.js
diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..44491d3
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "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..d85ec29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,3 @@
-node_modules
-.tmp
-.sass-cache
-bower_components
-
-.DS_Store
-.sublime-workspace
+/node_modules/
+/bower_components/
+dist
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/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..e9a8b47
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,32 @@
+# 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.**
+
+### PhantomJS
+While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers.
+
+## 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. Add failing tests for the change you want to make. Run `grunt` to see the tests fail.
+1. Fix stuff.
+1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
+1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere.
+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..f49c4e7
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,103 @@
+'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',
+ // Task configuration.
+ clean: {
+ files: ['dist']
+ },
+ concat: {
+ options: {
+ banner: '<%= banner %>',
+ stripBanners: true
+ },
+ dist: {
+ src: ['src/<%= 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'
+ }
+ },
+ qunit: {
+ all: {
+ options: {
+ urls: ['http://localhost:9000/test/<%= pkg.name %>.html']
+ }
+ }
+ },
+ jshint: {
+ options: {
+ reporter: require('jshint-stylish')
+ },
+ gruntfile: {
+ options: {
+ jshintrc: '.jshintrc'
+ },
+ src: 'Gruntfile.js'
+ },
+ src: {
+ options: {
+ jshintrc: 'src/.jshintrc'
+ },
+ src: ['src/**/*.js']
+ },
+ test: {
+ options: {
+ jshintrc: 'test/.jshintrc'
+ },
+ src: ['test/**/*.js']
+ }
+ },
+ watch: {
+ gruntfile: {
+ files: '<%= jshint.gruntfile.src %>',
+ tasks: ['jshint:gruntfile']
+ },
+ src: {
+ files: '<%= jshint.src.src %>',
+ tasks: ['jshint:src', 'qunit']
+ },
+ test: {
+ files: '<%= jshint.test.src %>',
+ tasks: ['jshint:test', 'qunit']
+ }
+ },
+ connect: {
+ server: {
+ options: {
+ hostname: '*',
+ port: 9000
+ }
+ }
+ }
+ });
+
+ // Default task.
+ grunt.registerTask('default', ['jshint', 'connect', 'qunit', 'clean', 'concat', 'uglify']);
+ 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', ['connect', 'watch']);
+ grunt.registerTask('test', ['jshint', 'connect', 'qunit']);
+};
diff --git a/README.md b/README.md
index 8248133..05d707e 100644
--- a/README.md
+++ b/README.md
@@ -1,44 +1,31 @@
-Use the animate.css animations from http://daneden.me/animate/
+# Animate CSS jQuery Plugin
-## USAGE:
+A jQuery plugin to dynamically apply animate.css animations with callbacks
-Basic
-
-$('#your-id').animateCSS('fadeIn');
-
+## Getting Started
-With callback
-
-$('#your-id').animateCSS('fadeIn', function(){
- alert('Boom! Animation Complete');
-});
-
+Download the [production version][min] or the [development version][max].
-With delay (in ms)
-
-$('#your-id').animateCSS('fadeIn', 500);
-
+[min]: https://raw.github.com/craigmdennis/jquery-animatecss/master/dist/jquery.animatecss.min.js
+[max]: https://raw.github.com/craigmdennis/jquery-animatecss/master/dist/jquery.animatecss.js
-With delay AND callback
-
-$('#your-id').animateCSS('fadeIn', 1000, function(){
- alert('Boom! Animation Complete');
-});
-
-
-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>
-
-$(window).load( function(){
- $('#your-id').animateCSS('fadeIn', 1000, function(){
- alert('Boom! Animation Complete');
- });
+In your web page:
+
+```html
+
+
+
+```
+
+## Documentation
+_(Coming soon)_
+
+## Examples
+_(Coming soon)_
-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
+## Release History
+_(Nothing yet)_
diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json
index f279f24..ccc5562 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.0.7",
+ "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..825cc17 100644
--- a/bower.json
+++ b/bower.json
@@ -1,19 +1,25 @@
{
- "name": "animateCSS",
- "main": "animateCSS.js",
- "version": "1.0.6",
+ "name": "animatecss",
+ "description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
+ "main": "dist/jquery.animatecss.js",
+ "version": "1.0.7",
+ "dependencies": {
+ "animate.css": "~3.1.1"
+ },
+ "devDependencies": {
+ "qunit": "~1.12.0",
+ "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 +29,5 @@
"bower_components",
"test",
"tests"
- ],
- "dependencies": {
- "jquery": "~1.11.0",
- "animate.css": "~3.1.1"
- }
+ ]
}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7008f39
--- /dev/null
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+ "name": "animatecss",
+ "version": "1.0.7",
+ "description": "Animate CSS jQuery Plugin",
+ "keywords": [
+ "jquery-plugin"
+ ],
+ "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"
+ }
+ ],
+ "devDependencies": {
+ "grunt-contrib-jshint": "~0.7.2",
+ "grunt-contrib-qunit": "~0.3.0",
+ "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",
+ "time-grunt": "~0.2.3",
+ "load-grunt-tasks": "~0.2.0",
+ "jshint-stylish": "~0.1.3",
+ "grunt": "~0.4.2"
+ }
+}
diff --git a/src/.jshintrc b/src/.jshintrc
new file mode 100644
index 0000000..7f876e4
--- /dev/null
+++ b/src/.jshintrc
@@ -0,0 +1,15 @@
+{
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "sub": true,
+ "undef": true,
+ "unused": true,
+ "boss": true,
+ "eqnull": true,
+ "browser": true,
+ "predef": ["jQuery"]
+}
diff --git a/src/animatecss.js b/src/animatecss.js
new file mode 100644
index 0000000..a4fda63
--- /dev/null
+++ b/src/animatecss.js
@@ -0,0 +1,122 @@
+/*
+ * animateCSS
+ *
+ *
+ * Copyright (c) 2014 Craig Dennis
+ * Licensed under the MIT license.
+ */
+
+// (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);
+
+
+(function ($) {
+
+ // Collection method.
+ $.fn.awesome = function () {
+ return this.each(function (i) {
+ // Do something awesome to each selected element.
+ $(this).html('awesome' + i);
+ });
+ };
+
+ // Static method.
+ $.awesome = function (options) {
+ // Override default options with passed-in options.
+ options = $.extend({}, $.awesome.options, options);
+ // Return something awesome.
+ return 'awesome' + options.punctuation;
+ };
+
+ // Static method default options.
+ $.awesome.options = {
+ punctuation: '.'
+ };
+
+ // Custom selector.
+ $.expr[':'].awesome = function (elem) {
+ // Is this element awesome?
+ return $(elem).text().indexOf('awesome') !== -1;
+ };
+
+}(jQuery));
diff --git a/test/.jshintrc b/test/.jshintrc
new file mode 100644
index 0000000..2de0248
--- /dev/null
+++ b/test/.jshintrc
@@ -0,0 +1,32 @@
+{
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "sub": true,
+ "undef": true,
+ "unused": true,
+ "boss": true,
+ "eqnull": true,
+ "browser": true,
+ "predef": [
+ "jQuery",
+ "QUnit",
+ "module",
+ "test",
+ "asyncTest",
+ "expect",
+ "start",
+ "stop",
+ "ok",
+ "equal",
+ "notEqual",
+ "deepEqual",
+ "notDeepEqual",
+ "strictEqual",
+ "notStrictEqual",
+ "throws"
+ ]
+}
\ No newline at end of file
diff --git a/test/animatecss.html b/test/animatecss.html
new file mode 100644
index 0000000..b44fbb4
--- /dev/null
+++ b/test/animatecss.html
@@ -0,0 +1,27 @@
+
+
+
+
+ Animate CSS jQuery Plugin Test Suite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ lame test markup
+ normal test markup
+ awesome test markup
+
+
+
diff --git a/test/animatecss_test.js b/test/animatecss_test.js
new file mode 100644
index 0000000..a5df92e
--- /dev/null
+++ b/test/animatecss_test.js
@@ -0,0 +1,62 @@
+(function($) {
+ /*
+ ======== A Handy Little QUnit Reference ========
+ http://api.qunitjs.com/
+
+ Test methods:
+ module(name, {[setup][ ,teardown]})
+ test(name, callback)
+ expect(numberOfAssertions)
+ stop(increment)
+ start(decrement)
+ Test assertions:
+ ok(value, [message])
+ equal(actual, expected, [message])
+ notEqual(actual, expected, [message])
+ deepEqual(actual, expected, [message])
+ notDeepEqual(actual, expected, [message])
+ strictEqual(actual, expected, [message])
+ notStrictEqual(actual, expected, [message])
+ throws(block, [expected], [message])
+ */
+
+ module('jQuery#awesome', {
+ // This will run before each test in this module.
+ setup: function() {
+ this.elems = $('#qunit-fixture').children();
+ }
+ });
+
+ test('is chainable', function() {
+ expect(1);
+ // Not a bad test to run on collection methods.
+ strictEqual(this.elems.awesome(), this.elems, 'should be chainable');
+ });
+
+ test('is awesome', function() {
+ expect(1);
+ strictEqual(this.elems.awesome().text(), 'awesome0awesome1awesome2', 'should be awesome');
+ });
+
+ module('jQuery.awesome');
+
+ test('is awesome', function() {
+ expect(2);
+ strictEqual($.awesome(), 'awesome.', 'should be awesome');
+ strictEqual($.awesome({punctuation: '!'}), 'awesome!', 'should be thoroughly awesome');
+ });
+
+ module(':awesome selector', {
+ // This will run before each test in this module.
+ setup: function() {
+ this.elems = $('#qunit-fixture').children();
+ }
+ });
+
+ test('is awesome', function() {
+ expect(1);
+ // Use deepEqual & .get() when comparing jQuery objects.
+ deepEqual(this.elems.filter(':awesome').get(), this.elems.last().get(), 'knows awesome when it sees it');
+ });
+
+}(jQuery));
From 7be7d13cb750479e31edf81b893ccab00ee76027 Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Tue, 20 May 2014 15:57:21 +0100
Subject: [PATCH 02/19] Added support for coffeescript and jade
---
Gruntfile.js | 89 +++++++++++++++++++++++++--
package.json | 4 ++
src/.jshintrc | 1 +
src/animatecss.coffee | 109 +++++++++++++++++++++++++++++++++
src/animatecss.jade | 31 ++++++++++
src/animatecss.js | 122 -------------------------------------
src/animatecss_test.coffee | 62 +++++++++++++++++++
test/.jshintrc | 3 +-
test/animatecss.js | 27 ++++++++
test/animatecss_test.js | 62 +------------------
10 files changed, 322 insertions(+), 188 deletions(-)
create mode 100644 src/animatecss.coffee
create mode 100644 src/animatecss.jade
delete mode 100644 src/animatecss.js
create mode 100644 src/animatecss_test.coffee
create mode 100644 test/animatecss.js
diff --git a/Gruntfile.js b/Gruntfile.js
index f49c4e7..ddb7fe8 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -19,6 +19,13 @@ module.exports = function (grunt) {
clean: {
files: ['dist']
},
+
+ // Automatically inject Bower components into the HTML file
+ bowerInstall: {
+ src: ['src/index.jade'],
+ ignorePath: 'test/'
+ },
+
concat: {
options: {
banner: '<%= banner %>',
@@ -29,6 +36,7 @@ module.exports = function (grunt) {
dest: 'dist/jquery.<%= pkg.name %>.js'
}
},
+
uglify: {
options: {
banner: '<%= banner %>'
@@ -38,6 +46,7 @@ module.exports = function (grunt) {
dest: 'dist/jquery.<%= pkg.name %>.min.js'
}
},
+
qunit: {
all: {
options: {
@@ -45,6 +54,34 @@ module.exports = function (grunt) {
}
}
},
+
+ jade: {
+ options: {
+ pretty: true
+ },
+ dist: {
+ files: [{
+ expand: true,
+ cwd: 'src',
+ dest: 'test/',
+ src: 'index.jade',
+ ext: '.html'
+ }]
+ },
+ },
+
+ coffee: {
+ dist: {
+ files: [{
+ expand: true,
+ cwd: 'src',
+ src: '{,*/}*.coffee',
+ dest: 'test/',
+ ext: '.js'
+ }]
+ }
+ },
+
jshint: {
options: {
reporter: require('jshint-stylish')
@@ -68,11 +105,24 @@ module.exports = function (grunt) {
src: ['test/**/*.js']
}
},
+
watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
+ jade: {
+ files: ['src/index.jade'],
+ tasks: ['jade']
+ },
+ bower: {
+ files: ['bower.json'],
+ tasks: ['bowerInstall']
+ },
+ coffee: {
+ files: ['src/{,*/}*.coffee'],
+ tasks: ['coffee']
+ },
src: {
files: '<%= jshint.src.src %>',
tasks: ['jshint:src', 'qunit']
@@ -80,12 +130,13 @@ module.exports = function (grunt) {
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
- }
+ },
},
+
connect: {
server: {
options: {
- hostname: '*',
+ hostname: '0.0.0.0',
port: 9000
}
}
@@ -93,11 +144,39 @@ module.exports = function (grunt) {
});
// Default task.
- grunt.registerTask('default', ['jshint', 'connect', 'qunit', 'clean', 'concat', 'uglify']);
+ grunt.registerTask('default', [
+ 'clean',
+ 'test', // jade, coffeescript, jshint, qunit
+ 'concat',
+ 'uglify',
+ ]);
+
+ // Compile Jade and CoffeeScript
+ grunt.registerTask('compile', [
+ 'newer:coffee',
+ 'newer:jade'
+ ]);
+
+ // Install Bower components
+ grunt.registerTask('bowerInstall', [
+ 'bower'
+ ]);
+
+ // 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', ['connect', 'watch']);
- grunt.registerTask('test', ['jshint', 'connect', 'qunit']);
+
+ grunt.registerTask('serve', [
+ 'compile', // jade, coffeescript
+ 'connect',
+ 'watch'
+ ]);
+
+ grunt.registerTask('test', [
+ 'compile', // jade, coffeescript
+ 'jshint',
+ 'qunit'
+ ]);
};
diff --git a/package.json b/package.json
index 7008f39..6ae9ff3 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
}
],
"devDependencies": {
+ "grunt-contrib-coffee": "~0.7.0",
+ "grunt-contrib-jade": "~0.11.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-qunit": "~0.3.0",
"grunt-contrib-concat": "~0.3.0",
@@ -29,6 +31,8 @@
"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-newer": "~0.6.0",
"time-grunt": "~0.2.3",
"load-grunt-tasks": "~0.2.0",
"jshint-stylish": "~0.1.3",
diff --git a/src/.jshintrc b/src/.jshintrc
index 7f876e4..1f1ee1d 100644
--- a/src/.jshintrc
+++ b/src/.jshintrc
@@ -11,5 +11,6 @@
"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..d2a8f91
--- /dev/null
+++ b/src/animatecss.coffee
@@ -0,0 +1,109 @@
+# (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);
+
+
+# Reference jQuery
+$ = jQuery
+
+# Adds plugin object to jQuery
+$.fn.extend
+ # Change pluginName to your plugin's name.
+ pluginName: (options) ->
+ # Default settings
+ settings =
+ option1: true
+ option2: false
+ debug: false
+
+ # Merge default settings with options.
+ settings = $.extend settings, options
+
+ # Simple logger.
+ log = (msg) ->
+ console?.log msg if settings.debug
+
+ # _Insert magic here._
+ return @each ()->
+ log "Preparing magic show."
+ # You can use your settings in here now.
+ log "Option 1 value: #{settings.option1}"
diff --git a/src/animatecss.jade b/src/animatecss.jade
new file mode 100644
index 0000000..b71f637
--- /dev/null
+++ b/src/animatecss.jade
@@ -0,0 +1,31 @@
+doctype
+
+html
+ head
+ meta(charset="utf-8")
+ title Animate CSS jQuery Plugin Test Suite
+
+ //- bower:css
+ link(rel="stylesheet", href="../bower_components/qunit/qunit/qunit.css", media="screen")
+ //- endbower
+
+body
+ #qunit
+ #qunit-fixture
+ span lame test markup
+ span normal test markup
+ span awesome test markup
+
+ //- bower:js
+ script(src="../bower_components/jquery/dist/jquery.js")
+ script(src="../bower_components/qunit/qunit/qunit.js")
+ //- endbower
+
+ //- Load local lib and tests
+ script(src="../src/animatecss.js")
+ script(src="animatecss_test.js")
+
+ //- Removing access to jQuery and $. But it'll still be available as _$, if you REALLY want to mess around with jQuery in the console. REMEMBER WE ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY.
+
+ script.
+ window._$ = jQuery.noConflict(true)
diff --git a/src/animatecss.js b/src/animatecss.js
deleted file mode 100644
index a4fda63..0000000
--- a/src/animatecss.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * animateCSS
- *
- *
- * Copyright (c) 2014 Craig Dennis
- * Licensed under the MIT license.
- */
-
-// (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);
-
-
-(function ($) {
-
- // Collection method.
- $.fn.awesome = function () {
- return this.each(function (i) {
- // Do something awesome to each selected element.
- $(this).html('awesome' + i);
- });
- };
-
- // Static method.
- $.awesome = function (options) {
- // Override default options with passed-in options.
- options = $.extend({}, $.awesome.options, options);
- // Return something awesome.
- return 'awesome' + options.punctuation;
- };
-
- // Static method default options.
- $.awesome.options = {
- punctuation: '.'
- };
-
- // Custom selector.
- $.expr[':'].awesome = function (elem) {
- // Is this element awesome?
- return $(elem).text().indexOf('awesome') !== -1;
- };
-
-}(jQuery));
diff --git a/src/animatecss_test.coffee b/src/animatecss_test.coffee
new file mode 100644
index 0000000..ec7c938
--- /dev/null
+++ b/src/animatecss_test.coffee
@@ -0,0 +1,62 @@
+# (function($) {
+# /*
+# ======== A Handy Little QUnit Reference ========
+# http://api.qunitjs.com/
+#
+# Test methods:
+# module(name, {[setup][ ,teardown]})
+# test(name, callback)
+# expect(numberOfAssertions)
+# stop(increment)
+# start(decrement)
+# Test assertions:
+# ok(value, [message])
+# equal(actual, expected, [message])
+# notEqual(actual, expected, [message])
+# deepEqual(actual, expected, [message])
+# notDeepEqual(actual, expected, [message])
+# strictEqual(actual, expected, [message])
+# notStrictEqual(actual, expected, [message])
+# throws(block, [expected], [message])
+# */
+#
+# module('jQuery#awesome', {
+# // This will run before each test in this module.
+# setup: function() {
+# this.elems = $('#qunit-fixture').children();
+# }
+# });
+#
+# test('is chainable', function() {
+# expect(1);
+# // Not a bad test to run on collection methods.
+# strictEqual(this.elems.awesome(), this.elems, 'should be chainable');
+# });
+#
+# test('is awesome', function() {
+# expect(1);
+# strictEqual(this.elems.awesome().text(), 'awesome0awesome1awesome2', 'should be awesome');
+# });
+#
+# module('jQuery.awesome');
+#
+# test('is awesome', function() {
+# expect(2);
+# strictEqual($.awesome(), 'awesome.', 'should be awesome');
+# strictEqual($.awesome({punctuation: '!'}), 'awesome!', 'should be thoroughly awesome');
+# });
+#
+# module(':awesome selector', {
+# // This will run before each test in this module.
+# setup: function() {
+# this.elems = $('#qunit-fixture').children();
+# }
+# });
+#
+# test('is awesome', function() {
+# expect(1);
+# // Use deepEqual & .get() when comparing jQuery objects.
+# deepEqual(this.elems.filter(':awesome').get(), this.elems.last().get(), 'knows awesome when it sees it');
+# });
+#
+# }(jQuery));
diff --git a/test/.jshintrc b/test/.jshintrc
index 2de0248..4feb45d 100644
--- a/test/.jshintrc
+++ b/test/.jshintrc
@@ -11,6 +11,7 @@
"boss": true,
"eqnull": true,
"browser": true,
+ "devel" : true,
"predef": [
"jQuery",
"QUnit",
@@ -29,4 +30,4 @@
"notStrictEqual",
"throws"
]
-}
\ No newline at end of file
+}
diff --git a/test/animatecss.js b/test/animatecss.js
new file mode 100644
index 0000000..7c6d1d7
--- /dev/null
+++ b/test/animatecss.js
@@ -0,0 +1,27 @@
+(function() {
+ var $;
+
+ $ = jQuery;
+
+ $.fn.extend({
+ pluginName: function(options) {
+ var log, settings;
+ settings = {
+ option1: true,
+ option2: false,
+ debug: false
+ };
+ settings = $.extend(settings, options);
+ log = function(msg) {
+ if (settings.debug) {
+ return typeof console !== "undefined" && console !== null ? console.log(msg) : void 0;
+ }
+ };
+ return this.each(function() {
+ log("Preparing magic show.");
+ return log("Option 1 value: " + settings.option1);
+ });
+ }
+ });
+
+}).call(this);
diff --git a/test/animatecss_test.js b/test/animatecss_test.js
index a5df92e..b7b2ee8 100644
--- a/test/animatecss_test.js
+++ b/test/animatecss_test.js
@@ -1,62 +1,4 @@
-(function($) {
- /*
- ======== A Handy Little QUnit Reference ========
- http://api.qunitjs.com/
+(function() {
- Test methods:
- module(name, {[setup][ ,teardown]})
- test(name, callback)
- expect(numberOfAssertions)
- stop(increment)
- start(decrement)
- Test assertions:
- ok(value, [message])
- equal(actual, expected, [message])
- notEqual(actual, expected, [message])
- deepEqual(actual, expected, [message])
- notDeepEqual(actual, expected, [message])
- strictEqual(actual, expected, [message])
- notStrictEqual(actual, expected, [message])
- throws(block, [expected], [message])
- */
- module('jQuery#awesome', {
- // This will run before each test in this module.
- setup: function() {
- this.elems = $('#qunit-fixture').children();
- }
- });
-
- test('is chainable', function() {
- expect(1);
- // Not a bad test to run on collection methods.
- strictEqual(this.elems.awesome(), this.elems, 'should be chainable');
- });
-
- test('is awesome', function() {
- expect(1);
- strictEqual(this.elems.awesome().text(), 'awesome0awesome1awesome2', 'should be awesome');
- });
-
- module('jQuery.awesome');
-
- test('is awesome', function() {
- expect(2);
- strictEqual($.awesome(), 'awesome.', 'should be awesome');
- strictEqual($.awesome({punctuation: '!'}), 'awesome!', 'should be thoroughly awesome');
- });
-
- module(':awesome selector', {
- // This will run before each test in this module.
- setup: function() {
- this.elems = $('#qunit-fixture').children();
- }
- });
-
- test('is awesome', function() {
- expect(1);
- // Use deepEqual & .get() when comparing jQuery objects.
- deepEqual(this.elems.filter(':awesome').get(), this.elems.last().get(), 'knows awesome when it sees it');
- });
-
-}(jQuery));
+}).call(this);
From b477632bc87f6d96d7ed2fd0ced0aec296c35952 Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Wed, 21 May 2014 03:52:02 +0100
Subject: [PATCH 03/19] feat: add the ability to use animation loops
Animate.css includes the option for having animations loop infinitely, something which the old plugin did not take into account as it would remove the class as soon as the callback hit. This no longer happens
---
.bowerrc | 2 +-
.gitignore | 7 +-
CONTRIBUTING.md | 6 --
Gruntfile.js | 97 +++++++++++---------------
README.md | 71 ++++++++++++++++---
bower.json | 1 -
package.json | 9 ++-
src/animatecss.coffee | 138 ++++++++++++-------------------------
src/animatecss.jade | 31 ---------
src/animatecss_test.coffee | 62 -----------------
test/.jshintrc | 33 ---------
test/animatecss.html | 27 --------
test/animatecss.js | 27 --------
test/animatecss_test.js | 4 --
14 files changed, 156 insertions(+), 359 deletions(-)
delete mode 100644 src/animatecss.jade
delete mode 100644 src/animatecss_test.coffee
delete mode 100644 test/.jshintrc
delete mode 100644 test/animatecss.html
delete mode 100644 test/animatecss.js
delete mode 100644 test/animatecss_test.js
diff --git a/.bowerrc b/.bowerrc
index 44491d3..6ad533f 100644
--- a/.bowerrc
+++ b/.bowerrc
@@ -1,3 +1,3 @@
{
- "directory": "bower_components"
+ "directory": "src/bower_components"
}
diff --git a/.gitignore b/.gitignore
index d85ec29..a88bb42 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
-/node_modules/
-/bower_components/
-dist
+node_modules
+bower_components
+/.tmp
+/test
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e9a8b47..17f3c43 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,9 +6,6 @@ Please don't edit files in the `dist` subdirectory as they are generated via Gru
### Code style
Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
-### PhantomJS
-While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers.
-
## Modifying the code
First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed.
@@ -24,9 +21,6 @@ Assuming that you don't see any red, you're ready to go. Just be sure to run `gr
## Submitting pull requests
1. Create a new branch, please don't work in your `master` branch directly.
-1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail.
1. Fix stuff.
-1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
-1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere.
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
index ddb7fe8..a1396d8 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -14,16 +14,10 @@ module.exports = function (grunt) {
'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
- ' Licensed MIT */\n',
+ ' Licensed MIT */\n\n',
// Task configuration.
clean: {
- files: ['dist']
- },
-
- // Automatically inject Bower components into the HTML file
- bowerInstall: {
- src: ['src/index.jade'],
- ignorePath: 'test/'
+ files: ['dist', '.tmp']
},
concat: {
@@ -32,7 +26,7 @@ module.exports = function (grunt) {
stripBanners: true
},
dist: {
- src: ['src/<%= pkg.name %>.js'],
+ src: ['.tmp/<%= pkg.name %>.js'],
dest: 'dist/jquery.<%= pkg.name %>.js'
}
},
@@ -47,14 +41,6 @@ module.exports = function (grunt) {
}
},
- qunit: {
- all: {
- options: {
- urls: ['http://localhost:9000/test/<%= pkg.name %>.html']
- }
- }
- },
-
jade: {
options: {
pretty: true
@@ -62,9 +48,9 @@ module.exports = function (grunt) {
dist: {
files: [{
expand: true,
- cwd: 'src',
- dest: 'test/',
- src: 'index.jade',
+ cwd: 'test/',
+ dest: '.tmp/',
+ src: '*.jade',
ext: '.html'
}]
},
@@ -76,7 +62,7 @@ module.exports = function (grunt) {
expand: true,
cwd: 'src',
src: '{,*/}*.coffee',
- dest: 'test/',
+ dest: '.tmp/',
ext: '.js'
}]
}
@@ -92,17 +78,11 @@ module.exports = function (grunt) {
},
src: 'Gruntfile.js'
},
- src: {
+ dist: {
options: {
jshintrc: 'src/.jshintrc'
},
- src: ['src/**/*.js']
- },
- test: {
- options: {
- jshintrc: 'test/.jshintrc'
- },
- src: ['test/**/*.js']
+ src: ['.tmp/{,*/}*.js']
}
},
@@ -112,41 +92,53 @@ module.exports = function (grunt) {
tasks: ['jshint:gruntfile']
},
jade: {
- files: ['src/index.jade'],
+ files: ['src/*.jade'],
tasks: ['jade']
},
- bower: {
- files: ['bower.json'],
- tasks: ['bowerInstall']
- },
coffee: {
files: ['src/{,*/}*.coffee'],
tasks: ['coffee']
},
- src: {
- files: '<%= jshint.src.src %>',
- tasks: ['jshint:src', 'qunit']
- },
- test: {
- files: '<%= jshint.test.src %>',
- tasks: ['jshint:test', 'qunit']
- },
+ livereload: {
+ options: {
+ livereload: '<%= connect.options.livereload %>'
+ },
+ files: [
+ '.tmp/{,*/}*.*',
+ ]
+ }
+ },
+
+ bump: {
+ options: {
+ files: ['package.json', 'bower.json', '<%= pkg.name %>.jquery.json'],
+ push: false
+ }
},
connect: {
- server: {
+ options: {
+ hostname: '0.0.0.0',
+ livereload: 35729,
+ port: 9000
+ },
+ livereload: {
options: {
- hostname: '0.0.0.0',
- port: 9000
+ open: true,
+ base: [
+ '.tmp/',
+ 'src/'
+ ]
}
- }
+ },
}
});
// Default task.
grunt.registerTask('default', [
'clean',
- 'test', // jade, coffeescript, jshint, qunit
+ 'compile',
+ 'jshint:dist',
'concat',
'uglify',
]);
@@ -157,11 +149,6 @@ module.exports = function (grunt) {
'newer:jade'
]);
- // Install Bower components
- grunt.registerTask('bowerInstall', [
- 'bower'
- ]);
-
// Server task
grunt.registerTask('server', function () {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
@@ -173,10 +160,4 @@ module.exports = function (grunt) {
'connect',
'watch'
]);
-
- grunt.registerTask('test', [
- 'compile', // jade, coffeescript
- 'jshint',
- 'qunit'
- ]);
};
diff --git a/README.md b/README.md
index 05d707e..4869ae5 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,84 @@
# Animate CSS jQuery Plugin
-A jQuery plugin to dynamically apply animate.css animations with callbacks
+A jQuery plugin to dynamically apply [Dan Eden's animate.css][animate.css] animations with callbacks
+
+[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/jquery-animatecss/master/dist/jquery.animatecss.min.js
-[max]: https://raw.github.com/craigmdennis/jquery-animatecss/master/dist/jquery.animatecss.js
+[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
-_(Coming soon)_
+
+```js
+{
+ infinite: false,
+ animationClass: "animate",
+
+}
+```
## Examples
-_(Coming soon)_
+
+### Basic
+```js
+$('#your-id').animateCSS('fadeIn');
+```
+
+### With callback
+```js
+$('#your-id').animateCSS('fadeIn', function(){
+ alert('Boom! Animation Complete');
+});
+```
+
+### With delay (in ms)
+```js
+$('#your-id').animateCSS('fadeIn', 500);
+```
+
+### With delay AND callback
+```js
+$('#your-id').animateCSS('fadeIn', 1000, function(){
+ alert('Boom! Animation Complete');
+});
+```
+
+If you want to hide an element when the page loads and then apply an effect, it might look something like this:
+
+```css
+ .js #your-id {
+ visibility:hidden;
+ }
+
+```
+```js
+$(window).load( function(){
+ $('#your-id').animateCSS('fadeIn', 1000, function(){
+ alert('Boom! Animation Complete');
+ });
+});
+```
## Release History
-_(Nothing yet)_
+1.1.0
+- Rewritten in CoffeeScript
+- Allow custom `.animated` class
+- Allow for `.infinite` animation
+- Added grunt for consistent build output
+- Added Bower support
diff --git a/bower.json b/bower.json
index 825cc17..0cf0310 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,6 @@
"animate.css": "~3.1.1"
},
"devDependencies": {
- "qunit": "~1.12.0",
"jquery": "~1.11.0"
},
"homepage": "https://github.com/craigmdennis/animateCSS",
diff --git a/package.json b/package.json
index 6ae9ff3..ddf1fde 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,12 @@
{
"name": "animatecss",
- "version": "1.0.7",
+ "version": "1.0.6",
"description": "Animate CSS jQuery Plugin",
"keywords": [
- "jquery-plugin"
+ "jquery-plugin",
+ "css3",
+ "animation",
+ "callbacks"
],
"homepage": "https://github.com/craigmdennis/animatecss",
"bugs": "https://github.com/craigmdennis/animateCSS/issues",
@@ -25,13 +28,13 @@
"grunt-contrib-coffee": "~0.7.0",
"grunt-contrib-jade": "~0.11.0",
"grunt-contrib-jshint": "~0.7.2",
- "grunt-contrib-qunit": "~0.3.0",
"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",
diff --git a/src/animatecss.coffee b/src/animatecss.coffee
index d2a8f91..4009a6d 100644
--- a/src/animatecss.coffee
+++ b/src/animatecss.coffee
@@ -1,109 +1,59 @@
-# (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);
-
+'use strict';
# Reference jQuery
$ = jQuery
# Adds plugin object to jQuery
$.fn.extend
+
# Change pluginName to your plugin's name.
- pluginName: (options) ->
+ animateCSS: (effect, options) ->
# Default settings
settings =
- option1: true
- option2: false
+ effect: effect
+ delay: false
+ 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
- # Simple logger.
- log = (msg) ->
- console?.log msg if settings.debug
+ init = ( element ) ->
+ animate( element )
+ unhide( element )
+ complete( element )
+
+ # Add the animation effect with classes
+ animate = ( element ) ->
+ if settings.infinite == true
+ settings.animationClass += " infinite"
+ 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
+ clean = ( element ) ->
+ element.removeClass( settings.effect + " " + settings.animationClass )
+
+ callback = ( element ) ->
+ clean( element ) if settings.infinite == false
+ if typeof settings.callback == "function"
+ settings.callback.call(this)
+
+ # Event triggered when the animation has finished
+ complete = ( element ) ->
+ element.one( transitionEnd, ->
+ callback( element )
+ )
+
+ return @each () ->
- # _Insert magic here._
- return @each ()->
- log "Preparing magic show."
- # You can use your settings in here now.
- log "Option 1 value: #{settings.option1}"
+ init( $(this) );
diff --git a/src/animatecss.jade b/src/animatecss.jade
deleted file mode 100644
index b71f637..0000000
--- a/src/animatecss.jade
+++ /dev/null
@@ -1,31 +0,0 @@
-doctype
-
-html
- head
- meta(charset="utf-8")
- title Animate CSS jQuery Plugin Test Suite
-
- //- bower:css
- link(rel="stylesheet", href="../bower_components/qunit/qunit/qunit.css", media="screen")
- //- endbower
-
-body
- #qunit
- #qunit-fixture
- span lame test markup
- span normal test markup
- span awesome test markup
-
- //- bower:js
- script(src="../bower_components/jquery/dist/jquery.js")
- script(src="../bower_components/qunit/qunit/qunit.js")
- //- endbower
-
- //- Load local lib and tests
- script(src="../src/animatecss.js")
- script(src="animatecss_test.js")
-
- //- Removing access to jQuery and $. But it'll still be available as _$, if you REALLY want to mess around with jQuery in the console. REMEMBER WE ARE TESTING A PLUGIN HERE, THIS HELPS ENSURE BEST PRACTICES. REALLY.
-
- script.
- window._$ = jQuery.noConflict(true)
diff --git a/src/animatecss_test.coffee b/src/animatecss_test.coffee
deleted file mode 100644
index ec7c938..0000000
--- a/src/animatecss_test.coffee
+++ /dev/null
@@ -1,62 +0,0 @@
-# (function($) {
-# /*
-# ======== A Handy Little QUnit Reference ========
-# http://api.qunitjs.com/
-#
-# Test methods:
-# module(name, {[setup][ ,teardown]})
-# test(name, callback)
-# expect(numberOfAssertions)
-# stop(increment)
-# start(decrement)
-# Test assertions:
-# ok(value, [message])
-# equal(actual, expected, [message])
-# notEqual(actual, expected, [message])
-# deepEqual(actual, expected, [message])
-# notDeepEqual(actual, expected, [message])
-# strictEqual(actual, expected, [message])
-# notStrictEqual(actual, expected, [message])
-# throws(block, [expected], [message])
-# */
-#
-# module('jQuery#awesome', {
-# // This will run before each test in this module.
-# setup: function() {
-# this.elems = $('#qunit-fixture').children();
-# }
-# });
-#
-# test('is chainable', function() {
-# expect(1);
-# // Not a bad test to run on collection methods.
-# strictEqual(this.elems.awesome(), this.elems, 'should be chainable');
-# });
-#
-# test('is awesome', function() {
-# expect(1);
-# strictEqual(this.elems.awesome().text(), 'awesome0awesome1awesome2', 'should be awesome');
-# });
-#
-# module('jQuery.awesome');
-#
-# test('is awesome', function() {
-# expect(2);
-# strictEqual($.awesome(), 'awesome.', 'should be awesome');
-# strictEqual($.awesome({punctuation: '!'}), 'awesome!', 'should be thoroughly awesome');
-# });
-#
-# module(':awesome selector', {
-# // This will run before each test in this module.
-# setup: function() {
-# this.elems = $('#qunit-fixture').children();
-# }
-# });
-#
-# test('is awesome', function() {
-# expect(1);
-# // Use deepEqual & .get() when comparing jQuery objects.
-# deepEqual(this.elems.filter(':awesome').get(), this.elems.last().get(), 'knows awesome when it sees it');
-# });
-#
-# }(jQuery));
diff --git a/test/.jshintrc b/test/.jshintrc
deleted file mode 100644
index 4feb45d..0000000
--- a/test/.jshintrc
+++ /dev/null
@@ -1,33 +0,0 @@
-{
- "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",
- "QUnit",
- "module",
- "test",
- "asyncTest",
- "expect",
- "start",
- "stop",
- "ok",
- "equal",
- "notEqual",
- "deepEqual",
- "notDeepEqual",
- "strictEqual",
- "notStrictEqual",
- "throws"
- ]
-}
diff --git a/test/animatecss.html b/test/animatecss.html
deleted file mode 100644
index b44fbb4..0000000
--- a/test/animatecss.html
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
-
- Animate CSS jQuery Plugin Test Suite
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- lame test markup
- normal test markup
- awesome test markup
-
-
-
diff --git a/test/animatecss.js b/test/animatecss.js
deleted file mode 100644
index 7c6d1d7..0000000
--- a/test/animatecss.js
+++ /dev/null
@@ -1,27 +0,0 @@
-(function() {
- var $;
-
- $ = jQuery;
-
- $.fn.extend({
- pluginName: function(options) {
- var log, settings;
- settings = {
- option1: true,
- option2: false,
- debug: false
- };
- settings = $.extend(settings, options);
- log = function(msg) {
- if (settings.debug) {
- return typeof console !== "undefined" && console !== null ? console.log(msg) : void 0;
- }
- };
- return this.each(function() {
- log("Preparing magic show.");
- return log("Option 1 value: " + settings.option1);
- });
- }
- });
-
-}).call(this);
diff --git a/test/animatecss_test.js b/test/animatecss_test.js
deleted file mode 100644
index b7b2ee8..0000000
--- a/test/animatecss_test.js
+++ /dev/null
@@ -1,4 +0,0 @@
-(function() {
-
-
-}).call(this);
From 53aa6ed15980c534ea9377956d0d166e32c3abf9 Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Wed, 21 May 2014 03:53:36 +0100
Subject: [PATCH 04/19] chore: ignire .DS_Store files
---
.gitignore | 1 +
1 file changed, 1 insertion(+)
diff --git a/.gitignore b/.gitignore
index a88bb42..98a6a5b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
bower_components
/.tmp
/test
+.DS_Store
From 8052bc6c5c845d94e8b0a535761548b50b003c24 Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Wed, 21 May 2014 03:54:20 +0100
Subject: [PATCH 05/19] chore: make sure generated files are included
---
dist/jquery.animatecss.js | 65 +++++++++++++++++++++++++++++++++++
dist/jquery.animatecss.min.js | 5 +++
2 files changed, 70 insertions(+)
create mode 100644 dist/jquery.animatecss.js
create mode 100644 dist/jquery.animatecss.min.js
diff --git a/dist/jquery.animatecss.js b/dist/jquery.animatecss.js
new file mode 100644
index 0000000..46cf66f
--- /dev/null
+++ b/dist/jquery.animatecss.js
@@ -0,0 +1,65 @@
+/*! animatecss - v1.0.6 - 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 animate, callback, clean, complete, init, settings, transitionEnd, unhide;
+ settings = {
+ effect: effect,
+ delay: false,
+ animationClass: "animated",
+ infinite: false,
+ callback: options,
+ debug: false
+ };
+ transitionEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
+ settings = $.extend(settings, options);
+ init = function(element) {
+ animate(element);
+ unhide(element);
+ return complete(element);
+ };
+ animate = function(element) {
+ if (settings.infinite === true) {
+ settings.animationClass += " infinite";
+ }
+ 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();
+ }
+ };
+ clean = function(element) {
+ return element.removeClass(settings.effect + " " + settings.animationClass);
+ };
+ callback = function(element) {
+ if (settings.infinite === false) {
+ clean(element);
+ }
+ if (typeof settings.callback === "function") {
+ return settings.callback.call(this);
+ }
+ };
+ 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..ddfed67
--- /dev/null
+++ b/dist/jquery.animatecss.min.js
@@ -0,0 +1,5 @@
+/*! animatecss - v1.0.6 - 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;return i={effect:b,delay:!1,animationClass:"animated",infinite:!1,callback:c,debug:!1},j="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",i=a.extend(i,c),h=function(a){return d(a),k(a),g(a)},d=function(a){return i.infinite===!0&&(i.animationClass+=" infinite"),a.addClass(i.effect+" "+i.animationClass+" ")},k=function(a){return"hidden"===a.css("visibility")&&a.css("visibility","visible"),a.is(":hidden")?a.show():void 0},f=function(a){return a.removeClass(i.effect+" "+i.animationClass)},e=function(a){return i.infinite===!1&&f(a),"function"==typeof i.callback?i.callback.call(this):void 0},g=function(a){return a.one(j,function(){return e(a)})},this.each(function(){return h(a(this))})}})}).call(this);
\ No newline at end of file
From 89e7da1af66ba58c0078b426353b281b227c6844 Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Wed, 21 May 2014 04:14:46 +0100
Subject: [PATCH 06/19] refactor: delay functions as expected
Reintroducted the delay functionality but within an options paramater rather than directly in the shorthand
BREAKING CHANGE: Delay can no longer be specified in the plugin shorthand
Before: .animateCSS('fadeIn', 2000)
After: .animateCSS('fadeIn', {delay:2000})
---
Gruntfile.js | 2 +-
src/animatecss.coffee | 13 ++++++++++---
2 files changed, 11 insertions(+), 4 deletions(-)
diff --git a/Gruntfile.js b/Gruntfile.js
index a1396d8..225bbd8 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -92,7 +92,7 @@ module.exports = function (grunt) {
tasks: ['jshint:gruntfile']
},
jade: {
- files: ['src/*.jade'],
+ files: ['test/*.jade'],
tasks: ['jade']
},
coffee: {
diff --git a/src/animatecss.coffee b/src/animatecss.coffee
index 4009a6d..4f94cc6 100644
--- a/src/animatecss.coffee
+++ b/src/animatecss.coffee
@@ -11,7 +11,7 @@ $.fn.extend
# Default settings
settings =
effect: effect
- delay: false
+ delay: 0
animationClass: "animated",
infinite: false
callback: options
@@ -32,6 +32,13 @@ $.fn.extend
animate = ( element ) ->
if settings.infinite == true
settings.animationClass += " infinite"
+
+ # Run a timer regardless of delay as 0 will fire instantly anyway
+ setTimeout ->
+ addClass( element )
+ , settings.delay
+
+ addClass = ( element ) ->
element.addClass( settings.effect + " " + settings.animationClass + " ")
# Check if the element has been hidden to start with
@@ -40,11 +47,11 @@ $.fn.extend
element.show() if element.is(":hidden")
# Remove the animation classes the were applied
- clean = ( element ) ->
+ removeClass = ( element ) ->
element.removeClass( settings.effect + " " + settings.animationClass )
callback = ( element ) ->
- clean( element ) if settings.infinite == false
+ removeClass( element ) if settings.infinite == false
if typeof settings.callback == "function"
settings.callback.call(this)
From b1afe643d7fc2dc9377e0958ffab82463aaae52f Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Wed, 21 May 2014 04:23:22 +0100
Subject: [PATCH 07/19] docs: update to reflect new plugin options
---
README.md | 31 ++++++++++++++++++-------------
1 file changed, 18 insertions(+), 13 deletions(-)
diff --git a/README.md b/README.md
index 4869ae5..433cb0f 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ In your web page:
```html
-
+
-
+
-
+
$(document).ready( function(){
$('#your-id').animateCSS("fadeIn");
From 157303bdd8776eb962fa34b9e49f37f21561a6e4 Mon Sep 17 00:00:00 2001
From: Craig Dennis
Date: Wed, 21 May 2014 17:00:29 +0100
Subject: [PATCH 19/19] Bumped version to v1.1.2
---
animateCSS.jquery.json | 2 +-
bower.json | 2 +-
package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/animateCSS.jquery.json b/animateCSS.jquery.json
index 4d2b24e..c53c919 100644
--- a/animateCSS.jquery.json
+++ b/animateCSS.jquery.json
@@ -2,7 +2,7 @@
"name": "animateCSS",
"title": "Animate CSS jQuery Plugin",
"description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
- "version": "1.1.1",
+ "version": "1.1.2",
"homepage": "https://github.com/craigmdennis/animateCSS.git",
"author": {
"name": "Craig Dennis",
diff --git a/bower.json b/bower.json
index 86375d5..f4127b4 100644
--- a/bower.json
+++ b/bower.json
@@ -2,7 +2,7 @@
"name": "animateCSS",
"description": "A jQuery plugin to dynamically apply animate.css animations with callbacks",
"main": "dist/jquery.animatecss.js",
- "version": "1.1.1",
+ "version": "1.1.2",
"dependencies": {
"animate.css": "~3.1.1"
},
diff --git a/package.json b/package.json
index c403143..7052077 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "animateCSS",
- "version": "1.1.1",
+ "version": "1.1.2",
"description": "Animate CSS jQuery Plugin",
"keywords": [
"jquery-plugin",