mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-24 02:24:09 +03:00
fd93d74711
The index.html file works. Copying the template folder, or using the structure of this folder, a new project can be started. This file includes the compiled CSS and the material JS file, alongwith the ripples CSS and JS files.
84 lines
3.0 KiB
JavaScript
84 lines
3.0 KiB
JavaScript
/* globals ripples */
|
|
|
|
$(function (){
|
|
|
|
if (ripples) {
|
|
ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple");
|
|
}
|
|
|
|
var initInputs = function() {
|
|
// Add fake-checkbox to material checkboxes
|
|
$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>");
|
|
|
|
// Add fake-radio to material radios
|
|
$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>");
|
|
|
|
// Add elements for material inputs
|
|
$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() {
|
|
if ($(this).is(".bs-material")) { return; }
|
|
$(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).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") {
|
|
$(this).addClass("empty");
|
|
}
|
|
|
|
if ($(this).parent().next().is("[type=file]")) {
|
|
$(this).parent().addClass("fileinput");
|
|
var $input = $(this).parent().next().detach();
|
|
$(this).after($input);
|
|
}
|
|
});
|
|
|
|
};
|
|
initInputs();
|
|
|
|
// Support for "arrive.js" to dynamically detect creation of elements
|
|
// include it before this script to take advantage of this feature
|
|
// https://github.com/uzairfarooq/arrive/
|
|
if (document.arrive) {
|
|
document.arrive("input, textarea, select", function() {
|
|
initInputs();
|
|
});
|
|
}
|
|
|
|
$(document).on("change", ".checkbox input", function() {
|
|
$(this).blur();
|
|
});
|
|
|
|
$(document).on("keyup change", ".form-control", function() {
|
|
var self = $(this);
|
|
setTimeout(function() {
|
|
if (self.val() === "") {
|
|
self.addClass("empty");
|
|
} else {
|
|
self.removeClass("empty");
|
|
}
|
|
}, 1);
|
|
});
|
|
$(document)
|
|
.on("focus", ".form-control-wrapper.fileinput", function() {
|
|
$(this).find("input").addClass("focus");
|
|
})
|
|
.on("blur", ".form-control-wrapper.fileinput", function() {
|
|
$(this).find("input").removeClass("focus");
|
|
})
|
|
.on("change", ".form-control-wrapper.fileinput [type=file]", function() {
|
|
var value = "";
|
|
$.each($(this)[0].files, function(i, file) {
|
|
console.log(file);
|
|
value += file.name + ", ";
|
|
});
|
|
value = value.substring(0, value.length - 2);
|
|
if (value) {
|
|
$(this).prev().removeClass("empty");
|
|
} else {
|
|
$(this).prev().addClass("empty");
|
|
}
|
|
$(this).prev().val(value);
|
|
});
|
|
}); |