fix(MdButton): Ripple for firefox (#1468)

* fix(MdButton): Ripple for firefox fix #1461 * refactor(MdButton): new computed `rippleWorks` * refactor(MdButton): active ripple by props instead of method call * refactor(MdButton): remove unnecessary events
vuematerial · Feb 20, 2018 · 156506b · 156506b
1 parent 6860d3a
commit 156506b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/src/components/MdButton/MdButton.vue b/src/components/MdButton/MdButton.vue
@@ -7,6 +7,11 @@
 
   export default new MdComponent({
     name: 'MdButton',
+    data () {
+      return {
+        rippleActive: false
+      }
+    },
     components: {
       MdButtonContent
     },
@@ -23,11 +28,22 @@
       disabled: Boolean,
       to: null
     },
+    computed: {
+      rippleWorks () {
+        return this.mdRipple && !this.disabled
+      }
+    },
     render (createElement) {
       const buttonContent = createElement('md-button-content', {
         attrs: {
           mdRipple: this.mdRipple,
           disabled: this.disabled
+        },
+        props: {
+          mdRippleActive: this.rippleActive
+        },
+        on: {
+          'update:mdRippleActive': active => this.rippleActive = active,
         }
       }, this.$slots.default)
       let buttonAttrs = {
@@ -45,7 +61,33 @@
           disabled: this.disabled,
           type: !this.href && (this.type || 'button')
         },
-        on: this.$listeners
+        on: {
+          ...this.$listeners,
+          touchstart: event => {
+            if (!this.rippleWorks) {
+              return false
+            }
+
+            this.rippleActive = event
+            this.$listeners.touchstart && this.$listeners.touchstart(event)
+          },
+          touchmove: event => {
+            if (!this.rippleWorks) {
+              return false
+            }
+
+            this.rippleActive = event
+            this.$listeners.touchmove && this.$listeners.touchmove(event)
+          },
+          mousedown: event => {
+            if (!this.rippleWorks) {
+              return false
+            }
+
+            this.rippleActive = event
+            this.$listeners.mousedown && this.$listeners.mousedown(event)
+          }
+        }
       }
       let tag = 'button'
 

diff --git a/src/components/MdButton/MdButtonContent.vue b/src/components/MdButton/MdButtonContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-ripple :md-disabled="!mdRipple || disabled">
+  <md-ripple :md-disabled="!mdRipple || disabled" :md-event-trigger="false" :md-active="mdRippleActive" @update:mdActive="active => $emit('update:mdRippleActive', active)">
     <div class="md-button-content">
       <slot />
     </div>
@@ -16,6 +16,7 @@
     },
     props: {
       mdRipple: Boolean,
+      mdRippleActive: [Boolean, Event],
       disabled: Boolean
     }
   }

diff --git a/src/components/MdRipple/MdRipple.vue b/src/components/MdRipple/MdRipple.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     :class="['md-ripple', rippleClasses]"
-    @touchstart.passive.stop="touchStartCheck"
-    @touchmove.passive.stop="touchMoveCheck"
-    @mousedown.passive.stop="startRipple">
+    @touchstart.passive="event => mdEventTrigger && touchStartCheck(event)"
+    @touchmove.passive="event => mdEventTrigger && touchMoveCheck(event)"
+    @mousedown.passive="event => mdEventTrigger && startRipple(event)">
     <slot />
     <md-wave v-for="ripple in ripples" :key="ripple.uuid" :class="['md-ripple-wave', waveClasses]" :style="ripple.waveStyles" @md-end="clearWave(ripple.uuid)" v-if="!isDisabled" />
   </div>
@@ -23,7 +23,11 @@
     props: {
       mdActive: null,
       mdDisabled: Boolean,
-      mdCentered: Boolean
+      mdCentered: Boolean,
+      mdEventTrigger: {
+        type: Boolean,
+        default: true
+      }
     },
     data: () => ({
       ripples: [],