mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-21 14:10:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixes #18 by removing old ripple when creating new ripple

Browse Source
This commit is contained in:
Joel 2014-09-19 01:03:54 -07:00
parent fc8da3bc5a
commit 2e4b2de33c
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
scripts/ripples.js
View File

@ -34,8 +34,12 @@ var ripples = {
elPos = $el.getBoundingClientRect(), elPos = $el.getBoundingClientRect(),
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
refreshElementStyle; refreshElementStyle;
// Clear all previous ripple animations
$rippleWrapper.innerHTML = "";
// Set ripple class // Set ripple class
$ripple.className = "ripple"; $ripple.className = "ripple";
@ -56,7 +60,7 @@ var ripples = {
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
// Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event // Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event
if (/firefox/i.test(navigator.userAgent)) { if (e.buttons == 1 && /firefox/i.test(navigator.userAgent)) {
$el.click(); $el.click();
} }
@ -65,7 +69,7 @@ var ripples = {
// Let know to other functions that this element has finished the animation // Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0; $ripple.dataset.animating = 0;
rippleOut($ripple); document.dispatchEvent(rippleEnd);
}, rippleStartTime); }, rippleStartTime);
@ -109,7 +113,12 @@ var ripples = {
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart); bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart);
// if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
if (!mouseDown) {
rippleOut($ripple);
}
});
// Destroy ripple when mouse is not holded anymore if the ripple still exists // 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, .ripple-wrapper .ripple", function(e, $ripple) {
if ($ripple.dataset.animating != 1) { if ($ripple.dataset.animating != 1) {