From d74b2ac0f1aa9ff671c2429d02ad0b4ec8ad1172 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 7 Feb 2017 02:13:55 -0200
Subject: [PATCH] normalize mobile and desktop events on ripple

---
 .../components/mdInkRipple/mdInkRipple.vue    | 55 ++++++++++++-------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/core/components/mdInkRipple/mdInkRipple.vue b/src/core/components/mdInkRipple/mdInkRipple.vue
index d9b253b..ea4242b 100644
--- a/src/core/components/mdInkRipple/mdInkRipple.vue
+++ b/src/core/components/mdInkRipple/mdInkRipple.vue
@@ -7,6 +7,21 @@
 <style lang="scss" src="./mdInkRipple.scss"></style>
 
 <script>
+  const hasTouch = 'ontouchstart' in document;
+  const getEventName = (type) => {
+    if (type === 'start') {
+      return hasTouch ? 'touchstart' : 'mousedown';
+    }
+
+    return hasTouch ? 'touchend' : 'mouseup';
+  };
+  const addEvent = (target, type, handler) => {
+    target.addEventListener(getEventName(type), handler);
+  };
+  const removeEvent = (target, type, handler) => {
+    target.removeEventListener(getEventName(type), handler);
+  };
+
   export default {
     props: {
       mdDisabled: Boolean
@@ -81,12 +96,17 @@
       getClickPosition(event) {
         if (this.$refs.ripple) {
           const rect = this.parentElement.getBoundingClientRect();
-          const top = event.pageY - rect.top - this.$refs.ripple.offsetHeight / 2 - document.body.scrollTop + 'px';
-          const left = event.pageX - rect.left - this.$refs.ripple.offsetWidth / 2 - document.body.scrollLeft + 'px';
+          let top = event.pageY;
+          let left = event.pageX;
+
+          if (event.type === 'touchstart') {
+            top = event.changedTouches[0].pageY;
+            left = event.changedTouches[0].pageX;
+          }
 
           return {
-            top,
-            left
+            top: top - rect.top - this.$refs.ripple.offsetHeight / 2 - document.body.scrollTop + 'px',
+            left: left - rect.left - this.$refs.ripple.offsetWidth / 2 - document.body.scrollLeft + 'px'
           };
         }
 
@@ -112,22 +132,20 @@
         this.hasCompleted = false;
         this.setDimensions();
         window.clearTimeout(this.awaitingComplete);
-        document.body.removeEventListener('mouseup', this.endRipple);
+        removeEvent(document.body, 'end', this.endRipple);
       },
       startRipple(event) {
-        window.requestAnimationFrame(() => {
-          this.clearState();
-          this.awaitingComplete = window.setTimeout(() => {
-            this.hasCompleted = true;
-          }, 400);
+        this.clearState();
+        this.awaitingComplete = window.setTimeout(() => {
+          this.hasCompleted = true;
+        }, 400);
 
-          document.body.addEventListener('mouseup', this.endRipple);
+        addEvent(document.body, 'end', this.endRipple);
 
-          this.setPositions(event);
+        this.setPositions(event);
 
-          window.setTimeout(() => {
-            this.active = true;
-          });
+        window.setTimeout(() => {
+          this.active = true;
         });
       },
       endRipple() {
@@ -139,15 +157,14 @@
           }, 200);
         }
 
-        document.body.removeEventListener('mouseup', this.endRipple);
+        removeEvent(document.body, 'end', this.endRipple);
       },
       registerMouseEvent() {
-        this.parentElement.addEventListener('mousedown', this.startRipple);
+        addEvent(this.parentElement, 'start', this.startRipple);
       },
       unregisterMouseEvent() {
         if (this.parentElement) {
-          this.parentElement.removeEventListener('mousedown', this.startRipple);
-          document.body.removeEventListener('mouseup', this.endRipple);
+          removeEvent(this.parentElement, 'start', this.startRipple);
         }
       },
       init() {