diff --git a/Gruntfile.js b/Gruntfile.js
index 61ff2de0..77f42651 100644
--- a/Gruntfile.js
+++ b/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) {
diff --git a/README.md b/README.md
index f96070d3..0be7b071 100644
--- a/README.md
+++ b/README.md
@@ -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');
diff --git a/dist/js/npm/material.js b/dist/js/npm/material.js
new file mode 100644
index 00000000..f412e4b5
--- /dev/null
+++ b/dist/js/npm/material.js
@@ -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("");
+ },
+ "togglebutton": function(selector) {
+ // Add fake-checkbox to material checkboxes
+ $((selector) ? selector : this.options.togglebuttonElements)
+ .filter(":notmdproc")
+ .data("mdproc", true)
+ .after("");
+ },
+ "radio": function(selector) {
+ // Add fake-radio to material radios
+ $((selector) ? selector : this.options.radioElements)
+ .filter(":notmdproc")
+ .data("mdproc", true)
+ .after("");
+ },
+ "input": function(selector) {
+ $((selector) ? selector : this.options.inputElements)
+ .filter(":notmdproc")
+ .data("mdproc", true)
+ .each( function() {
+ var $this = $(this);
+ $this.wrap("");
+ $this.after("");
+
+ // Add floating label if required
+ if ($this.hasClass("floating-label")) {
+ var placeholder = $this.attr("placeholder");
+ $this.attr("placeholder", null).removeClass("floating-label");
+ $this.after("" + placeholder + "
");
+ }
+
+ // Add hint label if required
+ if ($this.attr("data-hint")) {
+ $this.after("" + $this.attr("data-hint") + "
");
+ }
+
+ // 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);
+
+};
diff --git a/dist/js/npm/npm.js b/dist/js/npm/npm.js
new file mode 100644
index 00000000..3387adac
--- /dev/null
+++ b/dist/js/npm/npm.js
@@ -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")
diff --git a/dist/js/npm.js b/dist/js/npm/ripples.js
similarity index 50%
rename from dist/js/npm.js
rename to dist/js/npm/ripples.js
index b197a6c3..34bcb692 100644
--- a/dist/js/npm.js
+++ b/dist/js/npm/ripples.js
@@ -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("");
- },
- "togglebutton": function(selector) {
- // Add fake-checkbox to material checkboxes
- $((selector) ? selector : this.options.togglebuttonElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .after("");
- },
- "radio": function(selector) {
- // Add fake-radio to material radios
- $((selector) ? selector : this.options.radioElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .after("");
- },
- "input": function(selector) {
- $((selector) ? selector : this.options.inputElements)
- .filter(":notmdproc")
- .data("mdproc", true)
- .each( function() {
- var $this = $(this);
- $this.wrap("");
- $this.after("");
-
- // Add floating label if required
- if ($this.hasClass("floating-label")) {
- var placeholder = $this.attr("placeholder");
- $this.attr("placeholder", null).removeClass("floating-label");
- $this.after("" + placeholder + "
");
- }
-
- // Add hint label if required
- if ($this.attr("data-hint")) {
- $this.after("" + $this.attr("data-hint") + "
");
- }
-
- // 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 */
diff --git a/package.json b/package.json
index e65add89..9f70ab8d 100644
--- a/package.json
+++ b/package.json
@@ -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"
},