dragbar.js

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


function DragBar(type, area) {
	this.type = type;
	this.area = area;
	this.id = Date.now();
	this.parent = area.parent;
	this.el = document.createElement('div');
	this.isMobile = $.device;
	this.init();
}
DragBar.prototype.remove = function () {
	this.el.removeEventListener(this.eventStart);
	this.parent.off(this.eventMove + '.crop' + this.id);
	$(window).off(this.eventEnd + '.crop' + this.id);
	$(this.el).remove();
};

DragBar.prototype.init = function () {
	if (['n', 's', 'e', 'w'].indexOf(this.type) !== -1) {
		$(this.el).addClass('dragbar ' + this.type);
	} else {
		$(this.el).addClass('dragCube cube ' + this.type);
	}
	$(this.area.el).append(this.el);


	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));
	$(window).on(this.eventEnd + '.crop' + this.id, this.handlerMouseUp.bind(this));
	this.parent.on(this.eventMove + '.crop' + this.id, this.handlerMouseMouse.bind(this));

};
DragBar.prototype.handlerMouseDown = function (evt) {
	evt.stopImmediatePropagation();
	console.log('downdrga', this.type);
	if ('n w s e'.indexOf(this.type) !== -1) {
		$(this.el).addClass('activo');
	} else {
		console.log('.dragbar.' + this.type[0], '.dragbar.' + this.type[1]);
		$('.dragbar.' + this.type[0]).addClass('activo');
		$('.dragbar.' + this.type[1]).addClass('activo');
	}
	this.resize = true;
};
DragBar.prototype.handlerMouseMouse = function (evt) {
	if (this.resize) {
		evt.stopImmediatePropagation();
		evt.preventDefault();
		var cords = this.area.relativePointEvt(evt);
		if (['n', 's', 'e', 'w'].indexOf(this.type) !== -1) {
			if (this.type == 'n') {
				this.area.changeSize(this.area.w, (this.area.y - cords.y) + this.area.h, undefined, cords.y);
			} else if (this.type == 's') {
				this.area.changeSize(this.area.w, cords.y - this.area.y);
			} else if (this.type == 'w') {
				this.area.changeSize((this.area.x - cords.x) + this.area.w, this.area.h, cords.x, undefined);
			} else if (this.type == 'e') {
				this.area.changeSize(cords.x - this.area.x, this.area.h);
			}
		} else {
			if (this.type == 'nw') {
				this.area.changeSize((this.area.x - cords.x) + this.area.w, (this.area.y - cords.y) + this.area.h, cords.x, cords.y);
			} else if (this.type == 'ne') {
				this.area.changeSize(cords.x - this.area.x, (this.area.y - cords.y) + this.area.h, undefined, cords.y);
			} else if (this.type == 'se') {
				this.area.changeSize(cords.x - this.area.x, cords.y - this.area.y, undefined, undefined);
			} else if (this.type == 'sw') {
				this.area.changeSize((this.area.x - cords.x) + this.area.w, cords.y - this.area.y, cords.x, undefined);
			}
		}
	}
};
DragBar.prototype.handlerMouseLeave = function (evt) {
	if (this.resize) {
		evt.stopImmediatePropagation();
		this.resize = false;
	}
};
DragBar.prototype.resizing = function () {
	this.area.changeSize();
};
DragBar.prototype.handlerMouseUp = function (evt) {
	if (this.resize) {
		evt.stopImmediatePropagation();
		if ('n w s e'.indexOf(this.type) !== -1) {
			$(this.el).removeClass('activo');
		} else {
			this.type;
			$('.dragbar.' + this.type[0]).removeClass('activo');
			$('.dragbar.' + this.type[1]).removeClass('activo');
		}
		this.resize = false;
	}

};