mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 19:39:10 +03:00
106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
|
/* globals jQuery */
|
|
|
|
(function($) {
|
|
$.ripples = function(options) {
|
|
|
|
// Default options
|
|
var defaultOptions = {
|
|
"target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
|
|
};
|
|
|
|
|
|
// Fade out the ripple and then destroy it
|
|
function rippleOut(ripple) {
|
|
|
|
// Unbind events from ripple
|
|
ripple.off();
|
|
|
|
// Start the out animation
|
|
ripple.addClass("ripple-out");
|
|
|
|
// This function is called when the transition "out" ends
|
|
ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
|
|
ripple.remove();
|
|
});
|
|
|
|
}
|
|
|
|
// Apply custom options
|
|
options = $.extend(defaultOptions, options);
|
|
|
|
|
|
$(document)
|
|
.on("mousedown", options.target, function(e) {
|
|
// If the ripple wrapper does not exists, create it
|
|
if (!$(this).find(".ripple-wrapper").length) {
|
|
$(this).append("<div class=ripple-wrapper></div>");
|
|
}
|
|
|
|
var wrapper = $(this).find(".ripple-wrapper");
|
|
|
|
// Get the mouse position relative to the ripple wrapper
|
|
var wrapperOffset = wrapper.offset();
|
|
var relX = e.pageX - wrapperOffset.left;
|
|
var relY = e.pageY - wrapperOffset.top;
|
|
|
|
// Meet the new ripple
|
|
var ripple = $("<div></div>");
|
|
|
|
// Add to it the ripple class
|
|
ripple.addClass("ripple");
|
|
|
|
// Position it in the right place
|
|
ripple.css({"left": relX, "top": relY});
|
|
|
|
// Set the background color of the ripple
|
|
ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
|
|
|
|
// Spawn it
|
|
wrapper.append(ripple);
|
|
|
|
// Make sure the ripple has the styles applied (ugly hack but it works)
|
|
(function() { return window.getComputedStyle(ripple[0]).opacity; })();
|
|
|
|
// Set the new size
|
|
var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
|
|
|
|
ripple.css({
|
|
"-ms-transform": "scale(" + size + ")",
|
|
"-moz-transform": "scale(" + size + ")",
|
|
"-webkit-transform": "scale(" + size + ")",
|
|
"transform": "scale(" + size + ")"
|
|
});
|
|
|
|
// Start the transition
|
|
ripple.addClass("ripple-on");
|
|
ripple.data("animating", "on");
|
|
ripple.data("mousedown", "on");
|
|
|
|
// This function is called when the transition "on" ends
|
|
setTimeout(function() {
|
|
ripple.data("animating", "off");
|
|
if (ripple.data("mousedown") == "off") {
|
|
rippleOut(ripple);
|
|
}
|
|
}, 500);
|
|
|
|
// On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
|
|
wrapper.on("mouseup mouseleave", function() {
|
|
ripple.data("mousedown", "off");
|
|
// If the transition "on" is finished then we can destroy the ripple with transition "out"
|
|
if (ripple.data("animating") == "off") {
|
|
rippleOut(ripple);
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
$.fn.ripples = function() {
|
|
$.ripples({"target": $(this)});
|
|
};
|
|
|
|
})(jQuery);
|