Merge pull request #17 from PygmySlowLoris/ripple-relative-to-target

Ripple relative to target

Author: hazzo

README.md

@@ -16,6 +16,11 @@ This directive it's meant to be used in any element in which you like to achieve
 npm install vue-ripple-directive --save
 ```
 
+>### Important Notice
+>The directive will work better if the element where you attach it is **relative positioned**. 
+>Although the directive will try to set `position: relative` if the element does not have this property.
+>This is because the ripple since v2.0.* is `position: absolute`, to avoid trailing issues when elements with the directive in the UI move.
+
 ##  Options
 
 Optional parameter to pass to the directive.

dist/build.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-ripple-directive",
-  "version": "1.1.1",
+  "version": "2.0.1-beta",
   "description": "Vue Material Ripple Effect Directive",
   "main": "src/ripple.js",
   "repository": {
@@ -26,9 +26,9 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/PygmySlowLoris/vue-fab/issues"
+    "url": "https://github.com/PygmySlowLoris/vue-ripple-directive/issues"
   },
-  "homepage": "https://github.com/PygmySlowLoris/vue-ripple-effect#readme",
+  "homepage": "https://github.com/PygmySlowLoris/vue-ripple-directive#readme",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",

dist/build.js.map

@@ -18,6 +18,8 @@ var Ripple = {
 
         function rippler(event, el) {
             var target = el;
+            // Get border to avoid offsetting on ripple container position
+            var targetBorder = parseInt((getComputedStyle(target).borderWidth).replace('px', ''));
 
             // Get necessary variables
             var rect        = target.getBoundingClientRect(),
@@ -30,11 +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)),
+                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';
 
             //Styles for ripple
             ripple.style.marginTop= '0px';
@@ -50,21 +55,29 @@ var Ripple = {
 
             //Styles for rippleContainer
             rippleContainer.style.position= 'absolute';
-            rippleContainer.style.left = '0';
-            rippleContainer.style.top = '0';
+            rippleContainer.style.left = 0 - border + 'px';
+            rippleContainer.style.top = 0 - border + 'px';
             rippleContainer.style.height = '0';
             rippleContainer.style.width = '0';
             rippleContainer.style.pointerEvents = 'none';
             rippleContainer.style.overflow = 'hidden';
 
+            // Store target position to change it after
+            var storedTargetPosition =  ((target.style.position).length > 0) ? target.style.position : getComputedStyle(target).position;
+            // Change target position to relative to guarantee ripples correct positioning
+            if (storedTargetPosition !== 'relative') {
+                target.style.position = 'relative';
+            }
+
             rippleContainer.appendChild(ripple);
-            document.body.appendChild(rippleContainer);
+            target.appendChild(rippleContainer);
 
             ripple.style.marginLeft   = dx + "px";
             ripple.style.marginTop    = dy + "px";
 
-            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";
+            // 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.height  = height + "px";
             rippleContainer.style.borderTopLeftRadius  = style.borderTopLeftRadius;
@@ -92,6 +105,27 @@ var Ripple = {
                 }, 850);
 
                 el.removeEventListener('mouseup', clearRipple, false);
+
+                // After removing event set position to target to it's original one
+                // Timeout it's needed to avoid jerky effect of ripple jumping out parent target
+                setTimeout(function () {
+
+                    var clearPosition = true;
+                    for(var i = 0; i < target.childNodes.length; i++) {
+                        if(target.childNodes[i].className === 'ripple-container') {
+                            clearPosition = false;
+                        }
+                    }
+
+                    if(clearPosition) {
+                        if(storedTargetPosition !== 'static') {
+                            target.style.position = storedTargetPosition;
+                        } else {
+                            target.style.position = '';
+                        }
+                    }
+
+                }, props.transition + 250)
             }
 
             if(event.type === 'mousedown') {