lychee/src/scripts/_swipe.jquery.js

(function($) {
	var Swipe = function(el) {
		var self = this

		this.el = $(el)
		this.pos = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 } }
		this.startTime

		el.on('touchstart', function(e) { self.touchStart(e) })
		el.on('touchmove',  function(e) { self.touchMove(e) })
		el.on('touchend',   function(e) { self.swipeEnd() })
		el.on('mousedown',  function(e) { self.mouseDown(e) })
	}

	Swipe.prototype = {
		touchStart: function(e) {
			var touch = e.originalEvent.touches[0]

			this.swipeStart(e, touch.pageX, touch.pageY)
		},

		touchMove: function(e) {
			var touch = e.originalEvent.touches[0]

			this.swipeMove(e, touch.pageX, touch.pageY)
		},

		mouseDown: function(e) {
			var self = this

			this.swipeStart(e, e.pageX, e.pageY)

			this.el.on('mousemove', function(e) { self.mouseMove(e) })
			this.el.on('mouseup', function() { self.mouseUp() })
		},

		mouseMove: function(e) {
			this.swipeMove(e, e.pageX, e.pageY)
		},

		mouseUp: function(e) {
			this.swipeEnd(e)

			this.el.off('mousemove')
			this.el.off('mouseup')
		},

		swipeStart: function(e, x, y) {
			this.pos.start.x = x
			this.pos.start.y = y
			this.pos.end.x = x
			this.pos.end.y = y

			this.startTime = new Date().getTime()

			this.trigger('swipeStart', e)
		},

		swipeMove: function(e, x, y) {
			this.pos.end.x = x
			this.pos.end.y = y

			this.trigger('swipeMove', e)
		},

		swipeEnd: function(e) {
			this.trigger('swipeEnd', e)
		},

		trigger: function(e, originalEvent) {
			var self = this

			var
				event = $.Event(e),
				x = self.pos.start.x - self.pos.end.x,
				y = self.pos.end.y - self.pos.start.y,
				radians = Math.atan2(y, x),
				direction = 'up',
				distance = Math.round(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))),
				angle = Math.round(radians * 180 / Math.PI),
				speed = Math.round(distance / ( new Date().getTime() - self.startTime ) * 1000)

			if ( angle < 0 ) {
				angle = 360 - Math.abs(angle)
			}

			if ( ( angle <= 45 && angle >= 0 ) || ( angle <= 360 && angle >= 315 ) ) {
				direction = 'left'
			} else if ( angle >= 135 && angle <= 225 ) {
				direction = 'right'
			} else if ( angle > 45 && angle < 135 ) {
				direction = 'down'
			}

			event.originalEvent = originalEvent

			event.swipe = { x: x, y: y, direction: direction, distance: distance, angle: angle, speed: speed }

			$(self.el).trigger(event)
		}
	}

	$.fn.swipe = function() {
		var swipe = new Swipe(this)

		return this
	}
})(jQuery)