the-glorious-startpage/js/mobile-swipe-event.js

class SwipeEventManager {

	constructor() {
		this.swipeEvent = this.swipeEvent.bind(this);

		this._xDown = null;
		this._yDown = null;
	}

	swipeEvent = (elementID, callback) => {

		const el = document.getElementById(elementID);
		let dir;

		el.addEventListener(
			'touchstart',
			(event) => {
				// event.preventDefault();
				this._xDown = event.touches[0].clientX;
	    		this._yDown = event.touches[0].clientY;
			},
			{ passive: true }
		);

		el.addEventListener(
			'touchmove',
			(event) => {
				// event.preventDefault();
			    if ( ! this._xDown || ! this._yDown ) {
			        return;
			    }

			    const xUp = event.touches[0].clientX;
			    const yUp = event.touches[0].clientY;
			    const xDiff = this._xDown - xUp;
			    const yDiff = this._yDown - yUp;

			    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
			        if ( xDiff > 0 ) {
			        	// Left Swipe
			        	dir = 'left'
			        } else {
			        	// Right Swipe
			        	dir = 'right';
			        }                       
			    } else {

			        if ( yDiff > 0 ) {
			        	// Up Swipe
			        	dir = 'up';
			        } else { 
			        	// Down Swipe
			        	dir = 'down';
			        }
			    }
			    
			    /* Reset values */
			    this._xDown = null;
			    this._yDown = null;

			    if (dir !== ''){
				    if (typeof callback === 'function') {
				    	callback(el, dir);
				    }
			    }

			},
			{ passive: true }
		);
	}
}