Really allowing to load individual modules (fixing last commit)

Gruntfile.js

@@ -1,12 +1,23 @@
 var COMMONJS_BANNER = "// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.\n";
+var COMMONJS_HEAD = "\nmodule.exports = function(jQuery) {\n";
+var COMMONJS_FOOT = "\n};\n";
+
 
 module.exports = function(grunt) {
   "use strict";
 
   require("load-grunt-tasks")(grunt);
 
-  grunt.initConfig({
+  function createCommonjsCode (srcPath, destPath) {
+    var finalCode = COMMONJS_BANNER;
     
+    finalCode += COMMONJS_HEAD;
+    finalCode += grunt.file.read(srcPath);
+    finalCode += COMMONJS_FOOT;
+    grunt.file.write(destPath, finalCode);
+  }
+
+  grunt.initConfig({
 
     // Compile less to .css
     // Compile less to .min.css
@@ -273,25 +284,9 @@ 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 entryPoint = npmPath + "npm.js";
-    var entryCode = COMMONJS_BANNER;
-    
-    
-    srcFiles.forEach(function(file) {
-      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.");
-    });
-
-    grunt.file.write(entryPoint, entryCode);
-    grunt.log.write("File " + entryPoint + " created.");
     
+    createCommonjsCode(distPath + "material.js", npmPath + "material.js");
+    createCommonjsCode(distPath + "ripples.js", npmPath + "browserify-material-ripples/ripples.js");    
   });
   
   grunt.registerTask("build", function(target) {

README.md

@@ -17,7 +17,9 @@ You may install this theme using Bower or Meteor:
 
 - Bower : `bower install bootstrap-material-design`
 - Meteor: `meteor add fezvrasta:bootstrap-material-design`
-- NPM: `npm i bootstrap-material-design`
+- NPM:
+ - Material.js: `npm i bootstrap-material`
+ - Ripples.js: `npm i bootstrap-material-ripples`
  
 If you prefer, you can include this framework in your project using our official CDN:
 
@@ -197,11 +199,11 @@ This library is [CommonJS](http://www.commonjs.org/) compatible, so you can use
 ```javascript
 var jquery = require('jquery');
 require('bootstrap')(jquery);
-require('bootstrap-material').material(jquery);
-require('bootstrap-material').ripples(jquery);
+require('bootstrap-material')(jquery);
+require('bootstrap-material-ripples')(jquery);
 
 console.log('Is Bootstrap loaded?');
-console.log(typeof jquery.emulateTransitionEnd === 'function');
+console.log(typeof jquery().modal === 'function');
 console.log('Is Bootstrap Material loaded?');
 console.log(typeof jquery.material === 'object');
 ```

dist/js/npm/bootstrap-material-ripples/README.md

@@ -0,0 +1 @@
+Ripples.js library of the Bootstrap theme "Material Design". Please, visit the [repository](https://github.com/FezVrasta/bootstrap-material-design#ripplesjs) to know more about it.

dist/js/npm/bootstrap-material-ripples/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "bootstrap-material-ripples",
+  "version": "0.2.0",
+  "description": "Material Design for Bootstrap 3 (Ripples.js component)",
+  "main": "./ripples",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FezVrasta/bootstrap-material-design.git"
+  },
+  "author": {
+    "name": "Federico Zivolo"
+  },
+  "license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md",
+  "bugs": {
+    "url": "https://github.com/FezVrasta/bootstrap-material-design/issues"
+  },
+  "homepage": "https://github.com/FezVrasta/bootstrap-material-design",
+  "devDependencies": {}
+}

dist/js/npm/browserify-material-ripples/ripples.js

@@ -0,0 +1,329 @@
+// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
+
+module.exports = function(jQuery) {
+/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
+/* globals jQuery, navigator */
+
+(function($, window, document, undefined) {
+
+  "use strict";
+
+  /**
+   * Define the name of the plugin
+   */
+  var ripples = "ripples";
+
+
+  /**
+   * Get an instance of the plugin
+   */
+  var self = null;
+
+
+  /**
+   * Define the defaults of the plugin
+   */
+  var defaults = {};
+
+
+  /**
+   * Create the main plugin function
+   */
+  function Ripples(element, options) {
+    self = this;
+
+    this.element = $(element);
+
+    this.options = $.extend({}, defaults, options);
+
+    this._defaults = defaults;
+    this._name = ripples;
+
+    this.init();
+  }
+
+
+  /**
+   * Initialize the plugin
+   */
+  Ripples.prototype.init = function() {
+    var $element  = this.element;
+
+    $element.on("mousedown touchstart", function(event) {
+      /**
+       * Verify if the user is just touching on a device and return if so
+       */
+      if(self.isTouch() && event.type === "mousedown") {
+        return false;
+      }
+
+
+      /**
+       * Verify if the current element already has a ripple wrapper element and
+       * creates if it doesn't
+       */
+      if(!($element.find(".ripple-wrapper").length)) {
+        $element.append("<div class=\"ripple-wrapper\"></div>");
+      }
+
+
+      /**
+       * Find the ripple wrapper
+       */
+      var $wrapper = $element.children(".ripple-wrapper");
+
+
+      /**
+       * Get relY and relX positions
+       */
+      var relY = self.getRelY($wrapper, event);
+      var relX = self.getRelX($wrapper, event);
+
+
+      /**
+       * If relY and/or relX are false, return the event
+       */
+      if(!relY && !relX) {
+        return;
+      }
+
+
+      /**
+       * Get the ripple color
+       */
+      var rippleColor = self.getRipplesColor($element);
+
+
+      /**
+       * Create the ripple element
+       */
+      var $ripple = $("<div></div>");
+
+      $ripple
+      .addClass("ripple")
+      .css({
+        "left": relX,
+        "top": relY,
+        "background-color": rippleColor
+      });
+
+
+      /**
+       * Append the ripple to the wrapper
+       */
+      $wrapper.append($ripple);
+
+
+      /**
+       * Make sure the ripple has the styles applied (ugly hack but it works)
+       */
+      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
+
+
+      /**
+       * Turn on the ripple animation
+       */
+      self.rippleOn($element, $ripple);
+
+
+      /**
+       * Call the rippleEnd function when the transition "on" ends
+       */
+      setTimeout(function() {
+        self.rippleEnd($ripple);
+      }, 500);
+
+
+      /**
+       * Detect when the user leaves the element
+       */
+      $element.on("mouseup mouseleave touchend", function() {
+        $ripple.data("mousedown", "off");
+
+        if($ripple.data("animating") === "off") {
+          self.rippleOut($ripple);
+        }
+      });
+
+    });
+  };
+
+
+  /**
+   * Get the new size based on the element height/width and the ripple width
+   */
+  Ripples.prototype.getNewSize = function($element, $ripple) {
+
+    return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
+  };
+
+
+  /**
+   * Get the relX
+   */
+  Ripples.prototype.getRelX = function($wrapper,  event) {
+    var wrapperOffset = $wrapper.offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageX - wrapperOffset.left;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length !== 1) {
+        return event.touches[0].pageX - wrapperOffset.left;
+      }
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the relY
+   */
+  Ripples.prototype.getRelY = function($wrapper, event) {
+    var wrapperOffset = $wrapper.offset();
+
+    if(!self.isTouch()) {
+      /**
+       * Get the mouse position relative to the ripple wrapper
+       */
+      return event.pageY - wrapperOffset.top;
+    } else {
+      /**
+       * Make sure the user is using only one finger and then get the touch
+       * position relative to the ripple wrapper
+       */
+      event = event.originalEvent;
+
+      if(event.touches.length !== 1) {
+        return event.touches[0].pageY - wrapperOffset.top;
+      }
+
+      return false;
+    }
+  };
+
+
+  /**
+   * Get the ripple color
+   */
+  Ripples.prototype.getRipplesColor = function($element) {
+
+    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+
+    return color;
+  };
+
+
+  /**
+   * Verify if the client browser has transistion support
+   */
+  Ripples.prototype.hasTransitionSupport = function() {
+    var thisBody  = document.body || document.documentElement;
+    var thisStyle = thisBody.style;
+
+    var support = (
+      thisStyle.transition !== undefined ||
+      thisStyle.WebkitTransition !== undefined ||
+      thisStyle.MozTransition !== undefined ||
+      thisStyle.MsTransition !== undefined ||
+      thisStyle.OTransition !== undefined
+    );
+
+    return support;
+  };
+
+
+  /**
+   * Verify if the client is using a mobile device
+   */
+  Ripples.prototype.isTouch = function() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  };
+
+
+  /**
+   * End the animation of the ripple
+   */
+  Ripples.prototype.rippleEnd = function($ripple) {
+    $ripple.data("animating", "off");
+
+    if($ripple.data("mousedown") === "off") {
+      self.rippleOut($ripple);
+    }
+  };
+
+
+  /**
+   * Turn off the ripple effect
+   */
+  Ripples.prototype.rippleOut = function($ripple) {
+    $ripple.off();
+
+    if(self.hasTransitionSupport()) {
+      $ripple.addClass("ripple-out");
+    } else {
+      $ripple.animate({"opacity": 0}, 100, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+
+    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+      $ripple.remove();
+    });
+  };
+
+
+  /**
+   * Turn on the ripple effect
+   */
+  Ripples.prototype.rippleOn = function($element, $ripple) {
+    var size = self.getNewSize($element, $ripple);
+
+    if(self.hasTransitionSupport()) {
+      $ripple
+      .css({
+        "-ms-transform": "scale(" + size + ")",
+        "-moz-transform": "scale(" + size + ")",
+        "-webkit-transform": "scale(" + size + ")",
+        "transform": "scale(" + size + ")"
+      })
+      .addClass("ripple-on")
+      .data("animating", "on")
+      .data("mousedown", "on");
+    } else {
+      $ripple.animate({
+        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+        "opacity": 0.2
+      }, 500, function() {
+        $ripple.trigger("transitionend");
+      });
+    }
+  };
+
+
+  /**
+   * Create the jquery plugin function
+   */
+  $.fn.ripples = function(options) {
+    return this.each(function() {
+      if(!$.data(this, "plugin_" + ripples)) {
+        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+      }
+    });
+  };
+
+})(jQuery, window, document);
+
+};

dist/js/npm/npm.js

@@ -1,3 +0,0 @@
-// 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")

package.json

@@ -2,7 +2,7 @@
   "name": "bootstrap-material",
   "version": "0.2.0",
   "description": "Material Design for Bootstrap 3",
-  "main": "./dist/js/npm/npm",
+  "main": "./dist/js/npm/material",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },