From dd8ca86b209b17d512bed7437dd81e34e492dffa Mon Sep 17 00:00:00 2001 From: Jacob Kelley Date: Wed, 12 Nov 2014 16:32:27 -0800 Subject: [PATCH] Initial Commit --- Gruntfile.js | 71 +++++++++++++++++++++++++++++++++++++++++++++ README.md | 28 ++++++++++++++++++ bower.json | 6 ++++ dist/ripple.min.css | 4 +++ dist/ripple.min.js | 4 +++ package.json | 21 ++++++++++++++ src/ripple.css | 61 ++++++++++++++++++++++++++++++++++++++ src/ripple.js | 59 +++++++++++++++++++++++++++++++++++++ 8 files changed, 254 insertions(+) create mode 100644 Gruntfile.js create mode 100644 bower.json create mode 100644 dist/ripple.min.css create mode 100644 dist/ripple.min.js create mode 100644 package.json create mode 100644 src/ripple.css create mode 100644 src/ripple.js diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..d7c6751 --- /dev/null +++ b/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']); +}; diff --git a/README.md b/README.md index 9b5cf35..53ba49a 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,31 @@ Ripple.js ========= Adds Material style ripple to buttons + +## Installation +```html + + + +``` +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 +``` diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..52e9487 --- /dev/null +++ b/bower.json @@ -0,0 +1,6 @@ +{ + "name": "Ripple.js", + "author": "Jacob Kelley", + "version": "1.0.0", + "main": "dist/ripple.min.js" +} \ No newline at end of file diff --git a/dist/ripple.min.css b/dist/ripple.min.css new file mode 100644 index 0000000..9d2cdaf --- /dev/null +++ b/dist/ripple.min.css @@ -0,0 +1,4 @@ +/* Ripple.js v1.0.0 + * The MIT License (MIT) + * Copyright (c) 2014 Jacob Kelley */ +.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)}} \ No newline at end of file diff --git a/dist/ripple.min.js b/dist/ripple.min.js new file mode 100644 index 0000000..11e0068 --- /dev/null +++ b/dist/ripple.min.js @@ -0,0 +1,4 @@ +/* Ripple.js v1.0.0 + * The MIT License (MIT) + * Copyright (c) 2014 Jacob Kelley */ +!function(a){a.ripple=function(b,c){var d=this;d.defaults={opacity:.5,color:"auto"};var e=a.extend({},d.defaults,c);a(document).on("click",b,function(b){var c,d=a(this);if(d.addClass("has-ripple"),0===d.find(".ripple").length){c=a("").addClass("ripple"),c.appendTo(d);var f="auto"==e.color?d.css("color"):e.color;c.css({background:f,opacity:e.opacity})}if(c=d.find(".ripple"),c.removeClass("animate"),!c.height()&&!c.width()){var g=Math.max(d.outerWidth(),d.outerHeight());c.css({height:g,width:g})}var h=b.pageX-d.offset().left-c.width()/2,i=b.pageY-d.offset().top-c.height()/2;c.css({top:i+"px",left:h+"px"}).addClass("animate")})}}(jQuery),$.ripple(".btn-ripple"); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..a807fa6 --- /dev/null +++ b/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" + } +} diff --git a/src/ripple.css b/src/ripple.css new file mode 100644 index 0000000..cae16b7 --- /dev/null +++ b/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); + } +} diff --git a/src/ripple.js b/src/ripple.js new file mode 100644 index 0000000..5c070d3 --- /dev/null +++ b/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 = $("").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");