mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-07 05:13:24 +03:00
Allowing to load individual modules
This commit is contained in:
Jesús Pérez
parent
f6578f824d
commit
89405a5cd3
23
Gruntfile.js
23
Gruntfile.js
|
|
@ -272,17 +272,26 @@ module.exports = function(grunt) {
|
|||
|
||||
grunt.registerTask("commonjs", "Generate CommonJS entrypoint module in dist dir.", function () {
|
||||
var distPath = "dist/js/";
|
||||
var npmPath = distPath + "npm/";
|
||||
var srcFiles = ["material", "ripples"];
|
||||
var destFile = distPath + "npm.js";
|
||||
var moduleOutputJs = COMMONJS_BANNER;
|
||||
var entryPoint = npmPath + "npm.js";
|
||||
var entryCode = COMMONJS_BANNER;
|
||||
|
||||
|
||||
moduleOutputJs += "\nmodule.exports = function(jQuery) {\n";
|
||||
srcFiles.forEach(function(file) {
|
||||
moduleOutputJs += grunt.file.read(distPath + file + ".js");
|
||||
var finalCode = COMMONJS_BANNER;
|
||||
|
||||
entryCode += "module.exports." + file + " = require(\"./" + file + ".js\")\n";
|
||||
finalCode += "\nmodule.exports = function(jQuery) {\n";
|
||||
finalCode += grunt.file.read(distPath + file + ".js");
|
||||
finalCode += "\n};\n";
|
||||
grunt.file.write(npmPath + file + ".js", finalCode);
|
||||
grunt.log.write("File " + npmPath + file + ".js created.");
|
||||
});
|
||||
moduleOutputJs += "\n};\n";
|
||||
grunt.file.write(destFile, moduleOutputJs);
|
||||
grunt.log.write("File dist/js/npm.js created.");
|
||||
|
||||
grunt.file.write(entryPoint, entryCode);
|
||||
grunt.log.write("File " + entryPoint + " created.");
|
||||
|
||||
});
|
||||
|
||||
grunt.registerTask("build", function(target) {
|
||||
|
|
|
|||
|
|
@ -197,7 +197,8 @@ This library is [CommonJS](http://www.commonjs.org/) compatible, so you can use
|
|||
```javascript
|
||||
var jquery = require('jquery');
|
||||
require('bootstrap')(jquery);
|
||||
require('bootstrap-material')(jquery);
|
||||
require('bootstrap-material').material(jquery);
|
||||
require('bootstrap-material').ripples(jquery);
|
||||
|
||||
console.log('Is Bootstrap loaded?');
|
||||
console.log(typeof jquery.emulateTransitionEnd === 'function');
|
||||
|
|
|
|||
227
dist/js/npm/material.js
vendored
Normal file
227
dist/js/npm/material.js
vendored
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
|
||||
|
||||
module.exports = function(jQuery) {
|
||||
/* globals jQuery */
|
||||
|
||||
(function($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$.material = {
|
||||
"options": {
|
||||
// These options set what will be started by $.material.init()
|
||||
"input": true,
|
||||
"ripples": true,
|
||||
"checkbox": true,
|
||||
"togglebutton": true,
|
||||
"radio": true,
|
||||
"arrive": true,
|
||||
"autofill": false,
|
||||
|
||||
"withRipples": [
|
||||
".btn:not(.btn-link)",
|
||||
".card-image",
|
||||
".navbar a:not(.withoutripple)",
|
||||
".dropdown-menu a",
|
||||
".nav-tabs a:not(.withoutripple)",
|
||||
".withripple"
|
||||
].join(","),
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=toggle></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=circle></span><span class=check></span>");
|
||||
},
|
||||
"input": function(selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
|
||||
// Add floating label if required
|
||||
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>");
|
||||
}
|
||||
|
||||
// Add hint label if required
|
||||
if ($this.attr("data-hint")) {
|
||||
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
|
||||
// Support for file input
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "" && $this[0].checkValidity()) {
|
||||
$this.addClass("empty");
|
||||
} else {
|
||||
$this.removeClass("empty");
|
||||
}
|
||||
})
|
||||
.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) {
|
||||
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);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
$((selector) ? selector : this.options.withRipples).ripples();
|
||||
},
|
||||
"autofill": function() {
|
||||
|
||||
// This part of code will detect autofill when the page is loading (username and password inputs for example)
|
||||
var loading = setInterval(function() {
|
||||
$("input[type!=checkbox]").each(function() {
|
||||
if ($(this).val() && $(this).val() !== $(this).attr("value")) {
|
||||
$(this).trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
|
||||
setTimeout(function() {
|
||||
clearInterval(loading);
|
||||
}, 10000);
|
||||
// Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
|
||||
var focused;
|
||||
$(document)
|
||||
.on("focus", "input", function() {
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function() {
|
||||
$inputs.each(function() {
|
||||
if ($(this).val() !== $(this).attr("value")) {
|
||||
$(this).trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", "input", function() {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
"init": function() {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
this.ripples();
|
||||
}
|
||||
if (this.options.input) {
|
||||
this.input();
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
this.checkbox();
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
this.togglebutton();
|
||||
}
|
||||
if (this.options.radio) {
|
||||
this.radio();
|
||||
}
|
||||
if (this.options.autofill) {
|
||||
this.autofill();
|
||||
}
|
||||
|
||||
if (document.arrive && this.options.arrive) {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
$(document).arrive(this.options.withRipples, function() {
|
||||
$.material.ripples($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.input) {
|
||||
$(document).arrive(this.options.inputElements, function() {
|
||||
$.material.input($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
$(document).arrive(this.options.checkboxElements, function() {
|
||||
$.material.checkbox($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.radio) {
|
||||
$(document).arrive(this.options.radioElements, function() {
|
||||
$.material.radio($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
$(document).arrive(this.options.togglebuttonElements, function() {
|
||||
$.material.togglebutton($(this));
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
};
|
||||
3
dist/js/npm/npm.js
vendored
Normal file
3
dist/js/npm/npm.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
|
||||
module.exports.material = require("./material.js")
|
||||
module.exports.ripples = require("./ripples.js")
|
||||
222
dist/js/npm.js → dist/js/npm/ripples.js
vendored
222
dist/js/npm.js → dist/js/npm/ripples.js
vendored
|
|
@ -1,228 +1,6 @@
|
|||
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
|
||||
|
||||
module.exports = function(jQuery) {
|
||||
/* globals jQuery */
|
||||
|
||||
(function($) {
|
||||
// Selector to select only not already processed elements
|
||||
$.expr[":"].notmdproc = function(obj){
|
||||
if ($(obj).data("mdproc")) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
function _isChar(evt) {
|
||||
if (typeof evt.which == "undefined") {
|
||||
return true;
|
||||
} else if (typeof evt.which == "number" && evt.which > 0) {
|
||||
return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
$.material = {
|
||||
"options": {
|
||||
// These options set what will be started by $.material.init()
|
||||
"input": true,
|
||||
"ripples": true,
|
||||
"checkbox": true,
|
||||
"togglebutton": true,
|
||||
"radio": true,
|
||||
"arrive": true,
|
||||
"autofill": false,
|
||||
|
||||
"withRipples": [
|
||||
".btn:not(.btn-link)",
|
||||
".card-image",
|
||||
".navbar a:not(.withoutripple)",
|
||||
".dropdown-menu a",
|
||||
".nav-tabs a:not(.withoutripple)",
|
||||
".withripple"
|
||||
].join(","),
|
||||
"inputElements": "input.form-control, textarea.form-control, select.form-control",
|
||||
"checkboxElements": ".checkbox > label > input[type=checkbox]",
|
||||
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
|
||||
"radioElements": ".radio > label > input[type=radio]"
|
||||
},
|
||||
"checkbox": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.checkboxElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=ripple></span><span class=check></span>");
|
||||
},
|
||||
"togglebutton": function(selector) {
|
||||
// Add fake-checkbox to material checkboxes
|
||||
$((selector) ? selector : this.options.togglebuttonElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=toggle></span>");
|
||||
},
|
||||
"radio": function(selector) {
|
||||
// Add fake-radio to material radios
|
||||
$((selector) ? selector : this.options.radioElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.after("<span class=circle></span><span class=check></span>");
|
||||
},
|
||||
"input": function(selector) {
|
||||
$((selector) ? selector : this.options.inputElements)
|
||||
.filter(":notmdproc")
|
||||
.data("mdproc", true)
|
||||
.each( function() {
|
||||
var $this = $(this);
|
||||
$this.wrap("<div class=form-control-wrapper></div>");
|
||||
$this.after("<span class=material-input></span>");
|
||||
|
||||
// Add floating label if required
|
||||
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>");
|
||||
}
|
||||
|
||||
// Add hint label if required
|
||||
if ($this.attr("data-hint")) {
|
||||
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
|
||||
}
|
||||
|
||||
// Set as empty if is empty (damn I must improve this...)
|
||||
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
|
||||
$this.addClass("empty");
|
||||
}
|
||||
|
||||
// Support for file input
|
||||
if ($this.parent().next().is("[type=file]")) {
|
||||
$this.parent().addClass("fileinput");
|
||||
var $input = $this.parent().next().detach();
|
||||
$this.after($input);
|
||||
}
|
||||
});
|
||||
|
||||
$(document)
|
||||
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
|
||||
.on("keydown paste", ".form-control", function(e) {
|
||||
if(_isChar(e)) {
|
||||
$(this).removeClass("empty");
|
||||
}
|
||||
})
|
||||
.on("keyup change", ".form-control", function() {
|
||||
var $this = $(this);
|
||||
if($this.val() === "" && $this[0].checkValidity()) {
|
||||
$this.addClass("empty");
|
||||
} else {
|
||||
$this.removeClass("empty");
|
||||
}
|
||||
})
|
||||
.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) {
|
||||
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);
|
||||
});
|
||||
},
|
||||
"ripples": function(selector) {
|
||||
$((selector) ? selector : this.options.withRipples).ripples();
|
||||
},
|
||||
"autofill": function() {
|
||||
|
||||
// This part of code will detect autofill when the page is loading (username and password inputs for example)
|
||||
var loading = setInterval(function() {
|
||||
$("input[type!=checkbox]").each(function() {
|
||||
if ($(this).val() && $(this).val() !== $(this).attr("value")) {
|
||||
$(this).trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
|
||||
setTimeout(function() {
|
||||
clearInterval(loading);
|
||||
}, 10000);
|
||||
// Now we just listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
|
||||
var focused;
|
||||
$(document)
|
||||
.on("focus", "input", function() {
|
||||
var $inputs = $(this).parents("form").find("input").not("[type=file]");
|
||||
focused = setInterval(function() {
|
||||
$inputs.each(function() {
|
||||
if ($(this).val() !== $(this).attr("value")) {
|
||||
$(this).trigger("change");
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
})
|
||||
.on("blur", "input", function() {
|
||||
clearInterval(focused);
|
||||
});
|
||||
},
|
||||
"init": function() {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
this.ripples();
|
||||
}
|
||||
if (this.options.input) {
|
||||
this.input();
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
this.checkbox();
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
this.togglebutton();
|
||||
}
|
||||
if (this.options.radio) {
|
||||
this.radio();
|
||||
}
|
||||
if (this.options.autofill) {
|
||||
this.autofill();
|
||||
}
|
||||
|
||||
if (document.arrive && this.options.arrive) {
|
||||
if ($.fn.ripples && this.options.ripples) {
|
||||
$(document).arrive(this.options.withRipples, function() {
|
||||
$.material.ripples($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.input) {
|
||||
$(document).arrive(this.options.inputElements, function() {
|
||||
$.material.input($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.checkbox) {
|
||||
$(document).arrive(this.options.checkboxElements, function() {
|
||||
$.material.checkbox($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.radio) {
|
||||
$(document).arrive(this.options.radioElements, function() {
|
||||
$.material.radio($(this));
|
||||
});
|
||||
}
|
||||
if (this.options.togglebutton) {
|
||||
$(document).arrive(this.options.togglebuttonElements, function() {
|
||||
$.material.togglebutton($(this));
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals jQuery, navigator */
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "bootstrap-material",
|
||||
"version": "0.2.0",
|
||||
"description": "Material Design for Bootstrap 3",
|
||||
"main": "./dist/js/npm",
|
||||
"main": "./dist/js/npm/npm",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user