diff --git a/croppic.js b/croppic.js index 6ab5d14..5ab270e 100644 --- a/croppic.js +++ b/croppic.js @@ -6,296 +6,296 @@ (function (window, document) { - Croppic = function (id, options) { - - var that = this; - that.id = id; - that.obj = $('#' + id); - that.outputDiv = that.obj; - - // DEFAULT OPTIONS - that.options = { - uploadUrl:'', - uploadData:{}, - cropUrl:'', - cropData:{}, - outputUrlId:'', - //styles - imgEyecandy:true, - imgEyecandyOpacity:0.2, - initialZoom:40, - zoomFactor:10, - rotateFactor:5, - doubleZoomControls:true, - rotateControls: true, - modal:false, - customUploadButtonId:'', - loaderHtml:'', - scaleToFill: true, - processInline: false, - loadPicture:'', - onReset: null, - enableMousescroll: false, - - //callbacks - onBeforeImgUpload: null, - onAfterImgUpload: null, - onImgDrag: null, - onImgZoom: null, - onImgRotate: null, - onBeforeImgCrop: null, - onAfterImgCrop: null, - onBeforeRemoveCroppedImg: null, - onAfterRemoveCroppedImg: null, - onError: null, - - }; - - // OVERWRITE DEFAULT OPTIONS - for (i in options) that.options[i] = options[i]; - - // INIT THE WHOLE DAMN THING!!! - that.init(); - - }; - - Croppic.prototype = { - id:'', - imgInitW:0, - imgInitH:0, - imgW:0, - imgH:0, - objW:0, - objH:0, - actualRotation: 0, - windowW:0, - windowH:$(window).height(), - obj:{}, - outputDiv:{}, - outputUrlObj:{}, - img:{}, - defaultImg:{}, - croppedImg:{}, - imgEyecandy:{}, - form:{}, - iframeform: {}, + Croppic = function (id, options) { + + var that = this; + that.id = id; + that.obj = $('#' + id); + that.outputDiv = that.obj; + + // DEFAULT OPTIONS + that.options = { + uploadUrl:'', + uploadData:{}, + cropUrl:'', + cropData:{}, + outputUrlId:'', + //styles + imgEyecandy:true, + imgEyecandyOpacity:0.2, + initialZoom:40, + zoomFactor:10, + rotateFactor:5, + doubleZoomControls:true, + rotateControls: true, + modal:false, + customUploadButtonId:'', + loaderHtml:'', + scaleToFill: true, + processInline: false, + loadPicture:'', + onReset: null, + enableMousescroll: false, + + //callbacks + onBeforeImgUpload: null, + onAfterImgUpload: null, + onImgDrag: null, + onImgZoom: null, + onImgRotate: null, + onBeforeImgCrop: null, + onAfterImgCrop: null, + onBeforeRemoveCroppedImg: null, + onAfterRemoveCroppedImg: null, + onError: null, + + }; + + // OVERWRITE DEFAULT OPTIONS + for (i in options) that.options[i] = options[i]; + + // INIT THE WHOLE DAMN THING!!! + that.init(); + + }; + + Croppic.prototype = { + id:'', + imgInitW:0, + imgInitH:0, + imgW:0, + imgH:0, + objW:0, + objH:0, + actualRotation: 0, + windowW:0, + windowH:$(window).height(), + obj:{}, + outputDiv:{}, + outputUrlObj:{}, + img:{}, + defaultImg:{}, + croppedImg:{}, + imgEyecandy:{}, + form:{}, + iframeform: {}, iframeobj: {}, - cropControlsUpload:{}, - cropControlsCrop:{}, - cropControlZoomMuchIn:{}, - cropControlZoomMuchOut:{}, - cropControlZoomIn:{}, + cropControlsUpload:{}, + cropControlsCrop:{}, + cropControlZoomMuchIn:{}, + cropControlZoomMuchOut:{}, + cropControlZoomIn:{}, cropControlZoomOut:{}, cropControlCrop:{}, - 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)){ - that.bindImgUploadControl(); - }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 + 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)){ + that.bindImgUploadControl(); + }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 + 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(){ - if (fileUploadId === "") { + + that.imgUploadControl.off('click'); + 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(){ - 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)){ - 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){ - // Checking Browser Support for FileReader API - if (typeof FileReader == "undefined"){ - if (that.options.onError) that.options.onError.call(that,"processInline is not supported by your Browser"); - that.reset(); - }else{ - var reader = new FileReader(); - reader.onload = function (e) { - var image = new Image(); - image.src = e.target.result; - image.onload = function(){ - that.imgInitW = that.imgW = image.width; - that.imgInitH = that.imgH = image.height; - - 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 { - - try { - // other modern browsers - formData = new FormData(that.form[0]); - } catch(e) { - // IE10 MUST have all form items appended as individual form key / value pairs - formData = new FormData(); - formData.append('img', that.form.find("input[type=file]")[0].files[0]); - - } - - for (var key in that.options.uploadData) { - if( that.options.uploadData.hasOwnProperty(key) ) { - formData.append( key , that.options.uploadData[key] ); - } - } - - $.ajax({ - url: that.options.uploadUrl, - data: formData, - context: document.body, - cache: false, - contentType: false, - processData: false, - type: 'POST' - }).always(function (data) { - that.afterUpload(data); - }); - } + } }); + if( !$.isEmptyObject(that.croppedImg)){ + + 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)){ + 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){ + // Checking Browser Support for FileReader API + if (typeof FileReader == "undefined"){ + if (that.options.onError) that.options.onError.call(that,"processInline is not supported by your Browser"); + that.reset(); + }else{ + var reader = new FileReader(); + reader.onload = function (e) { + var image = new Image(); + image.src = e.target.result; + image.onload = function(){ + that.imgInitW = that.imgW = image.width; + that.imgInitH = that.imgH = image.height; + + 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 { + + try { + // other modern browsers + formData = new FormData(that.form[0]); + } catch(e) { + // IE10 MUST have all form items appended as individual form key / value pairs + formData = new FormData(); + formData.append('img', that.form.find("input[type=file]")[0].files[0]); + + } + + for (var key in that.options.uploadData) { + if( that.options.uploadData.hasOwnProperty(key) ) { + formData.append( key , that.options.uploadData[key] ); + } + } + + $.ajax({ + url: that.options.uploadUrl, + data: formData, + context: document.body, + cache: false, + contentType: false, + processData: false, + type: 'POST' + }).always(function (data) { + that.afterUpload(data); + }); + } + }); + + }, + 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.on('load', function() { + that.imgInitW = that.imgW = this.width; + that.imgInitH = that.imgH = this.height; + that.initCropper(); + that.hideLoader(); + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + }); + + }else{ + that.cropControlRemoveCroppedImage.on('click',function(){ + that.croppedImg.remove(); + $(this).hide(); + + if( !$.isEmptyObject(that.defaultImg)){ + that.obj.append(that.defaultImg); + } + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } + that.croppedImg = ''; + that.reset(); + }); + } + }, - 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() { - that.imgInitW = that.imgW = this.width; - that.imgInitH = that.imgH = this.height; - that.initCropper(); - that.hideLoader(); - if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - }); - - }else{ - that.cropControlRemoveCroppedImage.on('click',function(){ - that.croppedImg.remove(); - $(this).hide(); - - if( !$.isEmptyObject(that.defaultImg)){ - that.obj.append(that.defaultImg); - } - if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } - that.croppedImg = ''; - that.reset(); - }); - } - - }, - afterUpload: function(data){ + afterUpload: function(data){ var that = this; - response = typeof data =='object' ? data : jQuery.parseJSON(data); + response = typeof data =='object' ? data : jQuery.parseJSON(data); + - if (response.status == 'success') { that.imgInitW = that.imgW = response.width; @@ -308,155 +308,155 @@ var img = $('') - that.obj.append(img); + that.obj.append(img); + + img.on('load', function(){ + that.initCropper(); + that.hideLoader(); + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); + }); - img.load(function(){ - that.initCropper(); - that.hideLoader(); - if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); - }); - if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(that); } if (response.status == 'error') { - alert(response.message); + alert(response.message); if (that.options.onError) that.options.onError.call(that,response.message); - that.hideLoader(); - setTimeout( function(){ that.reset(); },2000) + that.hideLoader(); + 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; - + + 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 = that.obj.find('img'); + that.img.wrap('
'); + /*INIT DRAGGING*/ - that.createCropControls(); - - if(that.options.imgEyecandy){ that.createEyecandy(); } - that.initDrag(); - that.initialScaleImg(); - }, - createEyecandy: function(){ - var that = this; - - that.imgEyecandy = that.img.clone(); - that.imgEyecandy.css({'z-index':'0','opacity':that.options.imgEyecandyOpacity}).appendTo(that.obj); - }, - destroyEyecandy: function(){ - var that = this; - that.imgEyecandy.remove(); - }, - initialScaleImg:function(){ - var that = this; - that.zoom(-that.imgInitW); - that.zoom(that.options.initialZoom); - - // Adding mousewheel zoom capabilities - if (that.options.enableMousescroll){ - that.img.on('mousewheel', function(event) { - event.preventDefault(); - 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 = ''; - var cropControlZoomOut = ''; - var cropControlZoomMuchOut = ''; - var cropControlRotateLeft = ''; - var cropControlRotateRight = ''; - var cropControlCrop = ''; - var cropControlReset = ''; - + that.createCropControls(); + + if(that.options.imgEyecandy){ that.createEyecandy(); } + that.initDrag(); + that.initialScaleImg(); + }, + createEyecandy: function(){ + var that = this; + + that.imgEyecandy = that.img.clone(); + that.imgEyecandy.css({'z-index':'0','opacity':that.options.imgEyecandyOpacity}).appendTo(that.obj); + }, + destroyEyecandy: function(){ + var that = this; + that.imgEyecandy.remove(); + }, + initialScaleImg:function(){ + var that = this; + that.zoom(-that.imgInitW); + that.zoom(that.options.initialZoom); + + // Adding mousewheel zoom capabilities + if (that.options.enableMousescroll){ + that.img.on('mousewheel', function(event) { + event.preventDefault(); + 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 = ''; + var cropControlZoomOut = ''; + var cropControlZoomMuchOut = ''; + var cropControlRotateLeft = ''; + var cropControlRotateRight = ''; + var cropControlCrop = ''; + var cropControlReset = ''; + var html; - - if(that.options.doubleZoomControls){ - cropControlZoomMuchIn = ''; - cropControlZoomMuchOut = ''; - } - if(that.options.rotateControls){ - 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.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(); }); - - }, - initDrag:function(){ - var that = this; - - that.img.on("mousedown touchstart", function(e) { - - e.preventDefault(); // disable selection - - var pageX; + + if(that.options.doubleZoomControls){ + cropControlZoomMuchIn = ''; + cropControlZoomMuchOut = ''; + } + if(that.options.rotateControls){ + 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.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(); }); + + }, + 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; if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/android/i) || (e.pageY && e.pageX) == undefined) { @@ -466,243 +466,243 @@ 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) { + + 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; } else { 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); }} - }else{ - if (parseInt(that.img.css('top')) < 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); }} - var maxTop = that.objH - that.imgH; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop); }} - } - - if (that.objW < that.imgW) { - if( parseInt( that.img.css('left')) > 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }} - var maxLeft = -( that.imgW-that.objW); if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } } - }else{ - if( parseInt( that.img.css('left')) < 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }} - 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; - that.actualRotation += x; - that.img.css({ - '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', - '-moz-transform': 'rotate(' + that.actualRotation + 'deg)', - 'transform': 'rotate(' + that.actualRotation + 'deg)', - }); - if(that.options.imgEyecandy) { - that.imgEyecandy.css({ - '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', - '-moz-transform': 'rotate(' + that.actualRotation + 'deg)', - 'transform': 'rotate(' + that.actualRotation + 'deg)', - }); - } - if (typeof that.options.onImgRotate == 'function') - that.options.onImgRotate.call(that); - }, - zoom :function(x){ - var that = this; - var ratio = that.imgW / that.imgH; - 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 ){ - 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 ){ - newWidth = that.imgInitW; - newHeight = newWidth/ratio; - }else{ - newHeight = that.imgInitH; - newWidth = ratio * newHeight; - } - - doPositioning = false; - - } - - that.imgW = newWidth; - that.img.width(newWidth); - - that.imgH = 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}); - } - - if(that.options.imgEyecandy){ - that.imgEyecandy.width(newWidth); - that.imgEyecandy.height(newHeight); - if( doPositioning ){ - 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, - 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, - 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])); - } - for(var key in that.options.cropData) { - 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"); - }); - XHR.onreadystatechange=function(){ - if (XHR.readyState==4 && XHR.status==200) - { - that.afterCrop(XHR.responseText); - } - } - XHR.open('POST', that.options.cropUrl); - - XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - XHR.setRequestHeader('Content-Length', urlEncodedData.length); - - XHR.send(urlEncodedData); - - }else{ - formData = new FormData(); - 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, - context: document.body, - cache: false, - contentType: false, - processData: false, - type: 'POST' - }).always(function (data) { - - that.afterCrop(data); - - }); - } - - // + + 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); }} + }else{ + if (parseInt(that.img.css('top')) < 0) { that.img.css('top', 0); if (that.options.imgEyecandy) { that.imgEyecandy.css('top', 0); }} + var maxTop = that.objH - that.imgH; if (parseInt(that.img.css('top')) > maxTop) { that.img.css('top', maxTop);if (that.options.imgEyecandy) {that.imgEyecandy.css('top', maxTop); }} + } + + if (that.objW < that.imgW) { + if( parseInt( that.img.css('left')) > 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }} + var maxLeft = -( that.imgW-that.objW); if( parseInt( that.img.css('left')) < maxLeft){ that.img.css('left', maxLeft); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', maxLeft); } } + }else{ + if( parseInt( that.img.css('left')) < 0 ){ that.img.css('left',0); if(that.options.imgEyecandy){ that.imgEyecandy.css('left', 0); }} + 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; + that.actualRotation += x; + that.img.css({ + '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', + '-moz-transform': 'rotate(' + that.actualRotation + 'deg)', + 'transform': 'rotate(' + that.actualRotation + 'deg)', + }); + if(that.options.imgEyecandy) { + that.imgEyecandy.css({ + '-webkit-transform': 'rotate(' + that.actualRotation + 'deg)', + '-moz-transform': 'rotate(' + that.actualRotation + 'deg)', + 'transform': 'rotate(' + that.actualRotation + 'deg)', + }); + } + if (typeof that.options.onImgRotate == 'function') + that.options.onImgRotate.call(that); + }, + zoom :function(x){ + var that = this; + var ratio = that.imgW / that.imgH; + 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 ){ + 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 ){ + newWidth = that.imgInitW; + newHeight = newWidth/ratio; + }else{ + newHeight = that.imgInitH; + newWidth = ratio * newHeight; + } + + doPositioning = false; + + } + + that.imgW = newWidth; + that.img.width(newWidth); + + that.imgH = 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}); + } + + if(that.options.imgEyecandy){ + that.imgEyecandy.width(newWidth); + that.imgEyecandy.height(newHeight); + if( doPositioning ){ + 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, + 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, + 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])); + } + for(var key in that.options.cropData) { + 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"); + }); + XHR.onreadystatechange=function(){ + if (XHR.readyState==4 && XHR.status==200) + { + that.afterCrop(XHR.responseText); + } + } + XHR.open('POST', that.options.cropUrl); + + XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + XHR.setRequestHeader('Content-Length', urlEncodedData.length); + + XHR.send(urlEncodedData); + + }else{ + formData = new FormData(); + 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, + context: document.body, + cache: false, + contentType: false, + processData: false, + type: 'POST' + }).always(function (data) { + + that.afterCrop(data); + + }); + } + + // }, - afterCrop: function (data) { + afterCrop: function (data) { var that = this; - try { - response = jQuery.parseJSON(data); - } - catch(err) { - response = typeof data =='object' ? data : jQuery.parseJSON(data); - } - + try { + response = jQuery.parseJSON(data); + } + catch(err) { + response = typeof data =='object' ? data : jQuery.parseJSON(data); + } + if (response.status == 'success') { if (that.options.imgEyecandy) - that.imgEyecandy.hide(); + that.imgEyecandy.hide(); that.destroy(); - + that.obj.append(''); if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); } @@ -711,63 +711,63 @@ 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) + that.hideLoader(); + 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(); - }, - reset:function(){ - var that = this; - that.destroy(); - - that.init(); - - 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') + 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(); + }, + reset:function(){ + var that = this; + that.destroy(); + + that.init(); + + 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') that.options.onReset.call(that); - }, - destroy:function(){ - var that = this; - if(that.options.modal && !$.isEmptyObject(that.modal) ){ that.destroyModal(); } - if(that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); } - if( !$.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); } - if( !$.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); } - if( !$.isEmptyObject( that.loader ) ){ that.loader.remove(); } - if( !$.isEmptyObject( that.form ) ){ that.form.remove(); } - that.obj.html(''); - }, - isAjaxUploadSupported: function () { + }, + destroy:function(){ + var that = this; + if(that.options.modal && !$.isEmptyObject(that.modal) ){ that.destroyModal(); } + if(that.options.imgEyecandy && !$.isEmptyObject(that.imgEyecandy) ){ that.destroyEyecandy(); } + if( !$.isEmptyObject( that.cropControlsUpload ) ){ that.cropControlsUpload.remove(); } + if( !$.isEmptyObject( that.cropControlsCrop ) ){ that.cropControlsCrop.remove(); } + if( !$.isEmptyObject( that.loader ) ){ that.loader.remove(); } + if( !$.isEmptyObject( that.form ) ){ that.form.remove(); } + that.obj.html(''); + }, + isAjaxUploadSupported: function () { var input = document.createElement("input"); input.type = "file"; return ( - "multiple" in input && - typeof File != "undefined" && - typeof FormData != "undefined" && - typeof (new XMLHttpRequest()).upload != "undefined"); + "multiple" in input && + typeof File != "undefined" && + typeof FormData != "undefined" && + 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"); @@ -784,30 +784,30 @@ } var myContent = '' - + 'Uploading File' - + '' - + '
' - + $("#" + that.id + '_imgUploadField')[0].outerHTML - + '
'; + + 'Uploading File' + + '' + + '
' + + $("#" + that.id + '_imgUploadField')[0].outerHTML + + '
'; iframe.contentWindow.document.open('text/htmlreplace'); 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.SubmitFallbackIframe(that); + + 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); @@ -827,28 +827,28 @@ 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){ - that.options.onError.call(that,"processInline is not supported by your browser "); - that.hideLoader(); - } - }else{ - if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); - that.iframeform[0].submit(); - } + if(that.options.processInline && !that.options.uploadUrl){ + if (that.options.onError){ + that.options.onError.call(that,"processInline is not supported by your browser "); + that.hideLoader(); + } + }else{ + 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; + response; var innerHTML = doc.body.innerHTML; if (innerHTML.slice(0, 5).toLowerCase() == "
" && innerHTML.slice(-6).toLowerCase() == "
") { @@ -861,6 +861,6 @@ return response; } - - }; + + }; })(window, document); diff --git a/croppic.min.js b/croppic.min.js index bb29794..4793c3e 100644 --- a/croppic.min.js +++ b/croppic.min.js @@ -3,4 +3,5 @@ * dependancy: jQuery * author: Ognjen "Zmaj Džedaj" Božičković and Mat Steinlin */ - !function(o,t){Croppic=function(o,t){var e=this;e.id=o,e.obj=$("#"+o),e.outputDiv=e.obj,e.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customUploadButtonId:"",loaderHtml:"",scaleToFill:!0,processInline:!1,loadPicture:"",onReset:null,enableMousescroll:!1,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in t)e.options[i]=t[i];e.init()},Croppic.prototype={id:"",imgInitW:0,imgInitH:0,imgW:0,imgH:0,objW:0,objH:0,actualRotation:0,windowW:0,windowH:$(o).height(),obj:{},outputDiv:{},outputUrlObj:{},img:{},defaultImg:{},croppedImg:{},imgEyecandy:{},form:{},iframeform:{},iframeobj:{},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(),o.actualRotation=0,$.isEmptyObject(o.defaultImg)&&(o.defaultImg=o.obj.find("img")),o.createImgUploadControls(),$.isEmptyObject(o.options.loadPicture)?o.bindImgUploadControl():o.loadExistingImage()},createImgUploadControls:function(){var o=this,t="";""===o.options.customUploadButtonId&&(t='');var e='';$.isEmptyObject(o.croppedImg)&&(e=""),$.isEmptyObject(o.options.loadPicture)||(t="");var n='
'+t+e+"
";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,e='';o.outputDiv.append(e),o.form=o.outputDiv.find("."+o.id+"_imgUploadForm");var n=o.CreateFallbackIframe();o.imgUploadControl.off("click"),o.imgUploadControl.on("click",function(){""===n?o.form.find('input[type="file"]').trigger("click"):o.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(o.croppedImg)||o.cropControlRemoveCroppedImage.on("click",function(){typeof o.options.onBeforeRemoveCroppedImg==typeof Function&&o.options.onBeforeRemoveCroppedImg.call(o),o.croppedImg.remove(),o.croppedImg={},$(this).hide(),typeof o.options.onAfterRemoveCroppedImg==typeof Function&&o.options.onAfterRemoveCroppedImg.call(o),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val("")}),o.form.find('input[type="file"]').change(function(){if(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.imgUploadControl.hide(),o.options.processInline)if("undefined"==typeof FileReader)o.options.onError&&o.options.onError.call(o,"processInline is not supported by your Browser"),o.reset();else{var e=new FileReader;e.onload=function(t){var e=new Image;e.src=t.target.result,e.onload=function(){o.imgInitW=o.imgW=e.width,o.imgInitH=o.imgH=e.height,o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=e.src,o.obj.append(''),o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)}},e.readAsDataURL(o.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(o.form[0])}catch(n){formData=new FormData,formData.append("img",o.form.find("input[type=file]")[0].files[0])}for(var i in o.options.uploadData)o.options.uploadData.hasOwnProperty(i)&&formData.append(i,o.options.uploadData[i]);$.ajax({url:o.options.uploadUrl,data:formData,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterUpload(t)})}})},loadExistingImage:function(){var o=this;if($.isEmptyObject(o.croppedImg)){o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=o.options.loadPicture;var t=$('');o.obj.append(t),t.load(function(){o.imgInitW=o.imgW=this.width,o.imgInitH=o.imgH=this.height,o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)})}else 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.croppedImg="",o.reset()})},afterUpload:function(o){var t=this;if(response="object"==typeof o?o:jQuery.parseJSON(o),"success"==response.status){t.imgInitW=t.imgW=response.width,t.imgInitH=t.imgH=response.height,t.options.modal&&t.createModal(),$.isEmptyObject(t.croppedImg)||t.croppedImg.remove(),t.imgUrl=response.url;var e=$('');t.obj.append(e),e.load(function(){t.initCropper(),t.hideLoader(),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}"error"==response.status&&(alert(response.message),t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3))},createModal:function(){var o=this,t=o.windowH/2-o.objH/2,e='
';$("body").append(e),o.modal=$("#croppicModal"),o.obj=$("#croppicModalObj")},destroyModal:function(){var o=this;o.obj=o.outputDiv,o.modal.remove(),o.modal={}},initCropper:function(){var o=this;o.img=o.obj.find("img"),o.img.wrap('
'),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.options.enableMousescroll&&o.img.on("mousewheel",function(t){t.preventDefault(),o.zoom(o.options.zoomFactor*t.deltaY)}),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,e="",n='',i='',r="",a="",p="",s='',c='';t.options.doubleZoomControls&&(e='',r=''),t.options.rotateControls&&(a='',p=''),o='
'+e+n+i+r+a+p+s+c+"
",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.cropControlZoomIn=t.cropControlsCrop.find(".cropControlRotateLeft"),t.cropControlZoomIn.on("click",function(){t.rotate(-t.options.rotateFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlRotateRight"),t.cropControlZoomOut.on("click",function(){t.rotate(t.options.rotateFactor)}),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 t=this;t.img.on("mousedown touchstart",function(e){e.preventDefault();var n,i,r=o.navigator.userAgent;r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(e.pageY&&e.pageX)?(n=e.originalEvent.touches[0].pageX,i=e.originalEvent.touches[0].pageY):(n=e.pageX,i=e.pageY);var a=t.img.css("z-index"),p=t.img.outerHeight(),s=t.img.outerWidth(),c=t.img.offset().top+p-i,l=t.img.offset().left+s-n;t.img.css("z-index",1e3).on("mousemove touchmove",function(o){var e,n;if(r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(o.pageY&&o.pageX)?(e=o.originalEvent.touches[0].pageY+c-p,n=o.originalEvent.touches[0].pageX+l-s):(e=o.pageY+c-p,n=o.pageX+l-s),t.img.offset({top:e,left:n}).on("mouseup",function(){$(this).removeClass("draggable").css("z-index",a)}),t.options.imgEyecandy&&t.imgEyecandy.offset({top:e,left:n}),t.objH0&&(t.img.css("top",0),t.options.imgEyecandy&&t.imgEyecandy.css("top",0));var i=-(t.imgH-t.objH);parseInt(t.img.css("top"))i&&(t.img.css("top",i),t.options.imgEyecandy&&t.imgEyecandy.css("top",i))}if(t.objW0&&(t.img.css("left",0),t.options.imgEyecandy&&t.imgEyecandy.css("left",0));var m=-(t.imgW-t.objW);parseInt(t.img.css("left"))m&&(t.img.css("left",m),t.options.imgEyecandy&&t.imgEyecandy.css("left",m))}t.options.onImgDrag&&t.options.onImgDrag.call(t)})}).on("mouseup",function(){t.img.off("mousemove")}).on("mouseout",function(){t.img.off("mousemove")})},rotate:function(o){var t=this;t.actualRotation+=o,t.img.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),t.options.imgEyecandy&&t.imgEyecandy.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),"function"==typeof t.options.onImgRotate&&t.options.onImgRotate.call(t)},zoom:function(o){var t=this,e=t.imgW/t.imgH,n=t.imgW+o,i=n/e,r=!0;(nt.imgInitW||i>t.imgInitH)&&(n-t.imgInitW0&&(a=0),p>0&&(p=0);var s=-(i-t.objH);s>a&&(a=s);var c=-(n-t.objW);c>p&&(p=c),r&&t.img.css({top:a,left:p}),t.options.imgEyecandy&&(t.imgEyecandy.width(n),t.imgEyecandy.height(i),r&&t.imgEyecandy.css({top:a,left:p})),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 e,n={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,rotation:o.actualRotation};if("undefined"==typeof FormData){var i=new XMLHttpRequest,r="",a=[];for(var p in n)a.push(encodeURIComponent(p)+"="+encodeURIComponent(n[p]));for(var p in o.options.cropData)a.push(encodeURIComponent(p)+"="+encodeURIComponent(o.options.cropData[p]));r=a.join("&").replace(/%20/g,"+"),i.addEventListener("error",function(){o.options.onError&&o.options.onError.call(o,"XHR Request failed")}),i.onreadystatechange=function(){4==i.readyState&&200==i.status&&o.afterCrop(i.responseText)},i.open("POST",o.options.cropUrl),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.setRequestHeader("Content-Length",r.length),i.send(r)}else{e=new FormData;for(var p in n)n.hasOwnProperty(p)&&e.append(p,n[p]);for(var p in o.options.cropData)o.options.cropData.hasOwnProperty(p)&&e.append(p,o.options.cropData[p]);$.ajax({url:o.options.cropUrl,data:e,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterCrop(t)})}},afterCrop:function(o){var t=this;try{response=jQuery.parseJSON(o)}catch(e){response="object"==typeof o?o:jQuery.parseJSON(o)}"success"==response.status&&(t.options.imgEyecandy&&t.imgEyecandy.hide(),t.destroy(),t.obj.append(''),""!==t.options.outputUrlId&&$("#"+t.options.outputUrlId).val(response.url),t.croppedImg=t.obj.find(".croppedImg"),t.init(),t.hideLoader()),"error"==response.status&&(t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3)),t.options.onAfterImgCrop&&t.options.onAfterImgCrop.call(t,response)},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"))),"function"==typeof o.options.onReset&&o.options.onReset.call(o)},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("")},isAjaxUploadSupported:function(){var o=t.createElement("input");return o.type="file","multiple"in o&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&"undefined"!=typeof(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var o=this;if(o.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(o.iframeobj)){var e=t.createElement("iframe");e.setAttribute("id",o.id+"_upload_iframe"),e.setAttribute("name",o.id+"_upload_iframe"),e.setAttribute("width","0"),e.setAttribute("height","0"),e.setAttribute("border","0"),e.setAttribute("src","javascript:false;"),e.style.display="none",t.body.appendChild(e)}else e=o.iframeobj[0];var n='Uploading File";e.contentWindow.document.open("text/htmlreplace"),e.contentWindow.document.write(n),e.contentWindow.document.close(),o.iframeobj=$("#"+o.id+"_upload_iframe"),o.iframeform=o.iframeobj.contents().find("html").find("."+o.id+"_upload_iframe_form"),o.iframeform.on("change","input",function(){o.SubmitFallbackIframe(o)}),o.iframeform.find("input")[0].attachEvent("onchange",function(){o.SubmitFallbackIframe(o)});var i=function(){e.detachEvent?e.detachEvent("onload",i):e.removeEventListener("load",i,!1);var t=o.getIframeContentJSON(e);jQuery.isEmptyObject(o.modal)&&o.afterUpload(t)};return e.addEventListener&&e.addEventListener("load",i,!0),e.attachEvent&&e.attachEvent("onload",i),"#"+o.id+"_imgUploadField"},SubmitFallbackIframe:function(o){o.showLoader(),o.options.processInline&&!o.options.uploadUrl?o.options.onError&&(o.options.onError.call(o,"processInline is not supported by your browser "),o.hideLoader()):(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.iframeform[0].submit())},getIframeContentJSON:function(o){try{var t,e=o.contentDocument?o.contentDocument:o.contentWindow.document,n=e.body.innerHTML;"
"==n.slice(0,5).toLowerCase()&&"
"==n.slice(-6).toLowerCase()&&(n=e.body.firstChild.firstChild.nodeValue),t=jQuery.parseJSON(n)}catch(i){t={success:!1}}return t}}}(window,document); \ No newline at end of file + +!function(o,t){Croppic=function(o,t){var e=this;e.id=o,e.obj=$("#"+o),e.outputDiv=e.obj,e.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",imgEyecandy:!0,imgEyecandyOpacity:.2,initialZoom:40,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customUploadButtonId:"",loaderHtml:"",scaleToFill:!0,processInline:!1,loadPicture:"",onReset:null,enableMousescroll:!1,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in t)e.options[i]=t[i];e.init()},Croppic.prototype={id:"",imgInitW:0,imgInitH:0,imgW:0,imgH:0,objW:0,objH:0,actualRotation:0,windowW:0,windowH:$(o).height(),obj:{},outputDiv:{},outputUrlObj:{},img:{},defaultImg:{},croppedImg:{},imgEyecandy:{},form:{},iframeform:{},iframeobj:{},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(),o.actualRotation=0,$.isEmptyObject(o.defaultImg)&&(o.defaultImg=o.obj.find("img")),o.createImgUploadControls(),$.isEmptyObject(o.options.loadPicture)?o.bindImgUploadControl():o.loadExistingImage()},createImgUploadControls:function(){var o=this,t="";""===o.options.customUploadButtonId&&(t='');var e='';$.isEmptyObject(o.croppedImg)&&(e=""),$.isEmptyObject(o.options.loadPicture)||(t="");var n='
'+t+e+"
";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,e='';o.outputDiv.append(e),o.form=o.outputDiv.find("."+o.id+"_imgUploadForm");var n=o.CreateFallbackIframe();o.imgUploadControl.off("click"),o.imgUploadControl.on("click",function(){""===n?o.form.find('input[type="file"]').trigger("click"):o.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(o.croppedImg)||o.cropControlRemoveCroppedImage.on("click",function(){typeof o.options.onBeforeRemoveCroppedImg==typeof Function&&o.options.onBeforeRemoveCroppedImg.call(o),o.croppedImg.remove(),o.croppedImg={},$(this).hide(),typeof o.options.onAfterRemoveCroppedImg==typeof Function&&o.options.onAfterRemoveCroppedImg.call(o),$.isEmptyObject(o.defaultImg)||o.obj.append(o.defaultImg),""!==o.options.outputUrlId&&$("#"+o.options.outputUrlId).val("")}),o.form.find('input[type="file"]').change(function(){if(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.imgUploadControl.hide(),o.options.processInline)if("undefined"==typeof FileReader)o.options.onError&&o.options.onError.call(o,"processInline is not supported by your Browser"),o.reset();else{var e=new FileReader;e.onload=function(t){var e=new Image;e.src=t.target.result,e.onload=function(){o.imgInitW=o.imgW=e.width,o.imgInitH=o.imgH=e.height,o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=e.src,o.obj.append(''),o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)}},e.readAsDataURL(o.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(o.form[0])}catch(t){formData=new FormData,formData.append("img",o.form.find("input[type=file]")[0].files[0])}for(var n in o.options.uploadData)o.options.uploadData.hasOwnProperty(n)&&formData.append(n,o.options.uploadData[n]);$.ajax({url:o.options.uploadUrl,data:formData,context:t.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(t){o.afterUpload(t)})}})},loadExistingImage:function(){var o=this;if($.isEmptyObject(o.croppedImg)){o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.showLoader(),o.options.modal&&o.createModal(),$.isEmptyObject(o.croppedImg)||o.croppedImg.remove(),o.imgUrl=o.options.loadPicture;var t=$('');o.obj.append(t),t.on("load",function(){o.imgInitW=o.imgW=this.width,o.imgInitH=o.imgH=this.height,o.initCropper(),o.hideLoader(),o.options.onAfterImgUpload&&o.options.onAfterImgUpload.call(o)})}else 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.croppedImg="",o.reset()})},afterUpload:function(o){var t=this;if(response="object"==typeof o?o:jQuery.parseJSON(o),"success"==response.status){t.imgInitW=t.imgW=response.width,t.imgInitH=t.imgH=response.height,t.options.modal&&t.createModal(),$.isEmptyObject(t.croppedImg)||t.croppedImg.remove(),t.imgUrl=response.url;var e=$('');t.obj.append(e),e.on("load",function(){t.initCropper(),t.hideLoader(),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}),t.options.onAfterImgUpload&&t.options.onAfterImgUpload.call(t)}"error"==response.status&&(alert(response.message),t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3))},createModal:function(){var o=this,t=o.windowH/2-o.objH/2,e='
';$("body").append(e),o.modal=$("#croppicModal"),o.obj=$("#croppicModalObj")},destroyModal:function(){var o=this;o.obj=o.outputDiv,o.modal.remove(),o.modal={}},initCropper:function(){var o=this;o.img=o.obj.find("img"),o.img.wrap('
'),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(){this.imgEyecandy.remove()},initialScaleImg:function(){var o=this;o.zoom(-o.imgInitW),o.zoom(o.options.initialZoom),o.options.enableMousescroll&&o.img.on("mousewheel",function(t){t.preventDefault(),o.zoom(o.options.zoomFactor*t.deltaY)}),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,e="",n="",i="",r="";t.options.doubleZoomControls&&(e='',n=''),t.options.rotateControls&&(i='',r=''),o='
'+e+''+n+i+r+'
',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.cropControlZoomIn=t.cropControlsCrop.find(".cropControlRotateLeft"),t.cropControlZoomIn.on("click",function(){t.rotate(-t.options.rotateFactor)}),t.cropControlZoomOut=t.cropControlsCrop.find(".cropControlRotateRight"),t.cropControlZoomOut.on("click",function(){t.rotate(t.options.rotateFactor)}),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 t=this;t.img.on("mousedown touchstart",function(e){e.preventDefault();var n,i,r=o.navigator.userAgent;r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(e.pageY&&e.pageX)?(n=e.originalEvent.touches[0].pageX,i=e.originalEvent.touches[0].pageY):(n=e.pageX,i=e.pageY);var a=t.img.css("z-index"),p=t.img.outerHeight(),s=t.img.outerWidth(),c=t.img.offset().top+p-i,l=t.img.offset().left+s-n;t.img.css("z-index",1e3).on("mousemove touchmove",function(o){var e,n;if(r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||void 0==(o.pageY&&o.pageX)?(e=o.originalEvent.touches[0].pageY+c-p,n=o.originalEvent.touches[0].pageX+l-s):(e=o.pageY+c-p,n=o.pageX+l-s),t.img.offset({top:e,left:n}).on("mouseup",function(){$(this).removeClass("draggable").css("z-index",a)}),t.options.imgEyecandy&&t.imgEyecandy.offset({top:e,left:n}),t.objH0&&(t.img.css("top",0),t.options.imgEyecandy&&t.imgEyecandy.css("top",0));i=-(t.imgH-t.objH);parseInt(t.img.css("top"))i&&(t.img.css("top",i),t.options.imgEyecandy&&t.imgEyecandy.css("top",i))}if(t.objW0&&(t.img.css("left",0),t.options.imgEyecandy&&t.imgEyecandy.css("left",0));m=-(t.imgW-t.objW);parseInt(t.img.css("left"))m&&(t.img.css("left",m),t.options.imgEyecandy&&t.imgEyecandy.css("left",m))}t.options.onImgDrag&&t.options.onImgDrag.call(t)})}).on("mouseup",function(){t.img.off("mousemove")}).on("mouseout",function(){t.img.off("mousemove")})},rotate:function(o){var t=this;t.actualRotation+=o,t.img.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),t.options.imgEyecandy&&t.imgEyecandy.css({"-webkit-transform":"rotate("+t.actualRotation+"deg)","-moz-transform":"rotate("+t.actualRotation+"deg)",transform:"rotate("+t.actualRotation+"deg)"}),"function"==typeof t.options.onImgRotate&&t.options.onImgRotate.call(t)},zoom:function(o){var t=this,e=t.imgW/t.imgH,n=t.imgW+o,i=n/e,r=!0;(nt.imgInitW||i>t.imgInitH)&&(n-t.imgInitW0&&(a=0),p>0&&(p=0);var s=-(i-t.objH);a'),""!==t.options.outputUrlId&&$("#"+t.options.outputUrlId).val(response.url),t.croppedImg=t.obj.find(".croppedImg"),t.init(),t.hideLoader()),"error"==response.status&&(t.options.onError&&t.options.onError.call(t,response.message),t.hideLoader(),setTimeout(function(){t.reset()},2e3)),t.options.onAfterImgCrop&&t.options.onAfterImgCrop.call(t,response)},showLoader:function(){var o=this;o.obj.append(o.options.loaderHtml),o.loader=o.obj.find(".loader")},hideLoader:function(){this.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"))),"function"==typeof o.options.onReset&&o.options.onReset.call(o)},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("")},isAjaxUploadSupported:function(){var o=t.createElement("input");return o.type="file","multiple"in o&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&void 0!==(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var o=this;if(o.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(o.iframeobj)){var e=t.createElement("iframe");e.setAttribute("id",o.id+"_upload_iframe"),e.setAttribute("name",o.id+"_upload_iframe"),e.setAttribute("width","0"),e.setAttribute("height","0"),e.setAttribute("border","0"),e.setAttribute("src","javascript:false;"),e.style.display="none",t.body.appendChild(e)}else e=o.iframeobj[0];var n='Uploading File";e.contentWindow.document.open("text/htmlreplace"),e.contentWindow.document.write(n),e.contentWindow.document.close(),o.iframeobj=$("#"+o.id+"_upload_iframe"),o.iframeform=o.iframeobj.contents().find("html").find("."+o.id+"_upload_iframe_form"),o.iframeform.on("change","input",function(){o.SubmitFallbackIframe(o)}),o.iframeform.find("input")[0].attachEvent("onchange",function(){o.SubmitFallbackIframe(o)});var i=function(){e.detachEvent?e.detachEvent("onload",i):e.removeEventListener("load",i,!1);var t=o.getIframeContentJSON(e);jQuery.isEmptyObject(o.modal)&&o.afterUpload(t)};return e.addEventListener&&e.addEventListener("load",i,!0),e.attachEvent&&e.attachEvent("onload",i),"#"+o.id+"_imgUploadField"},SubmitFallbackIframe:function(o){o.showLoader(),o.options.processInline&&!o.options.uploadUrl?o.options.onError&&(o.options.onError.call(o,"processInline is not supported by your browser "),o.hideLoader()):(o.options.onBeforeImgUpload&&o.options.onBeforeImgUpload.call(o),o.iframeform[0].submit())},getIframeContentJSON:function(o){try{var t,e=o.contentDocument?o.contentDocument:o.contentWindow.document,n=e.body.innerHTML;"
"==n.slice(0,5).toLowerCase()&&"
"==n.slice(-6).toLowerCase()&&(n=e.body.firstChild.firstChild.nodeValue),t=jQuery.parseJSON(n)}catch(o){t={success:!1}}return t}}}(window,document); \ No newline at end of file