Merge pull request #2 from bethinkpl/IT-3400-make-ripple-more-fluid

IT-3400 - ripple works if button is changing it's size.
bethinkpl · Nov 2, 2022 · 2d22199 · 2d22199
2 parents 0ce4144 + a5dc264
commit 2d22199
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/ripple.js b/src/ripple.js
@@ -4,7 +4,7 @@ var Ripple = {
         // Default values.
         var props = {
             event: 'mousedown',
-            transition: 600
+            transition: 950
         };
 
         setProps(Object.keys(binding.modifiers),props);
@@ -32,14 +32,14 @@ var Ripple = {
                 maxX        = Math.max(dx, width - dx),
                 maxY        = Math.max(dy, height - dy),
                 style       = window.getComputedStyle(target),
-                radius      = Math.sqrt((maxX * maxX) + (maxY * maxY)),
+                radius      = Math.sqrt((maxX * maxX) + (maxY * maxY))*1.6,
                 border      = (targetBorder > 0 ) ? targetBorder : 0;
 
             // Create the ripple and its container
             var ripple = document.createElement("div"),
                 rippleContainer = document.createElement("div");
-                rippleContainer.className = 'ripple-container';
-                ripple.className = 'ripple';
+            rippleContainer.className = 'ripple-container';
+            ripple.className = 'ripple';
 
             //Styles for ripple
             ripple.style.marginTop= '0px';
@@ -78,7 +78,7 @@ var Ripple = {
             // No need to set positioning because ripple should be child of target and to it's relative position.
             // rippleContainer.style.left    = left + (((window.pageXOffset || document.scrollLeft) - (document.clientLeft || 0)) || 0) + "px";
             // rippleContainer.style.top     = top + (((window.pageYOffset || document.scrollTop) - (document.clientTop || 0)) || 0) + "px";
-            rippleContainer.style.width   = width + "px";
+            rippleContainer.style.width   = "calc(100% + " + border * 2 + "px)";
             rippleContainer.style.height  = height + "px";
             rippleContainer.style.borderTopLeftRadius  = style.borderTopLeftRadius;
             rippleContainer.style.borderTopRightRadius  = style.borderTopRightRadius;