mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-12 09:12:17 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update ripples.js

Browse Source
This commit is contained in:
Fez Vrasta 2014-08-25 17:09:09 +02:00
parent b18d49141b
commit 24bb10b550
1 changed files with 89 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
material/ripples.js
View File

@ -4,6 +4,10 @@ var ripples = {
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
// animations time
var rippleOutTime = 100,
rippleStartTime = 500;
// Helper to bind events on dynamically created elements // Helper to bind events on dynamically created elements
var bind = function(event, selector, callback) { var bind = function(event, selector, callback) {
document.addEventListener(event, function(e) { document.addEventListener(event, function(e) {
@ -53,7 +57,7 @@ var ripples = {
$ripple.dataset.animating = 0; $ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd); document.dispatchEvent(rippleEnd);
}, 500); }, rippleStartTime);
}; };
@ -64,7 +68,7 @@ var ripples = {
// Let ripple fade out (with CSS) // Let ripple fade out (with CSS)
setTimeout(function() { setTimeout(function() {
$ripple.remove(); $ripple.remove();
}, 1000); }, rippleOutTime);
}; };
// Helper, need to know if mouse is up or down // Helper, need to know if mouse is up or down
@ -93,15 +97,15 @@ var ripples = {
// init RippleJS and start ripple effect on mousedown // init RippleJS and start ripple effect on mousedown
bind("mousedown", withRipple, rippleInit); bind("mousedown", withRipple, rippleInit);
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".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 // if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper, .ripple", function(e, $ripple) { bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
if (!mouseDown) { if (!mouseDown) {
rippleOut($ripple); 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", function(e, $ripple) { bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
if ($ripple.dataset.animating != 1) { if ($ripple.dataset.animating != 1) {
rippleOut($ripple); rippleOut($ripple);
} }