Platinum Partner

Resizer //JavaScript Class



[UPDATED CODE AND HELP CAN BE FOUND HERE]


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




Dentro de um container com "position:relative"
Com filtro de tamanho máximo e marcadores com classes diferentes
Com filtro para manter proporção 1:1 ao segurar o shift
{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}