Ripple color for flat buttons

The code should work properly now

dist/js/ripples.js

@@ -38,9 +38,8 @@ window.ripples = {
                 mousePos              = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale                 = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd             = new CustomEvent("rippleEnd", {detail: $ripple}),
-                __rippleOpacity__     = 0.05,
+                __rippleOpacity__     = 0.2,
                 targetColor,
-                rgbArr,
                 refreshElementStyle;
 
             $ripplecache = $ripple;
@@ -50,17 +49,15 @@ window.ripples = {
             // Move ripple to the mouse position            
             $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                       
-            // Get the clicked targets text color, this will be applied to the ripple as background-color.
+            // If target is a flat button, ripple's background will have the same color with text
+            if ( (" " + $el.className + " ").replace(/[\n\t]/g, " ").indexOf(" btn-flat ") > -1 ) {
+                // Get the clicked target text color
                 targetColor = window.getComputedStyle($el).color;
-
+                // Apply opacity level 
-            
+                targetColor = targetColor.replace( ")", " ," + __rippleOpacity__ + ")" )
-            // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
+                                         .replace( "rgb", "rgba" );
-            // Not sure if regexp is quicker... 
+            }
-            rgbArr = targetColor.split(",");                        
+            // XXX TODO: An algorithm to determine best ripple color for non-flat elements
-            rgbArr.pop();
-            rgbArr.push(" " + __rippleOpacity__ + ")");
-            targetColor = rgbArr.join(",");
-            
 
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);    
@@ -70,12 +67,10 @@ window.ripples = {
 
             // Let other funtions know that this element is animating
             $ripple.dataset.animating = 1;
-                // + "background-color: " + targetColor + ";" 
             // Set scale value, background-color and opacity to ripple and animate it
             $ripple.className = "ripple ripple-on";
             $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
 
-
             // This function is called when the animation is finished
             setTimeout(function() {
 

dist/js/ripples.min.js

@@ -1 +1 @@
-window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
+window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:a.clientY-j.top},l="transform:scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.2;i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;"),(" "+g.className+" ").replace(/[\n\t]/g," ").indexOf(" btn-flat ")>-1&&(c=window.getComputedStyle(g).color,c=c.replace(")"," ,"+n+")").replace("rgb","rgba")),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on",h.setAttribute("style",h.getAttribute("style")+"background-color: "+c+";"+["-ms-"+l,"-moz-"+l,"-webkit-"+l,l].join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};

scripts/ripples.js

@@ -38,9 +38,8 @@ window.ripples = {
                 mousePos              = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale                 = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd             = new CustomEvent("rippleEnd", {detail: $ripple}),
-                __rippleOpacity__     = 0.05,
+                __rippleOpacity__     = 0.2,
                 targetColor,
-                rgbArr,
                 refreshElementStyle;
 
             $ripplecache = $ripple;
@@ -50,17 +49,15 @@ window.ripples = {
             // Move ripple to the mouse position            
             $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                       
-            // Get the clicked targets text color, this will be applied to the ripple as background-color.
+            // If target is a flat button, ripple's background will have the same color with text
+            if ( (" " + $el.className + " ").replace(/[\n\t]/g, " ").indexOf(" btn-flat ") > -1 ) {
+                // Get the clicked target text color
                 targetColor = window.getComputedStyle($el).color;
-
+                // Apply opacity level 
-            
+                targetColor = targetColor.replace( ")", " ," + __rippleOpacity__ + ")" )
-            // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
+                                         .replace( "rgb", "rgba" );
-            // Not sure if regexp is quicker... 
+            }
-            rgbArr = targetColor.split(",");                        
+            // XXX TODO: An algorithm to determine best ripple color for non-flat elements
-            rgbArr.pop();
-            rgbArr.push(" " + __rippleOpacity__ + ")");
-            targetColor = rgbArr.join(",");
-            
 
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);    
@@ -70,12 +67,10 @@ window.ripples = {
 
             // Let other funtions know that this element is animating
             $ripple.dataset.animating = 1;
-                // + "background-color: " + targetColor + ";" 
             // Set scale value, background-color and opacity to ripple and animate it
             $ripple.className = "ripple ripple-on";
             $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
 
-
             // This function is called when the animation is finished
             setTimeout(function() {
 

template/material/js/ripples.js

@@ -38,9 +38,8 @@ window.ripples = {
                 mousePos              = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
                 scale                 = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
                 rippleEnd             = new CustomEvent("rippleEnd", {detail: $ripple}),
-                __rippleOpacity__     = 0.05,
+                __rippleOpacity__     = 0.2,
                 targetColor,
-                rgbArr,
                 refreshElementStyle;
 
             $ripplecache = $ripple;
@@ -50,17 +49,15 @@ window.ripples = {
             // Move ripple to the mouse position            
             $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                       
-            // Get the clicked targets text color, this will be applied to the ripple as background-color.
+            // If target is a flat button, ripple's background will have the same color with text
+            if ( (" " + $el.className + " ").replace(/[\n\t]/g, " ").indexOf(" btn-flat ") > -1 ) {
+                // Get the clicked target text color
                 targetColor = window.getComputedStyle($el).color;
-
+                // Apply opacity level 
-            
+                targetColor = targetColor.replace( ")", " ," + __rippleOpacity__ + ")" )
-            // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
+                                         .replace( "rgb", "rgba" );
-            // Not sure if regexp is quicker... 
+            }
-            rgbArr = targetColor.split(",");                        
+            // XXX TODO: An algorithm to determine best ripple color for non-flat elements
-            rgbArr.pop();
-            rgbArr.push(" " + __rippleOpacity__ + ")");
-            targetColor = rgbArr.join(",");
-            
 
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);    
@@ -70,12 +67,10 @@ window.ripples = {
 
             // Let other funtions know that this element is animating
             $ripple.dataset.animating = 1;
-                // + "background-color: " + targetColor + ";" 
             // Set scale value, background-color and opacity to ripple and animate it
             $ripple.className = "ripple ripple-on";
             $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
 
-
             // This function is called when the animation is finished
             setTimeout(function() {
 

template/material/js/ripples.min.js

@@ -1 +1 @@
-window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
+window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:a.clientY-j.top},l="transform:scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.2;i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;"),(" "+g.className+" ").replace(/[\n\t]/g," ").indexOf(" btn-flat ")>-1&&(c=window.getComputedStyle(g).color,c=c.replace(")"," ,"+n+")").replace("rgb","rgba")),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on",h.setAttribute("style",h.getAttribute("style")+"background-color: "+c+";"+["-ms-"+l,"-moz-"+l,"-webkit-"+l,l].join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};