plugins/gallery/canvas.js
author Dan Fuhry <dan@enanocms.org>
Sat, 21 Aug 2010 23:32:06 -0400
changeset 42 7c6e2e97aa08
parent 35 1dd30d7bf29f
permissions -rw-r--r--
Added AJAX file upload support.

var canvas_mousemove_temp;
var canvas_keyup_temp;
var CANVAS_KEY_ESC = 27;

function canvas_click(obj)
{
	var click_x = mouseX - $dynano(obj).Left();
	var click_y = mouseY - $dynano(obj).Top() + getScrollOffset();
	
	if ( obj.canvas_in_draw )
	{
		canvas_close_draw(obj, click_x, click_y);
	}
	else
	{
		canvas_open_draw(obj, click_x, click_y);
	}
}

function canvas_open_draw(obj, x, y)
{
	obj.canvas_box_obj = canvas_create_box(obj, x, y, 1, 1);
	obj.canvas_in_draw = true;
	obj.onclick = function(e)
	{
		canvas_click(this);
		var onclose = this.getAttribute('canvas:oncomplete');
		if ( onclose )
		{
			eval(onclose);
		}
	}
	canvas_replace_mousemove(obj);
}

function canvas_replace_mousemove(obj)
{
	canvas_mousemove_temp = document.onmousemove;
	canvas_mousemove_temp.box_obj = obj;
	canvas_keyup_temp = document.onkeyup;
	document.onmousemove = function(e)
	{
		canvas_mousemove_temp(e);
		canvas_redraw_box(canvas_mousemove_temp.box_obj);
	}
	document.onkeyup = function(e)
	{
		if ( typeof(canvas_keyup_temp) == 'function' )
			canvas_keyup_temp(e);
		
		if ( e.keyCode == CANVAS_KEY_ESC )
			canvas_cancel_draw(canvas_mousemove_temp.box_obj);
	}
}

function canvas_restore_mousemove()
{
	document.onmousemove = canvas_mousemove_temp;
	document.onkeyup = canvas_keyup_temp;
}

function canvas_create_box(obj, x, y, width, height)
{
	var inner_width = width - 2;
	var inner_height = height - 2;
	var top = $dynano(obj).Top() + y;
	var left = $dynano(obj).Left() + x;
	
	// draw outer box
	var div_outer = document.createElement('div');
	div_outer.className = 'canvasbox';
	div_outer.style.border = '1px solid #000000';
	div_outer.style.position = 'absolute';
	div_outer.style.width = String(width) + 'px';
	div_outer.style.height = String(height) + 'px';
	div_outer.style.top = String(top) + 'px';
	div_outer.style.left = String(left) + 'px';
	
	div_outer.rootY = y;
	div_outer.rootX = x;
	
	var div_inner = document.createElement('div');
	div_inner.style.border = '1px solid #FFFFFF';
	if ( IE )
	{
		div_inner.style.width = '100%';
		div_inner.style.height = '100%';
	}
	else
	{
		div_inner.style.width = String(inner_width) + 'px';
		div_inner.style.height = String(inner_height) + 'px';
	}
	
	div_outer.appendChild(div_inner);
	
	obj.appendChild(div_outer);
	return div_outer;
}

function canvas_redraw_box(obj)
{
	if ( !obj.canvas_box_obj )
		return false;
	var rel_x = mouseX - $dynano(obj).Left();
	var rel_y = mouseY - $dynano(obj).Top() + getScrollOffset();
	var new_width = rel_x - obj.canvas_box_obj.rootX;
	var new_height = rel_y - obj.canvas_box_obj.rootY;
	var rootX = obj.canvas_box_obj.rootX;
	var rootY = obj.canvas_box_obj.rootY;
	// Limit dimensions to width - origin_x and height - origin_y
	if ( new_width + rootX > $dynano(obj).Width() )
		new_width = $dynano(obj).Width() - rootX;
	if ( new_height + rootY > $dynano(obj).Height() )
		new_height = $dynano(obj).Height() - rootY;
	// If going to the top or left of the origin, avoid negative width/height by moving the box
	if ( new_width < 1 )
	{
		new_width = rootX - rel_x;
		obj.canvas_box_obj.style.left = String(mouseX + 2) + 'px';
	}
	if ( new_height < 1 )
	{
		new_height = rootY - rel_y;
		obj.canvas_box_obj.style.top = String(mouseY + getScrollOffset() + 2) + 'px';
	}
	obj.canvas_box_obj.style.width = String(new_width) + 'px';
	obj.canvas_box_obj.style.height = String(new_height) + 'px';
	new_width = new_width - 2;
	new_height = new_height - 2;
	if ( IE )
	{
		var nw = new_width;
		var nh = new_height;
		obj.canvas_box_obj.firstChild.style.width = String(nw) + 'px';
		obj.canvas_box_obj.firstChild.style.height = String(nh) + 'px';
	}
	else
	{
		obj.canvas_box_obj.firstChild.style.width = String(new_width) + 'px';
		obj.canvas_box_obj.firstChild.style.height = String(new_height) + 'px';
	}
}

function canvas_close_draw(obj, x, y)
{
	canvas_restore_mousemove();
	obj.canvas_in_draw = false;
	obj.canvas = {
		top: $dynano(obj.canvas_box_obj).Top() - $dynano(obj).Top(),
		left: $dynano(obj.canvas_box_obj).Left() - $dynano(obj).Left(),
		width: $dynano(obj.canvas_box_obj).Width(),
		height: $dynano(obj.canvas_box_obj).Height()
	}
	obj.onclick = function(e)
	{
		canvas_click(this);
	}
}

function canvas_cancel_draw(obj)
{
	canvas_restore_mousemove();
	obj.canvas_in_draw = false;
	obj.removeChild(obj.canvas_box_obj);
	obj.canvas_box_obj = null;
	obj.onclick = function(e)
	{
		canvas_click(this);
	}
	var ga = obj.getAttribute('canvas:oncancel');
	if ( ga )
	{
		eval(ga);
	}
}