mdb-ui-kit/scripts/ripples.js

/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */
/*jshint maxlen: 500 */
window.ripples = {
    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);
        }

        // 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)) {
                    callback(e, target);
                }
            });
        };

        var rippleStart = function(e, target) {

            // Init variables
            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,
                refreshElementStyle;

            $ripplecache = $ripple;

            // Set ripple class
            $ripple.className = "ripple";            
            // Move ripple to the mouse position            
            $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
                         
            // 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(",");                        
            rgbArr.pop();
            rgbArr.push(" " + __rippleOpacity__ + ")");
            targetColor = rgbArr.join(",");
            

            // Insert new ripple into ripple wrapper
            $rippleWrapper.appendChild($ripple);    

            // 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;
                // + "background-color: " + targetColor + ";" 
            // Set scale value, background-color and opacity to ripple and animate it
            $ripple.className = "ripple ripple-on";
            $ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));


            // 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;

        // Events handler
        // init RippleJS and start ripple effect on mousedown
        bind("mouseover", withRipple, rippleInit);

        // start ripple effect on mousedown
        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);
            }
        });
        // if animation ends and user is not holding mouse then destroy the ripple
        bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {

            var $ripples = $ripple.parentNode.getElementsByClassName("ripple");

            if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
                rippleOut($ripple);
            }
        });
        // Destroy ripple when mouse is not holded anymore if the ripple still exists
        bind("mouseup", ".ripple-wrapper", function() {
            var $ripple = $ripplecache;
            if ($ripple.dataset.animating != 1) {
                rippleOut($ripple);
            }
        });

    }
};