Initial Commit

Gruntfile.js

@@ -0,0 +1,71 @@
+var fs = require('fs');
+
+module.exports = function(grunt) {
+
+    var pkg = grunt.file.readJSON('package.json');
+
+    var banner = [ "<%= pkg.name %> v<%= pkg.version %>", "The MIT License (MIT)", "Copyright (c) 2014 <%= pkg.author %>" ].join("\n * ").trim();
+
+    grunt.initConfig({
+
+        pkg: pkg,
+
+        cssmin: {
+            options: {
+                banner: "/* " + banner + " */",
+                preserveComments: 'some'
+            },
+            main: {
+                files: {
+                    'dist/ripple.min.css': ['src/ripple.css']
+                }
+            }
+        },
+
+        jshint: {
+            all: ['src/ripple.js']
+        },
+
+        uglify: {
+            options: {
+                banner: "/* " + banner + " */\n",
+                preserveComments: 'some'
+            },
+            main: {
+                files: {
+                    'dist/ripple.min.js': ['src/ripple.js']
+                }
+            }
+        },
+
+        watch: {
+            scripts: {
+                files: 'src/*.js',
+                tasks: ['jshint', 'uglify']
+            },
+            manifests: {
+                files: ['package.json'],
+                tasks: ['sync_versions']
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+
+    // Custom task
+    grunt.registerTask('sync_versions', 'Keeps versions in sync between NPM and Bower', function(){
+        var bower = {
+            name: pkg.name,
+            author: pkg.author,
+            version: pkg.version,
+            main: 'dist/ripple.min.js'
+        };
+        fs.writeFileSync('bower.json', JSON.stringify(bower, null, "\t"));
+    });
+
+    grunt.registerTask('default', ['jshint', 'uglify', 'cssmin', 'sync_versions']);
+    grunt.registerTask('develop', ['jshint', 'uglify', 'cssmin', 'sync_versions', 'watch']);
+};

README.md

@@ -2,3 +2,31 @@ Ripple.js
 =========
 
 Adds Material style ripple to buttons
+
+## Installation
+```html
+<link href="stylesheet" type="text/css" href="ripple.min.css">
+<script type="text/javascript" src="jquery.min.js"></script>
+<script type="text/javascript" src="ripple.min.js"></script>
+```
+or
+```bash
+$ bower install ripplejs
+```
+
+## Usage
+Include jQuery, the ripple.css, and ripple.js into your page. Then upon initialization, you can activate ripple as follows:
+
+```javascript
+$.ripple(".btn", {
+	color: "auto", // Set the background color. If set to "auto", it will use the text color
+	opacity: 0.5 // The opacity of the ripple
+});
+```
+
+## Building
+```bash
+$ npm install
+$ npm run-script build
+$ npm run-script build-watch # To watch assets
+```

bower.json

@@ -0,0 +1,6 @@
+{
+	"name": "Ripple.js",
+	"author": "Jacob Kelley",
+	"version": "1.0.0",
+	"main": "dist/ripple.min.js"
+}

package.json

@@ -0,0 +1,21 @@
+{
+    "name": "Ripple.js",
+    "author": "Jacob Kelley",
+    "version": "1.0.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/jakiestfu/Ripple.js.git"
+    },
+    "scripts": {
+        "build": "./node_modules/grunt-cli/bin/grunt",
+        "build-watch": "./node_modules/grunt-cli/bin/grunt develop"
+    },
+    "devDependencies": {
+        "grunt": "~0.4.1",
+        "grunt-cli": "~0.1.9",
+        "grunt-contrib-watch": "~0.5.3",
+        "grunt-contrib-uglify": "0.2.5",
+        "grunt-contrib-jshint": "0.8.0",
+        "grunt-contrib-cssmin": "0.10.0"
+    }
+}

src/ripple.css

@@ -0,0 +1,61 @@
+.has-ripple {
+    position: relative;
+    overflow: hidden;
+    -webkit-transform: translate3d(0,0,0);
+}
+.ripple {
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    border-radius: 50%;
+
+    -webkit-transform: scale(0);
+    -moz-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+
+    background: #fff;
+    opacity: 1;
+}
+.ripple.animate {
+    -webkit-animation: ripple .7s linear;
+    -moz-animation: ripple .5s linear;
+    -ms-animation: ripple .5s linear;
+    -o-animation: ripple .5s linear;
+    animation: ripple .5s linear;
+}
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+@-webkit-keyframes ripple {
+    100% {
+        opacity: 0;
+        -webkit-transform: scale(2.5);
+        transform: scale(2.5);
+    }
+}
+@-moz-keyframes ripple {
+    100% {
+        opacity: 0;
+        -moz-transform: scale(2.5);
+        transform: scale(2.5);
+    }
+}
+@-ms-keyframes ripple {
+    100% {
+        opacity: 0;
+        -ms-transform: scale(2.5);
+        transform: scale(2.5);
+    }
+}
+@-o-keyframes ripple {
+    100% {
+        opacity: 0;
+        -o-transform: scale(2.5);
+        transform: scale(2.5);
+    }
+}

src/ripple.js

@@ -0,0 +1,59 @@
+;(function($){
+    $.ripple = function(selector, options) {
+
+        var self = this;
+
+        self.defaults = {
+            opacity: 0.5,
+            color: "auto"
+        };
+
+        var settings = $.extend({}, self.defaults, options);
+
+        $(document).on('click', selector, function(e) {
+
+            var $this = $(this);
+            var $ripple;
+
+            $this.addClass('has-ripple');
+
+            // Create the ripple element
+            if ($this.find(".ripple").length === 0) {
+                $ripple = $("<span></span>").addClass("ripple");
+                $ripple.appendTo($this);
+
+                var color = (settings.color == "auto") ? $this.css('color') : settings.color;
+                $ripple.css({
+                    background: color,
+                    opacity: settings.opacity
+                });
+            }
+
+            $ripple = $this.find(".ripple");
+
+            // Kill animation
+            $ripple.removeClass("animate");
+
+            // Set ripple size
+            if (!$ripple.height() && !$ripple.width()) {
+                var size = Math.max($this.outerWidth(), $this.outerHeight());
+                $ripple.css({
+                    height: size,
+                    width: size
+                });
+            }
+
+            // Retrieve coordinates
+            var x = e.pageX - $this.offset().left - $ripple.width() / 2;
+            var y = e.pageY - $this.offset().top - $ripple.height() / 2;
+
+            // Set position and animate
+            $ripple.css({
+                top: y + 'px',
+                left: x + 'px'
+            }).addClass("animate");
+        });
+    };
+})(jQuery);
+
+$.ripple(".btn-ripple");