chicago/src/events/swipe.js

A front-end JavaScript library for user-interface developers.

// @name: Chicago.events.animation
// @description: Triggers when a touch-based swipe event occurs
// @since: 1.0.0-beta

swipe : {
	setup: function(data) {

		var uid = _c.utils.uid('scrollstart'),
			target = _c.$(this),
			events = {
				down : 'touchstart MSPointerDown pointerdown mousedown',
				move : 'touchmove MSPointerMove pointermove mousemove',
				up : 'touchend MSPointerUp pointerup mouseup mouseleave'
			},
			memory = {
				down : {
					x : 0,
					y : 0,
				},
				up : {
					x : 0,
					y : 0,
				},
			};

		function swipeDirection( x1, x2, y1, y2 ) {
			return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 > 0 ? 'up' : 'down');
		}

		function unbind( string, handler ) {
			string.split(' ').forEach(function(evt) {
				target.off( evt, handler );
			});
		}

		function downHandler(e) {
			memory.down = {
				x : e.screenX,
				y : e.screenY,
			};

			target.on(events.move, moveHanlder);
		}

		function moveHanlder(e) {
			unbind( events.up, upHandler );
			target.one(events.up, upHandler);
		}

		function upHandler(e) {
			unbind( events.move, moveHanlder );
			unbind( events.up, upHandler );

			memory.up = {
				x : e.screenX,
				y : e.screenY,
			};

			var dir = swipeDirection( memory.down.x, memory.up.x, memory.down.y, memory.up.y );
			target.trigger( 'swipe', [ dir ] );
			target.trigger( 'swipe' + dir );
		}
		target.on(events.down, downHandler);
		_c.$(this).data('chicago.event.swipe.uid', uid).data(uid, downHandler);
	},

	teardown: function() {
		var uid = _c.$(this).data('chicago.event.scrollstart.uid');
		return _c.$(this).removeData(uid).removeData('chicago.event.scrollstart.uid');
	}
},