mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-03 15:03:47 +03:00
Fix #327 on ripples.js and improve structure
I've fixed #327 and I also passed the plugin to a jQuery Boilerplate structure. I only made changes on the structure and not in the functions themselves, so the code could be a little bit neater, cleaner and intuitive. Now the plugin can be accessed alone, by doing: ```javascript $(selector).ripples(); ``` Note: I've removed the default elements targeted by the plugin, for IMHO I think that should be in the initialization, and not in the plugin itself.
This commit is contained in:
Guilherme Rv Coelho
parent
60cfbbd6d6
commit
0de9d60e30
|
|
@ -1,167 +1,329 @@
|
||||||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||||
/* globals jQuery, navigator */
|
/* globals jQuery, navigator */
|
||||||
|
|
||||||
(function($) {
|
(function($, window, document, undefined) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
// Detect if the browser supports transitions
|
/**
|
||||||
$.support.transition = (function(){
|
* Define the name of the plugin
|
||||||
var thisBody = document.body || document.documentElement,
|
*/
|
||||||
thisStyle = thisBody.style,
|
var ripples = 'ripples';
|
||||||
support = (
|
|
||||||
thisStyle.transition !== undefined ||
|
|
||||||
thisStyle.WebkitTransition !== undefined ||
|
|
||||||
thisStyle.MozTransition !== undefined ||
|
|
||||||
thisStyle.MsTransition !== undefined ||
|
|
||||||
thisStyle.OTransition !== undefined
|
|
||||||
);
|
|
||||||
return support;
|
|
||||||
})();
|
|
||||||
|
|
||||||
$.ripples = function(options) {
|
|
||||||
|
|
||||||
// Default options
|
|
||||||
var defaultOptions = {
|
|
||||||
"target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
function isTouch() {
|
/**
|
||||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
* Get an instance of the plugin
|
||||||
}
|
*/
|
||||||
|
var self = null;
|
||||||
|
|
||||||
|
|
||||||
// Fade out the ripple and then destroy it
|
/**
|
||||||
function rippleOut(ripple) {
|
* Define the defaults of the plugin
|
||||||
|
*/
|
||||||
// Unbind events from ripple
|
var defaults = {};
|
||||||
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(){
|
|
||||||
ripple.remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Apply custom options
|
|
||||||
options = $.extend(defaultOptions, options);
|
|
||||||
|
|
||||||
|
|
||||||
$(document)
|
/**
|
||||||
.on("mousedown touchstart", options.target, function(e) {
|
* Create the main plugin function
|
||||||
if (isTouch() && e.type == "mousedown") {
|
*/
|
||||||
|
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;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
var element = $(this);
|
|
||||||
|
|
||||||
// If the ripple wrapper does not exists, create it
|
/**
|
||||||
if (!$(this).find(".ripple-wrapper").length) {
|
* Verify if the current element already has a ripple wrapper element and
|
||||||
$(this).append("<div class=ripple-wrapper></div>");
|
* creates if it doesn't
|
||||||
|
*/
|
||||||
|
if(!($element.find('.ripple-wrapper').length)) {
|
||||||
|
$element.append('<div class="ripple-wrapper"></div>');
|
||||||
}
|
}
|
||||||
|
|
||||||
var wrapper = $(this).find(".ripple-wrapper");
|
|
||||||
|
/**
|
||||||
|
* Find the ripple wrapper
|
||||||
|
*/
|
||||||
|
var $wrapper = $element.find('.ripple-wrapper');
|
||||||
|
|
||||||
|
|
||||||
var wrapperOffset = wrapper.offset(),
|
/**
|
||||||
relX,
|
* Get relY and relX positions
|
||||||
relY;
|
*/
|
||||||
if (!isTouch()) {
|
var relY = self.getRelY(event);
|
||||||
// Get the mouse position relative to the ripple wrapper
|
var relX = self.getRelX(event);
|
||||||
relX = e.pageX - wrapperOffset.left;
|
|
||||||
relY = e.pageY - wrapperOffset.top;
|
|
||||||
} else {
|
/**
|
||||||
// Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
|
* If relY and/or relX are false, return the event
|
||||||
e = e.originalEvent;
|
*/
|
||||||
if (e.touches.length === 1) {
|
if(!relY && !relX) {
|
||||||
relX = e.touches[0].pageX - wrapperOffset.left;
|
return;
|
||||||
relY = e.touches[0].pageY - wrapperOffset.top;
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Meet the new ripple
|
|
||||||
var ripple = $("<div></div>");
|
|
||||||
|
|
||||||
// Add to it the ripple class
|
/**
|
||||||
ripple.addClass("ripple");
|
* Get the ripple color
|
||||||
|
*/
|
||||||
// Position it in the right place
|
var rippleColor = self.getRippleColor();
|
||||||
ripple.css({"left": relX, "top": relY});
|
|
||||||
|
|
||||||
// Set the background color of the ripple
|
|
||||||
ripple.css({"background-color": ($(this).data("ripple-color")) ? $(this).data("ripple-color") : window.getComputedStyle($(this)[0]).color});
|
|
||||||
|
|
||||||
// Spawn it
|
|
||||||
wrapper.append(ripple);
|
|
||||||
|
|
||||||
// Make sure the ripple has the styles applied (ugly hack but it works)
|
|
||||||
(function() { return window.getComputedStyle(ripple[0]).opacity; })();
|
|
||||||
|
|
||||||
// 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) {
|
* Create the ripple element
|
||||||
// Start the transition
|
*/
|
||||||
ripple.css({
|
var $ripple = $('<div></div>');
|
||||||
"-ms-transform": "scale(" + size + ")",
|
|
||||||
"-moz-transform": "scale(" + size + ")",
|
$ripple
|
||||||
"-webkit-transform": "scale(" + size + ")",
|
.addClass('ripple')
|
||||||
"transform": "scale(" + size + ")"
|
.css({
|
||||||
|
'left': relX,
|
||||||
|
'top': relY,
|
||||||
|
'background-color': rippleColor
|
||||||
});
|
});
|
||||||
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
|
|
||||||
|
/**
|
||||||
|
* 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($ripple);
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Call the rippleEnd function when the transition 'on' ends
|
||||||
|
*/
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
ripple.data("animating", "off");
|
self.rippleEnd($ripple)
|
||||||
if (ripple.data("mousedown") == "off") {
|
|
||||||
rippleOut(ripple);
|
|
||||||
}
|
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
// On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
|
|
||||||
element.on("mouseup mouseleave touchend", function() {
|
/**
|
||||||
ripple.data("mousedown", "off");
|
* Detect when the user leaves the element
|
||||||
// If the transition "on" is finished then we can destroy the ripple with transition "out"
|
*/
|
||||||
if (ripple.data("animating") == "off") {
|
$element.on('mouseup mouseleave touchend', function() {
|
||||||
rippleOut(ripple);
|
$ripple.data('mousedown', 'off');
|
||||||
|
|
||||||
|
if($ripple.data('animating') === 'off') {
|
||||||
|
self.rippleOut($ripple);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.ripples = function() {
|
|
||||||
$.ripples({"target": $(this)});
|
/**
|
||||||
|
* Get the new size based on the element height/width and the ripple width
|
||||||
|
*/
|
||||||
|
Ripples.prototype.getNewSize = function($ripple) {
|
||||||
|
var $element = this.element;
|
||||||
|
|
||||||
|
return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
|
||||||
};
|
};
|
||||||
|
|
||||||
})(jQuery);
|
|
||||||
|
/**
|
||||||
|
* Get the relX
|
||||||
|
*/
|
||||||
|
Ripples.prototype.getRelX = function(event) {
|
||||||
|
var $element = this.element;
|
||||||
|
var wrapperOffset = $element.find('.ripple-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(event) {
|
||||||
|
var $element = this.element;
|
||||||
|
var wrapperOffset = $element.find('.ripple-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.getRippleColor = function() {
|
||||||
|
var $element = this.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($ripple) {
|
||||||
|
var size = self.getNewSize($ripple);
|
||||||
|
var $element = this.element;
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user