mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-23 10:04:04 +03:00
added support to browsers that don't support CSS transitions (#261)
This commit is contained in:
FezVrasta
parent
c8a2602508
commit
6cbb429956
59
dist/js/ripples.js
vendored
59
dist/js/ripples.js
vendored
|
|
@ -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
|
||||
ripple.addClass("ripple-out");
|
||||
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;
|
||||
|
||||
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");
|
||||
// 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 + ")"
|
||||
});
|
||||
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() {
|
||||
|
|
|
|||
2
dist/js/ripples.min.js
vendored
2
dist/js/ripples.min.js
vendored
|
|
@ -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
|
||||
|
|
|
|||
2
dist/js/ripples.min.js.map
vendored
2
dist/js/ripples.min.js.map
vendored
|
|
@ -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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"}
|
||||
|
|
@ -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
|
||||
ripple.addClass("ripple-out");
|
||||
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;
|
||||
|
||||
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");
|
||||
// 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 + ")"
|
||||
});
|
||||
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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user