Touch Button Plugin for Impact

touch-button.js

ig.module(
	'plugins.touch-button'
)
.requires(
	'impact.system',
	'impact.input',
	'impact.image'
)
.defines(function(){


ig.TouchButton = ig.Class.extend({	
	action: 'undefined',
	image: null,
	tile: 0,
	pos: {x: 0, y: 0},
	size: {x: 0, y: 0},
	area: {x1: 0, y1:0, x2: 0, y2:0},
	text: 'test',
	font: null,
    textPos: { x: 28, y: 0 },
    textAlign: ig.Font.ALIGN.CENTER,
	pressed: false,	
	touchId: 0,
	
	init: function( action, x, y, width, height, image, tile ) {
		var internalWidth = parseInt(ig.system.canvas.offsetWidth) || ig.system.realWidth;
		var s = ig.system.scale * (internalWidth / ig.system.realWidth);
		
		this.action = action;
		this.pos = {x: x, y: y};
		this.size = {x: width, y: height};
		this.area = {x1: x * s, y1: y * s, x2: (x + width) * s, y2: (y + height) *s};
		
		this.image = image || null;
		this.tile = tile || 0;

		if ( this.text && this.font === null ) {
        	this.font = ig.game.font || new ig.Font( 'media/button-font.png' );
      	}
		
		document.addEventListener( 'touchstart', this.touchStart.bind(this), false );
		document.addEventListener( 'touchend', this.touchEnd.bind(this), false );
		document.addEventListener( 'mousedown', this.mouseDown.bind(this), false );
	},
	
	touchStart: function( ev ) {
		ev.preventDefault();

		if( this.pressed ) { return; }
		
		var el = ig.system.canvas;
		var pos = {left: 0, top: 0};
		while( el != null ) {
			pos.left += el.offsetLeft;
			pos.top += el.offsetTop;
			el = el.offsetParent;
		}
		
		for( var i = 0; i < ev.touches.length; i++ ) {
			var x = ev.touches[i].pageX - pos.left,
				y = ev.touches[i].pageY - pos.top;
			
			if( 
				x > this.area.x1 && x < this.area.x2 &&
				y > this.area.y1 && y < this.area.y2
			) {
				this.pressed = true;
				this.touchId = ev.touches[i].identifier;

				ig.input.actions[this.action] = true;
				if( !ig.input.locks[this.action] ) {
					ig.input.presses[this.action] = true;
					ig.input.locks[this.action] = true;
				}
				return;
			}
		}
	},
	
	touchEnd: function( ev ) {
		ev.preventDefault();

		if( !this.pressed ) { return; }
				
		for( var i = 0; i < ev.changedTouches.length; i++ ) {
			if( ev.changedTouches[i].identifier === this.touchId ) {
				this.pressed = false;
				this.touchId = 0;
				ig.input.delayedKeyup[this.action] = true;				
				return;
			}
		}
	},

	mouseDown: function(ev) {
		ev.preventDefault();
		var el = ig.system.canvas;
		var pos = {left: 0, top: 0};

		while( el != null ) {
			pos.left += el.offsetLeft;
			pos.top += el.offsetTop;
			el = el.offsetParent;
		}

		var x = ev.clientX - pos.left,
			y = ev.clientY - pos.top;
		
		if( 
			x > this.area.x1 && x < this.area.x2 &&
			y > this.area.y1 && y < this.area.y2
		) {
			ig.input.actions[this.action] = true;
			if( !ig.input.locks[this.action] ) {
				ig.input.presses[this.action] = true;
				ig.input.locks[this.action] = true;
			}
			ig.input.delayedKeyup[this.action] = true;
			return;
		}
		
	},
	
	draw: function() {
		if( this.image ) { 
			this.image.drawTile( this.pos.x, this.pos.y, this.tile, this.size.x, this.size.y );
		}

		if (this.text) {
			this.font.draw( 
		        this.text, 
		        this.pos.x + this.textPos.x - ig.game.screen.x, 
		        this.pos.y + ((this.font.height + 2)) + this.textPos.y - ig.game.screen.y, 
		        this.textAlign
	      	);
      	}
	}
});


});

Added text and mouse click support