1
// Styles
2
import './VRipple.sass'
3

4
// Utilities
5
import { consoleWarn } from '../../util/console'
6
import { keyCodes } from '../../util/helpers'
7

8
// Types
9
import { VNode, VNodeDirective } from 'vue'
10

11
type VuetifyRippleEvent = MouseEvent | TouchEvent | KeyboardEvent
12

13 1
const DELAY_RIPPLE = 80
14

15 1
function transform (el: HTMLElement, value: string) {
16 1
  el.style.transform = value
17 1
  el.style.webkitTransform = value
18
}
19

20 1
function opacity (el: HTMLElement, value: number) {
21 1
  el.style.opacity = value.toString()
22
}
23

24
export interface RippleOptions {
25
  class?: string
26
  center?: boolean
27
  circle?: boolean
28
}
29

30 1
function isTouchEvent (e: VuetifyRippleEvent): e is TouchEvent {
31 1
  return e.constructor.name === 'TouchEvent'
32
}
33

34 1
function isKeyboardEvent (e: VuetifyRippleEvent): e is KeyboardEvent {
35 1
  return e.constructor.name === 'KeyboardEvent'
36
}
37

38 1
const calculate = (
39
  e: VuetifyRippleEvent,
40
  el: HTMLElement,
41 1
  value: RippleOptions = {}
42 1
) => {
43 1
  let localX = 0
44 1
  let localY = 0
45

46 1
  if (!isKeyboardEvent(e)) {
47 1
    const offset = el.getBoundingClientRect()
48 1
    const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e
49

50 1
    localX = target.clientX - offset.left
51 1
    localY = target.clientY - offset.top
52
  }
53

54 1
  let radius = 0
55 1
  let scale = 0.3
56 1
  if (el._ripple && el._ripple.circle) {
57 0
    scale = 0.15
58 0
    radius = el.clientWidth / 2
59 1
    radius = value.center ? radius : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4
60
  } else {
61 1
    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2
62
  }
63

64 1
  const centerX = `${(el.clientWidth - (radius * 2)) / 2}px`
65 1
  const centerY = `${(el.clientHeight - (radius * 2)) / 2}px`
66

67 1
  const x = value.center ? centerX : `${localX - radius}px`
68 1
  const y = value.center ? centerY : `${localY - radius}px`
69

70 1
  return { radius, scale, x, y, centerX, centerY }
71
}
72

73 1
const ripples = {
74
  /* eslint-disable max-statements */
75
  show (
76
    e: VuetifyRippleEvent,
77
    el: HTMLElement,
78 1
    value: RippleOptions = {}
79 1
  ) {
80 1
    if (!el._ripple || !el._ripple.enabled) {
81 0
      return
82
    }
83

84 1
    const container = document.createElement('span')
85 1
    const animation = document.createElement('span')
86

87 1
    container.appendChild(animation)
88 1
    container.className = 'v-ripple__container'
89

90 1
    if (value.class) {
91 0
      container.className += ` ${value.class}`
92
    }
93

94 1
    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value)
95

96 1
    const size = `${radius * 2}px`
97 1
    animation.className = 'v-ripple__animation'
98 1
    animation.style.width = size
99 1
    animation.style.height = size
100

101 1
    el.appendChild(container)
102

103 1
    const computed = window.getComputedStyle(el)
104 1
    if (computed && computed.position === 'static') {
105 0
      el.style.position = 'relative'
106 0
      el.dataset.previousPosition = 'static'
107
    }
108

109 1
    animation.classList.add('v-ripple__animation--enter')
110 1
    animation.classList.add('v-ripple__animation--visible')
111 1
    transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
112 1
    opacity(animation, 0)
113 1
    animation.dataset.activated = String(performance.now())
114

115 1
    setTimeout(() => {
116 1
      animation.classList.remove('v-ripple__animation--enter')
117 1
      animation.classList.add('v-ripple__animation--in')
118 1
      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
119 1
      opacity(animation, 0.25)
120
    }, 0)
121
  },
122

