From 7a0bb24f8335e6a6f4541f60452cb9166c67dc2c Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Sat, 5 Jun 2021 12:21:26 +0300
Subject: [PATCH] feat(Ripple): Use 2 phased approach, prevent repetition,
 allow overlapping ripples #4891, #7474

---
 ui/dev/src/pages/css/material-ripples-1.vue |  40 ++--
 ui/src/components/btn/QBtn.js               |   9 -
 ui/src/directives/Ripple.js                 | 231 ++++++++++++++------
 ui/src/directives/Ripple.sass               |   1 +
 ui/src/directives/Ripple.styl               |  45 ++--
 5 files changed, 211 insertions(+), 115 deletions(-)

diff --git a/ui/dev/src/pages/css/material-ripples-1.vue b/ui/dev/src/pages/css/material-ripples-1.vue
index bd7bbc31bfa2..3447e53ebd8b 100644
--- a/ui/dev/src/pages/css/material-ripples-1.vue
+++ b/ui/dev/src/pages/css/material-ripples-1.vue
@@ -1,42 +1,45 @@
 <template>
   <div class="docs-ripple row justify-center">
-    <div style="width: 500px; max-width: 90vw;">
+    <div style="width: 500px; max-width: 90vw; padding: 70vh 0">
       <p class="caption">
         <span class="desktop-only">Click</span>
         <span class="mobile-only">Tap</span>
         on the area below to see it in action.
       </p>
+      <q-toggle v-model="early" label="Trigger early" />
 
       <div
-        v-ripple
+        v-ripple="rippleBaseConfig"
         tabindex="0"
-        class="relative-position ripple-example bg-white text-black"
-        style="height: 150px;"
-      />
+        class="relative-position ripple-example bg-white text-black flex flex-center"
+        style="height: 150px; border-radius: 50px"
+      >
+        <div class="q-pa-xl bg-grey-2">Touch target test</div>
+      </div>
 
       <div
-        v-ripple
+        v-ripple="rippleBaseConfig"
         tabindex="0"
         class="relative-position ripple-example bg-primary"
         style="height: 150px"
       />
 
       <div
-        v-ripple
+        v-ripple="rippleBaseConfig"
         tabindex="0"
         class="relative-position ripple-example bg-white text-black"
         style="height: 50px"
       />
 
       <div
-        v-ripple
+        v-ripple="rippleBaseConfig"
         tabindex="0"
         class="relative-position ripple-example bg-cyan"
         style="height: 50px"
       />
 
       <div
-        v-ripple:primary
+        v-ripple:primary="rippleBaseConfig"
         tabindex="0"
         class="relative-position ripple-example bg-white text-black"
         style="height: 50px"
@@ -45,7 +48,7 @@
       </div>
 
       <div
-        v-ripple="{ color: 'yellow' }"
+        v-ripple="{ ...rippleBaseConfig, color: 'yellow' }"
         tabindex="0"
         class="relative-position ripple-example bg-cyan"
         style="height: 50px"
@@ -56,7 +59,7 @@
       <div class="row items-center justify-around q-mt-md">
         <div
           tabindex="0"
-          v-ripple.center
+          v-ripple.center="rippleBaseConfig"
           class="relative-position ripple-example bg-white text-black ripple-round"
         >
           Center
@@ -64,7 +67,7 @@
 
         <div
           tabindex="0"
-          v-ripple
+          v-ripple="rippleBaseConfig"
           class="relative-position ripple-example bg-white text-black ripple-round"
         >
           Touch point
@@ -72,7 +75,7 @@
 
         <div
           tabindex="0"
-          v-ripple.center
+          v-ripple.center="rippleBaseConfig"
           class="q-ml-sm relative-position ripple-example bg-cyan ripple-round"
         >
           Center
@@ -84,6 +87,17 @@
 
 <script>
 export default {
+  data () {
+    return {
+      early: false
+    }
+  },
+
+  computed: {
+    rippleBaseConfig () {
+      return this.early === true ? { early: true } : {}
+    }
+  }
 }
 </script>
 
diff --git a/ui/src/components/btn/QBtn.js b/ui/src/components/btn/QBtn.js
index 2c8eabff5404..306547342d5a 100644
--- a/ui/src/components/btn/QBtn.js
+++ b/ui/src/components/btn/QBtn.js
@@ -166,18 +166,9 @@ export default Vue.extend({
           target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
         }
       }
