fixed #234

dist/js/ripples.js

@@ -1,9 +1,17 @@
 /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
 /* globals CustomEvent */
 window.ripples = {
+    done: false,
     init : function(withRipple) {
         "use strict";
 
+        if (this.done) {
+            return console.log("Ripples.js was already initialzied.");
+        }
+
+        this.done = true;
+
+
         // Cross browser matches function
         function matchesSelector(domElement, selector) {
             var matches = domElement.matches ||
@@ -67,7 +75,12 @@ window.ripples = {
             var targetColor = window.getComputedStyle($el).color;
 
             // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
-            targetColor = targetColor.replace("rgb", "rgba").replace(")",  ", " + _rippleOpacity + ")");
+            if ( targetColor.indexOf("rgba") >= 0 ) {
+                var alphaPosition = targetColor.lastIndexOf(",") + 1;
+                targetColor = targetColor.substring(0, alphaPosition) + _rippleOpacity + ")";
+            } else {
+                targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
+            }
 
             // Insert new ripple into ripple wrapper
             $rippleWrapper.appendChild($ripple);
@@ -86,8 +99,8 @@ window.ripples = {
                 $ripple.getAttribute("style"),
                 "background-color: " + targetColor,
                 "-ms-transform: " + scale,
-                "-moz-transform" + scale,
+                "-moz-transform:" + scale,
-                "-webkit-transform" + scale,
+                "-webkit-transform:" + scale,
                 "transform: " + scale
             ];
 
@@ -134,12 +147,6 @@ window.ripples = {
                 var $rippleWrapper = document.createElement("div");
                 $rippleWrapper.className = "ripple-wrapper";
                 target.appendChild($rippleWrapper);
-                if (window.ontouchstart === null) {
-                    rippleStart(e, $rippleWrapper, function() {
-                        // FIXME: ugly fix for first touchstart event on mobile devices...
-                        $rippleWrapper.getElementsByClassName("ripple")[0].remove();
-                    });
-                }
             }
         };
 
@@ -147,7 +154,10 @@ window.ripples = {
 
         // Events handler
         // init RippleJS and start ripple effect on mousedown
-        bind(["mouseover", "touchstart"], withRipple, rippleInit);
+        bind(["mouseover"], withRipple, rippleInit);
+
+        // Init if the device is touch screen
+        bind(["touchstart"], withRipple, rippleInit);
 
         // start ripple effect on mousedown
         bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {

dist/js/ripples.min.js

@@ -1 +1 @@
-window.ripples={done:!1,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)}if(this.done)return console.log("Ripples.js was already initialzied.");this.done=!0;var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){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,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.3;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;if(o.indexOf("rgba")>=0){var p=o.lastIndexOf(",")+1;o=o.substring(0,p)+n+")"}else o=o.replace("rgb","rgba").replace(")",", "+n+")");f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var q=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",q.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend","mouseout"],"*",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(["touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||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","touchend","mouseout"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};
+window.ripples={done:!1,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)}if(this.done)return console.log("Ripples.js was already initialzied.");this.done=!0;var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){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,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.3;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;if(o.indexOf("rgba")>=0){var p=o.lastIndexOf(",")+1;o=o.substring(0,p)+n+")"}else o=o.replace("rgb","rgba").replace(")",", "+n+")");f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var q=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform:"+l,"-webkit-transform:"+l,"transform: "+l];h.setAttribute("style",q.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend","mouseout"],"*",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(["touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||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","touchend","mouseout"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};

scripts/ripples.js

@@ -99,8 +99,8 @@ window.ripples = {
                 $ripple.getAttribute("style"),
                 "background-color: " + targetColor,
                 "-ms-transform: " + scale,
-                "-moz-transform" + scale,
+                "-moz-transform:" + scale,
-                "-webkit-transform" + scale,
+                "-webkit-transform:" + scale,
                 "transform: " + scale
             ];