Skip to content

magento / AncLib

Go to a project
Switch branch/tag
croppic.min.js 9.28 KB
1 2 3 4 5 6 
jQuery.noConflict();
(function( $ ) {
  $(function() {
!function(o,t){Croppic=function(o,t){var n=this;n.id=o,n.obj=$("#"+o),n.outputDiv=n.obj,n.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,doubleZoomControls:!0,modal:!1,customUploadButtonId:"",loaderHtml:"",onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onBeforeImgCrop:null,onAfterImgCrop:null};for(i in t)n.options[i]=t[i];n.init()},Croppic.prototype={id:"",imgInitW:0,imgInitH:0,imgW:0,imgH:0,objW:0,objH:0,windowW:0,windowH:$(o).height(),obj:{},outputDiv:{},outputUrlObj:{},img:{},defaultImg:{},croppedImg:{},imgEyecandy:{},form:{},cropControlsUpload:{},cropControlsCrop:{},cropControlZoomMuchIn:{},cropControlZoomMuchOut:{},cropControlZoomIn:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var o=this;o.objW=o.obj.width(),o.objH=o.obj.height(),$.isEmptyObject(o.defaultImg)&&(o.defaultImg=o.obj.find("img")),o.createImgUploadControls(),o.bindImgUploadControl()},createImgUploadControls:function(){var o=this,t="";""===o.options.customUploadButtonId&&(t='<i class="cropControlUpload"></i>');var i='<i class="cropControlRemoveCroppedImage"></i>';$.isEmptyObject(o.croppedImg)&&(i="");var n='<div class="cropControls cropControlsUpload"> '+t+i+" </div>";o.outputDiv.append(n),o.cropControlsUpload=o.outputDiv.find(".cropControlsUpload"),""===o.options.customUploadButtonId?o.imgUploadControl=o.outputDiv.find(".cropControlUpload"):(o.imgUploadControl=$("#"+o.options.customUploadButtonId),o.imgUploadControl.show()),$.isEmptyObject(o.croppedImg)||(o.cropControlRemoveCroppedImage=o.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var o=this,i='<form class="'+o.id+'_imgUploadForm" style="display: none; visibility: hidden;">  <input type="file" name="img">  </form>';o.outputDiv.append(i),o.form=o.outputDiv.find("."+o.id+"_imgUploadForm"),o.imgUploadControl.off("click"),o.imgUploadControl.on("click",function(){o.form.find('input[type="file"]').trigger("click")}),$.isEmptyObject(o.croppedImg)||o.cropControlRemoveCroppedImage.on("click",function(){o.croppedImg.remove(),$(this).hide(),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val("")}),o.form.find('input[type="file"]').change(function(){o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.imgUploadControl.hide();var i=new FormData(o.form[0]);for(var n in o.options.uploadData)o.options.uploadData.hasOwnProperty(n)&&i.append(n,o.options.uploadData[n]);$.ajax({url:o.options.uploadUrl,data:i,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){response=jQuery.parseJSON(t),"success"==response.status&&(o.imgInitW=o.imgW=response.width,o.imgInitH=o.imgH=response.height,o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=response.url,o.obj.append('<img src="'+response.url+'">'),o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)),"error"==response.status&&(o.obj.append('<p style="width:100%; height:100%; text-align:center; line-height:'+o.objH+'px;">'+response.message+"</p>"),o.hideLoader(),setTimeout(function(){o.reset()},2e3))})})},createModal:function(){var o=this,t=o.windowH/2-o.objH/2,i='<div id="croppicModal"><div id="croppicModalObj" style="width:'+o.objW+"px; height:"+o.objH+"px; margin:0 auto; margin-top:"+t+'px; position: relative;"> </div></div>';$("body").append(i),o.modal=$("#croppicModal"),o.obj=$("#croppicModalObj")},destroyModal:function(){var o=this;o.obj=o.outputDiv,o.modal.remove()},initCropper:function(){var o=this;o.img=o.obj.find("img"),o.img.wrap('<div class="cropImgWrapper" style="overflow:hidden; z-index:1; position:absolute; width:'+o.objW+"px; height:"+o.objH+'px;"></div>'),o.createCropControls(),o.options.imgEyecandy&&o.createEyecandy(),o.initDrag(),o.initialScaleImg()},createEyecandy:function(){var o=this;o.imgEyecandy=o.img.clone(),o.imgEyecandy.css({"z-index":"0",opacity:o.options.imgEyecandyOpacity}).appendTo(o.obj)},destroyEyecandy:function(){var o=this;o.imgEyecandy.remove()},initialScaleImg:function(){var o=this;o.zoom(-o.imgInitW),o.zoom(40),o.img.css({left:-(o.imgW-o.objW)/2,top:-(o.imgH-o.objH)/2,position:"relative"}),o.options.imgEyecandy&&o.imgEyecandy.css({left:-(o.imgW-o.objW)/2,top:-(o.imgH-o.objH)/2,position:"relative"})},createCropControls:function(){var o,t=this,i='<i class="cropControlZoomMuchIn"></i>',n='<i class="cropControlZoomIn"></i>',r='<i class="cropControlZoomOut"></i>',p='<i class="cropControlZoomMuchOut"></i>',e='<i class="cropControlCrop"></i>',s='<i class="cropControlReset"></i>';o=t.options.doubleZoomControls?'<div class="cropControls cropControlsCrop">'+i+n+r+p+e+s+"</div>":'<div class="cropControls cropControlsCrop">'+n+r+e+s+"</div>",t.obj.append(o),t.cropControlsCrop=t.obj.find(".cropControlsCrop"),t.options.doubleZoomControls&&(t.cropControlZoomMuchIn=t.cropControlsCrop.find(".cropControlZoomMuchIn"),t.cropControlZoomMuchIn.on("click",function(){t.zoom(10*t.options.zoomFactor)}),t.cropControlZoomMuchOut=t.cropControlsCrop.find(".cropControlZoomMuchOut"),t.cropControlZoomMuchOut.on("click",function(){t.zoom(10*-t.options.zoomFactor)})),t.cropControlZoomIn=t.cropControlsCrop.find(".cropControlZoomIn"),t.cropControlZoomIn.on("click",function(){t.zoom(t.options.zoomFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlZoomOut"),t.cropControlZoomOut.on("click",function(){t.zoom(-t.options.zoomFactor)}),t.cropControlCrop=t.cropControlsCrop.find(".cropControlCrop"),t.cropControlCrop.on("click",function(){t.crop()}),t.cropControlReset=t.cropControlsCrop.find(".cropControlReset"),t.cropControlReset.on("click",function(){t.reset()})},initDrag:function(){var o=this;o.img.on("mousedown",function(t){t.preventDefault();var i=o.img.css("z-index"),n=o.img.outerHeight(),r=o.img.outerWidth(),p=o.img.offset().top+n-t.pageY,e=o.img.offset().left+r-t.pageX;o.img.css("z-index",1e3).on("mousemove",function(t){var s=t.pageY+p-n,c=t.pageX+e-r;o.img.offset({top:s,left:c}).on("mouseup",function(){$(this).removeClass("draggable").css("z-index",i)}),o.options.imgEyecandy&&o.imgEyecandy.offset({top:s,left:c}),parseInt(o.img.css("top"))>0&&(o.img.css("top",0),o.options.imgEyecandy&&o.imgEyecandy.css("top",0));var a=-(o.imgH-o.objH);parseInt(o.img.css("top"))<a&&(o.img.css("top",a),o.options.imgEyecandy&&o.imgEyecandy.css("top",a)),parseInt(o.img.css("left"))>0&&(o.img.css("left",0),o.options.imgEyecandy&&o.imgEyecandy.css("left",0));var m=-(o.imgW-o.objW);parseInt(o.img.css("left"))<m&&(o.img.css("left",m),o.options.imgEyecandy&&o.imgEyecandy.css("left",m)),o.options.onImgDrag&&o.options.onImgDrag.call(o)})}).on("mouseup",function(){o.img.off("mousemove")}).on("mouseout",function(){o.img.off("mousemove")})},zoom:function(o){var t=this,i=t.imgW/t.imgH,n=t.imgW+o,r=n/i,p=!0;(n<t.objW||r<t.objH)&&(n-t.objW<r-t.objH?(n=t.objW,r=n/i):(r=t.objH,n=i*r),p=!1),(n>t.imgInitW||r>t.imgInitH)&&(n-t.imgInitW<r-t.imgInitH?(n=t.imgInitW,r=n/i):(r=t.imgInitH,n=i*r),p=!1),t.imgW=n,t.img.width(n),t.imgH=r,t.img.height(r);var e=parseInt(t.img.css("top"))-o/2,s=parseInt(t.img.css("left"))-o/2;e>0&&(e=0),s>0&&(s=0);var c=-(r-t.objH);c>e&&(e=c);var a=-(n-t.objW);a>s&&(s=a),p&&t.img.css({top:e,left:s}),t.options.imgEyecandy&&(t.imgEyecandy.width(n),t.imgEyecandy.height(r),p&&t.imgEyecandy.css({top:e,left:s})),t.options.onImgZoom&&t.options.onImgZoom.call(t)},crop:function(){var o=this;o.options.onBeforeImgCrop&&o.options.onBeforeImgCrop.call(o),o.cropControlsCrop.hide(),o.showLoader();var i={imgUrl:o.imgUrl,imgInitW:o.imgInitW,imgInitH:o.imgInitH,imgW:o.imgW,imgH:o.imgH,imgY1:Math.abs(parseInt(o.img.css("top"))),imgX1:Math.abs(parseInt(o.img.css("left"))),cropH:o.objH,cropW:o.objW},n=new FormData;for(var r in i)i.hasOwnProperty(r)&&n.append(r,i[r]);for(var r in o.options.cropData)o.options.cropData.hasOwnProperty(r)&&n.append(r,o.options.cropData[r]);$.ajax({url:o.options.cropUrl,data:n,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){response=jQuery.parseJSON(t),"success"==response.status&&(o.imgEyecandy.hide(),o.destroy(),o.obj.append('<img class="croppedImg" src="'+response.url+'">'),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val(response.url),o.croppedImg=o.obj.find(".croppedImg"),o.init(),o.hideLoader()),"error"==response.status&&o.obj.append('<p style="width:100%; height:100%;>'+response.message+'</p>">'),o.options.onAfterImgCrop&&o.options.onAfterImgCrop.call(o)})},showLoader:function(){var o=this;o.obj.append(o.options.loaderHtml),o.loader=o.obj.find(".loader")},hideLoader:function(){var o=this;o.loader.remove()},reset:function(){var o=this;o.destroy(),o.init(),$.isEmptyObject(o.croppedImg)||(o.obj.append(o.croppedImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val(o.croppedImg.attr("url")))},destroy:function(){var o=this;o.options.modal&&!$.isEmptyObject(o.modal)&&o.destroyModal(),o.options.imgEyecandy&&!$.isEmptyObject(o.imgEyecandy)&&o.destroyEyecandy(),$.isEmptyObject(o.cropControlsUpload)||o.cropControlsUpload.remove(),$.isEmptyObject(o.cropControlsCrop)||o.cropControlsCrop.remove(),$.isEmptyObject(o.loader)||o.loader.remove(),$.isEmptyObject(o.form)||o.form.remove(),o.obj.html("")}}}(window,document);
  });
})(jQuery);