Merge dc340c22e7 into 1bed3664e0

README.md

@@ -302,6 +302,8 @@ $.material.options = {
 }
 ```    
 
+For the ripples, a delegate is created using the given selector. This avoids manual call to `$.fn.ripples` when new inputs are created. If you want to apply statically ripples, set option `"ripplesDelegate": false`.
+
 ### Arrive.js support
 
 If you need to dynamically add elements to your DOM then you may need to include [`Arrive.js`](https://github.com/uzairfarooq/arrive) before `Material.js`. This will automatically apply `material.js` to every new element added via JavaScript.

dist/js/material.js

@@ -216,11 +216,28 @@
             }
           }
         })
-        .on("focus", ".form-control, .form-group.is-fileinput", function () {
-          _addFormGroupFocus(this);
+        .on("select2-focus", function (e) {
+          if (!$(e.target).is('.select2-focusser')) {
+            _addFormGroupFocus($(e.target));
+          }
         })
-        .on("blur", ".form-control, .form-group.is-fileinput", function () {
-          _removeFormGroupFocus(this);
+        .on("select2-opening", function (e) {
+          if (!$(e.target).is('.select2-focusser')) {
+            _addFormGroupFocus($(e.target));
+          }
+        })
+        .on("select2-blur", function (e) {
+          _removeFormGroupFocus($(e.target));
+        })
+        .on("focus", ".form-control", function (e) {
+          if (!$(e.target).is('.select2-focusser')) {
+            _addFormGroupFocus(this);
+          }
+        })
+        .on("blur", ".form-control, .form-group.is-fileinput", function (e) {
+          if (!$(e.target).is('.select2-focusser')) {
+            _removeFormGroupFocus(this);
+          }
         })
         // make sure empty is added back when there is a programmatic value change.
         //  NOTE: programmatic changing of value using $.val() must trigger the change event i.e. $.val('x').trigger('change')
@@ -256,7 +273,17 @@
         });
     },
     "ripples": function (selector) {
-      $((selector) ? selector : this.options.withRipples).ripples();
+      if (this.options.ripplesDelegate) {
+       // Delegate mode, lazy creation
+       $(document).on('mousedown touchstart', selector || this.options.withRipples, function(event) {
+        if(!$.data($(this), "plugin_ripples")) {
+         $(this).ripples({}, event);
+        }
+       });
+      } else {
+       // Immediate and static creation
+       $((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)

dist/js/ripples.js

@@ -26,7 +26,7 @@
   /**
    * Create the main plugin function
    */
-  function Ripples(element, options) {
+  function Ripples(element, options, event) {
     self = this;
 
     this.element = $(element);
@@ -36,17 +36,16 @@
     this._defaults = defaults;
     this._name = ripples;
 
-    this.init();
+    this.init(event);
   }
 
 
   /**
    * Initialize the plugin
    */
-  Ripples.prototype.init = function() {
+  Ripples.prototype.init = function(event) {
     var $element  = this.element;
-
-    $element.on("mousedown touchstart", function(event) {
+    var rippleStart = function(event) {
       /**
        * Verify if the user is just touching on a device and return if so
        */
@@ -142,7 +141,9 @@
         }
       });
 
-    });
+    };
+    $element.on("mousedown touchstart", rippleStart);
+    event && rippleStart(event);
   };
 
 
@@ -313,10 +314,10 @@
   /**
    * Create the jquery plugin function
    */
-  $.fn.ripples = function(options) {
+  $.fn.ripples = function(options, event) {
     return this.each(function() {
       if(!$.data(this, "plugin_" + ripples)) {
-        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+        $.data(this, "plugin_" + ripples, new Ripples(this, options, event));
       }
     });
   };

dist/js/ripples.min.js

@@ -1,2 +1,2 @@
-!function(a,b,c,d){"use strict";function e(b,c){g=this,this.element=a(b),this.options=a.extend({},h,c),this._defaults=h,this._name=f,this.init()}var f="ripples",g=null,h={};e.prototype.init=function(){var c=this.element;c.on("mousedown touchstart",function(d){if(!g.isTouch()||"mousedown"!==d.type){c.find(".ripple-container").length||c.append('<div class="ripple-container"></div>');var e=c.children(".ripple-container"),f=g.getRelY(e,d),h=g.getRelX(e,d);if(f||h){var i=g.getRipplesColor(c),j=a("<div></div>");j.addClass("ripple").css({left:h,top:f,"background-color":i}),e.append(j),function(){return b.getComputedStyle(j[0]).opacity}(),g.rippleOn(c,j),setTimeout(function(){g.rippleEnd(j)},500),c.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"===j.data("animating")&&g.rippleOut(j)})}}})},e.prototype.getNewSize=function(a,b){return Math.max(a.outerWidth(),a.outerHeight())/b.outerWidth()*2.5},e.prototype.getRelX=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageX-c.left:!1):b.pageX-c.left},e.prototype.getRelY=function(a,b){var c=a.offset();return g.isTouch()?(b=b.originalEvent,1===b.touches.length?b.touches[0].pageY-c.top:!1):b.pageY-c.top},e.prototype.getRipplesColor=function(a){var c=a.data("ripple-color")?a.data("ripple-color"):b.getComputedStyle(a[0]).color;return c},e.prototype.hasTransitionSupport=function(){var a=c.body||c.documentElement,b=a.style,e=b.transition!==d||b.WebkitTransition!==d||b.MozTransition!==d||b.MsTransition!==d||b.OTransition!==d;return e},e.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},e.prototype.rippleEnd=function(a){a.data("animating","off"),"off"===a.data("mousedown")&&g.rippleOut(a)},e.prototype.rippleOut=function(a){a.off(),g.hasTransitionSupport()?a.addClass("ripple-out"):a.animate({opacity:0},100,function(){a.trigger("transitionend")}),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})},e.prototype.rippleOn=function(a,b){var c=g.getNewSize(a,b);g.hasTransitionSupport()?b.css({"-ms-transform":"scale("+c+")","-moz-transform":"scale("+c+")","-webkit-transform":"scale("+c+")",transform:"scale("+c+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):b.animate({width:2*Math.max(a.outerWidth(),a.outerHeight()),height:2*Math.max(a.outerWidth(),a.outerHeight()),"margin-left":-1*Math.max(a.outerWidth(),a.outerHeight()),"margin-top":-1*Math.max(a.outerWidth(),a.outerHeight()),opacity:.2},500,function(){b.trigger("transitionend")})},a.fn.ripples=function(b){return this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))})}}(jQuery,window,document);
-//# sourceMappingURL=ripples.min.js.map
+!function(t,i,o,e){"use strict";function n(i,o,e){a=this,this.element=t(i),this.options=t.extend({},r,o),this._defaults=r,this._name=s,this.init(e)}var s="ripples",a=null,r={};n.prototype.init=function(o){var e=this.element,n=function(o){if(!a.isTouch()||"mousedown"!==o.type){e.find(".ripple-container").length||e.append('<div class="ripple-container"></div>');var n=e.children(".ripple-container"),s=a.getRelY(n,o),r=a.getRelX(n,o);if(s||r){var l=a.getRipplesColor(e),c=t("<div></div>");c.addClass("ripple").css({left:r,top:s,"background-color":l}),n.append(c),function(){return i.getComputedStyle(c[0]).opacity}(),a.rippleOn(e,c),setTimeout(function(){a.rippleEnd(c)},500),e.on("mouseup mouseleave touchend",function(){c.data("mousedown","off"),"off"===c.data("animating")&&a.rippleOut(c)})}}};e.on("mousedown touchstart",n),o&&n(o)},n.prototype.getNewSize=function(t,i){return Math.max(t.outerWidth(),t.outerHeight())/i.outerWidth()*2.5},n.prototype.getRelX=function(t,i){var o=t.offset();return a.isTouch()?(i=i.originalEvent,1===i.touches.length?i.touches[0].pageX-o.left:!1):i.pageX-o.left},n.prototype.getRelY=function(t,i){var o=t.offset();return a.isTouch()?(i=i.originalEvent,1===i.touches.length?i.touches[0].pageY-o.top:!1):i.pageY-o.top},n.prototype.getRipplesColor=function(t){var o=t.data("ripple-color")?t.data("ripple-color"):i.getComputedStyle(t[0]).color;return o},n.prototype.hasTransitionSupport=function(){var t=o.body||o.documentElement,i=t.style,n=i.transition!==e||i.WebkitTransition!==e||i.MozTransition!==e||i.MsTransition!==e||i.OTransition!==e;return n},n.prototype.isTouch=function(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)},n.prototype.rippleEnd=function(t){t.data("animating","off"),"off"===t.data("mousedown")&&a.rippleOut(t)},n.prototype.rippleOut=function(t){t.off(),a.hasTransitionSupport()?t.addClass("ripple-out"):t.animate({opacity:0},100,function(){t.trigger("transitionend")}),t.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){t.remove()})},n.prototype.rippleOn=function(t,i){var o=a.getNewSize(t,i);a.hasTransitionSupport()?i.css({"-ms-transform":"scale("+o+")","-moz-transform":"scale("+o+")","-webkit-transform":"scale("+o+")",transform:"scale("+o+")"}).addClass("ripple-on").data("animating","on").data("mousedown","on"):i.animate({width:2*Math.max(t.outerWidth(),t.outerHeight()),height:2*Math.max(t.outerWidth(),t.outerHeight()),"margin-left":-1*Math.max(t.outerWidth(),t.outerHeight()),"margin-top":-1*Math.max(t.outerWidth(),t.outerHeight()),opacity:.2},500,function(){i.trigger("transitionend")})},t.fn.ripples=function(i,o){return this.each(function(){t.data(this,"plugin_"+s)||t.data(this,"plugin_"+s,new n(this,i,o))})}}(jQuery,window,document);
+//# sourceMappingURL=ripples.min.js.map

scripts/material.js

@@ -77,6 +77,7 @@
       "validate": true,
       "input": true,
       "ripples": true,
+      "ripplesDelegate": true,
       "checkbox": true,
       "togglebutton": true,
       "radio": true,
@@ -256,7 +257,17 @@
         });
     },
     "ripples": function (selector) {
-      $((selector) ? selector : this.options.withRipples).ripples();
+      if (this.options.ripplesDelegate) {
+       // Delegate mode, lazy creation
+       $(document).on('mousedown touchstart', selector || this.options.withRipples, function(event) {
+        if(!$.data($(this), "plugin_ripples")) {
+         $(this).ripples({}, event);
+        }
+       });
+      } else {
+       // Immediate and static creation
+       $((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)

scripts/ripples.js

@@ -26,7 +26,7 @@
   /**
    * Create the main plugin function
    */
-  function Ripples(element, options) {
+  function Ripples(element, options, event) {
     self = this;
 
     this.element = $(element);
@@ -36,17 +36,16 @@
     this._defaults = defaults;
     this._name = ripples;
 
-    this.init();
+    this.init(event);
   }
 
 
   /**
    * Initialize the plugin
    */
-  Ripples.prototype.init = function() {
+  Ripples.prototype.init = function(event) {
     var $element  = this.element;
-
-    $element.on("mousedown touchstart", function(event) {
+    var rippleStart = function(event) {
       /**
        * Verify if the user is just touching on a device and return if so
        */
@@ -142,7 +141,9 @@
         }
       });
 
-    });
+    };
+    $element.on("mousedown touchstart", rippleStart);
+    event && rippleStart(event);
   };
 
 
@@ -313,10 +314,10 @@
   /**
    * Create the jquery plugin function
    */
-  $.fn.ripples = function(options) {
+  $.fn.ripples = function(options, event) {
     return this.each(function() {
       if(!$.data(this, "plugin_" + ripples)) {
-        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+        $.data(this, "plugin_" + ripples, new Ripples(this, options, event));
       }
     });
   };