vue-ripple-directive - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1-beta

demo/main.js

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

package.json

 {
   "name": "vue-ripple-directive",
-  "version": "2.0.0",
+  "version": "2.0.1-beta",
   "description": "Vue Material Ripple Effect Directive",
@@ -29,5 +29,5 @@ "main": "src/ripple.js",
   "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": {
@@ -34,0 +34,0 @@ "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

README.md

@@ -19,2 +19,7 @@ #   Material Ripple Effect
 
+>### 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
@@ -64,1 +69,13 @@
 ```
+
+##  Global settings
+
+You can set the default color and z-index for all your ripples as the following example
+
+```
+import Ripple from 'vue-ripple-directive'
+
+Ripple.color = 'rgba(255, 255, 255, 0.35)';
+Ripple.zIndex = 55;
+Vue.directive('ripple', Ripple);
+```

src/ripple.js

@@ -1,2 +0,2 @@
-export default {
+var Ripple = {
     bind: function(el, binding){
@@ -16,6 +16,9 @@
 
-        var bg = binding.value || 'rgba(0, 0, 0, 0.35)';
+        var bg = binding.value || Ripple.color || 'rgba(0, 0, 0, 0.35)';
+        var zIndex = Ripple.zIndex || '9999';
 
         function rippler(event, el) {
             var target = el;
+            // Get border to avoid offsetting on ripple container position
+            var targetBorder = parseInt((getComputedStyle(target).borderWidth).replace('px', ''));
 
@@ -33,3 +36,4 @@ // Get necessary variables
                 style       = window.getComputedStyle(target),
-                radius      = Math.sqrt((maxX * maxX) + (maxY * maxY));
+                radius      = Math.sqrt((maxX * maxX) + (maxY * maxY)),
+                border      = (targetBorder > 0 ) ? targetBorder : 0;
 
@@ -39,2 +43,4 @@ // Create the ripple and its container
                 rippleContainer = document.createElement("div");
+                rippleContainer.className = 'ripple-container';
+                ripple.className = 'ripple';
 
@@ -50,3 +56,3 @@ //Styles for ripple
             ripple.style.position= 'relative';
-            ripple.style.zIndex= '9999';
+            ripple.style.zIndex= zIndex;
             ripple.style.backgroundColor  = bg;
@@ -56,4 +62,4 @@
             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';
@@ -65,5 +71,7 @@ rippleContainer.style.width = '0';
             // Store target position to change it after
-            var storedTargetPosition =  target.style.position;
+            var storedTargetPosition =  ((target.style.position).length > 0) ? target.style.position : getComputedStyle(target).position;
             // Change target position to relative to guarantee ripples correct positioning
-            target.style.position = 'relative';
+            if (storedTargetPosition !== 'relative') {
+                target.style.position = 'relative';
+            }
 
@@ -73,4 +81,2 @@ rippleContainer.appendChild(ripple);
 
-            console.log();
-
             ripple.style.marginLeft   = dx + "px";
@@ -89,2 +95,4 @@ ripple.style.marginTop    = dy + "px";
 
+            rippleContainer.style.direction = 'ltr';
+
             setTimeout(function() {
@@ -112,3 +120,18 @@ ripple.style.width  = radius * 2 + "px";
                 setTimeout(function () {
-                    target.style.position = storedTargetPosition;
+
+                    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)
@@ -124,3 +147,3 @@ }
     }
-}
+};
 
@@ -134,2 +157,4 @@ function setProps(modifiers,props) {
     });
-}
+}
+
+export default Ripple;

webpack.config.js

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

New alerts

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

83424

increased by1.48%

Lines of code

218

increased by10.66%

Number of lines in readme file

79

increased by25.4%

Worsened metrics

Number of package files

11

decreased by-8.33%

No dependency changes