diff --git a/Gruntfile.js b/Gruntfile.js index fc8a3f4..9b5dbc3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -29,6 +29,7 @@ module.exports = function(grunt) { uglify: { options: { banner: "/* " + banner + " */\n", + footer: "$.ripple.version = \"<%= pkg.version %>\";", preserveComments: 'some' }, main: { diff --git a/README.md b/README.md index ffffe9c..18dade6 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Include jQuery, the ripple.css, and ripple.js into your page. Then upon initiali ```javascript $.ripple(".btn", { + debug: false, // Turn Ripple.js logging on/off on: 'mousedown', // The event to trigger a ripple effect opacity: 0.4, // The opacity of the ripple @@ -26,6 +27,12 @@ $.ripple(".btn", { multi: false, // Allow multiple ripples per element duration: 0.7, // The duration of the ripple + + // Filter function for modifying the speed of the ripple + rate: function(pxPerSecond) { + return pxPerSecond; + }, + easing: 'linear' // The CSS3 easing function of the ripple }); ``` diff --git a/bower.json b/bower.json index 3d5a7ff..abf420d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "Ripple.js", "author": "Jacob Kelley", - "version": "1.1.0", + "version": "1.2.0", "main": "dist/ripple.min.js" } \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index ad72130..5561fad 100644 --- a/demo/index.html +++ b/demo/index.html @@ -17,6 +17,10 @@ background: #fefefe; color: #2a2a2a; font-family: 'Open Sans', sans-serif; + cursor: default; + } + *::selection { + background: transparent !important; } header h1 { opacity: 0.7; @@ -28,12 +32,13 @@ box-shadow: none !important; } - .white .btn { + .white.btn { background: #fff; } - .white .btn-success { color: #5cb85c; } - .white .btn-warning { color: #f0ad4e; } - .white .btn-danger { color: #d9534f; } + .white.btn-primary { color: #428bca; } + .white.btn-success { color: #5cb85c; } + .white.btn-warning { color: #f0ad4e; } + .white.btn-danger { color: #d9534f; } .btn-block { max-width: 500px; margin: 0 auto; } @@ -51,6 +56,9 @@ transition: all 0.3s ease; text-decoration: none !important; } + .text-muted { + color: #777 !important; + } @@ -68,28 +76,29 @@

Ripple.js

Warnings Danger
-
- Success - Warnings - Danger -
+ Success + Warning + Danger

Area

Default - Easing + Easing Duration Opacity - Color + Auto Color + Color + Opacity + Bind to Events (mouseleave) + Multi = false
- - Carefully Crapted by jakiestfu + + by jakiestfu
@@ -103,7 +112,18 @@

Area

$(document).on('click', '[href="#"]', function(e) { e.preventDefault(); }) - $.ripple('.btn, .area', { + window.rippler = $.ripple('.btn:not(.no-bind), .area', { + debug: true, + multi: true + }); + + $.ripple('.no-bind.demo', { + on: 'mouseleave', + multi: true + }); + + $.ripple('.no-bind.jakiestfu', { + on: 'mouseenter', multi: true }); }); diff --git a/dist/ripple.min.css b/dist/ripple.min.css index c77868d..1246c37 100644 --- a/dist/ripple.min.css +++ b/dist/ripple.min.css @@ -1,4 +1,4 @@ -/* Ripple.js v1.1.0 +/* Ripple.js v1.2.0 * The MIT License (MIT) * Copyright (c) 2014 Jacob Kelley */ .has-ripple{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);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;-moz-animation:ripple;-ms-animation:ripple;-o-animation:ripple;animation:ripple}@keyframes ripple{100%{opacity:0;transform:scale(2)}}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2);transform:scale(2)}}@-ms-keyframes ripple{100%{opacity:0;-ms-transform:scale(2);transform:scale(2)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2);transform:scale(2)}} \ No newline at end of file diff --git a/dist/ripple.min.js b/dist/ripple.min.js index 3facc29..a6b30e1 100644 --- a/dist/ripple.min.js +++ b/dist/ripple.min.js @@ -1,4 +1,4 @@ -/* Ripple.js v1.1.0 +/* Ripple.js v1.2.0 * The MIT License (MIT) * Copyright (c) 2014 Jacob Kelley */ -!function(a){a.ripple=function(b,c){var d=this;d.defaults={on:"mousedown",opacity:.4,color:"auto",multi:!1,duration:.7,easing:"linear"},d.defaults=a.extend({},d.defaults,c),a(document).on(d.defaults.on,b,function(b){var c,e,f=a(this);if(f.addClass("has-ripple"),e=a.extend({},d.defaults,f.data()),e.multi||!e.multi&&0===f.find(".ripple").length){c=a("").addClass("ripple"),c.appendTo(f);var g="auto"==e.color?f.css("color"):e.color;c.css({animationDuration:e.duration.toString()+"s",animationTimingFunction:e.easing,background:g,opacity:e.opacity})}if(e.multi||(c=f.find(".ripple")),c.removeClass("animate"),!c.height()&&!c.width()){var h=Math.max(f.outerWidth(),f.outerHeight());c.css({height:h,width:h})}var i=b.pageX-f.offset().left-c.width()/2,j=b.pageY-f.offset().top-c.height()/2;e.multi&&c.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function(){a(this).remove()}),c.css({top:j+"px",left:i+"px"}).addClass("animate")})}}(jQuery); \ No newline at end of file +!function(a){a.ripple=function(b,c){var d=this,e=d.log=function(){d.defaults.debug&&console&&console.log&&console.log.apply(console,arguments)};d.selector=b,d.defaults={debug:!1,on:"mousedown",opacity:.4,color:"auto",multi:!1,duration:.7,rate:function(a){return a},easing:"linear"},d.defaults=a.extend({},d.defaults,c);var f=function(b){var c,f,g=a(this);if(g.addClass("has-ripple"),f=a.extend({},d.defaults,g.data()),f.multi||!f.multi&&0===g.find(".ripple").length){if(c=a("").addClass("ripple"),c.appendTo(g),e("Create: Ripple"),!c.height()&&!c.width()){var h=Math.max(g.outerWidth(),g.outerHeight());c.css({height:h,width:h}),e("Set: Ripple size")}if(f.rate&&"function"==typeof f.rate){var i=Math.round(c.width()/f.duration),j=f.rate(i),k=c.width()/j;f.duration.toFixed(2)!==k.toFixed(2)&&(e("Update: Ripple Duration",{from:f.duration,to:k}),f.duration=k)}var l="auto"==f.color?g.css("color"):f.color,m={animationDuration:f.duration.toString()+"s",animationTimingFunction:f.easing,background:l,opacity:f.opacity};e("Set: Ripple CSS",m),c.css(m)}f.multi||(e("Set: Ripple Element"),c=g.find(".ripple")),e("Destroy: Ripple Animation"),c.removeClass("animate");var n=b.pageX-g.offset().left-c.width()/2,o=b.pageY-g.offset().top-c.height()/2;f.multi&&(e("Set: Ripple animationend event"),c.one("animationend webkitAnimationEnd oanimationend MSAnimationEnd",function(){e("Note: Ripple animation ended"),e("Destroy: Ripple"),a(this).remove()})),e("Set: Ripple location"),e("Set: Ripple animation"),c.css({top:o+"px",left:n+"px"}).addClass("animate")};a(document).on(d.defaults.on,d.selector,f)}}(jQuery);$.ripple.version = "1.2.0"; \ No newline at end of file diff --git a/package.json b/package.json index 8be6266..ec9956b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "Ripple.js", "author": "Jacob Kelley", - "version": "1.1.0", + "version": "1.2.0", "repository": { "type": "git", "url": "https://github.com/jakiestfu/Ripple.js.git"