DrivePad Plugin

DrivePad-Plugin.markdown

DrivePad Plugin

Just like DrivePad, except it is intended to be standalone.

A Pen by Jesse Monroy on CodePen.

License.

index.html

<div id=circle></div>
<div>isPointInCircle: <span id=results>false</span></div>
<div>click: x:<span id=x>x</span>,y:<span id=y>y</span></div>

script.js

var myCircle = document.getElementById("circle");
var myResults = document.getElementById("results");
var myX = document.getElementById("x");
var myY = document.getElementById("y");

var drivePad = {
	theCallback : null,
	cx : null,
	cy : null,
	radius : null,
	//
	init : function(type, circleId, watchId, callback) {
		// save the callback
		theCallback = callback;
		// assign a handler
		switch (type) {
			case 'click':
				watchId.addEventListener('click', drivePad.handleClick);
			break;
			case 'touch':
				watchId.addEventListener('touchstart', drivePad.handleTouch);
				watchId.addEventListener('touchend',   drivePad.handleTouch);
				watchId.addEventListener('touchmove',  drivePad.handleTouch);
			break;
		}
		// get the center of our circle, and it's radius
    // BUG: WebView (ala Phonegap/Android) has a rather nasty bug
    // that requires assignment to a single object, then demuxing (as seen)
    var data = drivePad.getCenter(circleId);
		drivePad.cx = data[0];
		drivePad.cy = data[1];
		drivePad.radius = data[2];
		console.log("center", drivePad.cx, drivePad.cy, drivePad.radius);
	},
	handleClick : function(e) {
		// e = point clicked
		//console.log("page", e.pageX, e.pageY);
		x = e.pageX;
		y = e.pageY;

		results = drivePad.isPointInCircle(x, y, drivePad.cx, drivePad.cy, drivePad.radius);
		//console.log(results);
		theCallback({"x":x, "y":y, "inside":results});
	},
	handleTouch : function(evt) {
		theCallback(null);
	},
	//
	//
	//
	isPointInCircle : function(x, y, cx, cy, radius) {
		//console.log("checking", x, y, cx, cy, radius);
		return ((x-cx)*(x-cx)) + ((y-cy)*(y-cy)) < radius*radius;
	},
	getCenter : function(myCircle) {
		// myCircle = the circle on the screen
		// https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect
		var boundObj = myCircle.getBoundingClientRect();
		radius   = boundObj.height/2;
		// we'll use the left, top plus the radius to get our circle center
		cx = boundObj.left + radius;
		cy = boundObj.top + radius;
		console.log("get", cx, cy, radius);
		return [cx, cy, radius];
	}
};

function showResults(r) {
	myResults.innerHTML = r.inside;
	myX.innerHTML = r.x;
	myY.innerHTML = r.y;
	console.log(r);
}

drivePad.init('click', myCircle, document.body, showResults);

style.css

#circle {height:100px;width:100px;border-radius:50px;background-color:#4444ee;}