Now ripple stays if you hold mousedown event and goes away on mouseup

PygmySlowLoris · Jun 13, 2017 · 43d84db · 43d84db
1 parent 65cf7b2
commit 43d84db
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 14 deletions.
diff --git a/dist/build.js b/dist/build.js
diff --git a/dist/build.js.map b/dist/build.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ripple-directive",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Vue Material Ripple Effect Directive",
   "main": "src/ripple.js",
   "repository": {

diff --git a/src/ripple.js b/src/ripple.js
@@ -3,7 +3,7 @@ export default {
 
         // Default values.
         const props = {
-            event: 'click',
+            event: 'mousedown',
             transition: 600
         };
 
@@ -72,21 +72,33 @@ export default {
             rippleContainer.style.borderBottomRightRadius  = style.borderBottomRightRadius;
 
             setTimeout(function() {
-
                 ripple.style.width  = radius * 2 + "px";
                 ripple.style.height = radius * 2 + "px";
                 ripple.style.marginLeft   = dx - radius + "px";
                 ripple.style.marginTop    = dy - radius + "px";
             }, 0);
 
-            setTimeout(function() {
-                ripple.style.backgroundColor = "rgba(0, 0, 0, 0)";
-            }, 250);
-
-            setTimeout(function() {
-                ripple.remove();
-                rippleContainer.remove();
-            }, 650);
+            if(event.type == 'mousedown') {
+                el.addEventListener('mouseup', function (event) {
+                    setTimeout(function() {
+                        ripple.style.backgroundColor = "rgba(0, 0, 0, 0)";
+                    }, 250);
+
+                    setTimeout(function() {
+                        ripple.remove();
+                        rippleContainer.remove();
+                    }, 750);
+                })
+            } else {
+                setTimeout(function() {
+                    ripple.style.backgroundColor = "rgba(0, 0, 0, 0)";
+                }, 250);
+
+                setTimeout(function() {
+                    ripple.remove();
+                    rippleContainer.remove();
+                }, 650);
+            }
         }
     }
 }