feat: ✨ add click/drag/tap/swipe

NOTES.md

@@ -0,0 +1,7 @@
+# NOTES
+
+- [?] move from `hammerjs` (19.9 -> 9.9KB) to
+ - [`zingtouch`](https://github.com/zingchart/zingtouch) (25.7 -> 5.3KB ?)?
+ - [Tocca](https://gianlucaguarini.com/Tocca.js/)
+ - [Vanilla](https://css-tricks.com/simple-swipe-with-vanilla-javascript/)?
+- [ ] expose somme CSS `--var` ? kind of `progress` value ?

index.html

@@ -27,7 +27,7 @@
  const Slidy = data.default
 
  new Slidy(list, {
- click: false,
+ click: true,
  drag: true,
  transition: () => {
  return Promise.resolve()

src/modules/Events.ts

@@ -3,10 +3,14 @@ import { GestureDirection, SupportedEvents } from '../defs'
 export class Events {
  private _events: Map<SupportedEvents, Function> = new Map()
  private _x0: number
- private _isMoving: boolean
- private _moveDelta = 50
- private _moveDuration = 100
- private _moveTimeout: number
+ private _t0: number
+
+ private _holdThreshold = 1000
+ private _movePrecision = 50
+ private _moveThreshold = 100
+
+ private _hasTouchListener: boolean
+ private _hasMouseListener: boolean
 
  // eslint-disable-next-line no-useless-constructor, no-empty-function
  constructor(private _el: HTMLElement) {
@@ -19,18 +23,20 @@ export class Events {
 
  switch (name) {
  case 'click':
- console.log('click')
- break
- case 'tap':
- console.log('tap')
- break
  case 'drag':
- this._el.addEventListener('mousedown', this._lock, false)
- this._el.addEventListener('mouseup', this._release, false)
+ if (!this._hasMouseListener) {
+ this._el.addEventListener('mousedown', this._lock, false)
+ this._el.addEventListener('mouseup', this._release, false)
+ this._hasMouseListener = true
+ }
  break
+ case 'tap':
  case 'swipe':
- this._el.addEventListener('touchstart', this._lock, false)
- this._el.addEventListener('touchend', this._release, false)
+ if (!this._hasTouchListener) {
+ this._el.addEventListener('touchstart', this._lock, false)
+ this._el.addEventListener('touchend', this._release, false)
+ this._hasTouchListener = true
+ }
  break
  default:
  }
@@ -41,18 +47,20 @@ export class Events {
 
  switch (name) {
  case 'click':
- console.log('click')
- break
- case 'tap':
- console.log('tap')
- break
  case 'drag':
- this._el.removeEventListener('mousedown', this._lock, false)
- this._el.removeEventListener('mouseup', this._release, false)
+ if (!this._events.has('click') && !this._events.has('drag')) {
+ this._el.removeEventListener('mousedown', this._lock, false)
+ this._el.removeEventListener('mouseup', this._release, false)
+ this._hasMouseListener = false
+ }
  break
+ case 'tap':
  case 'swipe':
- this._el.removeEventListener('touchstart', this._lock, false)
- this._el.removeEventListener('touchend', this._release, false)
+ if (!this._events.has('tap') && !this._events.has('swipe')) {
+ this._el.removeEventListener('touchstart', this._lock, false)
+ this._el.removeEventListener('touchend', this._release, false)
+ this._hasTouchListener = false
+ }
  break
  default:
  }
@@ -72,29 +80,27 @@ export class Events {
 
  private _lock(e: TouchEvent | MouseEvent) {
  this._x0 = Events.unify(e).clientX
- this._isMoving = false
- this._moveTimeout = window.setTimeout(() => {
- this._isMoving = true
- }, this._moveDuration)
+ this._t0 = Date.now()
  }
 
  private _release(e: TouchEvent | MouseEvent) {
- if (!this._isMoving) {
- return
- }
-
  const dx = Events.unify(e).clientX - this._x0
+ const dt = Date.now() - this._t0
+
+ // Click if…
+ if (Math.abs(dx) <= this._movePrecision && dt <= this._holdThreshold) {
+ this._events.has('click') && this._events.get('click')()
+ this._events.has('tap') && this._events.get('tap')()
 
- if (Math.abs(dx) < this._moveDelta) {
  return
  }
 
- const direction: GestureDirection = dx >= 0 ? 'right' : 'left'
+ // Drag if…
+ if (Math.abs(dx) > this._movePrecision && dt > this._moveThreshold) {
+ const direction: GestureDirection = dx >= 0 ? 'right' : 'left'
 
- this._events.has('drag') && this._events.get('drag')(direction)
- this._events.has('swipe') && this._events.get('swipe')(direction)
-
- this._isMoving = false
- window.clearTimeout(this._moveTimeout)
+ this._events.has('drag') && this._events.get('drag')(direction)
+ this._events.has('swipe') && this._events.get('swipe')(direction)
+ }
  }
 }