v1.3.0

README.md

@@ -14,9 +14,9 @@ $ bower i -S rippleria
 
 1. Load the stylesheet ```jquery.rippleria.css``` in the head section and the JavaScript ```jquery.rippleria.js``` after jQuery library.
     ```html
-    <link rel="stylesheet" href="jquery.rippleria.css">
+    <link rel="stylesheet" href="/path/to/jquery.rippleria.css">
     <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-    <script src="jquery.rippleria.js"></script>
+    <script src="/path/to/jquery.rippleria.js"></script>
     ```
 
 2. Add the ```data-rippleria``` attribute to the DOM element where you want to implement the ripple click effect.
@@ -33,10 +33,8 @@ $ bower i -S rippleria
       Click me
     </button>
     ```
-4. The CSS modifiers.
-    * ```.rippleria-dark```: dark ripple effect
 
-5. You can also apply the ripple click effect to any block elements and pass in the options via JavaScript.
+4. You can also apply the ripple click effect to any block elements and pass in the options via JavaScript.
     ```js
     $('.selector').rippleria({
 
@@ -49,6 +47,8 @@ $ bower i -S rippleria
       // custom color
       color: undefined
 
+      // enable automatically adding .rippleria-dark class to the dark elements (appeared with 1.3)
+      detectBrightness: true
     });
 
     $('.selector').rippleria("changeDuration", "500");
@@ -58,6 +58,3 @@ $ bower i -S rippleria
 
 ##Browsers
 Firefox, Chrome, IE10+, Opera, Safari
-
-##License
-MIT license.

bower.json

@@ -1,10 +1,10 @@
 {
   "name": "rippleria",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "MIT",
   "main": ["js/jquery.rippleria.js", "css/jquery.rippleria.css"],
   "homepage": "https://github.com/nsept/rippleria",
-  "description": "jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations",
+  "description": "A lightweight yet customizable jQuery plugin for implementing Material Design inspired ripple click / tap effects using CSS3 animations.",
   "authors": [
     "Nsept <nsept@ya.ru>"
   ],

js/jquery.rippleria.js

@@ -1,13 +1,11 @@
 ;(function($, window, document, undefined) {
   function Rippleria(element, options) {
-    var base = this;
-
     this.$element = $(element);
     this.options = $.extend({}, Rippleria.Defaults, this._getOptionsFromElementAttributes(), options);
 
     this._prepare();
     this._bind();
-  };
+  }
 
   Rippleria.prototype._bind = function() {
     var elem = this.$element,
@@ -19,14 +17,17 @@
     eventType = isTouchSupported == true ? 'touchend.rippleria' : 'click.rippleria';
 
     this.$element.bind(eventType, function(e) {
-      var ink = $("<div class='rippleria-ink'></div>");
+      var ink = $("<div class='rippleria-ink'/>");
       elem.append(ink);
 
       if (options.color != undefined) {
         ink.css('background-color', options.color);
       }
 
-      ink.css('animation', 'rippleria ' + options.duration / 1000 + 's ' + options.easing);
+      var animation = 'rippleria ' + options.duration / 1000 + 's ' + options.easing;
+
+      ink.css('animation', animation);
+      ink.css('-webkit-animation', animation);
 
       setTimeout(function() {
         ink.remove();
@@ -48,7 +49,7 @@
 
       ink.css({top: y + 'px', left: x + 'px'});
     });
-  }
+  };
 
   Rippleria.prototype._prepare = function() {
     var elem = this.$element;
@@ -62,6 +63,49 @@
     if(elem.find('img')[0] != undefined) {
       elem.on('dragstart', function(e) { e.preventDefault(); });
     }
+
+    if(this.options.detectBrightness) {
+      var r,g,b,brightness,
+          colour = this.$element.css("background-color");
+
+      if(colour == 'transparent') {
+        var getParentBackground = function(elem) {
+          var colour = elem.css("background-color");
+
+          if(elem.length != 0) {
+            if(colour == 'transparent') {
+              return getParentBackground(elem.parent());
+            }
+          }
+
+          return colour;
+        };
+
+        colour = getParentBackground(this.$element.parent());
+      }
+
+      if (colour.match(/^rgb/)) {
+        colour = colour.match(/rgb\(([^)]+)\)/)[1];
+        colour = colour.split(/ *, */).map(Number);
+        r = colour[0];
+        g = colour[1];
+        b = colour[2];
+      } else if ('#' == colour[0] && 7 == colour.length) {
+        r = parseInt(colour.slice(1, 3), 16);
+        g = parseInt(colour.slice(3, 5), 16);
+        b = parseInt(colour.slice(5, 7), 16);
+      } else if ('#' == colour[0] && 4 == colour.length) {
+        r = parseInt(colour[1] + colour[1], 16);
+        g = parseInt(colour[2] + colour[2], 16);
+        b = parseInt(colour[3] + colour[3], 16);
+      }
+
+      brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+      if (brightness > 150) {
+        this.$element.addClass("rippleria-dark");
+      }
+    }
   };
 
   Rippleria.prototype._getOptionsFromElementAttributes = function() {
@@ -80,20 +124,21 @@
 
   Rippleria.prototype.changeColor = function(color) {
     this.options.color = color;
-  }
+  };
 
   Rippleria.prototype.changeEasing = function(easing) {
     this.options.easing = easing;
-  }
+  };
 
   Rippleria.prototype.changeDuration = function(duration) {
     this.options.duration = duration;
-  }
+  };
 
   Rippleria.Defaults = {
     duration: 750,
     easing: 'linear',
-    color: undefined
+    color: undefined,
+    detectBrightness: true
   };
 
   $.fn.rippleria = function(option) {

less/jquery.rippleria.less

@@ -20,4 +20,4 @@
 
 @-webkit-keyframes rippleria {
   100% {opacity: 0; -webkit-transform: scale(2.5);}
-}
+}