Resizer //JavaScript Class

• Tweet
• 

        <a href="http://jsfromhell.com/dhtml/resizer">

[UPDATED CODE AND HELP CAN BE FOUND HERE]
</a>

code

/******************************************************
* REQUIRES http://jsfromhell.com/geral/event-listener
******************************************************/

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/dhtml/resizer [v1.0]

Resizer = function(o){ //v1.0
	function getHandler(_, h, v){
		return function(e){
			var r = Resizer;
			r.i = _, r.o = _.o, r.h = h, r.v = v, r.begin(e);
		};
	}
	var _ = ((_ = this).o = o, _.f = [], _);
	for(var j, e, x, y, i = 3, k = -1, d = _.d = new Array(8); i;)
		for(j = (--i, 3); j; (--j != 1 || i != 1) && (d[++k] = [i, j, "",
			e = document.body.appendChild(document.createElement("div"))]),
			addEvent(e, "mousedown", getHandler(_, d[k][0], d[k][1])),
			e.style.position = "absolute", e.style.display = "none"
		);
	//addEvent(o, "mousemove", _.checkLineResize);
}
with({p: Resizer.prototype}){
	var c = p.constructor;
	function getMouse(e){
		return {x: e.clientX + (window.scrollX || window.pageXOffset || document.body.scrollLeft),
			y: e.clientY + (window.scrollY || window.pageYOffset || document.body.scrollTop)};
	};
	function getOffset(o, s){
		for(var r = {x: o.offsetLeft, y: o.offsetTop, h: o.offsetHeight, w: o.offsetWidth};
			(o = o.offsetParent) && (!s || !/relative/i.test(o.style.position)); r.x += o.offsetLeft, r.y += o.offsetTop);
		return r;
	};
	c.i = null, c.o = null, c.h = 0, c.v = 0, c.pd = {x: 0, y: 0}, c.po = {x: 0, y: 0};
	p.showAnchors = function(s){
		var i, x, s, _ = this, d = _.d, o = getOffset(_.o);
		for(i in d)
			(x = d[i], s = x[3].style) && s ? (s.left = o.x + o.w * x[0] / 2 + "px",
			s.top = o.y + o.h * x[1] / 2 + "px", s.display = "block") : s.display = "none";
	};
	p.setAnchorClass = function(c){
		var i, d = this.d, map = {se: 0, e: 1, ne: 2, n: 3, s: 4, nw: 5, w: 6, sw: 7};
		if(typeof c == 'string')
			for(i in d) d[i][3].className = c;
		else
			for(i in c) d[map[i.toLowerCase()]][3].className = c[i];
	};
	p.addFilter = function(f){
		this.f[this.f.length] = f;
	},
	c.begin = function(e){
		var _ = Resizer, p = getMouse(e);
		_.po = getOffset(_.o, 1);
		_.pd = {x: _.po.x - p.x, y: _.po.y - p.y};
		addEvent(document, "mousemove", _.drag);
		addEvent(document, "mouseup", _.end);
	};
	c.end = function(e){
		var _ = Resizer;
		removeEvent(document, "mousemove", _.drag);
		removeEvent(document, "mouseup", _.end);
	};
	c.drag = function(e){
		var i, c = {x: 0, y: 0, w: 0, h: 0}, _ = Resizer, p = getMouse(e), o = getOffset(_.o), s = _.o.style;
		_.h != 1 ? (c.x = _.h ? _.po.x : p.x + _.pd.x, c.w = _.po.w + (p.x - _.po.x + _.pd.x) * (_.h - 1)) : (c.x = _.po.x, c.w = _.po.w);
		_.v != 1 ? (c.y = _.v ? _.po.y : p.y + _.pd.y, c.h = _.po.h + (p.y - _.po.y + _.pd.y) * (_.v - 1)) : (c.y = _.po.y, c.h = _.po.h);
		c.h < 0 && (c.y -= c.h = -c.h, _.v ^= 2, _.po.y += _.po.h, _.pd.y -= _.po.h *= -1);
		c.w < 0 && (c.x -= c.w = -c.w, _.h ^= 2, _.po.x += _.po.w, _.pd.x -= _.po.w *= -1);
		for(var i in _.i.f) _.i.f[i].call(c, e);
		s.top = c.y + "px", s.left = c.x + "px", s.height = c.h + "px", s.width = c.w + "px";
		_.i.showAnchors(1);
	};
}

example

<style type="text/css">
#box, #box2, #box3{
	position: absolute;
	left: 50px;
	top: 90px;
	width: 300px;
	height: 50px;
	overflow: hidden;
	background: ;
	border: #999 solid 1px;
}
#box2{
	top: 160px;
}
#container{
	position: relative;
	top: 160px;
	width: 600px;
	height: 300px;
	overflow: hidden;
	background: #ffe;
	border: 1px solid;
}
.marker{
	font-size: 1px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	margin-top: -5px;
	border: #000 solid 1px;
	cursor: move;
}
.green{
	background: #0f0;
}
</style>

<div id="container">
	<div id="box3">Dentro de um container com "position:relative"</div>
</div>
<div id="box">Com filtro de tamanho máximo e marcadores com classes diferentes</div>
<div id="box2">Com filtro para manter proporção 1:1 ao segurar o shift</div>


<script type="text/javascript">
//<![CDATA[
x = new Resizer(document.getElementById("box"));
x.setAnchorClass("marker");
x.setAnchorClass({n: "marker green", s: "marker green", w: "marker green", e: "marker green"});
x.showAnchors(true);

limitSize = function(e, o){
	var x = 400, y = 200, c = this, r = Resizer, d;
	c.h > y && (!r.v && (c.y += c.h - y), c.h = y);
	c.w > x && (!r.h && (c.x += c.w - x), c.w = x);
}
x.addFilter(limitSize);


y = new Resizer(document.getElementById("box2"));
y.setAnchorClass("marker");
y.showAnchors(true);

shiftResize = function(e){
	var r = Resizer, c = this, d = c.w - c.h;
	e.shiftKey && r.h != 1 && r.v != 1 &&
	(d > 0 ? c.h = c.w : c.w = c.h,
	!r.v ? d > 0 ? c.y -= d : !r.h && (c.x += d)
	: !r.h && d < 0 && (c.x += d));
}
y.addFilter(shiftResize);

document.getElementById("container").style.position = "relative";
z = new Resizer(document.getElementById("box3"));
z.setAnchorClass("marker");
z.showAnchors(true);

//]]>
</script>

Tags:
• javascript
• JOnAS
• jsfromhell
• raoni
• resizer