crop.js

/**
 * Created by albizures on 8/10/15.
 */

function AreaCrop(page, parent, scale, x, y, w, h, minW, minH, maxW, maxH) {
	this.id = Date.now();
	var real = page[0].getBoundingClientRect();
	var visibleArea = {};

	this.el = document.createElement('div');
	this.scale = scale || 1;
	this.parent = parent;
	this.page = page;
	this.isMobile = $.device;
	this.minW = minW || (60 * 100) / this.parent.width();
	this.minH = minH || (60 * 100) / this.parent.height();
	this.maxW = maxW || 85;
	this.maxH = maxH || 85;

	if (scale !== 1) {
		//debugger;
		visibleArea.top = (Math.abs(real.top) * 100) / real.height;
		visibleArea.left = (Math.abs(real.left) * 100) / real.width;
		//visibleArea.left = visibleArea.left ;
		visibleArea.height = (((window.innerHeight / 2) * 100) / real.height);
		visibleArea.width = (((window.innerWidth / 2) * 100) / real.width);

		if (real.left > 0) {
			visibleArea.width -= visibleArea.left;
			visibleArea.left = 0;
		}
		if (real.top > 0) {
			visibleArea.height -= visibleArea.top;
			visibleArea.top = 0
		}
	}
	this.w = w || scale == 1 ? 30 : this.minW;
	this.h = h || scale == 1 ? 30 : this.minH;
	this.y = y || scale == 1 ? 30 : visibleArea.top + visibleArea.height - this.h / 2;
	this.x = x || scale == 1 ? 30 : visibleArea.left + visibleArea.width - this.w / 2;

	this.dragbars = {};
	this.init();
}
AreaCrop.prototype = {
	contructor: AreaCrop,
	get y() {
		return this._y;
	},
	set y(val) {
		var top = this.parent.offset().top - 45;
		if (this.scale != 1 && 0 > top) {
			if (val < (Math.abs(top) * 100) / (this.parent.height() * this.scale)) {
				val = (Math.abs(top) * 100) / (this.parent.height() * this.scale);
			}
		}
		if (val < 0) {
			val = 0;
		}
		this._y = val;
	},
	get x() {
		return this._x;
	},
	set x(val) {
		var left = this.parent.offset().left;
		if (this.scale != 1 && 0 > left) {
			if (val < (Math.abs(left) * 100) / (this.parent.width() * this.scale)) {
				val = (Math.abs(left) * 100) / (this.parent.width() * this.scale);
			}
		}
		if (val < 0) {
			val = 0;
		}
		this._x = val;
	}
};
AreaCrop.prototype.setScale = function (val) {
	this.scale = val;
};
AreaCrop.prototype.areaExport = function () {
	return {
		x: Number(this.x.toFixed(2)),
		y: Number(this.y.toFixed(2)),
		w: Number(this.w.toFixed(2)),
		h: Number(this.h.toFixed(2)),
		x2: Number((this.x + this.w).toFixed(2)),
		y2: Number((this.y + this.h).toFixed(2)),
		z: 0
	};
};
AreaCrop.prototype.init = function () {
	var type = ['n', 's', 'e', 'w', 'nw', 'ne', 'se', 'sw'];
	for (var i in type) {
		this.dragbars[type[i]] = new DragBar(type[i], this);
	}
	for (var i = 1; i <= 4; i++) {
		$(this.el).append('<div class="border"/>');
	}
	for (var i in 'nsew') {
		$(this.el).append('<div class="cube ' + 'nsew' [i] + '"/>');
	}

	$(this.el).addClass('area-crop');
	this.parent.append(this.el);
	this.changeCords();

	this.eventStart = this.isMobile ? 'touchstart' : 'mousedown';
	this.eventMove = this.isMobile ? 'touchmove' : 'mousemove';
	this.eventEnd = this.isMobile ? 'touchend' : 'mouseup';

	this.el.addEventListener(this.eventStart, this.handlerMouseDown.bind(this));
	$($.device ? this.el : window).on(this.eventEnd + '.crop' + this.id, this.handlerMouseUp.bind(this));
	$($.device ? this.el : window).on(this.eventMove + '.crop' + this.id, this.handlerMouseMove.bind(this));


	//this.parent.on('mouseleave', this.handlerMouseLeave.bind(this));
	//console.log('init');
};
AreaCrop.prototype.remove = function () {
	for (var i in this.dragbars) {
		this.dragbars[i].remove();
	}
	this.el.removeEventListener(this.eventStart);
	$(window).off(this.eventEnd + '.crop' + this.id);
	$(window).off(this.eventMove + '.crop' + this.id);
	$(this.el).remove();
};

