Mimic Amazon Menu Behavior

by Neviton

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="menu">
	<div class="angle"></div>
</div>

SCSS

* {
	font-family: Arial;
}

#menu {
	width: 200px;
	height: 200px;
	background-color: #777;
	
	.angle {
		padding: 10px;
	}

	&.success {
		background:green;
	}

	&.error {
		background:red;
	}
}

JavaScript

var moveStarted = false,
	xMouse = 0,
	yMouse = 0;
	
//var calcMouseMoveAngle = _.debounce(function(){	

function calcMoveAngle(x0, y0, x1, y1) {
	var $menu = $('#menu'),
		menuPos = $menu.position(),
		co = x1 - x0,
		ca = y1 - y0,
		atan = Math.atan(co/ca),
		angle = atan * (180/Math.PI);
	
	$('.angle').html(Math.round(angle) + '°');
	
	$('#menu').removeClass();
	
	if (angle > 20) {
		$('#menu').addClass('success');
	} else {
		$('#menu').addClass('error');
	}
}

$('#menu').on('mousemove', function(e){
	if (!moveStarted) {
		moveStarted = true;
		xMouse = e.clientX;
		yMouse = e.clientY;
	} else {
		var co = e.clientX - xMouse,
			ca = e.clientY - yMouse,
			h = Math.sqrt(co*co + ca*ca);
		
		if (h > 10) {
			calcMoveAngle(xMouse, yMouse, e.clientX, e.clientY);
			moveStarted = false;
		}
	}
})