123 1
  hide (el: HTMLElement | null) {
124 1
    if (!el || !el._ripple || !el._ripple.enabled) return
125

126 1
    const ripples = el.getElementsByClassName('v-ripple__animation')
127

128 1
    if (ripples.length === 0) return
129 1
    const animation = ripples[ripples.length - 1]
130

131 1
    if (animation.dataset.isHiding) return
132 1
    else animation.dataset.isHiding = 'true'
133

134 1
    const diff = performance.now() - Number(animation.dataset.activated)
135 1
    const delay = Math.max(250 - diff, 0)
136

137 1
    setTimeout(() => {
138 1
      animation.classList.remove('v-ripple__animation--in')
139 1
      animation.classList.add('v-ripple__animation--out')
140 1
      opacity(animation, 0)
141

142 1
      setTimeout(() => {
143 1
        const ripples = el.getElementsByClassName('v-ripple__animation')
144 1
        if (ripples.length === 1 && el.dataset.previousPosition) {
145 0
          el.style.position = el.dataset.previousPosition
146 0
          delete el.dataset.previousPosition
147
        }
148

149 1
        animation.parentNode && el.removeChild(animation.parentNode)
150
      }, 300)
151
    }, delay)
152
  },
153
}
154

155 1
function isRippleEnabled (value: any): value is true {
156 1
  return typeof value === 'undefined' || !!value
157
}
158

159 1
function rippleShow (e: VuetifyRippleEvent) {
160 1
  const value: RippleOptions = {}
161 1
  const element = e.currentTarget as HTMLElement
162 1
  if (!element || !element._ripple || element._ripple.touched) return
163 1
  if (isTouchEvent(e)) {
164 0
    element._ripple.touched = true
165 0
    element._ripple.isTouch = true
166
  } else {
167
    // It's possible for touch events to fire
168
    // as mouse events on Android/iOS, this
169
    // will skip the event call if it has
170
    // already been registered as touch
171 1
    if (element._ripple.isTouch) return
172
  }
173 1
  value.center = element._ripple.centered || isKeyboardEvent(e)
174 1
  if (element._ripple.class) {
175 0
    value.class = element._ripple.class
176
  }
177

178 1
  if (isTouchEvent(e)) {
179
    // already queued that shows or hides the ripple
180 1
    if (element._ripple.showTimerCommit) return
181

182 0
    element._ripple.showTimerCommit = () => {
183 0
      ripples.show(e, element, value)
184
    }
185 0
    element._ripple.showTimer = window.setTimeout(() => {
186 1
      if (element && element._ripple && element._ripple.showTimerCommit) {
187 0
        element._ripple.showTimerCommit()
188 0
        element._ripple.showTimerCommit = null
189
      }
190
    }, DELAY_RIPPLE)
191
  } else {
192 1
    ripples.show(e, element, value)
193
  }
194
}
195

196 1
function rippleHide (e: Event) {
197 1
  const element = e.currentTarget as HTMLElement | null
198 1
  if (!element || !element._ripple) return
199

200 1
  window.clearTimeout(element._ripple.showTimer)
201

202
  // The touch interaction occurs before the show timer is triggered.
203
  // We still want to show ripple effect.
204 1
  if (e.type === 'touchend' && element._ripple.showTimerCommit) {
205 0
    element._ripple.showTimerCommit()
206 0
    element._ripple.showTimerCommit = null
207

208
    // re-queue ripple hiding
209 0
    element._ripple.showTimer = setTimeout(() => {
210 0
      rippleHide(e)
211
    })
212 0
    return
213
  }
214

215 1
  window.setTimeout(() => {
216 1
    if (element._ripple) {
217 1
      element._ripple.touched = false
218
    }
219
  })
220 1
  ripples.hide(element)
221
}
222

223 0
function rippleCancelShow (e: MouseEvent | TouchEvent) {
224 0
  const element = e.currentTarget as HTMLElement | undefined
225

226 1
  if (!element || !element._ripple) return
227

228 1
  if (element._ripple.showTimerCommit) {
229 0
    element._ripple.showTimerCommit = null
230
  }
231

232 0
  window.clearTimeout(element._ripple.showTimer)
233
}
234

235 1
let keyboardRipple = false
236

