mdb-ui-kit/scripts/ripples.js

154 lines
6.0 KiB
JavaScript
Raw Normal View History

2014-09-17 10:18:00 +04:00
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */
/*jshint maxlen: 500 */
window.ripples = {
2014-08-25 15:57:22 +04:00
init : function(withRipple) {
"use strict";
// Cross browser matches function
function matchesSelector(domElement, selector) {
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector ||
domElement.mozMatchesSelector ||
domElement.msMatchesSelector || domElement.oMatchesSelector;
return matches.call(domElement, selector);
}
2014-08-25 15:57:22 +04:00
// animations time
var rippleOutTime = 100,
rippleStartTime = 500;
// Helper to bind events on dynamically created elements
var bind = function(event, selector, callback) {
document.addEventListener(event, function(e) {
var target = (typeof e.detail !== "number") ? e.detail : e.target;
if (matchesSelector(target, selector)) {
2014-08-25 15:57:22 +04:00
callback(e, target);
}
});
};
var rippleStart = function(e, target) {
// Init variables
2014-10-10 02:48:13 +04:00
var $rippleWrapper = target,
$el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(),
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
__rippleOpacity__ = 0.05,
targetColor,
rgbArr,
2014-08-25 15:57:22 +04:00
refreshElementStyle;
$ripplecache = $ripple;
2014-08-25 15:57:22 +04:00
// Set ripple class
2014-10-10 02:48:13 +04:00
$ripple.className = "ripple";
// Move ripple to the mouse position
2014-08-25 15:57:22 +04:00
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
2014-10-10 02:48:13 +04:00
// Get the clicked targets text color, this will be applied to the ripple as background-color.
targetColor = window.getComputedStyle($el).color;
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
// Not sure if regexp is quicker...
rgbArr = targetColor.split(",");
2014-10-10 02:48:13 +04:00
rgbArr.pop();
rgbArr.push(" " + __rippleOpacity__ + ")");
targetColor = rgbArr.join(",");
2014-10-10 02:48:13 +04:00
2014-08-25 15:57:22 +04:00
// Insert new ripple into ripple wrapper
2014-10-10 02:48:13 +04:00
$rippleWrapper.appendChild($ripple);
2014-08-25 15:57:22 +04:00
// Make sure the ripple has the class applied (ugly hack but it works)
refreshElementStyle = window.getComputedStyle($ripple).opacity;
// Let other funtions know that this element is animating
$ripple.dataset.animating = 1;
2014-10-10 02:48:13 +04:00
// + "background-color: " + targetColor + ";"
// Set scale value, background-color and opacity to ripple and animate it
2014-08-25 15:57:22 +04:00
$ripple.className = "ripple ripple-on";
2014-10-10 02:48:13 +04:00
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
2014-08-25 15:57:22 +04:00
// This function is called when the animation is finished
setTimeout(function() {
// Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd);
}, rippleStartTime);
};
var rippleOut = function($ripple) {
// Clear previous animation
$ripple.className = "ripple ripple-on ripple-out";
// Let ripple fade out (with CSS)
setTimeout(function() {
$ripple.remove();
}, rippleOutTime);
};
// Helper, need to know if mouse is up or down
var mouseDown = false;
document.body.onmousedown = function() {
mouseDown = true;
};
document.body.onmouseup = function() {
mouseDown = false;
};
// Append ripple wrapper if not exists already
var rippleInit = function(e, target) {
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
target.className += " withripple";
var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper);
}
};
var $ripplecache;
2014-08-25 15:57:22 +04:00
// Events handler
// init RippleJS and start ripple effect on mousedown
bind("mouseover", withRipple, rippleInit);
2014-09-18 11:18:45 +04:00
2014-08-25 15:57:22 +04:00
// start ripple effect on mousedown
2014-10-04 10:43:25 +04:00
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
// Start ripple only on left or middle mouse click
if (e.which === 1 || e.which === 2) {
rippleStart(e, $ripple);
}
});
2014-08-25 15:57:22 +04:00
// if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
2014-10-02 13:36:05 +04:00
var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
2014-08-25 15:57:22 +04:00
rippleOut($ripple);
}
});
// Destroy ripple when mouse is not holded anymore if the ripple still exists
bind("mouseup", ".ripple-wrapper", function() {
var $ripple = $ripplecache;
2014-10-12 12:40:19 +04:00
if ($ripple && $ripple.dataset.animating != 1) {
2014-08-25 15:57:22 +04:00
rippleOut($ripple);
}
});
}
};