diff --git a/css-compiled/ripples.css b/css-compiled/ripples.css index a3c19300..682e9a0f 100644 --- a/css-compiled/ripples.css +++ b/css-compiled/ripples.css @@ -1,4 +1,4 @@ -/* Generated by less 1.7.0 */ +/* Generated by less 1.7.5 */ .withripple { position: relative; } @@ -21,17 +21,14 @@ border-radius: 100%; background-color: rgba(0, 0, 0, 0.05); -webkit-transform: scale(1); - -ms-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50%; - -ms-transform-origin: 50%; transform-origin: 50%; opacity: 0; + pointer-events: none; } .ripple.ripple-on { -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; opacity: 1; } diff --git a/less/ripples.less b/less/ripples.less index 5f22f1d7..4c8b227b 100644 --- a/less/ripples.less +++ b/less/ripples.less @@ -28,6 +28,7 @@ -ms-transform-origin: 50%; transform-origin: 50%; opacity: 0; + pointer-events: none; } .ripple.ripple-on { -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; diff --git a/scripts/ripples.js b/scripts/ripples.js index 6be4ce47..1f518ff2 100644 --- a/scripts/ripples.js +++ b/scripts/ripples.js @@ -1,5 +1,6 @@ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ -/* globals CustomEvent, navigator */ +/* globals CustomEvent */ + var ripples = { init : function(withRipple) { "use strict"; @@ -28,7 +29,7 @@ var ripples = { var rippleStart = function(e, target) { // Init variables - var $rippleWrapper = (matchesSelector(target, ".ripple-wrapper")) ? target : target.parentNode, + var $rippleWrapper = target, $el = $rippleWrapper.parentNode, $ripple = document.createElement("div"), elPos = $el.getBoundingClientRect(), @@ -37,6 +38,8 @@ var ripples = { rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), refreshElementStyle; + $ripplecache = $ripple; + // Set ripple class $ripple.className = "ripple"; @@ -56,11 +59,6 @@ var ripples = { $ripple.className = "ripple ripple-on"; $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); - // Dirty fix for Firefox... seems like absolute elements inside tags do not trigger the "click" event - if (/firefox|crios|(^(?!.*chrome).*safari)|ip(ad|hone|od)/i.test(navigator.userAgent)) { - $el.click(); - } - // This function is called when the animation is finished setTimeout(function() { @@ -73,6 +71,7 @@ var ripples = { }; var rippleOut = function($ripple) { + console.log($ripple); // Clear previous animation $ripple.className = "ripple ripple-on ripple-out"; @@ -99,25 +98,29 @@ var ripples = { var $rippleWrapper = document.createElement("div"); $rippleWrapper.className = "ripple-wrapper"; target.appendChild($rippleWrapper); - rippleStart(e, $rippleWrapper); } }; + + var $ripplecache; + // Events handler // init RippleJS and start ripple effect on mousedown - bind("mousedown", withRipple, rippleInit); + bind("mouseover", withRipple, rippleInit); + console.log(withRipple); // start ripple effect on mousedown - bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart); + bind("mousedown", ".ripple-wrapper", rippleStart); // if animation ends and user is not holding mouse then destroy the ripple - bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { + bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { if (!mouseDown) { rippleOut($ripple); } }); // Destroy ripple when mouse is not holded anymore if the ripple still exists - bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { + bind("mouseup", ".ripple-wrapper", function() { + var $ripple = $ripplecache; if ($ripple.dataset.animating != 1) { rippleOut($ripple); }