added support to browsers that don't support CSS transitions (#261)

dist/js/ripples.js

@@ -2,6 +2,21 @@
 /* globals jQuery, navigator */
 
 (function($) {
+
+  // Detect if the browser supports transitions
+  $.support.transition = (function(){
+    var thisBody = document.body || document.documentElement,
+        thisStyle = thisBody.style,
+        support = (
+          thisStyle.transition !== undefined ||
+          thisStyle.WebkitTransition !== undefined ||
+          thisStyle.MozTransition !== undefined ||
+          thisStyle.MsTransition !== undefined ||
+          thisStyle.OTransition !== undefined
+        );
+    return support;
+  })();
+
   $.ripples = function(options) {
 
     // Default options
@@ -22,7 +37,15 @@
       ripple.off();
 
       // Start the out animation
+      if ($.support.transition) {
         ripple.addClass("ripple-out");
+      } else {
+        ripple.animate({
+          "opacity": 0
+        }, 100, function() {
+          ripple.trigger("transitionend");
+        });
+      }
 
       // This function is called when the transition "out" ends
       ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
@@ -90,17 +113,31 @@
       // Set the new size
       var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
 
+
+      // Decide if use CSS transitions or jQuery transitions
+      if ($.support.transition) {
+        // Start the transition
         ripple.css({
           "-ms-transform": "scale(" + size + ")",
           "-moz-transform": "scale(" + size + ")",
           "-webkit-transform": "scale(" + size + ")",
           "transform": "scale(" + size + ")"
         });
-
-      // Start the transition
         ripple.addClass("ripple-on");
         ripple.data("animating", "on");
         ripple.data("mousedown", "on");
+      } else {
+        // Start the transition
+        ripple.animate({
+          "width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
+          "height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
+          "margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
+          "margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
+          "opacity": 0.2
+        }, 500, function() {
+          ripple.trigger("transitionend");
+        });
+      }
 
       // This function is called when the transition "on" ends
       setTimeout(function() {

dist/js/ripples.min.js

@@ -1,2 +1,2 @@
-!function(a){a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(a){a.off(),a.addClass("ripple-out"),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on"),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
+!function(a){a.support.transition=function(){var a=document.body||document.documentElement,b=a.style,c=void 0!==b.transition||void 0!==b.WebkitTransition||void 0!==b.MozTransition||void 0!==b.MsTransition||void 0!==b.OTransition;return c}(),a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(b){b.off(),a.support.transition?b.addClass("ripple-out"):b.animate({opacity:0},100,function(){b.trigger("transitionend")}),b.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){b.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;a.support.transition?(j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on")):j.animate({width:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),height:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-left":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-top":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),opacity:.2},500,function(){j.trigger("transitionend")}),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
 //# sourceMappingURL=ripples.min.js.map

dist/js/ripples.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","on","remove","defaultOptions","target","extend","document","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","window","getComputedStyle","color","opacity","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","setTimeout","fn","jQuery"],"mappings":"CAGA,SAAUA,GACRA,EAAEC,QAAU,SAASC,GAQnB,QAASC,KACP,MAAO,iEAAiEC,KAAKC,UAAUC,WAKzF,QAASC,GAAUC,GAGjBA,EAAOC,MAGPD,EAAOE,SAAS,cAGhBF,EAAOG,GAAG,mEAAoE,WAC5EH,EAAOI,WArBX,GAAIC,IACFC,OAAU,gHA0BZZ,GAAUF,EAAEe,OAAOF,EAAgBX,GAGnCF,EAAEgB,UACDL,GAAG,uBAAwBT,EAAQY,OAAQ,SAASG,GACnD,GAAId,KAAuB,aAAVc,EAAEC,KACjB,OAAO,CAGT,IAAIC,GAAUnB,EAAEoB,KAGXpB,GAAEoB,MAAMC,KAAK,mBAAmBC,QACnCtB,EAAEoB,MAAMG,OAAO,mCAGjB,IAIIC,GACAC,EALAC,EAAU1B,EAAEoB,MAAMC,KAAK,mBAGvBM,EAAgBD,EAAQE,QAG5B,IAAKzB,IAIE,CAGL,GADAc,EAAIA,EAAEY,cACmB,IAArBZ,EAAEa,QAAQR,OAIZ,MAHAE,GAAOP,EAAEa,QAAQ,GAAGC,MAAQJ,EAAcK,KAC1CP,EAAOR,EAAEa,QAAQ,GAAGG,MAAQN,EAAcO,QAP5CV,GAAOP,EAAEc,MAAQJ,EAAcK,KAC/BP,EAAOR,EAAEgB,MAAQN,EAAcO,GAajC,IAAI1B,GAASR,EAAE,cAGfQ,GAAOE,SAAS,UAGhBF,EAAO2B,KAAKH,KAAQR,EAAMU,IAAOT,IAGjCjB,EAAO2B,KAAKC,mBAAoBC,OAAOC,iBAAiBtC,EAAEoB,MAAM,IAAImB,QAGpEb,EAAQH,OAAOf,GAGf,WAAc,MAAO6B,QAAOC,iBAAiB9B,EAAO,IAAIgC,UAGxD,IAAIC,GAAQC,KAAKC,IAAI3C,EAAEoB,MAAMwB,aAAc5C,EAAEoB,MAAMyB,eAAiBrC,EAAOoC,aAAgB,GAE3FpC,GAAO2B,KACLW,gBAAiB,SAAWL,EAAO,IACnCM,iBAAkB,SAAWN,EAAO,IACpCO,oBAAqB,SAAWP,EAAO,IACvCQ,UAAa,SAAWR,EAAO,MAIjCjC,EAAOE,SAAS,aAChBF,EAAO0C,KAAK,YAAa,MACzB1C,EAAO0C,KAAK,YAAa,MAGzBC,WAAW,WACT3C,EAAO0C,KAAK,YAAa,OACO,OAA5B1C,EAAO0C,KAAK,cACd3C,EAAUC,IAEX,KAGHW,EAAQR,GAAG,qBAAsB,WAC/BH,EAAO0C,KAAK,YAAa,OAEO,OAA5B1C,EAAO0C,KAAK,cACd3C,EAAUC,QAQlBR,EAAEoD,GAAGnD,QAAU,WACbD,EAAEC,SAASa,OAAUd,EAAEoB,UAGxBiC"}
+{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","support","transition","thisBody","document","body","documentElement","thisStyle","style","undefined","WebkitTransition","MozTransition","MsTransition","OTransition","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","animate","opacity","trigger","on","remove","defaultOptions","target","extend","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","window","getComputedStyle","color","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","width","height","margin-left","margin-top","setTimeout","fn","jQuery"],"mappings":"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"}

scripts/ripples.js

@@ -2,6 +2,21 @@
 /* globals jQuery, navigator */
 
 (function($) {
+
+  // Detect if the browser supports transitions
+  $.support.transition = (function(){
+    var thisBody = document.body || document.documentElement,
+        thisStyle = thisBody.style,
+        support = (
+          thisStyle.transition !== undefined ||
+          thisStyle.WebkitTransition !== undefined ||
+          thisStyle.MozTransition !== undefined ||
+          thisStyle.MsTransition !== undefined ||
+          thisStyle.OTransition !== undefined
+        );
+    return support;
+  })();
+
   $.ripples = function(options) {
 
     // Default options
@@ -22,7 +37,15 @@
       ripple.off();
 
       // Start the out animation
+      if ($.support.transition) {
         ripple.addClass("ripple-out");
+      } else {
+        ripple.animate({
+          "opacity": 0
+        }, 100, function() {
+          ripple.trigger("transitionend");
+        });
+      }
 
       // This function is called when the transition "out" ends
       ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
@@ -90,17 +113,31 @@
       // Set the new size
       var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
 
+
+      // Decide if use CSS transitions or jQuery transitions
+      if ($.support.transition) {
+        // Start the transition
         ripple.css({
           "-ms-transform": "scale(" + size + ")",
           "-moz-transform": "scale(" + size + ")",
           "-webkit-transform": "scale(" + size + ")",
           "transform": "scale(" + size + ")"
         });
-
-      // Start the transition
         ripple.addClass("ripple-on");
         ripple.data("animating", "on");
         ripple.data("mousedown", "on");
+      } else {
+        // Start the transition
+        ripple.animate({
+          "width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
+          "height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
+          "margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
+          "margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
+          "opacity": 0.2
+        }, 500, function() {
+          ripple.trigger("transitionend");
+        });
+      }
 
       // This function is called when the transition "on" ends
       setTimeout(function() {