mdb-ui-kit/material.js

118 lines
4.2 KiB
JavaScript
Raw Normal View History

2014-08-18 18:25:33 +04:00
$(function (){
// with ripple elements
var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
// Add ripple elements to material buttons
$(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
2014-08-18 18:25:33 +04:00
// Add fake-checkbox to material checkboxes
$(".checkbox label input").after("<span class=ripple></span><span class=check></span><span class=box></span>");
2014-08-18 18:25:33 +04:00
// Add fake-radio to material radios
$(".radio label input").after("<span class=ripple></span><span class=circle></span><span class=check></span>");
2014-08-18 18:25:33 +04:00
// Add elements for material inputs
$("input.form-control, textarea.form-control, select.form-control").each( function() {
2014-08-18 18:25:33 +04:00
$(this).wrap("<div class=form-control-wrapper></div>");
$(this).after("<span class=material-input></span>");
if ($(this).hasClass("floating-label")) {
var placeholder = $(this).attr("placeholder");
$(this).attr("placeholder", null).removeClass("floating-label");
$(this).after("<div class=floating-label>" + placeholder + "</div>");
}
if ($(this).val() === "") {
$(this).addClass("empty");
}
});
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"});
2014-08-18 18:25:33 +04:00
// 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
});
2014-08-18 18:25:33 +04:00
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() {
2014-08-18 18:25:33 +04:00
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() {
2014-08-18 18:25:33 +04:00
$rippleWrapper.attr("class", "ripple-wrapper").attr("style", "");
$ripple.attr("class", "ripple").attr("style", "");
});
};
// Material inputs engine (ripple effect)
2014-08-18 18:25:33 +04:00
$(document).on("click", ".checkbox label, .radio label", function() {
var $ripple = $(this).find(".ripple"),
2014-08-18 18:25:33 +04:00
timestamp = "t" + new Date().getTime();
$ripple.attr("class", "ripple");
$ripple.addClass("animate").addClass(timestamp);
2014-08-18 18:25:33 +04:00
setTimeout(function() {
if ($ripple.hasClass(timestamp)) {
$ripple.removeClass("animate").removeClass(timestamp);
2014-08-18 18:25:33 +04:00
}
}, 800);
2014-08-18 18:25:33 +04:00
});
$(document).on("change", ".form-control", function() {
if ($(this).val() !== "") {
$(this).removeClass("empty");
} else {
$(this).addClass("empty");
}
});
});