-
-      // avoid duplicated mousedown event
-      // triggering another early ripple
-      this.avoidMouseRipple = true
-      clearTimeout(this.mouseTimer)
-      this.mouseTimer = setTimeout(() => {
-        this.avoidMouseRipple = false
-      }, 200)
     },
 
     __onMousedown (e) {
-      e.qSkipRipple = this.avoidMouseRipple === true
       this.$emit('mousedown', e)
 
       if (mouseTarget !== this.$el) {
diff --git a/ui/src/directives/Ripple.js b/ui/src/directives/Ripple.js
index 840d24f649b8..9bdf1676d3f2 100644
--- a/ui/src/directives/Ripple.js
+++ b/ui/src/directives/Ripple.js
@@ -1,28 +1,28 @@
 import { css } from '../utils/dom.js'
-import { position, stop, addEvt, cleanEvt } from '../utils/event.js'
+import { position, stop, addEvt, cleanEvt, listenOpts } from '../utils/event.js'
 import { isKeyCode } from '../utils/private/key-composition.js'
 import { client } from '../plugins/Platform.js'
-import throttle from '../utils/throttle.js'
 import { $q } from '../install.js'
 
-function showRipple (evt, el, ctx, forceCenter) {
-  ctx.modifiers.stop === true && stop(evt)
+const { passiveCapture } = listenOpts
 
-  const color = ctx.modifiers.color
-  let center = ctx.modifiers.center
-  center = center === true || forceCenter === true
+function startPhase1 (evtStart, el, ctx, forceCenter) {
+  ctx.modifiers.stop === true && stop(evtStart)
 
   const
+    { color, early } = ctx.modifiers,
+    center = ctx.modifiers.center === true || forceCenter === true,
     node = document.createElement('span'),
     innerNode = document.createElement('span'),
-    pos = position(evt),
+    pos = position(evtStart),
     { left, top, width, height } = el.getBoundingClientRect(),
     diameter = Math.sqrt(width * width + height * height),
     radius = diameter / 2,
     centerX = `${(width - diameter) / 2}px`,
     x = center ? centerX : `${pos.left - left - radius}px`,
     centerY = `${(height - diameter) / 2}px`,
-    y = center ? centerY : `${pos.top - top - radius}px`
+    y = center ? centerY : `${pos.top - top - radius}px`,
+    delay = Date.now() + 300
 
   innerNode.className = 'q-ripple__inner'
   css(innerNode, {
@@ -37,47 +37,150 @@ function showRipple (evt, el, ctx, forceCenter) {
   node.appendChild(innerNode)
   el.appendChild(node)
 
+  let timer, startPhase2, eventSource, target, waitForScroll
+
   const abort = () => {
-    node.remove()
     clearTimeout(timer)
+
+    const index = ctx.abort.indexOf(abort)
+    if (index > -1) {
+      ctx.abort.splice(index, 1)
+      node.remove()
+
+      switch (eventSource) {
+        case 'mouse':
+          document.removeEventListener('mouseup', startPhase2, passiveCapture)
+          el.removeEventListener('mouseout', startPhase2, passiveCapture)
+          break
+        case 'keyboard':
+          document.removeEventListener('keyup', startPhase2, passiveCapture)
+          break
+        case 'touch':
+          target.removeEventListener('touchmove', abort, passiveCapture)
+          target.removeEventListener('touchmove', startPhase2, passiveCapture)
+          target.removeEventListener('touchend', startPhase2, passiveCapture)
+          target.removeEventListener('touchcancel', startPhase2, passiveCapture)
+          ctx.preventMouse--
+          break
+      }
+    }
   }
   ctx.abort.push(abort)
 
-  let timer = setTimeout(() => {
-    innerNode.classList.add('q-ripple__inner--enter')
-    innerNode.style.transform = `translate3d(${centerX},${centerY},0) scale3d(1,1,1)`
-    innerNode.style.opacity = 0.2
-
-    timer = setTimeout(() => {
+  const phase2 = () => {
+    if (waitForScroll !== true) {
       innerNode.classList.remove('q-ripple__inner--enter')
       innerNode.classList.add('q-ripple__inner--leave')
       innerNode.style.opacity = 0
 
-      timer = setTimeout(() => {
-        node.remove()
-        ctx.abort.splice(ctx.abort.indexOf(abort), 1)
-      }, 275)
-    }, 250)
-  }, 50)
-}
+      timer = setTimeout(abort, 275)
+    }
+  }
+
+  if (early === true) {
+    if (evtStart.type.indexOf('mouse') === 0) {
+      eventSource = 'mouse'
+
+      startPhase2 = evtEnd => {
+        if (
+          evtEnd.type !== 'mouseout' ||
+          el.contains(evtEnd.toElement) !== true
+        ) {
+          timer = setTimeout(phase2, delay - Date.now())
+        }
+      }
+
+      document.addEventListener('mouseup', startPhase2, passiveCapture)
+      el.addEventListener('mouseout', startPhase2, passiveCapture)
+    }
+    else if (evtStart.type.indexOf('key') === 0) {
+      eventSource = 'keyboard'
+      ctx.preventKeyboard = true
 
-function updateModifiers (ctx, { modifiers, arg, value }) {
-  const cfg = Object.assign({}, $q.config.ripple, modifiers, value)
-  ctx.modifiers = {
-    early: cfg.early === true,
-    stop: cfg.stop === true,
-    center: cfg.center === true,
-    color: cfg.color || arg,
-    keyCodes: [].concat(cfg.keyCodes || 13)
+      startPhase2 = () => {
+        ctx.preventKeyboard = false
+        timer = setTimeout(phase2, delay - Date.now())
+      }
+
+      document.addEventListener('keyup', startPhase2, passiveCapture)
+    }
+    else {
+      eventSource = 'touch'
+      waitForScroll = true
+      target = evtStart.target
+      ctx.preventMouse++
+
+      startPhase2 = evtEnd => {
+        if (
+          evtEnd.type !== 'touchmove' ||
+          evtEnd.changedTouches.length === 0 ||
+          el.contains(document.elementFromPoint(evtEnd.changedTouches[0].clientX, evtEnd.changedTouches[0].clientY)) !== true
+        ) {
+          timer = setTimeout(phase2, delay - Date.now())
+        }
+      }
+
+      target.addEventListener('touchmove', abort, passiveCapture)
+      target.addEventListener('touchmove', startPhase2, passiveCapture)
+      target.addEventListener('touchend', startPhase2, passiveCapture)
+      target.addEventListener('touchcancel', startPhase2, passiveCapture)
+    }
   }
+
+  timer = setTimeout(() => {
+    if (waitForScroll === true) {
+      waitForScroll = void 0
+      target.removeEventListener('touchmove', abort, passiveCapture)
+    }
+
+    innerNode.classList.add('q-ripple__inner--enter')
+    innerNode.style.transform = `translate3d(${centerX},${centerY},0) scale3d(1,1,1)`
+    innerNode.style.opacity = 0.2
+
+    if (early !== true) {
+      timer = setTimeout(phase2, delay - Date.now())
+    }
+  }, waitForScroll === true ? 70 : 50) // allow a longer delay to catch scroll
 }
 
-function destroy (el) {
-  const ctx = el.__qripple
-  if (ctx !== void 0) {
-    ctx.abort.forEach(fn => { fn() })
+function updateCtx (ctx, el, { modifiers, arg, value }) {
+  ctx.enabled = value !== false
+
+  if (ctx.enabled === true) {
+    const cfg = Object.assign({}, $q.config.ripple, modifiers, value)
+    const earlyChanged = ctx.modifiers.early === void 0 || ctx.modifiers.early !== cfg.early
+
+    ctx.modifiers = {
+      early: cfg.early === true,
+      stop: cfg.stop === true,
+      center: cfg.center === true,
+      color: cfg.color || arg,
+      keyCodes: [].concat(cfg.keyCodes || 13)
+    }
+
+    if (earlyChanged === true) {
+      cleanEvt(ctx, 'main')
+
+      if (cfg.early === true) {
+        addEvt(ctx, 'main', [
+          [ el, 'mousedown', 'start', 'passive' ],
+          [ el, 'touchstart', 'start', 'passive' ],
+          [ el, 'keydown', 'keystart', 'passive' ]
+        ])
+      }
+      else {
+        addEvt(ctx, 'main', [
+          [ el, 'click', 'start', 'passive' ],
+          [ el, 'keyup', 'keystart', 'passive' ]
+        ])
+      }
+    }
+  }
+  else {
+    ctx.abort.slice().forEach(fn => { fn() })
     cleanEvt(ctx, 'main')
-    delete el._qripple
+    ctx.preventMouse = 0
+    ctx.preventKeyboard = false
   }
 }
 
@@ -85,69 +188,55 @@ export default {
   name: 'ripple',
 
   inserted (el, binding) {
-    if (el.__qripple !== void 0) {
-      destroy(el)
-      el.__qripple_destroyed = true
-    }
-
     const ctx = {
-      enabled: binding.value !== false,
       modifiers: {},
       abort: [],
+      preventMouse: 0,
+      preventKeyboard: false,
 
       start (evt) {
         if (
           ctx.enabled === true &&
           evt.qSkipRipple !== true &&
+          (evt.type !== 'mousedown' || ctx.preventMouse === 0) &&
           // on ENTER in form IE emits a PointerEvent with negative client cordinates
-          (client.is.ie !== true || evt.clientX >= 0) &&
-          evt.type === (ctx.modifiers.early === true ? 'pointerdown' : 'click')
+          (client.is.ie !== true || evt.clientX >= 0)
         ) {
-          showRipple(evt, el, ctx, $q.interaction.isKeyboard)
+          startPhase1(evt, el, ctx, $q.interaction.isKeyboard)
         }
       },
 
-      keystart: throttle(evt => {
+      keystart (evt) {
         if (
+          ctx.preventKeyboard !== true &&
           ctx.enabled === true &&
           evt.qSkipRipple !== true &&
-          isKeyCode(evt, ctx.modifiers.keyCodes) === true &&
-          evt.type === `key${ctx.modifiers.early === true ? 'down' : 'up'}`
+          isKeyCode(evt, ctx.modifiers.keyCodes) === true
         ) {
-          showRipple(evt, el, ctx, true)
+          startPhase1(evt, el, ctx, true)
         }
-      }, 300)
+      }
     }
 
-    updateModifiers(ctx, binding)
+    updateCtx(ctx, el, binding)
 
-    el.__qripple = ctx
+    if (el.__qripple) {
+      el.__qripple_old = el.__qripple
+    }
 
-    addEvt(ctx, 'main', [
-      [ el, 'pointerdown', 'start', 'passive' ],
-      [ el, 'click', 'start', 'passive' ],
-      [ el, 'keydown', 'keystart', 'passive' ],
-      [ el, 'keyup', 'keystart', 'passive' ]
-    ])
+    el.__qripple = ctx
   },
 
   update (el, binding) {
-    const ctx = el.__qripple
-    if (ctx !== void 0) {
-      ctx.enabled = binding.value !== false
-
-      if (ctx.enabled === true) {
-        updateModifiers(ctx, binding)
-      }
-    }
+    el.__qripple !== void 0 && updateCtx(el.__qripple, el, binding)
   },
 
   unbind (el) {
-    if (el.__qripple_destroyed === void 0) {
-      destroy(el)
-    }
-    else {
-      delete el.__qripple_destroyed
+    const ctx = el.__qripple_old || el.__qripple
+    if (ctx !== void 0) {
+      ctx.abort.slice().forEach(fn => { fn() })
+      cleanEvt(ctx, 'main')
+      delete el[el.__qripple_old ? '__qripple_old' : '__qripple']
     }
   }
 }
diff --git a/ui/src/directives/Ripple.sass b/ui/src/directives/Ripple.sass
index b6a44e14f67b..04843d175f20 100644
--- a/ui/src/directives/Ripple.sass
+++ b/ui/src/directives/Ripple.sass
@@ -19,6 +19,7 @@
     color: inherit
     border-radius: 50%
     background: currentColor
+    background-clip: padding-box
     pointer-events: none
     will-change: transform, opacity
 
diff --git a/ui/src/directives/Ripple.styl b/ui/src/directives/Ripple.styl
index 17084f0570e0..34f0841a7dad 100644
--- a/ui/src/directives/Ripple.styl
+++ b/ui/src/directives/Ripple.styl
@@ -1,29 +1,30 @@
 .q-ripple
-  position absolute
-  top 0
-  left 0 /* rtl:ignore */
-  width 100%
-  height 100%
-  color inherit
-  border-radius inherit
-  z-index 0
-  pointer-events none
-  overflow hidden
-  contain strict
+  position: absolute
+  top: 0
+  left: 0 /* rtl:ignore */
+  width: 100%
+  height: 100%
+  color: inherit
+  border-radius: inherit
+  z-index: 0
+  pointer-events: none
+  overflow: hidden
+  contain: strict
 
   &__inner
-    position absolute
-    top 0
-    left 0 /* rtl:ignore */
-    opacity 0
-    color inherit
-    border-radius 50%
-    background currentColor
-    pointer-events none
-    will-change transform, opacity
+    position: absolute
+    top: 0
+    left: 0 /* rtl:ignore */
+    opacity: 0
+    color: inherit
+    border-radius: 50%
+    background: currentColor
+    background-clip: padding-box
+    pointer-events: none
+    will-change: transform, opacity
 
     &--enter
-      transition transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
+      transition: transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
 
     &--leave
-      transition opacity .25s cubic-bezier(.4, 0, .2, 1)
+      transition: opacity .25s cubic-bezier(.4, 0, .2, 1)