237 1
function keyboardRippleShow (e: KeyboardEvent) {
238 1
  if (!keyboardRipple && (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space)) {
239 1
    keyboardRipple = true
240 1
    rippleShow(e)
241
  }
242
}
243

244 1
function keyboardRippleHide (e: KeyboardEvent) {
245 1
  keyboardRipple = false
246 1
  rippleHide(e)
247
}
248

249 1
function updateRipple (el: HTMLElement, binding: VNodeDirective, wasEnabled: boolean) {
250 1
  const enabled = isRippleEnabled(binding.value)
251 1
  if (!enabled) {
252 1
    ripples.hide(el)
253
  }
254 1
  el._ripple = el._ripple || {}
255 1
  el._ripple.enabled = enabled
256 1
  const value = binding.value || {}
257 1
  if (value.center) {
258 1
    el._ripple.centered = true
259
  }
260 1
  if (value.class) {
261 0
    el._ripple.class = binding.value.class
262
  }
263 1
  if (value.circle) {
264 1
    el._ripple.circle = value.circle
265
  }
266 1
  if (enabled && !wasEnabled) {
267 1
    el.addEventListener('touchstart', rippleShow, { passive: true })
268 1
    el.addEventListener('touchend', rippleHide, { passive: true })
269 1
    el.addEventListener('touchmove', rippleCancelShow, { passive: true })
270 1
    el.addEventListener('touchcancel', rippleHide)
271

272 1
    el.addEventListener('mousedown', rippleShow)
273 1
    el.addEventListener('mouseup', rippleHide)
274 1
    el.addEventListener('mouseleave', rippleHide)
275

276 1
    el.addEventListener('keydown', keyboardRippleShow)
277 1
    el.addEventListener('keyup', keyboardRippleHide)
278

279
    // Anchor tags can be dragged, causes other hides to fail - #1537
280 1
    el.addEventListener('dragstart', rippleHide, { passive: true })
281 1
  } else if (!enabled && wasEnabled) {
282 1
    removeListeners(el)
283
  }
284
}
285

286 1
function removeListeners (el: HTMLElement) {
287 1
  el.removeEventListener('mousedown', rippleShow)
288 1
  el.removeEventListener('touchstart', rippleShow)
289 1
  el.removeEventListener('touchend', rippleHide)
290 1
  el.removeEventListener('touchmove', rippleCancelShow)
291 1
  el.removeEventListener('touchcancel', rippleHide)
292 1
  el.removeEventListener('mouseup', rippleHide)
293 1
  el.removeEventListener('mouseleave', rippleHide)
294 1
  el.removeEventListener('keydown', keyboardRippleShow)
295 1
  el.removeEventListener('keyup', keyboardRippleHide)
296 1
  el.removeEventListener('dragstart', rippleHide)
297
}
298

299 1
function directive (el: HTMLElement, binding: VNodeDirective, node: VNode) {
300 1
  updateRipple(el, binding, false)
301

302 1
  if (process.env.NODE_ENV === 'development') {
303
    // warn if an inline element is used, waiting for el to be in the DOM first
304 1
    node.context && node.context.$nextTick(() => {
305 0
      const computed = window.getComputedStyle(el)
306 1
      if (computed && computed.display === 'inline') {
307 1
        const context = (node as any).fnOptions ? [(node as any).fnOptions, node.context] : [node.componentInstance]
308 0
        consoleWarn('v-ripple can only be used on block-level elements', ...context)
309
      }
310
    })
311
  }
312
}
313

314 1
function unbind (el: HTMLElement) {
315 1
  delete el._ripple
316 1
  removeListeners(el)
317
}
318

319 1
function update (el: HTMLElement, binding: VNodeDirective) {
320 1
  if (binding.value === binding.oldValue) {
321 1
    return
322
  }
323

324 1
  const wasEnabled = isRippleEnabled(binding.oldValue)
325 1
  updateRipple(el, binding, wasEnabled)
326
}
327

328 1
export const Ripple = {
329
  bind: directive,
330
  unbind,
331
  update,
332
}
333

334
export default Ripple

Read our documentation on viewing source code .

Loading