diff --git a/croppic.js b/croppic.js index a9edeca..b91433d 100644 --- a/croppic.js +++ b/croppic.js @@ -34,8 +34,8 @@ processInline: false, loadPicture:'', onReset: null, - enableMousescroll: false, - + enableMousescroll: false, + //callbacks onBeforeImgUpload: null, onAfterImgUpload: null, @@ -47,7 +47,7 @@ onBeforeRemoveCroppedImg: null, onAfterRemoveCroppedImg: null, onError: null, - + }; // OVERWRITE DEFAULT OPTIONS @@ -55,7 +55,7 @@ // INIT THE WHOLE DAMN THING!!! that.init(); - + }; Croppic.prototype = { @@ -84,102 +84,102 @@ cropControlZoomIn:{}, cropControlZoomOut:{}, cropControlCrop:{}, - cropControlReset:{}, - cropControlRemoveCroppedImage:{}, + cropControlReset:{}, + cropControlRemoveCroppedImage:{}, modal:{}, loader:{}, - + init: function () { var that = this; - + that.objW = that.obj.width(); that.objH = that.obj.height(); - + // reset rotation that.actualRotation = 0; - + if( $.isEmptyObject(that.defaultImg)){ that.defaultImg = that.obj.find('img'); } - + that.createImgUploadControls(); - - if( $.isEmptyObject(that.options.loadPicture)){ + + if( $.isEmptyObject(that.options.loadPicture)){ that.bindImgUploadControl(); - }else{ + }else{ that.loadExistingImage(); - } - + } + }, createImgUploadControls: function(){ var that = this; - + var cropControlUpload = ''; if(that.options.customUploadButtonId ===''){ cropControlUpload = ''; } var cropControlRemoveCroppedImage = ''; - + if( $.isEmptyObject(that.croppedImg)){ cropControlRemoveCroppedImage=''; } if( !$.isEmptyObject(that.options.loadPicture)){ cropControlUpload='';} var html = '
' + cropControlUpload + cropControlRemoveCroppedImage + '
'; that.outputDiv.append(html); - + that.cropControlsUpload = that.outputDiv.find('.cropControlsUpload'); - + if(that.options.customUploadButtonId ===''){ that.imgUploadControl = that.outputDiv.find('.cropControlUpload'); } else{ that.imgUploadControl = $('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); } if( !$.isEmptyObject(that.croppedImg)){ that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage'); } - + }, bindImgUploadControl: function(){ - + var that = this; - + // CREATE UPLOAD IMG FORM var formHtml = ''; that.outputDiv.append(formHtml); that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm'); - + that.imgUploadControl.off('click'); - that.imgUploadControl.on('click',function(){ - that.form.find('input[type="file"]').trigger('click'); - }); - + that.imgUploadControl.on('click',function(){ + that.form.find('input[type="file"]').trigger('click'); + }); + if( !$.isEmptyObject(that.croppedImg)){ - - that.cropControlRemoveCroppedImage.on('click',function(){ + + that.cropControlRemoveCroppedImage.on('click',function(){ if (typeof (that.options.onBeforeRemoveCroppedImg) === typeof(Function)) { that.options.onBeforeRemoveCroppedImg.call(that); } - + that.croppedImg.remove(); $(this).hide(); - + if (typeof (that.options.onAfterRemoveCroppedImg) === typeof(Function)) { that.options.onAfterRemoveCroppedImg.call(that); } - - if( !$.isEmptyObject(that.defaultImg)){ + + if( !$.isEmptyObject(that.defaultImg)){ that.obj.append(that.defaultImg); } - + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } - - }); - + + }); + } - + that.form.find('input[type="file"]').change(function(){ - + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); - + that.showLoader(); that.imgUploadControl.hide(); - + if(that.options.processInline){ //Reading Inline - + var reader = new FileReader(); reader.onload = function (e) { var image = new Image(); @@ -190,30 +190,30 @@ if(that.options.modal){ that.createModal(); } if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } - + that.imgUrl=image.src; - + that.obj.append(''); - + that.initCropper(); that.hideLoader(); - + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - + } }; reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]); } else { - + var formData = new FormData(that.form[0]); - + for (var key in that.options.uploadData) { if( that.options.uploadData.hasOwnProperty(key) ) { - formData.append( key , that.options.uploadData[key] ); + formData.append( key , that.options.uploadData[key] ); } } - + $.ajax({ url: that.options.uploadUrl, data: formData, @@ -225,15 +225,15 @@ }).always(function(data){ response = typeof data =='object' ? data : jQuery.parseJSON(data); if(response.status=='success'){ - + that.imgInitW = that.imgW = response.width; that.imgInitH = that.imgH = response.height; - + if(that.options.modal){ that.createModal(); } if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } - + that.imgUrl=response.url; - + var img = $('') that.obj.append(img); @@ -241,34 +241,34 @@ img.load(function(){ that.initCropper(); that.hideLoader(); - if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.apply(that, arguments); }); } - + if(response.status=='error'){ if (that.options.onError) that.options.onError.call(that,response.message); that.hideLoader(); setTimeout( function(){ that.reset(); },2000) } - + }); } }); - + }, loadExistingImage: function(){ var that = this; - + if( $.isEmptyObject(that.croppedImg)){ if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); - + that.showLoader(); if(that.options.modal){ that.createModal(); } if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } - + that.imgUrl=that.options.loadPicture ; - + var img =$(''); that.obj.append(img); img.load(function() { @@ -277,53 +277,53 @@ that.initCropper(); that.hideLoader(); if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - }); - - }else{ - that.cropControlRemoveCroppedImage.on('click',function(){ + }); + + }else{ + that.cropControlRemoveCroppedImage.on('click',function(){ that.croppedImg.remove(); $(this).hide(); - - if( !$.isEmptyObject(that.defaultImg)){ + + if( !$.isEmptyObject(that.defaultImg)){ that.obj.append(that.defaultImg); - } + } if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } that.croppedImg = ''; that.reset(); - }); + }); } - + }, - + createModal: function(){ var that = this; - + var marginTop = that.windowH/2-that.objH/2; var modalHTML = '
'+'
'+'
'; $('body').append(modalHTML); - + that.modal = $('#croppicModal'); - + that.obj = $('#croppicModalObj'); - + }, destroyModal: function(){ var that = this; - + that.obj = that.outputDiv; that.modal.remove(); }, initCropper: function(){ var that = this; - + /*SET UP SOME VARS*/ that.img = that.obj.find('img'); that.img.wrap('
'); - + /*INIT DRAGGING*/ that.createCropControls(); - + if(that.options.imgEyecandy){ that.createEyecandy(); } that.initDrag(); that.initialScaleImg(); @@ -342,24 +342,24 @@ var that = this; that.zoom(-that.imgInitW); that.zoom(40); - + // Adding mousewheel zoom capabilities if (that.options.enableMousescroll){ that.img.on('mousewheel', function(event) { event.preventDefault(); - that.zoom(that.options.zoomFactor*event.deltaY); + that.zoom(that.options.zoomFactor*event.deltaY); }); } // initial center image - + that.img.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'}); if(that.options.imgEyecandy){ that.imgEyecandy.css({'left': -(that.imgW -that.objW)/2, 'top': -(that.imgH -that.objH)/2, 'position':'relative'}); } - + }, - + createCropControls: function(){ var that = this; - + // CREATE CONTROLS var cropControlZoomMuchIn = ''; var cropControlZoomIn = ''; @@ -369,9 +369,9 @@ var cropControlRotateRight = ''; var cropControlCrop = ''; var cropControlReset = ''; - + var html; - + if(that.options.doubleZoomControls){ cropControlZoomMuchIn = ''; cropControlZoomMuchOut = ''; @@ -380,48 +380,48 @@ cropControlRotateLeft = ''; cropControlRotateRight = ''; } - + html = '
'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
'; - + 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); }); } - + that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlZoomIn'); that.cropControlZoomIn.on('click',function(){ that.zoom(that.options.zoomFactor); }); that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlZoomOut'); - that.cropControlZoomOut.on('click',function(){ that.zoom(-that.options.zoomFactor); }); + that.cropControlZoomOut.on('click',function(){ that.zoom(-that.options.zoomFactor); }); that.cropControlZoomIn = that.cropControlsCrop.find('.cropControlRotateLeft'); that.cropControlZoomIn.on('click', function() { that.rotate(-that.options.rotateFactor); }); - + that.cropControlZoomOut = that.cropControlsCrop.find('.cropControlRotateRight'); that.cropControlZoomOut.on('click', function() { that.rotate(that.options.rotateFactor); }); - + that.cropControlCrop = that.cropControlsCrop.find('.cropControlCrop'); that.cropControlCrop.on('click',function(){ that.crop(); }); that.cropControlReset = that.cropControlsCrop.find('.cropControlReset'); - that.cropControlReset.on('click',function(){ that.reset(); }); - + that.cropControlReset.on('click',function(){ that.reset(); }); + }, initDrag:function(){ var that = this; - + that.img.on("mousedown touchstart", function(e) { - + e.preventDefault(); // disable selection - + var pageX; var pageY; var userAgent = window.navigator.userAgent; @@ -432,18 +432,18 @@ pageX = e.pageX; pageY = e.pageY; } - + var z_idx = that.img.css('z-index'), drg_h = that.img.outerHeight(), drg_w = that.img.outerWidth(), pos_y = that.img.offset().top + drg_h - pageY, pos_x = that.img.offset().left + drg_w - pageX; - + that.img.css('z-index', 1000).on("mousemove touchmove", function(e) { - + var imgTop; var imgLeft; - + if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i)) { imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h; imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w; @@ -451,16 +451,16 @@ imgTop = e.pageY + pos_y - drg_h; imgLeft = e.pageX + pos_x - drg_w; } - + that.img.offset({ top:imgTop, left:imgLeft }).on("mouseup", function() { $(this).removeClass('draggable').css('z-index', z_idx); }); - + if(that.options.imgEyecandy){ that.imgEyecandy.offset({ top:imgTop, left:imgLeft }); } - + if (that.objH < that.imgH) { if (parseInt(that.img.css('top')) > 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0);}} var maxTop = -( that.imgH - that.objH); if (parseInt(that.img.css('top')) < maxTop) { that.img.css('top', maxTop); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', maxTop); }} @@ -477,15 +477,15 @@ var maxLeft = ( that.objW - that.imgW); if( parseInt( that.img.css('left')) > maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } } } if (that.options.onImgDrag) that.options.onImgDrag.call(that); - + }); - + }).on("mouseup", function() { that.img.off("mousemove"); }).on("mouseout", function() { that.img.off("mousemove"); }); - + }, rotate: function(x) { var that = this; @@ -511,73 +511,73 @@ var newWidth = that.imgW+x; var newHeight = newWidth/ratio; var doPositioning = true; - + if( newWidth < that.objW || newHeight < that.objH){ - - if( newWidth - that.objW < newHeight - that.objH ){ + + if( newWidth - that.objW < newHeight - that.objH ){ newWidth = that.objW; newHeight = newWidth/ratio; }else{ newHeight = that.objH; newWidth = ratio * newHeight; } - + doPositioning = false; - - } - + + } + if(!that.options.scaleToFill && (newWidth > that.imgInitW || newHeight > that.imgInitH)){ - - if( newWidth - that.imgInitW < newHeight - that.imgInitH ){ + + if( newWidth - that.imgInitW < newHeight - that.imgInitH ){ newWidth = that.imgInitW; newHeight = newWidth/ratio; }else{ newHeight = that.imgInitH; newWidth = ratio * newHeight; } - + doPositioning = false; - + } - + that.imgW = newWidth; - that.img.width(newWidth); - + that.img.width(newWidth); + that.imgH = newHeight; - that.img.height(newHeight); - + that.img.height(newHeight); + var newTop = parseInt( that.img.css('top') ) - x/2; var newLeft = parseInt( that.img.css('left') ) - x/2; - + if( newTop>0 ){ newTop=0;} if( newLeft>0 ){ newLeft=0;} - + var maxTop = -( newHeight-that.objH); if( newTop < maxTop){ newTop = maxTop; } var maxLeft = -( newWidth-that.objW); if( newLeft < maxLeft){ newLeft = maxLeft; } - + if( doPositioning ){ - that.img.css({'top':newTop, 'left':newLeft}); + that.img.css({'top':newTop, 'left':newLeft}); } - + if(that.options.imgEyecandy){ that.imgEyecandy.width(newWidth); that.imgEyecandy.height(newHeight); if( doPositioning ){ - that.imgEyecandy.css({'top':newTop, 'left':newLeft}); + that.imgEyecandy.css({'top':newTop, 'left':newLeft}); } - } - + } + if (that.options.onImgZoom) that.options.onImgZoom.call(that); }, crop:function(){ var that = this; - + if (that.options.onBeforeImgCrop) that.options.onBeforeImgCrop.call(that); - + that.cropControlsCrop.hide(); that.showLoader(); - + var cropData = { imgUrl:that.imgUrl, imgInitW:that.imgInitW, @@ -590,7 +590,7 @@ cropW:that.objW, rotation:that.actualRotation }; - + var formData = new FormData(); for (var key in cropData) { @@ -598,7 +598,7 @@ formData.append( key , cropData[key] ); } } - + for (var key in that.options.cropData) { if( that.options.cropData.hasOwnProperty(key) ) { formData.append( key , that.options.cropData[key] ); @@ -615,52 +615,52 @@ type: 'POST' }).always(function(data){ response = typeof data =='object' ? data : jQuery.parseJSON(data); - + if(response.status=='success'){ if (that.options.imgEyecandy) that.imgEyecandy.hide(); - + that.destroy(); - + that.obj.append(''); if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(response.url); } - + that.croppedImg = that.obj.find('.croppedImg'); that.init(); - + that.hideLoader(); } if(response.status=='error'){ if (that.options.onError) that.options.onError.call(that,response.message); that.hideLoader(); - setTimeout( function(){ that.reset(); },2000) + setTimeout( function(){ that.reset(); },2000) } - - if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that); - + + if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.apply(that, arguments); + }); }, showLoader:function(){ var that = this; - + that.obj.append(that.options.loaderHtml); that.loader = that.obj.find('.loader'); - + }, hideLoader:function(){ var that = this; - that.loader.remove(); + that.loader.remove(); }, reset:function(){ var that = this; that.destroy(); - + that.init(); - - if( !$.isEmptyObject(that.croppedImg)){ - that.obj.append(that.croppedImg); + + if( !$.isEmptyObject(that.croppedImg)){ + that.obj.append(that.croppedImg); if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); } } if (typeof that.options.onReset == 'function') @@ -677,4 +677,4 @@ that.obj.html(''); } }; -})(window, document); \ No newline at end of file +})(window, document);