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

Author: hazzo

dist/build.js

@@ -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": {

dist/build.js.map

@@ -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);
+            }
         }
     }
 }