From 89405a5cd3f8d8943075152e8991720b308a2448 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesu=CC=81s=20Pe=CC=81rez?= Date: Fri, 23 Jan 2015 23:56:09 +0100 Subject: [PATCH] Allowing to load individual modules --- Gruntfile.js | 23 ++- README.md | 3 +- dist/js/npm/material.js | 227 +++++++++++++++++++++++++++++ dist/js/npm/npm.js | 3 + dist/js/{npm.js => npm/ripples.js} | 222 ---------------------------- package.json | 2 +- 6 files changed, 249 insertions(+), 231 deletions(-) create mode 100644 dist/js/npm/material.js create mode 100644 dist/js/npm/npm.js rename dist/js/{npm.js => npm/ripples.js} (50%) 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" },