diff --git a/dist/js/ripples.js b/dist/js/ripples.js index f8d6cc0d..2f3539db 100644 --- a/dist/js/ripples.js +++ b/dist/js/ripples.js @@ -1,15 +1,17 @@ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* globals CustomEvent */ -/*jshint maxlen: 500 */ window.ripples = { init : function(withRipple) { "use strict"; // Cross browser matches function function matchesSelector(domElement, selector) { - var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || + var matches = domElement.matches || + domElement.matchesSelector || + domElement.webkitMatchesSelector || domElement.mozMatchesSelector || - domElement.msMatchesSelector || domElement.oMatchesSelector; + domElement.msMatchesSelector || + domElement.oMatchesSelector; return matches.call(domElement, selector); } @@ -31,36 +33,29 @@ window.ripples = { var rippleStart = function(e, target) { // Init variables - var $rippleWrapper = target, - $el = $rippleWrapper.parentNode, - $ripple = document.createElement("div"), - elPos = $el.getBoundingClientRect(), - 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, - targetColor, - rgbArr, + var $rippleWrapper = target, + $el = $rippleWrapper.parentNode, + $ripple = document.createElement("div"), + elPos = $el.getBoundingClientRect(), + mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, + scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", + rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), + _rippleOpacity = 0.1, refreshElementStyle; $ripplecache = $ripple; // Set ripple class - $ripple.className = "ripple"; + $ripple.className = "ripple"; + // 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. - targetColor = window.getComputedStyle($el).color; - - // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__ - // Not sure if regexp is quicker... - rgbArr = targetColor.split(","); - rgbArr.pop(); - rgbArr.push(" " + __rippleOpacity__ + ")"); - targetColor = rgbArr.join(","); - + // Get the clicked target's text color, this will be applied to the ripple as background-color. + 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 + ")"); // Insert new ripple into ripple wrapper $rippleWrapper.appendChild($ripple); @@ -70,11 +65,22 @@ 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(";")); + // Prepare the style of the ripple + var rippleStyle = [ + $ripple.getAttribute("style"), + "background-color: " + targetColor, + "-ms-transform: " + scale, + "-moz-transform" + scale, + "-webkit-transform" + scale, + "transform: " + scale + ]; + + // Apply the style + $ripple.setAttribute("style", rippleStyle.join(";")); // This function is called when the animation is finished setTimeout(function() { @@ -108,14 +114,12 @@ window.ripples = { // Append ripple wrapper if not exists already var rippleInit = function(e, target) { - if (target.getElementsByClassName("ripple-wrapper").length === 0) { target.className += " withripple"; var $rippleWrapper = document.createElement("div"); $rippleWrapper.className = "ripple-wrapper"; target.appendChild($rippleWrapper); } - }; @@ -132,6 +136,7 @@ window.ripples = { rippleStart(e, $ripple); } }); + // if animation ends and user is not holding mouse then destroy the ripple bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { @@ -141,6 +146,7 @@ window.ripples = { rippleOut($ripple); } }); + // Destroy ripple when mouse is not holded anymore if the ripple still exists bind("mouseup", ".ripple-wrapper", function() { var $ripple = $ripplecache; diff --git a/dist/js/ripples.min.js b/dist/js/ripples.min.js index 40769308..e2cfa981 100644 --- a/dist/js/ripples.min.js +++ b/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)})}}; \ No newline at end of file +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=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g}),m=.1;i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;");var n=window.getComputedStyle(f).color;n=n.replace("rgb","rgba").replace(")",", "+m+")"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on";var o=[g.getAttribute("style"),"background-color: "+n,"-ms-transform: "+k,"-moz-transform"+k,"-webkit-transform"+k,"transform: "+k];g.setAttribute("style",o.join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},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)})}}; diff --git a/scripts/ripples.js b/scripts/ripples.js index f8d6cc0d..2f3539db 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -1,15 +1,17 @@ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* globals CustomEvent */ -/*jshint maxlen: 500 */ window.ripples = { init : function(withRipple) { "use strict"; // Cross browser matches function function matchesSelector(domElement, selector) { - var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || + var matches = domElement.matches || + domElement.matchesSelector || + domElement.webkitMatchesSelector || domElement.mozMatchesSelector || - domElement.msMatchesSelector || domElement.oMatchesSelector; + domElement.msMatchesSelector || + domElement.oMatchesSelector; return matches.call(domElement, selector); } @@ -31,36 +33,29 @@ window.ripples = { var rippleStart = function(e, target) { // Init variables - var $rippleWrapper = target, - $el = $rippleWrapper.parentNode, - $ripple = document.createElement("div"), - elPos = $el.getBoundingClientRect(), - 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, - targetColor, - rgbArr, + var $rippleWrapper = target, + $el = $rippleWrapper.parentNode, + $ripple = document.createElement("div"), + elPos = $el.getBoundingClientRect(), + mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, + scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", + rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), + _rippleOpacity = 0.1, refreshElementStyle; $ripplecache = $ripple; // Set ripple class - $ripple.className = "ripple"; + $ripple.className = "ripple"; + // 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. - targetColor = window.getComputedStyle($el).color; - - // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__ - // Not sure if regexp is quicker... - rgbArr = targetColor.split(","); - rgbArr.pop(); - rgbArr.push(" " + __rippleOpacity__ + ")"); - targetColor = rgbArr.join(","); - + // Get the clicked target's text color, this will be applied to the ripple as background-color. + 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 + ")"); // Insert new ripple into ripple wrapper $rippleWrapper.appendChild($ripple); @@ -70,11 +65,22 @@ 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(";")); + // Prepare the style of the ripple + var rippleStyle = [ + $ripple.getAttribute("style"), + "background-color: " + targetColor, + "-ms-transform: " + scale, + "-moz-transform" + scale, + "-webkit-transform" + scale, + "transform: " + scale + ]; + + // Apply the style + $ripple.setAttribute("style", rippleStyle.join(";")); // This function is called when the animation is finished setTimeout(function() { @@ -108,14 +114,12 @@ window.ripples = { // Append ripple wrapper if not exists already var rippleInit = function(e, target) { - if (target.getElementsByClassName("ripple-wrapper").length === 0) { target.className += " withripple"; var $rippleWrapper = document.createElement("div"); $rippleWrapper.className = "ripple-wrapper"; target.appendChild($rippleWrapper); } - }; @@ -132,6 +136,7 @@ window.ripples = { rippleStart(e, $ripple); } }); + // if animation ends and user is not holding mouse then destroy the ripple bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { @@ -141,6 +146,7 @@ window.ripples = { rippleOut($ripple); } }); + // Destroy ripple when mouse is not holded anymore if the ripple still exists bind("mouseup", ".ripple-wrapper", function() { var $ripple = $ripplecache; diff --git a/template/material/js/ripples.js b/template/material/js/ripples.js index f8d6cc0d..2f3539db 100644 --- a/template/material/js/ripples.js +++ b/template/material/js/ripples.js @@ -1,15 +1,17 @@ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* globals CustomEvent */ -/*jshint maxlen: 500 */ window.ripples = { init : function(withRipple) { "use strict"; // Cross browser matches function function matchesSelector(domElement, selector) { - var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || + var matches = domElement.matches || + domElement.matchesSelector || + domElement.webkitMatchesSelector || domElement.mozMatchesSelector || - domElement.msMatchesSelector || domElement.oMatchesSelector; + domElement.msMatchesSelector || + domElement.oMatchesSelector; return matches.call(domElement, selector); } @@ -31,36 +33,29 @@ window.ripples = { var rippleStart = function(e, target) { // Init variables - var $rippleWrapper = target, - $el = $rippleWrapper.parentNode, - $ripple = document.createElement("div"), - elPos = $el.getBoundingClientRect(), - 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, - targetColor, - rgbArr, + var $rippleWrapper = target, + $el = $rippleWrapper.parentNode, + $ripple = document.createElement("div"), + elPos = $el.getBoundingClientRect(), + mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, + scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", + rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), + _rippleOpacity = 0.1, refreshElementStyle; $ripplecache = $ripple; // Set ripple class - $ripple.className = "ripple"; + $ripple.className = "ripple"; + // 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. - targetColor = window.getComputedStyle($el).color; - - // This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__ - // Not sure if regexp is quicker... - rgbArr = targetColor.split(","); - rgbArr.pop(); - rgbArr.push(" " + __rippleOpacity__ + ")"); - targetColor = rgbArr.join(","); - + // Get the clicked target's text color, this will be applied to the ripple as background-color. + 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 + ")"); // Insert new ripple into ripple wrapper $rippleWrapper.appendChild($ripple); @@ -70,11 +65,22 @@ 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(";")); + // Prepare the style of the ripple + var rippleStyle = [ + $ripple.getAttribute("style"), + "background-color: " + targetColor, + "-ms-transform: " + scale, + "-moz-transform" + scale, + "-webkit-transform" + scale, + "transform: " + scale + ]; + + // Apply the style + $ripple.setAttribute("style", rippleStyle.join(";")); // This function is called when the animation is finished setTimeout(function() { @@ -108,14 +114,12 @@ window.ripples = { // Append ripple wrapper if not exists already var rippleInit = function(e, target) { - if (target.getElementsByClassName("ripple-wrapper").length === 0) { target.className += " withripple"; var $rippleWrapper = document.createElement("div"); $rippleWrapper.className = "ripple-wrapper"; target.appendChild($rippleWrapper); } - }; @@ -132,6 +136,7 @@ window.ripples = { rippleStart(e, $ripple); } }); + // if animation ends and user is not holding mouse then destroy the ripple bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { @@ -141,6 +146,7 @@ window.ripples = { rippleOut($ripple); } }); + // Destroy ripple when mouse is not holded anymore if the ripple still exists bind("mouseup", ".ripple-wrapper", function() { var $ripple = $ripplecache; diff --git a/template/material/js/ripples.min.js b/template/material/js/ripples.min.js index 40769308..e2cfa981 100644 --- a/template/material/js/ripples.min.js +++ b/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)})}}; \ No newline at end of file +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=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g}),m=.1;i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;");var n=window.getComputedStyle(f).color;n=n.replace("rgb","rgba").replace(")",", "+m+")"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on";var o=[g.getAttribute("style"),"background-color: "+n,"-ms-transform: "+k,"-moz-transform"+k,"-webkit-transform"+k,"transform: "+k];g.setAttribute("style",o.join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},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)})}};