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 material.js

Browse Source
This commit is contained in:
Fez Vrasta 2014-08-25 13:04:51 +02:00
parent 0d14b3cfd3
commit f847a82933
1 changed files with 1 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
material/material.js
View File

@ -1,11 +1,8 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
$(function (){ $(function (){
// with ripple elements
var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
// Add ripple elements to material buttons ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
$(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes
$(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>"); $(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>");
@ -27,74 +24,6 @@ $(function (){
} }
}); });
var mouseDown = false;
$(document).mousedown(function() {
mouseDown = true;
}).mouseup(function() {
mouseDown = false;
});
// Material buttons engine
$(document).on("mousedown", withRipple, function(e){
// Cache elements
var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"),
$ripple = $self.find(".ripple");
// Remove previous animation
$ripple.attr("class", "ripple");
$rippleWrapper.stop(true, true);
// Get mouse position
var parentOffset = $self.offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
// Move ripple to the click position
$ripple.attr({"style": "top: " + relY + "px; left:" + relX + "px"});
// Start the animation
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", true);
var scaleVal = "scale(" + Math.round($rippleWrapper.width() / 10) + ")";
$ripple.attr("class", "ripple ripple-on").css({
"-ms-transform": scaleVal,
"-moz-transform": scaleVal,
"-webkit-transform": scaleVal,
"transform": scaleVal
});
setTimeout(function() {
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd");
}, 500);
})
.on("rippleEnd", withRipple, function() {
if (!mouseDown) {
var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"),
$ripple = $self.find(".ripple");
rippleOut($ripple, $rippleWrapper);
}
})
.on("mouseup mouseleave", withRipple, function() {
var $self = $(this),
$rippleWrapper = $self.find(".ripple-wrapper"),
$ripple = $self.find(".ripple");
if (!$rippleWrapper.data("animating")) {
rippleOut($ripple, $rippleWrapper);
}
});
var rippleOut = function($ripple, $rippleWrapper) {
$ripple.attr("class", "ripple ripple-on ripple-out");
$rippleWrapper.fadeOut(800, function() {
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
$ripple.attr("class", "ripple").attr("style", "");
});
};
// Material inputs engine (ripple effect) // Material inputs engine (ripple effect)
$(document).on("click", ".checkbox label, .radio label", function() { $(document).on("click", ".checkbox label, .radio label", function() {
var $ripple = $(this).find(".ripple"), var $ripple = $(this).find(".ripple"),