Croppic.js

/** 
 * @copyright (c) 2014, netz.coop eG
 */
////Anc_Lib_Croppic = function() {
//	
//}

function Anc_Lib_Croppic(element_croparea, options) {
//	Croppic.call(this, id, options);
		var that = this;
//		that.id = id;
//		that.obj = jQuery('#' + id);
//		that.obj = jQuery(id);
		that.obj = element_croparea;
		that.outputDiv = that.obj;

		// DEFAULT OPTIONS
		that.options = {
			uploadUrl:'',
			uploadData:{},
			cropUrl:'',
			cropData:{},
			outputUrlId:'',
			//styles
			imgEyecandy:true,
			imgEyecandyOpacity:0.2,
			zoomFactor:10,
			doubleZoomControls:true,
			modal:false,
			customUploadButtonId:'',
			loaderHtml:'',
			//callbacks
			onBeforeImgUpload: null,
			onAfterImgUpload: null,
			onImgDrag: null,
			onImgZoom: null,
			onBeforeImgCrop: null,
			onAfterImgCrop: null
		};

		// OVERWRITE DEFAULT OPTIONS
		for (i in options) that.options[i] = options[i];

		// INIT THE WHOLE DAMN THING!!!
		that.init();
}

Anc_Lib_Croppic.prototype = new Croppic;

Anc_Lib_Croppic.prototype.initialWithValues = function(param_cropdata) {
	var that = this;

	that_img_css = {
		'top':		'-'+param_cropdata.imgY1+'px',
		'left':		'-'+param_cropdata.imgX1+'px',
		'width':	param_cropdata.imgW+'px',
		'height':	param_cropdata.imgH+'px',
		'z-index':	'auto',
	}
	that.img.css(that_img_css);
	
	that_imgEyecandy_css = {
		'top':		'-'+param_cropdata.imgY1+'px',
		'left':		'-'+param_cropdata.imgX1+'px',
		'width':	param_cropdata.imgW+'px',
		'height':	param_cropdata.imgH+'px',
		'z-index':	'0',
		'opacity':	'0.2'
	}
	that.imgEyecandy.css(that_imgEyecandy_css);
	
	cropImgWrapper_css = {
		width: Math.round(param_cropdata.cropW) +'px',
		height: Math.round(param_cropdata.cropH) +'px',		
	}
	jQuery('> .cropImgWrapper', that.obj).css(cropImgWrapper_css);

	that.cropH	= param_cropdata.cropH;
	that.cropW	= param_cropdata.cropW;
	that.imgH	= param_cropdata.imgH;
	that.imgW	= param_cropdata.imgW;
	that.imgInitH = param_cropdata.imgInitH;
	that.imgInitW = param_cropdata.imgInitW;
	that.imgX1	= param_cropdata.imgX1;
	that.imgY1	= param_cropdata.imgY1;
};

Anc_Lib_Croppic.prototype.bindImgUploadControl = function(){
			
		var that = this;
			
		that.showLoader();
		that.imgUploadControl.hide();
			response = {};
			response.status='success';
			response.url = that.options.imageUrl;
			response.height=that.options.imageHeight;
			response.width=that.options.imageWidth;

			console.log('response.url: '+response.url);
			console.log('response.height: '+response.height);
			console.log('response.width: '+response.width);

			if(response.status=='success'){

				that.imgInitW = that.imgW = response.width;
				that.imgInitH = that.imgH = response.height;

				if(that.options.modal){	that.createModal(); }
				if( !jQuery.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); }

				that.imgUrl=response.url;

				that.obj.append('<img src="'+response.url+'">');
				that.initCropper();

				that.hideLoader();

				if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that);

			}

			if(response.status=='error'){
				that.obj.append('<p style="width:100%; height:100%; text-align:center; line-height:'+that.objH+'px;">'+response.message+'</p>');
				that.hideLoader();
				setTimeout( function(){ that.reset(); },2000)
			}
					
			console.log('Anc_Lib_Croppic.prototype.bindImgUploadControl');
		
}

Anc_Lib_Croppic.prototype.crop = function(){
			var that = this;
			
			if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that);
			
			that.showLoader();
	
			var cropData = {
					imgUrl:that.imgUrl,
					imgInitW:that.imgInitW,
					imgInitH:that.imgInitH,
					imgW:that.imgW,
					imgH:that.imgH,
					imgY1:Math.abs( parseInt( that.img.css('top') ) ),
					imgX1:Math.abs( parseInt( that.img.css('left') ) ),
					cropH:that.objH,
					cropW:that.objW
				};
	
			
			return cropData;
}

Anc_Lib_Croppic.prototype.createCropControls = function() {
	var that = this;
	var cropControlZoomMuchIn =      '<i class="cropControlZoomMuchIn"></i>';
	var cropControlZoomMuchOut =     '<i class="cropControlZoomMuchOut"></i>';
	
	var html;

	html =  '<div class="cropControls cropControlsCrop">'+ cropControlZoomMuchOut + cropControlZoomMuchIn + '</div>'; 
	that.obj.append(html);
	that.cropControlsCrop = that.obj.find('.cropControlsCrop');

	// CACHE AND BIND CONTROLS
	if(that.options.doubleZoomControls){
		that.cropControlZoomMuchIn = that.cropControlsCrop.find('.cropControlZoomMuchIn');
		that.cropControlZoomMuchIn.on('click',function(){ that.zoom( that.options.zoomFactor*10 ); });

		that.cropControlZoomMuchOut = that.cropControlsCrop.find('.cropControlZoomMuchOut');
		that.cropControlZoomMuchOut.on('click',function(){ that.zoom(-that.options.zoomFactor*10); });
	}
	
	
}