detect touch swipe (none, left, right, up, down)

SwipeDetect.d.ts

export type SwipeDirect = ('none' | 'left' | 'right' | 'up' | 'down')

export interface ISwipeDetect {
	direct: SwipeDirect
	offsetDist: number
	startX: number
	startY: number
	distX: number
	distY: number
	init: () => void
	detstroy: () => void
	onTouchStart: (e?) => void
	onTouchMove: (e?) => void
	onTouchEnd: (e?) => void
}

SwipeDetect.js

function SwipeDetect(_elem) {
	const elem = _elem
	this.direct = 'none'
	this.offsetDist = 30
	this.startX = 0
	this.startY = 0
	this.distX = 0
	this.distY = 0

	const onTouchStart = (e) => {
		let touchobj = e.changedTouches[0]
		this.direct = 'none'
		this.startX = this.distX = touchobj.pageX
		this.startY = this.distY = touchobj.pageY
		this.onTouchStart(e)
	}

	const onTouchMove = (e) => {
		let touchobj = e.changedTouches[0]
		this.distX = touchobj.pageX - this.startX
		this.distY = touchobj.pageY - this.startY
		this.onTouchMove(e)
	}

	const onTouchEnd = (e) => {
		let absDistX = Math.abs(this.distX)
		let absDistY = Math.abs(this.distY)
		let isHorizon = (absDistX > this.offsetDist)
		let isVerical = (absDistY > this.offsetDist)
		if (isHorizon) {
			this.direct = (this.distX < 0) ? 'left' : 'right'
			this.onTouchEnd(e)
		} else if (isVerical) {
			this.direct = (this.distY < 0) ? 'up' : 'down'
			this.onTouchEnd(e)
		}
	}

	this.init = () => {
		elem.addEventListener('touchstart', onTouchStart, false)
		elem.addEventListener('touchmove', onTouchMove, false)
		elem.addEventListener('touchend', onTouchEnd, false)
	}

	this.detstroy = () => {
		elem.removeEventListener('touchstart', onTouchStart, false)
		elem.removeEventListener('touchmove', onTouchMove, false)
		elem.removeEventListener('touchend', onTouchEnd, false)
	}

	this.onTouchStart = (e) => { }
	this.onTouchMove = (e) => { }
	this.onTouchEnd = (e) => { }
}