AreaCrop.prototype.handlerMouseLeave = function (evt) {
	this.drag = false;
};
AreaCrop.prototype.handlerMouseDown = function (evt) {
	evt.preventDefault();
	evt.stopImmediatePropagation();
	evt.stopPropagation();
	//console.log('handlerMouseDown');
	this.drag = true;
	var pageX, pageY;
	if (this.isMobile) {
		pageX = evt.touches[0].pageX;
		pageY = evt.touches[0].pageY;
	} else {
		pageX = evt.pageX;
		pageY = evt.pageY;
	}

	this.areaX = ((evt.pageX - $(this.el).offset().left) * 100) / (this.parent.width() * this.scale);
	this.areaY = ((evt.pageY - $(this.el).offset().top) * 100) / (this.parent.height() * this.scale);
};
AreaCrop.prototype.handlerMouseMove = function (evt) {
	//console.log('handlerMouseMove');
	if (this.drag) {
		//debugger;
		if (evt.originalEvent) {
			evt.originalEvent.preventDefault();
			evt.originalEvent.stopImmediatePropagation();
			evt.originalEvent.stopPropagation();
		}
		evt.preventDefault();
		evt.stopImmediatePropagation();
		evt.stopPropagation();
		var cord = this.relativePointEvt(evt);
		this.changePosition(cord.x, cord.y);
	}
};
AreaCrop.prototype.handlerMouseUp = function (evt) {
	//console.log('handlerMouseUp');
	if (this.drag) {
		this.drag = false;
		this.areaX = undefined;
		this.areaY = undefined;
		evt.preventDefault();
		evt.stopImmediatePropagation();
		evt.stopPropagation();
	}

};
AreaCrop.prototype.changePosition = function (x, y) {
	x = x - this.areaX; // (this.w/2);
	y = y - this.areaY; //(this.h/2);
	if (x < 0) x = 0;
	if (x > 100 - this.w) x = 100 - this.w;
	if (y < 0) y = 0;
	if (y > 100 - this.h) y = 100 - this.h;

	this.x = x;
	this.y = y;
	this.changeCords();
};
AreaCrop.prototype.relativePointEvt = function (evt) {
	if (this.isMobile) {
		evt.pageX = evt.originalEvent.touches[0].pageX;
		evt.pageY = evt.originalEvent.touches[0].pageY;
	}
	var x = evt.pageX - this.parent.offset().left,
		y = evt.pageY - this.parent.offset().top;

	x = (x * 100) / (this.parent.width() * this.scale);
	y = (y * 100) / (this.parent.height() * this.scale);

	return {
		x: x,
		y: y
	};
};
AreaCrop.prototype.changeSize = function (w, h, x, y) {
	if (w < this.minW) {
		var tempX = (this.x + w) - this.minW;
		if (tempX < 0) tempX = 0;
		this.x = tempX;
		w = this.minW;
	}
	if (h < this.minH) {
		var tempY = (this.y + h) - this.minH;
		if (tempY < 0) tempY = 0;
		this.y = tempY;
		h = this.minH;
	}
	if (w > this.maxW && h > this.maxH) {
		w = this.w;
	}
	if (h > this.maxH && w > this.maxW) {
		h = this.h;
	}
	this.w = w;
	this.h = h;
	if (hasVal(x)) {
		if (x > 100 - this.w) x = 100 - this.w;
		this.x = x;
	}
	if (hasVal(y)) {
		if (y > 100 - this.h) y = 100 - this.h;
		this.y = y;
	}
	this.changeCords();
};
AreaCrop.prototype.changeCords = function () {
	//console.log(this.scale);
	$(this.el).css({
		'width': this.w + '%',
		'height': this.h + '%',
		'left': this.x + '%',
		'top': this.y + '%'
	});
	if (this.resize) {
		this.resize($(this.btn), $(this.el), this.page);
	}
};