From 196ad86f92afa9e2dbd0765dfd5a0056b6ce6b81 Mon Sep 17 00:00:00 2001 From: FezVrasta Date: Wed, 26 Nov 2014 10:18:02 +0100 Subject: [PATCH] fixed #234 --- dist/js/ripples.js | 30 ++++++++++++++++++++---------- dist/js/ripples.min.js | 2 +- scripts/ripples.js | 4 ++-- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/dist/js/ripples.js b/dist/js/ripples.js index 50591375..0f10784b 100644 --- a/dist/js/ripples.js +++ b/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, - "-webkit-transform" + scale, + "-moz-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) { diff --git a/dist/js/ripples.min.js b/dist/js/ripples.min.js index 85c44b94..fa37eb6d 100644 --- a/dist/js/ripples.min.js +++ b/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)})}}; diff --git a/scripts/ripples.js b/scripts/ripples.js index f8095bd8..0f10784b 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -99,8 +99,8 @@ window.ripples = { $ripple.getAttribute("style"), "background-color: " + targetColor, "-ms-transform: " + scale, - "-moz-transform" + scale, - "-webkit-transform" + scale, + "-moz-transform:" + scale, + "-webkit-transform:" + scale, "transform: " + scale ];