From 24bb10b5504eebcf1ceeae747d8cf04a78676c5a Mon Sep 17 00:00:00 2001 From: Fez Vrasta Date: Mon, 25 Aug 2014 17:09:09 +0200 Subject: [PATCH] Update ripples.js --- material/ripples.js | 174 ++++++++++++++++++++++---------------------- 1 file changed, 89 insertions(+), 85 deletions(-) diff --git a/material/ripples.js b/material/ripples.js index a4770778..edb56db1 100644 --- a/material/ripples.js +++ b/material/ripples.js @@ -1,111 +1,115 @@ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* globals CustomEvent */ var ripples = { - init : function(withRipple) { - "use strict"; + init : function(withRipple) { + "use strict"; - // 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; + // animations time + var rippleOutTime = 100, + rippleStartTime = 500; - if (target.matches(selector)) { - callback(e, target); - } - }); - }; + // 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; - var rippleStart = function(e, target) { + if (target.matches(selector)) { + callback(e, target); + } + }); + }; - // Init variables - var $rippleWrapper = (target.matches(".ripple-wrapper")) ? target : target.parentNode, - $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}), - refreshElementStyle; + var rippleStart = function(e, target) { - // Set ripple class - $ripple.className = "ripple"; + // Init variables + var $rippleWrapper = (target.matches(".ripple-wrapper")) ? target : target.parentNode, + $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}), + refreshElementStyle; - // Move ripple to the mouse position - $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;"); + // Set ripple class + $ripple.className = "ripple"; - // Insert new ripple into ripple wrapper - $rippleWrapper.appendChild($ripple); + // Move ripple to the mouse position + $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;"); - // Make sure the ripple has the class applied (ugly hack but it works) - refreshElementStyle = window.getComputedStyle($ripple).opacity; + // Insert new ripple into ripple wrapper + $rippleWrapper.appendChild($ripple); - // Let other funtions know that this element is animating - $ripple.dataset.animating = 1; + // Make sure the ripple has the class applied (ugly hack but it works) + refreshElementStyle = window.getComputedStyle($ripple).opacity; - // Set scale value to ripple and animate it - $ripple.className = "ripple ripple-on"; - $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); + // Let other funtions know that this element is animating + $ripple.dataset.animating = 1; - // This function is called when the animation is finished - setTimeout(function() { + // Set scale value to ripple and animate it + $ripple.className = "ripple ripple-on"; + $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); - // Let know to other functions that this element has finished the animation - $ripple.dataset.animating = 0; - document.dispatchEvent(rippleEnd); + // This function is called when the animation is finished + setTimeout(function() { - }, 500); + // 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(); - }, 1000); - }; + var rippleOut = function($ripple) { + // Clear previous animation + $ripple.className = "ripple ripple-on ripple-out"; - // 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; - }; + // Let ripple fade out (with CSS) + setTimeout(function() { + $ripple.remove(); + }, rippleOutTime); + }; - // Append ripple wrapper if not exists already - var rippleInit = function(e, target) { + // 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; + }; - if (target.getElementsByClassName("ripple-wrapper").length === 0) { - target.className += " withripple"; - var $rippleWrapper = document.createElement("div"); - $rippleWrapper.className = "ripple-wrapper"; - target.appendChild($rippleWrapper); - rippleStart(e, $rippleWrapper); - } + // 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); + rippleStart(e, $rippleWrapper); + } - // Events handler - // init RippleJS and start ripple effect on mousedown - bind("mousedown", withRipple, rippleInit); - // start ripple effect on mousedown - bind("mousedown", ".ripple-wrapper, .ripple", rippleStart); - // if animation ends and user is not holding mouse then destroy the ripple - bind("rippleEnd", ".ripple-wrapper, .ripple", function(e, $ripple) { - if (!mouseDown) { - rippleOut($ripple); - } - }); - // Destroy ripple when mouse is not holded anymore if the ripple still exists - bind("mouseup", ".ripple-wrapper, .ripple", function(e, $ripple) { - if ($ripple.dataset.animating != 1) { - rippleOut($ripple); - } - }); + }; - } + // Events handler + // init RippleJS and start ripple effect on mousedown + bind("mousedown", withRipple, rippleInit); + // start ripple effect on mousedown + bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart); + // if animation ends and user is not holding mouse then destroy the ripple + bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { + if (!mouseDown) { + rippleOut($ripple); + } + }); + // Destroy ripple when mouse is not holded anymore if the ripple still exists + bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { + if ($ripple.dataset.animating != 1) { + rippleOut($ripple); + } + }); + + } };