dating_cards_drag_swipe_logic.js

/* dragging logic for nomadlist.com/dating */
/* by @levelsio */
/* MIT license */

/* <dragging logic> */
	$('body').on('mousedown touchstart','.card',function(e) {
		if(!currentCardUserId) return;
		if($('card.match_card').is(':visible')) return;
		if(typeof e.originalEvent.touches !=='undefined') {
			/* touch device */
			draggingX=e.originalEvent.touches[0].clientX;
			draggingY=e.originalEvent.touches[0].clientY;
		}
		else {
			/* mouse device */
			draggingX=e.clientX;
			draggingY=e.clientY;
		}
		draggingCard=this;
		draggingNow=true;
		dragCardWidth=$('.card').width();
		dragCardHeight=$('.card').height();
		dragCardInitialX=$('.card').offset().left;
		dragCardInitialY=$('.card').offset().top;
		dragCardInitialMouseX=draggingX-dragCardInitialX;
		dragCardInitialMouseY=draggingY-dragCardInitialY;
	});
	$('body').on('mousemove touchmove',function(e) {
		if(!draggingNow) return;
		if($('card.match_card').is(':visible')) return;
		if(typeof e.originalEvent.touches !=='undefined') {
			/* touch device */
			draggingX=e.originalEvent.touches[0].clientX;
			draggingY=e.originalEvent.touches[0].clientY;
		}
		else {
			/* mouse device */
			draggingX=e.clientX;
			draggingY=e.clientY;
		}
		dragRelativeX=(draggingX-dragCardInitialX-dragCardInitialMouseX);
		dragRelativeY=(draggingY-dragCardInitialY-dragCardInitialMouseY);

		if(dragRelativeX<-windowWidth/4) {
			$('.controls .like').removeClass('active');
			$('.controls .dislike').addClass('active');
		}
		else if(dragRelativeX>windowWidth/4) {
			$('.controls .like').addClass('active');
			$('.controls .dislike').removeClass('active');
		}
		else {
			$('.controls .like').removeClass('active');
			$('.controls .dislike').removeClass('active');	
		}

		/* <rotate card when dragging> */
			rotateDeg=0;
			if(dragRelativeX>0) {
				rotateDeg=normalize(dragRelativeX,0,dragRelativeX+windowWidth/2)*25;
			} else {
				rotateDeg=-normalize(dragRelativeX,0,dragRelativeX-windowWidth/2)*25;
			}
		/* </rotate card when dragging> */

		$(draggingCard).css('transform','translate3d('+dragRelativeX+'px,'+dragRelativeY+'px,0px) rotate('+rotateDeg+'deg)');
	});
	$('body').on('mouseup touchend',function(e) {
		if(!currentCardUserId) return;
		if(!draggingNow) return;
		if($('card.match_card').is(':visible')) return;
		draggingNow=false;

		$('.top_card').addClass('transition');

		/* <check if dragged to left/right> */
			$('.controls .like').removeClass('active');
			$('.controls .dislike').removeClass('active');
			console.log('dragRelativeX',dragRelativeX);
			if(dragRelativeX<-windowWidth/4) {
				console.log('drag left');
				dislike();
				$('.controls .dislike').addClass('active');
				setTimeout(function() {
					$('.controls .dislike').removeClass('active');
				},250);
				return;
			}
			else if(dragRelativeX>windowWidth/4) {
				console.log('drag right');
				like();
				$('.controls .like').addClass('active');
				setTimeout(function() {
					$('.controls .like').removeClass('active');
				},250);
				return;
			}
			else {
				/* return to center */
				$('.top_card').addClass('transition');
				$('.top_card').css('transform','translate3d(0px,0px,0px)');
				setTimeout(function() {
					$('.top_card').removeClass('transition');
				},125);
			}
		/* </check if dragged to left/right> */



	});
/* </dragging logic> */