diff --git a/croppic.js b/croppic.js index 11edc13..83637c3 100644 --- a/croppic.js +++ b/croppic.js @@ -29,13 +29,15 @@ rotateControls: true, modal:false, customUploadButtonId:'', + customCropButtonId: '', + cropControlResetBtn: true, loaderHtml:'', scaleToFill: true, processInline: false, loadPicture:'', onReset: null, - enableMousescroll: false, - + enableMousescroll: false, + //callbacks onBeforeImgUpload: null, onAfterImgUpload: null, @@ -47,7 +49,7 @@ onBeforeRemoveCroppedImg: null, onAfterRemoveCroppedImg: null, onError: null, - + }; // OVERWRITE DEFAULT OPTIONS @@ -55,7 +57,7 @@ // INIT THE WHOLE DAMN THING!!! that.init(); - + }; Croppic.prototype = { @@ -86,106 +88,106 @@ 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'); - - + + // CREATE FALLBACK IE9 IFRAME var fileUploadId = that.CreateFallbackIframe(); - + that.imgUploadControl.off('click'); - that.imgUploadControl.on('click',function(){ + that.imgUploadControl.on('click',function(){ if (fileUploadId === "") { that.form.find('input[type="file"]').trigger('click'); } else { //Trigger iframe file input click, otherwise access restriction error that.iframeform.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(); that.croppedImg = {}; $(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(); @@ -233,10 +235,10 @@ 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, @@ -254,16 +256,16 @@ }, 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() { @@ -272,29 +274,29 @@ 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(); - }); + }); } - + }, afterUpload: function(data){ var that = this; response = typeof data =='object' ? data : jQuery.parseJSON(data); - + if (response.status == 'success') { that.imgInitW = that.imgW = response.width; @@ -314,7 +316,7 @@ that.hideLoader(); if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); }); - + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); } @@ -323,40 +325,40 @@ alert(response.message); if (that.options.onError) that.options.onError.call(that,response.message); that.hideLoader(); - setTimeout( function(){ that.reset(); },2000) + setTimeout( function(){ that.reset(); },2000) } }, - + 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(); that.modal = {}; }, initCropper: function(){ var that = this; - + /*SET UP SOME VARS*/ that.img = that.obj.find('img'); - that.img.wrap('
'); - + that.img.wrap('
'); + /*INIT DRAGGING*/ that.createCropControls(); - + if(that.options.imgEyecandy){ that.createEyecandy(); } that.initDrag(); that.initialScaleImg(); @@ -375,24 +377,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 = ''; @@ -401,10 +403,10 @@ var cropControlRotateLeft = ''; var cropControlRotateRight = ''; var cropControlCrop = ''; - var cropControlReset = ''; - + var cropControlReset = ''; + var html; - + if(that.options.doubleZoomControls){ cropControlZoomMuchIn = ''; cropControlZoomMuchOut = ''; @@ -413,48 +415,62 @@ cropControlRotateLeft = ''; cropControlRotateRight = ''; } - - html = '
'+ cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight + cropControlCrop + cropControlReset + '
'; - + + var myControls = cropControlZoomMuchIn + cropControlZoomIn + cropControlZoomOut + cropControlZoomMuchOut + cropControlRotateLeft + cropControlRotateRight; + + if(that.options.customCropButtonId ==='') { + myControls += cropControlCrop; + } else { + $('#'+that.options.customCropButtonId).on('click', function(){ + that.crop(); + }); + } + + if(that.options.cropControlResetBtn === true) { + myControls += cropControlReset; + } + + html = '
'+myControls+'
'; + 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; @@ -465,18 +481,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) || (e.pageY && e.pageX) == undefined) { imgTop = e.originalEvent.touches[0].pageY + pos_y - drg_h; imgLeft = e.originalEvent.touches[0].pageX + pos_x - drg_w; @@ -484,16 +500,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); }} @@ -510,15 +526,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; @@ -544,73 +560,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, @@ -623,14 +639,14 @@ cropW:that.objW, rotation:that.actualRotation }; - + var formData; - + if(typeof FormData == 'undefined'){ var XHR = new XMLHttpRequest(); var urlEncodedData = ""; var urlEncodedDataPairs = []; - + for(var key in cropData) { urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key])); } @@ -638,7 +654,7 @@ urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key])); } urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); - + XHR.addEventListener('error', function(event) { if (that.options.onError) that.options.onError.call(that,"XHR Request failed"); }); @@ -654,21 +670,21 @@ XHR.setRequestHeader('Content-Length', urlEncodedData.length); XHR.send(urlEncodedData); - + }else{ formData = new FormData(); - for (var key in cropData) { + for (var key in cropData) { if( cropData.hasOwnProperty(key) ) { 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] ); } } - + $.ajax({ url: that.options.cropUrl, data: formData, @@ -676,32 +692,32 @@ cache: false, contentType: false, processData: false, - type: 'POST' + type: 'POST' }).always(function (data) { that.afterCrop(data); }); } - + // }, afterCrop: function (data) { var that = this; try { - response = jQuery.parseJSON(data); + response = jQuery.parseJSON(data); } catch(err) { - response = typeof data =='object' ? data : jQuery.parseJSON(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); } @@ -714,30 +730,30 @@ 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, response); }, 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') @@ -764,9 +780,9 @@ typeof (new XMLHttpRequest()).upload != "undefined"); }, CreateFallbackIframe: function () { - var that = this; - - if (!that.isAjaxUploadSupported()) { + var that = this; + + if (!that.isAjaxUploadSupported()) { if (jQuery.isEmptyObject(that.iframeobj)) { var iframe = document.createElement("iframe"); @@ -786,7 +802,7 @@ + 'Uploading File' + '' + '
' @@ -797,16 +813,16 @@ iframe.contentWindow.document.write(myContent); iframe.contentWindow.document.close(); - that.iframeobj = $("#" + that.id + "_upload_iframe"); + that.iframeobj = $("#" + that.id + "_upload_iframe"); that.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form"); - - that.iframeform.on("change", "input", function () { + + that.iframeform.on("change", "input", function () { that.SubmitFallbackIframe(that); }); that.iframeform.find("input")[0].attachEvent("onchange", function () { that.SubmitFallbackIframe(that); }); - + var eventHandlermyFile = function () { if (iframe.detachEvent) iframe.detachEvent("onload", eventHandlermyFile); @@ -826,13 +842,13 @@ iframe.attachEvent("onload", eventHandlermyFile); return "#" + that.id + '_imgUploadField'; - + } else { return ""; } }, - SubmitFallbackIframe: function (that) { + SubmitFallbackIframe: function (that) { that.showLoader(); if(that.options.processInline && !that.options.uploadUrl){ if (that.options.onError){ @@ -840,12 +856,12 @@ that.hideLoader(); } }else{ - if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); + if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); that.iframeform[0].submit(); - } + } }, getIframeContentJSON: function (iframe) { - try { + try { var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document, response; @@ -860,6 +876,6 @@ return response; } - + }; })(window, document); diff --git a/package.json b/package.json new file mode 100644 index 0000000..7c95262 --- /dev/null +++ b/package.json @@ -0,0 +1,4 @@ +{ + "name": "croppic", + "version": "1.0.0" +}