64 lines
2 KiB
JavaScript
64 lines
2 KiB
JavaScript
(function() {
|
|
function _ripple(element, inEvents, outEvents) {
|
|
inEvents = inEvents.split(' ');
|
|
outEvents = outEvents.split(' ');
|
|
|
|
var ripple = createElement('span', {
|
|
class: 'ripple-effect',
|
|
parent: element
|
|
});
|
|
|
|
function removeRipple(e) {
|
|
ripple.classList.add('out');
|
|
ripple.classList.remove('in');
|
|
outEvents.forEach(function(outEvent) {
|
|
element.removeEventListener(outEvent, removeRipple);
|
|
});
|
|
}
|
|
|
|
function addRipple(e) {
|
|
var boundingRect = element.getBoundingClientRect();
|
|
var width = boundingRect.width;
|
|
var height = boundingRect.height;
|
|
var left = boundingRect.left;
|
|
var top = boundingRect.top;
|
|
var size = Math.max(width, height);
|
|
ripple.style.width = ripple.style.height = size + 'px';
|
|
var offsetX = e.pageX - left - pageXOffset - size / 2;
|
|
var offsetY = e.pageY - top - pageYOffset - size / 2;
|
|
ripple.style.left = offsetX + 'px';
|
|
ripple.style.top = offsetY + 'px';
|
|
ripple.classList.remove('out');
|
|
ripple.classList.add('in');
|
|
outEvents.forEach(function(outEvent) {
|
|
element.addEventListener(outEvent, removeRipple);
|
|
});
|
|
}
|
|
|
|
inEvents.forEach(function(inEvent) {
|
|
element.addEventListener(inEvent, addRipple);
|
|
});
|
|
|
|
element.style.position = 'relative';
|
|
element.style.overflow = 'hidden';
|
|
}
|
|
|
|
function Ripple(selectors, inEvents, outEvents) {
|
|
if (!inEvents) {
|
|
inEvents = 'mousedown';
|
|
}
|
|
|
|
if (!outEvents) {
|
|
outEvents = 'mouseup mouseout';
|
|
}
|
|
|
|
selectors.forEach(function(selector) {
|
|
var matches = [].slice.call(document.querySelectorAll(selector));
|
|
matches.forEach(function(match) {
|
|
_ripple(match, inEvents, outEvents);
|
|
});
|
|
});
|
|
}
|
|
|
|
window.Ripple = Ripple;
|
|
})();
|