vue-ripple-directive - npm Package Compare versions

Comparing version 1.0.13 to 2.0.0-beta

demo/main.js

@@ -0,0 +0,0 @@ import Vue from 'vue'

package.json

 {
   "name": "vue-ripple-directive",
-  "version": "1.0.13",
+  "version": "2.0.0-beta",
   "description": "Vue Material Ripple Effect Directive",
@@ -5,0 +5,0 @@ "main": "src/ripple.js",

README.md

@@ -0,0 +0,0 @@ #   Material Ripple Effect

src/ripple.js

@@ -59,10 +59,18 @@ export default {
 
+            // Store target position to change it after
+            var storedTargetPosition =  target.style.position;
+            // Change target position to relative to guarantee ripples correct positioning
+            target.style.position = 'relative';
+
             rippleContainer.appendChild(ripple);
-            document.body.appendChild(rippleContainer);
+            target.appendChild(rippleContainer);
 
+            console.log();
+
             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";
@@ -75,4 +83,2 @@ rippleContainer.style.height  = height + "px";
 
-            rippleContainer.style.direction = 'ltr';
-
             setTimeout(function() {
@@ -96,2 +102,8 @@ ripple.style.width  = radius * 2 + "px";
                 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 () {
+                    target.style.position = storedTargetPosition;
+                }, props.transition + 250)
             }
@@ -98,0 +110,0 @@

webpack.config.js

@@ -0,0 +0,0 @@ var path = require('path')

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82209

increased by1.55%

Lines of code

197

increased by5.35%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes