From 88c99c6e6f99940993196c24f9506d5012142580 Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Wed, 22 Mar 2017 10:36:59 -0500 Subject: [PATCH 1/8] Convert tab to space --- croppic.js | 1696 ++++++++++++++++++++++++++-------------------------- 1 file changed, 848 insertions(+), 848 deletions(-) diff --git a/croppic.js b/croppic.js index 6ab5d14..9312cdf 100644 --- a/croppic.js +++ b/croppic.js @@ -6,861 +6,861 @@ (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: {}, - iframeobj: {}, - 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 - 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(){ - 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); - }); - } - }); - - }, - 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){ - var that = this; - - 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); - - 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); + 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:{}, + 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 + 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(){ + 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 (response.status == 'error') { - alert(response.message); - if (that.options.onError) that.options.onError.call(that,response.message); - 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; - - /*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(); - }, - 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; - 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) { - pageX = e.originalEvent.touches[0].pageX; - pageY = e.originalEvent.touches[0].pageY; - } else { - 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; - } 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); - - }); - } - - // - }, - afterCrop: function (data) { - var that = this; - 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.destroy(); - - that.obj.append(''); - if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); } - - that.croppedImg = that.obj.find('.croppedImg'); - - that.init(); + 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 (response.status == 'error') { - if (that.options.onError) that.options.onError.call(that,response.message); - 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') - 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 () { - var input = document.createElement("input"); - input.type = "file"; - - return ( - "multiple" in input && - typeof File != "undefined" && - typeof FormData != "undefined" && - typeof (new XMLHttpRequest()).upload != "undefined"); - }, - CreateFallbackIframe: function () { - var that = this; - - if (!that.isAjaxUploadSupported()) { - - if (jQuery.isEmptyObject(that.iframeobj)) { - var iframe = document.createElement("iframe"); - iframe.setAttribute("id", that.id + "_upload_iframe"); - iframe.setAttribute("name", that.id + "_upload_iframe"); - iframe.setAttribute("width", "0"); - iframe.setAttribute("height", "0"); - iframe.setAttribute("border", "0"); - iframe.setAttribute("src", "javascript:false;"); - iframe.style.display = "none"; - document.body.appendChild(iframe); - } else { - iframe = that.iframeobj[0]; - } - - var myContent = '' - + '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.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form"); - - 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); - else - iframe.removeEventListener("load", eventHandlermyFile, false); - - var response = that.getIframeContentJSON(iframe); - - if (jQuery.isEmptyObject(that.modal)) { - that.afterUpload(response); - } - } - - if (iframe.addEventListener) - iframe.addEventListener("load", eventHandlermyFile, true); - if (iframe.attachEvent) - iframe.attachEvent("onload", eventHandlermyFile); - - return "#" + that.id + '_imgUploadField'; - - } else { - return ""; - } + if (that.options.onAfterImgUpload) that.options.onAfterImgUpload.call(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(); - } - }, - getIframeContentJSON: function (iframe) { - try { - var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document, - response; - - var innerHTML = doc.body.innerHTML; - if (innerHTML.slice(0, 5).toLowerCase() == "
" && innerHTML.slice(-6).toLowerCase() == "
") { - innerHTML = doc.body.firstChild.firstChild.nodeValue; - } - response = jQuery.parseJSON(innerHTML); - } catch (err) { - response = { success: false }; + } + }; + 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.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){ + var that = this; + + 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); + + 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); + if (that.options.onError) that.options.onError.call(that,response.message); + 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; + + /*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(); + }, + 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; + 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) { + pageX = e.originalEvent.touches[0].pageX; + pageY = e.originalEvent.touches[0].pageY; + } else { + 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; + } 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; + } - return response; + 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) { + var that = this; + 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.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) + } + + 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') + 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 () { + var input = document.createElement("input"); + input.type = "file"; + + return ( + "multiple" in input && + typeof File != "undefined" && + typeof FormData != "undefined" && + typeof (new XMLHttpRequest()).upload != "undefined"); + }, + CreateFallbackIframe: function () { + var that = this; + + if (!that.isAjaxUploadSupported()) { + + if (jQuery.isEmptyObject(that.iframeobj)) { + var iframe = document.createElement("iframe"); + iframe.setAttribute("id", that.id + "_upload_iframe"); + iframe.setAttribute("name", that.id + "_upload_iframe"); + iframe.setAttribute("width", "0"); + iframe.setAttribute("height", "0"); + iframe.setAttribute("border", "0"); + iframe.setAttribute("src", "javascript:false;"); + iframe.style.display = "none"; + document.body.appendChild(iframe); + } else { + iframe = that.iframeobj[0]; } - - }; + + var myContent = '' + + '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.iframeform = that.iframeobj.contents().find("html").find("." + that.id + "_upload_iframe_form"); + + 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); + else + iframe.removeEventListener("load", eventHandlermyFile, false); + + var response = that.getIframeContentJSON(iframe); + + if (jQuery.isEmptyObject(that.modal)) { + that.afterUpload(response); + } + } + + if (iframe.addEventListener) + iframe.addEventListener("load", eventHandlermyFile, true); + if (iframe.attachEvent) + iframe.attachEvent("onload", eventHandlermyFile); + + return "#" + that.id + '_imgUploadField'; + + } else { + return ""; + } + + }, + 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(); + } + }, + getIframeContentJSON: function (iframe) { + try { + var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document, + response; + + var innerHTML = doc.body.innerHTML; + if (innerHTML.slice(0, 5).toLowerCase() == "
" && innerHTML.slice(-6).toLowerCase() == "
") { + innerHTML = doc.body.firstChild.firstChild.nodeValue; + } + response = jQuery.parseJSON(innerHTML); + } catch (err) { + response = { success: false }; + } + + return response; + } + + }; })(window, document); From 7c98e706f6de73190947dd82c0702f08b9dab716 Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Wed, 22 Mar 2017 11:04:38 -0500 Subject: [PATCH 2/8] Add passthrough mode --- croppic.js | 297 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 171 insertions(+), 126 deletions(-) mode change 100644 => 100755 croppic.js diff --git a/croppic.js b/croppic.js old mode 100644 new mode 100755 index 9312cdf..2bacd92 --- a/croppic.js +++ b/croppic.js @@ -20,22 +20,27 @@ cropUrl:'', cropData:{}, outputUrlId:'', + passthrough: false, + yieldCropData: null, //styles imgEyecandy:true, imgEyecandyOpacity:0.2, - initialZoom:40, zoomFactor:10, rotateFactor:5, doubleZoomControls:true, rotateControls: true, - modal:false, + modal: false, + customModal: false, + modalHTML: '', customUploadButtonId:'', + customImgOutput: false, + customImgOuptutTarget: null, loaderHtml:'', scaleToFill: true, processInline: false, loadPicture:'', onReset: null, - enableMousescroll: false, + enableMousescroll: false, //callbacks onBeforeImgUpload: null, @@ -87,8 +92,8 @@ cropControlZoomIn:{}, cropControlZoomOut:{}, cropControlCrop:{}, - cropControlReset:{}, - cropControlRemoveCroppedImage:{}, + cropControlReset:{}, + cropControlRemoveCroppedImage:{}, modal:{}, loader:{}, @@ -105,11 +110,11 @@ that.createImgUploadControls(); - if( $.isEmptyObject(that.options.loadPicture)){ + if( $.isEmptyObject(that.options.loadPicture)){ that.bindImgUploadControl(); - }else{ + }else{ that.loadExistingImage(); - } + } }, createImgUploadControls: function(){ @@ -140,27 +145,31 @@ var that = this; // CREATE UPLOAD IMG FORM - var formHtml = ''; - that.outputDiv.append(formHtml); - that.form = that.outputDiv.find('.'+that.id+'_imgUploadForm'); + if (that.options.passthrough) { + that.form = $(that.obj).parents('form'); + } else { + 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); } @@ -173,30 +182,29 @@ 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){ + 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(); + }else{ + var reader = new FileReader(); reader.onload = function (e) { var image = new Image(); image.src = e.target.result; @@ -204,7 +212,7 @@ that.imgInitW = that.imgW = image.width; that.imgInitH = that.imgH = image.height; - if(that.options.modal){ that.createModal(); } + if(that.options.modal){ that.createModal(); } if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } that.imgUrl=image.src; @@ -220,7 +228,7 @@ }; reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]); } - } else { + } else { try { // other modern browsers @@ -234,9 +242,9 @@ 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, @@ -273,20 +281,20 @@ 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(); - }); + }); } }, @@ -324,7 +332,7 @@ 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) } }, @@ -332,7 +340,14 @@ var that = this; var marginTop = that.windowH/2-that.objH/2; - var modalHTML = '
'+'
'+'
'; + + var modalHTML = ''; + + if (that.options.customModal){ + modalHTML = that.options.modalHTML; + } else { + modalHTML = '
'+'
'+'
'; + } $('body').append(modalHTML); @@ -340,7 +355,9 @@ that.obj = $('#croppicModalObj'); + that.obj.css({width: that.objW+'px', height: that.objH+'px', position: 'relative'}); }, + destroyModal: function(){ var that = this; @@ -375,13 +392,13 @@ initialScaleImg:function(){ var that = this; that.zoom(-that.imgInitW); - that.zoom(that.options.initialZoom); + 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 @@ -434,7 +451,7 @@ 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); }); @@ -446,7 +463,7 @@ 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(){ @@ -548,7 +565,7 @@ 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{ @@ -558,11 +575,11 @@ 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{ @@ -575,10 +592,10 @@ } 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; @@ -590,16 +607,16 @@ 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); @@ -627,95 +644,123 @@ 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])); + if(that.options.passthrough) { + if (that.options.yieldCropData !== 'undefined') { + that.options.yieldCropData(cropData); + that.afterCrop(cropData); } - urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); + }else{ + if(typeof FormData == 'undefined'){ + var XHR = new XMLHttpRequest(); + var urlEncodedData = ""; + var urlEncodedDataPairs = []; - 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); + for(var key in cropData) { + urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(cropData[key])); } - } - XHR.open('POST', that.options.cropUrl); + for(var key in that.options.cropData) { + urlEncodedDataPairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(that.options.cropData[key])); + } + urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); - XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); - XHR.setRequestHeader('Content-Length', urlEncodedData.length); + 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.send(urlEncodedData); + XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + XHR.setRequestHeader('Content-Length', urlEncodedData.length); - }else{ - formData = new FormData(); - for (var key in cropData) { - if( cropData.hasOwnProperty(key) ) { - formData.append( key , cropData[key] ); - } - } + XHR.send(urlEncodedData); - for (var key in that.options.cropData) { - if( that.options.cropData.hasOwnProperty(key) ) { - formData.append( key , that.options.cropData[key] ); + }else{ + formData = new FormData(); + for (var key in cropData) { + if( cropData.hasOwnProperty(key) ) { + formData.append( key , 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); + 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) { var that = this; - 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(); + if (that.options.passthrough) { that.destroy(); - that.obj.append(''); - if (that.options.outputUrlId !== '') { $('#' + that.options.outputUrlId).val(response.url); } + var customImageDiv = that.options.customImgOutput ? that.options.customImgOutputTarget : that.obj; - that.croppedImg = that.obj.find('.croppedImg'); + customImageDiv.append(''); - that.init(); + that.croppedImg = customImageDiv.find('.croppedImg'); + croppedImgCSS = { + height: data.imgH+'px', + width: data.imgW+'px', + top: -data.imgY1+'px', + left: -data.imgX1+'px', + position: 'relative' + }; + that.croppedImg.css(croppedImgCSS); + $('#croppedImgContainer').css({overflow: 'hidden', position: 'relative', height: data.cropH, width: data.cropW}); + 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) + + }else{ + 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.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) + } } if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response); @@ -729,7 +774,7 @@ }, hideLoader:function(){ var that = this; - that.loader.remove(); + that.loader.remove(); }, reset:function(){ var that = this; @@ -737,8 +782,8 @@ 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') @@ -748,10 +793,10 @@ 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.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(); } + if( !$.isEmptyObject( that.form ) && !that.options.passthrough ){ that.form.remove(); } that.obj.html(''); }, isAjaxUploadSupported: function () { @@ -765,9 +810,9 @@ typeof (new XMLHttpRequest()).upload != "undefined"); }, CreateFallbackIframe: function () { - var that = this; + var that = this; - if (!that.isAjaxUploadSupported()) { + if (!that.isAjaxUploadSupported()) { if (jQuery.isEmptyObject(that.iframeobj)) { var iframe = document.createElement("iframe"); @@ -787,7 +832,7 @@ + 'Uploading File' + '' + '
' @@ -798,10 +843,10 @@ 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 () { @@ -833,7 +878,7 @@ } }, - SubmitFallbackIframe: function (that) { + SubmitFallbackIframe: function (that) { that.showLoader(); if(that.options.processInline && !that.options.uploadUrl){ if (that.options.onError){ @@ -841,12 +886,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; From b0cc9156b568a975a76db90cb97a4004c8677ec2 Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Wed, 22 Mar 2017 11:12:17 -0500 Subject: [PATCH 3/8] Add minified js --- croppic.min.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/croppic.min.js b/croppic.min.js index bb29794..6486a15 100644 --- a/croppic.min.js +++ b/croppic.min.js @@ -1,6 +1 @@ -/* - * CROPPIC - * 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(window,document){Croppic=function(id,options){var that=this;that.id=id,that.obj=$("#"+id),that.outputDiv=that.obj,that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:!1,yieldCropData:null,imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customModal:!1,modalHTML:"",customUploadButtonId:"",customImgOutput:!1,customImgOuptutTarget:null,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 options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width(),that.objH=that.obj.height(),that.actualRotation=0,$.isEmptyObject(that.defaultImg)&&(that.defaultImg=that.obj.find("img")),that.createImgUploadControls(),$.isEmptyObject(that.options.loadPicture)?that.bindImgUploadControl():that.loadExistingImage()},createImgUploadControls:function(){var that=this,cropControlUpload="";""===that.options.customUploadButtonId&&(cropControlUpload='');var cropControlRemoveCroppedImage='';$.isEmptyObject(that.croppedImg)&&(cropControlRemoveCroppedImage=""),$.isEmptyObject(that.options.loadPicture)||(cropControlUpload="");var html='
'+cropControlUpload+cropControlRemoveCroppedImage+"
";that.outputDiv.append(html),that.cropControlsUpload=that.outputDiv.find(".cropControlsUpload"),""===that.options.customUploadButtonId?that.imgUploadControl=that.outputDiv.find(".cropControlUpload"):(that.imgUploadControl=$("#"+that.options.customUploadButtonId),that.imgUploadControl.show()),$.isEmptyObject(that.croppedImg)||(that.cropControlRemoveCroppedImage=that.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var that=this;if(that.options.passthrough)that.form=$(that.obj).parents("form");else{var formHtml='';that.outputDiv.append(formHtml),that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click"),that.imgUploadControl.on("click",function(){""===fileUploadId?that.form.find('input[type="file"]').trigger("click"):that.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(that.croppedImg)||that.cropControlRemoveCroppedImage.on("click",function(){typeof that.options.onBeforeRemoveCroppedImg==typeof Function&&that.options.onBeforeRemoveCroppedImg.call(that),that.croppedImg.remove(),that.croppedImg={},$(this).hide(),typeof that.options.onAfterRemoveCroppedImg==typeof Function&&that.options.onAfterRemoveCroppedImg.call(that),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==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(),that.options.processInline)if("undefined"==typeof FileReader)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,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=image.src,that.obj.append(''),that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}},reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(that.form[0])}catch(e){formData=new FormData,formData.append("img",that.form.find("input[type=file]")[0].files[0])}for(var key in that.options.uploadData)that.options.uploadData.hasOwnProperty(key)&&formData.append(key,that.options.uploadData[key]);$.ajax({url:that.options.uploadUrl,data:formData,context:document.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(data){that.afterUpload(data)})}})},loadExistingImage:function(){var that=this;if($.isEmptyObject(that.croppedImg)){that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.showLoader(),that.options.modal&&that.createModal(),$.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(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)})}else that.cropControlRemoveCroppedImage.on("click",function(){that.croppedImg.remove(),$(this).hide(),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(""),that.croppedImg="",that.reset()})},afterUpload:function(data){var that=this;if(response="object"==typeof data?data:jQuery.parseJSON(data),"success"==response.status){that.imgInitW=that.imgW=response.width,that.imgInitH=that.imgH=response.height,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=response.url;var img=$('');that.obj.append(img),img.load(function(){that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}"error"==response.status&&(alert(response.message),that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))},createModal:function(){var that=this,marginTop=that.windowH/2-that.objH/2,modalHTML="";modalHTML=that.options.customModal?that.options.modalHTML:'
',$("body").append(modalHTML),that.modal=$("#croppicModal"),that.obj=$("#croppicModalObj"),that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv,that.modal.remove(),that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img"),that.img.wrap('
'),that.createCropControls(),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(){this.imgEyecandy.remove()},initialScaleImg:function(){var that=this;that.zoom(-that.imgInitW),that.zoom(40),that.options.enableMousescroll&&that.img.on("mousewheel",function(event){event.preventDefault(),that.zoom(that.options.zoomFactor*event.deltaY)}),that.img.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"}),that.options.imgEyecandy&&that.imgEyecandy.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"})},createCropControls:function(){var html,that=this,cropControlZoomMuchIn="",cropControlZoomMuchOut="",cropControlRotateLeft="",cropControlRotateRight="";that.options.doubleZoomControls&&(cropControlZoomMuchIn='',cropControlZoomMuchOut=''),that.options.rotateControls&&(cropControlRotateLeft='',cropControlRotateRight=''),html='
'+cropControlZoomMuchIn+''+cropControlZoomMuchOut+cropControlRotateLeft+cropControlRotateRight+'
',that.obj.append(html),that.cropControlsCrop=that.obj.find(".cropControlsCrop"),that.options.doubleZoomControls&&(that.cropControlZoomMuchIn=that.cropControlsCrop.find(".cropControlZoomMuchIn"),that.cropControlZoomMuchIn.on("click",function(){that.zoom(10*that.options.zoomFactor)}),that.cropControlZoomMuchOut=that.cropControlsCrop.find(".cropControlZoomMuchOut"),that.cropControlZoomMuchOut.on("click",function(){that.zoom(10*-that.options.zoomFactor)})),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();var pageX,pageY,userAgent=window.navigator.userAgent;userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(pageX=e.originalEvent.touches[0].pageX,pageY=e.originalEvent.touches[0].pageY):(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",1e3).on("mousemove touchmove",function(e){var imgTop,imgLeft;if(userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(imgTop=e.originalEvent.touches[0].pageY+pos_y-drg_h,imgLeft=e.originalEvent.touches[0].pageX+pos_x-drg_w):(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)}),that.options.imgEyecandy&&that.imgEyecandy.offset({top:imgTop,left:imgLeft}),that.objH0&&(that.img.css("top",0),that.options.imgEyecandy&&that.imgEyecandy.css("top",0));var maxTop=-(that.imgH-that.objH);parseInt(that.img.css("top"))maxTop&&(that.img.css("top",maxTop),that.options.imgEyecandy&&that.imgEyecandy.css("top",maxTop))}if(that.objW0&&(that.img.css("left",0),that.options.imgEyecandy&&that.imgEyecandy.css("left",0));var maxLeft=-(that.imgW-that.objW);parseInt(that.img.css("left"))maxLeft&&(that.img.css("left",maxLeft),that.options.imgEyecandy&&that.imgEyecandy.css("left",maxLeft))}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)"}),that.options.imgEyecandy&&that.imgEyecandy.css({"-webkit-transform":"rotate("+that.actualRotation+"deg)","-moz-transform":"rotate("+that.actualRotation+"deg)",transform:"rotate("+that.actualRotation+"deg)"}),"function"==typeof that.options.onImgRotate&&that.options.onImgRotate.call(that)},zoom:function(x){var that=this,ratio=that.imgW/that.imgH,newWidth=that.imgW+x,newHeight=newWidth/ratio,doPositioning=!0;(newWidththat.imgInitW||newHeight>that.imgInitH)&&(newWidth-that.imgInitW0&&(newTop=0),newLeft>0&&(newLeft=0);var maxTop=-(newHeight-that.objH);newTop'),that.croppedImg=customImageDiv.find(".croppedImg"),croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",position:"relative"},that.croppedImg.css(croppedImgCSS),$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW}),that.init(),that.hideLoader()}else{try{response=jQuery.parseJSON(data)}catch(err){response="object"==typeof data?data:jQuery.parseJSON(data)}"success"==response.status&&(that.options.imgEyecandy&&that.imgEyecandy.hide(),that.destroy(),that.obj.append(''),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(response.url),that.croppedImg=that.obj.find(".croppedImg"),that.init(),that.hideLoader()),"error"==response.status&&(that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))}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(){this.loader.remove()},reset:function(){var that=this;that.destroy(),that.init(),$.isEmptyObject(that.croppedImg)||(that.obj.append(that.croppedImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(that.croppedImg.attr("url"))),"function"==typeof that.options.onReset&&that.options.onReset.call(that)},destroy:function(){var that=this;that.options.modal&&!$.isEmptyObject(that.modal)&&that.destroyModal(),that.options.imgEyecandy&&!$.isEmptyObject(that.imgEyecandy)&&that.destroyEyecandy(),$.isEmptyObject(that.cropControlsUpload)||that.cropControlsUpload.remove(),$.isEmptyObject(that.cropControlsCrop)||that.cropControlsCrop.remove(),$.isEmptyObject(that.loader)||that.loader.remove(),$.isEmptyObject(that.form)||that.options.passthrough||that.form.remove(),that.obj.html("")},isAjaxUploadSupported:function(){var input=document.createElement("input");return input.type="file","multiple"in input&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&void 0!==(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var that=this;if(that.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe"),iframe.setAttribute("name",that.id+"_upload_iframe"),iframe.setAttribute("width","0"),iframe.setAttribute("height","0"),iframe.setAttribute("border","0"),iframe.setAttribute("src","javascript:false;"),iframe.style.display="none",document.body.appendChild(iframe)}else iframe=that.iframeobj[0];var myContent='Uploading File";iframe.contentWindow.document.open("text/htmlreplace"),iframe.contentWindow.document.write(myContent),iframe.contentWindow.document.close(),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.find("input")[0].attachEvent("onchange",function(){that.SubmitFallbackIframe(that)});var eventHandlermyFile=function(){iframe.detachEvent?iframe.detachEvent("onload",eventHandlermyFile):iframe.removeEventListener("load",eventHandlermyFile,!1);var response=that.getIframeContentJSON(iframe);jQuery.isEmptyObject(that.modal)&&that.afterUpload(response)};return iframe.addEventListener&&iframe.addEventListener("load",eventHandlermyFile,!0),iframe.attachEvent&&iframe.attachEvent("onload",eventHandlermyFile),"#"+that.id+"_imgUploadField"},SubmitFallbackIframe:function(that){that.showLoader(),that.options.processInline&&!that.options.uploadUrl?that.options.onError&&(that.options.onError.call(that,"processInline is not supported by your browser "),that.hideLoader()):(that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.iframeform[0].submit())},getIframeContentJSON:function(iframe){try{var response,doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,innerHTML=doc.body.innerHTML;"
"==innerHTML.slice(0,5).toLowerCase()&&"
"==innerHTML.slice(-6).toLowerCase()&&(innerHTML=doc.body.firstChild.firstChild.nodeValue),response=jQuery.parseJSON(innerHTML)}catch(err){response={success:!1}}return response}}}(window,document); \ No newline at end of file From cc73e1266b962b80be36c7e942c72f9201fbffcf Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Wed, 22 Mar 2017 11:41:06 -0500 Subject: [PATCH 4/8] Add css for rotating preview image for passthrough mode --- croppic.js | 1 + croppic.min.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/croppic.js b/croppic.js index 2bacd92..4e2f6fe 100755 --- a/croppic.js +++ b/croppic.js @@ -724,6 +724,7 @@ width: data.imgW+'px', top: -data.imgY1+'px', left: -data.imgX1+'px', + transform: 'rotate('+data.rotation+'deg)', position: 'relative' }; that.croppedImg.css(croppedImgCSS); diff --git a/croppic.min.js b/croppic.min.js index 6486a15..b666b23 100644 --- a/croppic.min.js +++ b/croppic.min.js @@ -1 +1 @@ -!function(window,document){Croppic=function(id,options){var that=this;that.id=id,that.obj=$("#"+id),that.outputDiv=that.obj,that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:!1,yieldCropData:null,imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customModal:!1,modalHTML:"",customUploadButtonId:"",customImgOutput:!1,customImgOuptutTarget:null,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 options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width(),that.objH=that.obj.height(),that.actualRotation=0,$.isEmptyObject(that.defaultImg)&&(that.defaultImg=that.obj.find("img")),that.createImgUploadControls(),$.isEmptyObject(that.options.loadPicture)?that.bindImgUploadControl():that.loadExistingImage()},createImgUploadControls:function(){var that=this,cropControlUpload="";""===that.options.customUploadButtonId&&(cropControlUpload='');var cropControlRemoveCroppedImage='';$.isEmptyObject(that.croppedImg)&&(cropControlRemoveCroppedImage=""),$.isEmptyObject(that.options.loadPicture)||(cropControlUpload="");var html='
'+cropControlUpload+cropControlRemoveCroppedImage+"
";that.outputDiv.append(html),that.cropControlsUpload=that.outputDiv.find(".cropControlsUpload"),""===that.options.customUploadButtonId?that.imgUploadControl=that.outputDiv.find(".cropControlUpload"):(that.imgUploadControl=$("#"+that.options.customUploadButtonId),that.imgUploadControl.show()),$.isEmptyObject(that.croppedImg)||(that.cropControlRemoveCroppedImage=that.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var that=this;if(that.options.passthrough)that.form=$(that.obj).parents("form");else{var formHtml='';that.outputDiv.append(formHtml),that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click"),that.imgUploadControl.on("click",function(){""===fileUploadId?that.form.find('input[type="file"]').trigger("click"):that.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(that.croppedImg)||that.cropControlRemoveCroppedImage.on("click",function(){typeof that.options.onBeforeRemoveCroppedImg==typeof Function&&that.options.onBeforeRemoveCroppedImg.call(that),that.croppedImg.remove(),that.croppedImg={},$(this).hide(),typeof that.options.onAfterRemoveCroppedImg==typeof Function&&that.options.onAfterRemoveCroppedImg.call(that),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==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(),that.options.processInline)if("undefined"==typeof FileReader)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,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=image.src,that.obj.append(''),that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}},reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(that.form[0])}catch(e){formData=new FormData,formData.append("img",that.form.find("input[type=file]")[0].files[0])}for(var key in that.options.uploadData)that.options.uploadData.hasOwnProperty(key)&&formData.append(key,that.options.uploadData[key]);$.ajax({url:that.options.uploadUrl,data:formData,context:document.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(data){that.afterUpload(data)})}})},loadExistingImage:function(){var that=this;if($.isEmptyObject(that.croppedImg)){that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.showLoader(),that.options.modal&&that.createModal(),$.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(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)})}else that.cropControlRemoveCroppedImage.on("click",function(){that.croppedImg.remove(),$(this).hide(),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(""),that.croppedImg="",that.reset()})},afterUpload:function(data){var that=this;if(response="object"==typeof data?data:jQuery.parseJSON(data),"success"==response.status){that.imgInitW=that.imgW=response.width,that.imgInitH=that.imgH=response.height,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=response.url;var img=$('');that.obj.append(img),img.load(function(){that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}"error"==response.status&&(alert(response.message),that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))},createModal:function(){var that=this,marginTop=that.windowH/2-that.objH/2,modalHTML="";modalHTML=that.options.customModal?that.options.modalHTML:'
',$("body").append(modalHTML),that.modal=$("#croppicModal"),that.obj=$("#croppicModalObj"),that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv,that.modal.remove(),that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img"),that.img.wrap('
'),that.createCropControls(),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(){this.imgEyecandy.remove()},initialScaleImg:function(){var that=this;that.zoom(-that.imgInitW),that.zoom(40),that.options.enableMousescroll&&that.img.on("mousewheel",function(event){event.preventDefault(),that.zoom(that.options.zoomFactor*event.deltaY)}),that.img.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"}),that.options.imgEyecandy&&that.imgEyecandy.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"})},createCropControls:function(){var html,that=this,cropControlZoomMuchIn="",cropControlZoomMuchOut="",cropControlRotateLeft="",cropControlRotateRight="";that.options.doubleZoomControls&&(cropControlZoomMuchIn='',cropControlZoomMuchOut=''),that.options.rotateControls&&(cropControlRotateLeft='',cropControlRotateRight=''),html='
'+cropControlZoomMuchIn+''+cropControlZoomMuchOut+cropControlRotateLeft+cropControlRotateRight+'
',that.obj.append(html),that.cropControlsCrop=that.obj.find(".cropControlsCrop"),that.options.doubleZoomControls&&(that.cropControlZoomMuchIn=that.cropControlsCrop.find(".cropControlZoomMuchIn"),that.cropControlZoomMuchIn.on("click",function(){that.zoom(10*that.options.zoomFactor)}),that.cropControlZoomMuchOut=that.cropControlsCrop.find(".cropControlZoomMuchOut"),that.cropControlZoomMuchOut.on("click",function(){that.zoom(10*-that.options.zoomFactor)})),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();var pageX,pageY,userAgent=window.navigator.userAgent;userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(pageX=e.originalEvent.touches[0].pageX,pageY=e.originalEvent.touches[0].pageY):(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",1e3).on("mousemove touchmove",function(e){var imgTop,imgLeft;if(userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(imgTop=e.originalEvent.touches[0].pageY+pos_y-drg_h,imgLeft=e.originalEvent.touches[0].pageX+pos_x-drg_w):(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)}),that.options.imgEyecandy&&that.imgEyecandy.offset({top:imgTop,left:imgLeft}),that.objH0&&(that.img.css("top",0),that.options.imgEyecandy&&that.imgEyecandy.css("top",0));var maxTop=-(that.imgH-that.objH);parseInt(that.img.css("top"))maxTop&&(that.img.css("top",maxTop),that.options.imgEyecandy&&that.imgEyecandy.css("top",maxTop))}if(that.objW0&&(that.img.css("left",0),that.options.imgEyecandy&&that.imgEyecandy.css("left",0));var maxLeft=-(that.imgW-that.objW);parseInt(that.img.css("left"))maxLeft&&(that.img.css("left",maxLeft),that.options.imgEyecandy&&that.imgEyecandy.css("left",maxLeft))}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)"}),that.options.imgEyecandy&&that.imgEyecandy.css({"-webkit-transform":"rotate("+that.actualRotation+"deg)","-moz-transform":"rotate("+that.actualRotation+"deg)",transform:"rotate("+that.actualRotation+"deg)"}),"function"==typeof that.options.onImgRotate&&that.options.onImgRotate.call(that)},zoom:function(x){var that=this,ratio=that.imgW/that.imgH,newWidth=that.imgW+x,newHeight=newWidth/ratio,doPositioning=!0;(newWidththat.imgInitW||newHeight>that.imgInitH)&&(newWidth-that.imgInitW0&&(newTop=0),newLeft>0&&(newLeft=0);var maxTop=-(newHeight-that.objH);newTop'),that.croppedImg=customImageDiv.find(".croppedImg"),croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",position:"relative"},that.croppedImg.css(croppedImgCSS),$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW}),that.init(),that.hideLoader()}else{try{response=jQuery.parseJSON(data)}catch(err){response="object"==typeof data?data:jQuery.parseJSON(data)}"success"==response.status&&(that.options.imgEyecandy&&that.imgEyecandy.hide(),that.destroy(),that.obj.append(''),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(response.url),that.croppedImg=that.obj.find(".croppedImg"),that.init(),that.hideLoader()),"error"==response.status&&(that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))}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(){this.loader.remove()},reset:function(){var that=this;that.destroy(),that.init(),$.isEmptyObject(that.croppedImg)||(that.obj.append(that.croppedImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(that.croppedImg.attr("url"))),"function"==typeof that.options.onReset&&that.options.onReset.call(that)},destroy:function(){var that=this;that.options.modal&&!$.isEmptyObject(that.modal)&&that.destroyModal(),that.options.imgEyecandy&&!$.isEmptyObject(that.imgEyecandy)&&that.destroyEyecandy(),$.isEmptyObject(that.cropControlsUpload)||that.cropControlsUpload.remove(),$.isEmptyObject(that.cropControlsCrop)||that.cropControlsCrop.remove(),$.isEmptyObject(that.loader)||that.loader.remove(),$.isEmptyObject(that.form)||that.options.passthrough||that.form.remove(),that.obj.html("")},isAjaxUploadSupported:function(){var input=document.createElement("input");return input.type="file","multiple"in input&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&void 0!==(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var that=this;if(that.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe"),iframe.setAttribute("name",that.id+"_upload_iframe"),iframe.setAttribute("width","0"),iframe.setAttribute("height","0"),iframe.setAttribute("border","0"),iframe.setAttribute("src","javascript:false;"),iframe.style.display="none",document.body.appendChild(iframe)}else iframe=that.iframeobj[0];var myContent='Uploading File";iframe.contentWindow.document.open("text/htmlreplace"),iframe.contentWindow.document.write(myContent),iframe.contentWindow.document.close(),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.find("input")[0].attachEvent("onchange",function(){that.SubmitFallbackIframe(that)});var eventHandlermyFile=function(){iframe.detachEvent?iframe.detachEvent("onload",eventHandlermyFile):iframe.removeEventListener("load",eventHandlermyFile,!1);var response=that.getIframeContentJSON(iframe);jQuery.isEmptyObject(that.modal)&&that.afterUpload(response)};return iframe.addEventListener&&iframe.addEventListener("load",eventHandlermyFile,!0),iframe.attachEvent&&iframe.attachEvent("onload",eventHandlermyFile),"#"+that.id+"_imgUploadField"},SubmitFallbackIframe:function(that){that.showLoader(),that.options.processInline&&!that.options.uploadUrl?that.options.onError&&(that.options.onError.call(that,"processInline is not supported by your browser "),that.hideLoader()):(that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.iframeform[0].submit())},getIframeContentJSON:function(iframe){try{var response,doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,innerHTML=doc.body.innerHTML;"
"==innerHTML.slice(0,5).toLowerCase()&&"
"==innerHTML.slice(-6).toLowerCase()&&(innerHTML=doc.body.firstChild.firstChild.nodeValue),response=jQuery.parseJSON(innerHTML)}catch(err){response={success:!1}}return response}}}(window,document); \ No newline at end of file +!function(window,document){Croppic=function(id,options){var that=this;that.id=id,that.obj=$("#"+id),that.outputDiv=that.obj,that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:!1,yieldCropData:null,imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customModal:!1,modalHTML:"",customUploadButtonId:"",customImgOutput:!1,customImgOuptutTarget:null,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 options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width(),that.objH=that.obj.height(),that.actualRotation=0,$.isEmptyObject(that.defaultImg)&&(that.defaultImg=that.obj.find("img")),that.createImgUploadControls(),$.isEmptyObject(that.options.loadPicture)?that.bindImgUploadControl():that.loadExistingImage()},createImgUploadControls:function(){var that=this,cropControlUpload="";""===that.options.customUploadButtonId&&(cropControlUpload='');var cropControlRemoveCroppedImage='';$.isEmptyObject(that.croppedImg)&&(cropControlRemoveCroppedImage=""),$.isEmptyObject(that.options.loadPicture)||(cropControlUpload="");var html='
'+cropControlUpload+cropControlRemoveCroppedImage+"
";that.outputDiv.append(html),that.cropControlsUpload=that.outputDiv.find(".cropControlsUpload"),""===that.options.customUploadButtonId?that.imgUploadControl=that.outputDiv.find(".cropControlUpload"):(that.imgUploadControl=$("#"+that.options.customUploadButtonId),that.imgUploadControl.show()),$.isEmptyObject(that.croppedImg)||(that.cropControlRemoveCroppedImage=that.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var that=this;if(that.options.passthrough)that.form=$(that.obj).parents("form");else{var formHtml='';that.outputDiv.append(formHtml),that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click"),that.imgUploadControl.on("click",function(){""===fileUploadId?that.form.find('input[type="file"]').trigger("click"):that.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(that.croppedImg)||that.cropControlRemoveCroppedImage.on("click",function(){typeof that.options.onBeforeRemoveCroppedImg==typeof Function&&that.options.onBeforeRemoveCroppedImg.call(that),that.croppedImg.remove(),that.croppedImg={},$(this).hide(),typeof that.options.onAfterRemoveCroppedImg==typeof Function&&that.options.onAfterRemoveCroppedImg.call(that),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==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(),that.options.processInline)if("undefined"==typeof FileReader)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,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=image.src,that.obj.append(''),that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}},reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(that.form[0])}catch(e){formData=new FormData,formData.append("img",that.form.find("input[type=file]")[0].files[0])}for(var key in that.options.uploadData)that.options.uploadData.hasOwnProperty(key)&&formData.append(key,that.options.uploadData[key]);$.ajax({url:that.options.uploadUrl,data:formData,context:document.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(data){that.afterUpload(data)})}})},loadExistingImage:function(){var that=this;if($.isEmptyObject(that.croppedImg)){that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.showLoader(),that.options.modal&&that.createModal(),$.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(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)})}else that.cropControlRemoveCroppedImage.on("click",function(){that.croppedImg.remove(),$(this).hide(),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(""),that.croppedImg="",that.reset()})},afterUpload:function(data){var that=this;if(response="object"==typeof data?data:jQuery.parseJSON(data),"success"==response.status){that.imgInitW=that.imgW=response.width,that.imgInitH=that.imgH=response.height,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=response.url;var img=$('');that.obj.append(img),img.load(function(){that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}"error"==response.status&&(alert(response.message),that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))},createModal:function(){var that=this,marginTop=that.windowH/2-that.objH/2,modalHTML="";modalHTML=that.options.customModal?that.options.modalHTML:'
',$("body").append(modalHTML),that.modal=$("#croppicModal"),that.obj=$("#croppicModalObj"),that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv,that.modal.remove(),that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img"),that.img.wrap('
'),that.createCropControls(),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(){this.imgEyecandy.remove()},initialScaleImg:function(){var that=this;that.zoom(-that.imgInitW),that.zoom(40),that.options.enableMousescroll&&that.img.on("mousewheel",function(event){event.preventDefault(),that.zoom(that.options.zoomFactor*event.deltaY)}),that.img.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"}),that.options.imgEyecandy&&that.imgEyecandy.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"})},createCropControls:function(){var html,that=this,cropControlZoomMuchIn="",cropControlZoomMuchOut="",cropControlRotateLeft="",cropControlRotateRight="";that.options.doubleZoomControls&&(cropControlZoomMuchIn='',cropControlZoomMuchOut=''),that.options.rotateControls&&(cropControlRotateLeft='',cropControlRotateRight=''),html='
'+cropControlZoomMuchIn+''+cropControlZoomMuchOut+cropControlRotateLeft+cropControlRotateRight+'
',that.obj.append(html),that.cropControlsCrop=that.obj.find(".cropControlsCrop"),that.options.doubleZoomControls&&(that.cropControlZoomMuchIn=that.cropControlsCrop.find(".cropControlZoomMuchIn"),that.cropControlZoomMuchIn.on("click",function(){that.zoom(10*that.options.zoomFactor)}),that.cropControlZoomMuchOut=that.cropControlsCrop.find(".cropControlZoomMuchOut"),that.cropControlZoomMuchOut.on("click",function(){that.zoom(10*-that.options.zoomFactor)})),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();var pageX,pageY,userAgent=window.navigator.userAgent;userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(pageX=e.originalEvent.touches[0].pageX,pageY=e.originalEvent.touches[0].pageY):(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",1e3).on("mousemove touchmove",function(e){var imgTop,imgLeft;if(userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(imgTop=e.originalEvent.touches[0].pageY+pos_y-drg_h,imgLeft=e.originalEvent.touches[0].pageX+pos_x-drg_w):(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)}),that.options.imgEyecandy&&that.imgEyecandy.offset({top:imgTop,left:imgLeft}),that.objH0&&(that.img.css("top",0),that.options.imgEyecandy&&that.imgEyecandy.css("top",0));var maxTop=-(that.imgH-that.objH);parseInt(that.img.css("top"))maxTop&&(that.img.css("top",maxTop),that.options.imgEyecandy&&that.imgEyecandy.css("top",maxTop))}if(that.objW0&&(that.img.css("left",0),that.options.imgEyecandy&&that.imgEyecandy.css("left",0));var maxLeft=-(that.imgW-that.objW);parseInt(that.img.css("left"))maxLeft&&(that.img.css("left",maxLeft),that.options.imgEyecandy&&that.imgEyecandy.css("left",maxLeft))}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)"}),that.options.imgEyecandy&&that.imgEyecandy.css({"-webkit-transform":"rotate("+that.actualRotation+"deg)","-moz-transform":"rotate("+that.actualRotation+"deg)",transform:"rotate("+that.actualRotation+"deg)"}),"function"==typeof that.options.onImgRotate&&that.options.onImgRotate.call(that)},zoom:function(x){var that=this,ratio=that.imgW/that.imgH,newWidth=that.imgW+x,newHeight=newWidth/ratio,doPositioning=!0;(newWidththat.imgInitW||newHeight>that.imgInitH)&&(newWidth-that.imgInitW0&&(newTop=0),newLeft>0&&(newLeft=0);var maxTop=-(newHeight-that.objH);newTop'),that.croppedImg=customImageDiv.find(".croppedImg"),croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",transform:"rotate("+data.rotation+"deg)",position:"relative"},that.croppedImg.css(croppedImgCSS),$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW}),that.init(),that.hideLoader()}else{try{response=jQuery.parseJSON(data)}catch(err){response="object"==typeof data?data:jQuery.parseJSON(data)}"success"==response.status&&(that.options.imgEyecandy&&that.imgEyecandy.hide(),that.destroy(),that.obj.append(''),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(response.url),that.croppedImg=that.obj.find(".croppedImg"),that.init(),that.hideLoader()),"error"==response.status&&(that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))}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(){this.loader.remove()},reset:function(){var that=this;that.destroy(),that.init(),$.isEmptyObject(that.croppedImg)||(that.obj.append(that.croppedImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(that.croppedImg.attr("url"))),"function"==typeof that.options.onReset&&that.options.onReset.call(that)},destroy:function(){var that=this;that.options.modal&&!$.isEmptyObject(that.modal)&&that.destroyModal(),that.options.imgEyecandy&&!$.isEmptyObject(that.imgEyecandy)&&that.destroyEyecandy(),$.isEmptyObject(that.cropControlsUpload)||that.cropControlsUpload.remove(),$.isEmptyObject(that.cropControlsCrop)||that.cropControlsCrop.remove(),$.isEmptyObject(that.loader)||that.loader.remove(),$.isEmptyObject(that.form)||that.options.passthrough||that.form.remove(),that.obj.html("")},isAjaxUploadSupported:function(){var input=document.createElement("input");return input.type="file","multiple"in input&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&void 0!==(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var that=this;if(that.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe"),iframe.setAttribute("name",that.id+"_upload_iframe"),iframe.setAttribute("width","0"),iframe.setAttribute("height","0"),iframe.setAttribute("border","0"),iframe.setAttribute("src","javascript:false;"),iframe.style.display="none",document.body.appendChild(iframe)}else iframe=that.iframeobj[0];var myContent='Uploading File";iframe.contentWindow.document.open("text/htmlreplace"),iframe.contentWindow.document.write(myContent),iframe.contentWindow.document.close(),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.find("input")[0].attachEvent("onchange",function(){that.SubmitFallbackIframe(that)});var eventHandlermyFile=function(){iframe.detachEvent?iframe.detachEvent("onload",eventHandlermyFile):iframe.removeEventListener("load",eventHandlermyFile,!1);var response=that.getIframeContentJSON(iframe);jQuery.isEmptyObject(that.modal)&&that.afterUpload(response)};return iframe.addEventListener&&iframe.addEventListener("load",eventHandlermyFile,!0),iframe.attachEvent&&iframe.attachEvent("onload",eventHandlermyFile),"#"+that.id+"_imgUploadField"},SubmitFallbackIframe:function(that){that.showLoader(),that.options.processInline&&!that.options.uploadUrl?that.options.onError&&(that.options.onError.call(that,"processInline is not supported by your browser "),that.hideLoader()):(that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.iframeform[0].submit())},getIframeContentJSON:function(iframe){try{var response,doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,innerHTML=doc.body.innerHTML;"
"==innerHTML.slice(0,5).toLowerCase()&&"
"==innerHTML.slice(-6).toLowerCase()&&(innerHTML=doc.body.firstChild.firstChild.nodeValue),response=jQuery.parseJSON(innerHTML)}catch(err){response={success:!1}}return response}}}(window,document); \ No newline at end of file From 417b8285fb85ae01259489bd0739db4099db2134 Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Mon, 3 Apr 2017 11:14:48 -0500 Subject: [PATCH 5/8] Ensure there's no existing event listener assigned to the form object * Enable callback in passthrough mode --- croppic.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/croppic.js b/croppic.js index 4e2f6fe..a198c3f 100755 --- a/croppic.js +++ b/croppic.js @@ -192,7 +192,8 @@ } - that.form.find('input[type="file"]').change(function(){ + that.form.find('input[type="file"]').off('change'); + that.form.find('input[type="file"]').on('change',function(){ if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); that.showLoader(); @@ -646,7 +647,7 @@ if(that.options.passthrough) { if (that.options.yieldCropData !== 'undefined') { - that.options.yieldCropData(cropData); + that.options.yieldCropData(this.form, cropData); that.afterCrop(cropData); } }else{ @@ -710,11 +711,14 @@ }, afterCrop: function (data) { var that = this; + var customImgOutput; if (that.options.passthrough) { that.destroy(); - var customImageDiv = that.options.customImgOutput ? that.options.customImgOutputTarget : that.obj; + if (that.options.customImgOutput) customImgOutput = that.form.find(that.options.customImgOutputTarget) + + var customImageDiv = customImgOutput || that.obj; customImageDiv.append(''); @@ -732,7 +736,7 @@ that.init(); that.hideLoader(); - + if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that); }else{ try { response = jQuery.parseJSON(data); @@ -762,10 +766,10 @@ that.hideLoader(); setTimeout( function(){ that.reset(); },2000) } + if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response); } - - if (that.options.onAfterImgCrop) that.options.onAfterImgCrop.call(that, response); - }, + } + , showLoader:function(){ var that = this; From d28d82c7af451c1d8b409d41fb5921629e240380 Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Tue, 4 Apr 2017 12:09:24 -0500 Subject: [PATCH 6/8] Update minified build --- croppic.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/croppic.min.js b/croppic.min.js index b666b23..4615a82 100644 --- a/croppic.min.js +++ b/croppic.min.js @@ -1 +1 @@ -!function(window,document){Croppic=function(id,options){var that=this;that.id=id,that.obj=$("#"+id),that.outputDiv=that.obj,that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:!1,yieldCropData:null,imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customModal:!1,modalHTML:"",customUploadButtonId:"",customImgOutput:!1,customImgOuptutTarget:null,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 options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width(),that.objH=that.obj.height(),that.actualRotation=0,$.isEmptyObject(that.defaultImg)&&(that.defaultImg=that.obj.find("img")),that.createImgUploadControls(),$.isEmptyObject(that.options.loadPicture)?that.bindImgUploadControl():that.loadExistingImage()},createImgUploadControls:function(){var that=this,cropControlUpload="";""===that.options.customUploadButtonId&&(cropControlUpload='');var cropControlRemoveCroppedImage='';$.isEmptyObject(that.croppedImg)&&(cropControlRemoveCroppedImage=""),$.isEmptyObject(that.options.loadPicture)||(cropControlUpload="");var html='
'+cropControlUpload+cropControlRemoveCroppedImage+"
";that.outputDiv.append(html),that.cropControlsUpload=that.outputDiv.find(".cropControlsUpload"),""===that.options.customUploadButtonId?that.imgUploadControl=that.outputDiv.find(".cropControlUpload"):(that.imgUploadControl=$("#"+that.options.customUploadButtonId),that.imgUploadControl.show()),$.isEmptyObject(that.croppedImg)||(that.cropControlRemoveCroppedImage=that.outputDiv.find(".cropControlRemoveCroppedImage"))},bindImgUploadControl:function(){var that=this;if(that.options.passthrough)that.form=$(that.obj).parents("form");else{var formHtml='';that.outputDiv.append(formHtml),that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click"),that.imgUploadControl.on("click",function(){""===fileUploadId?that.form.find('input[type="file"]').trigger("click"):that.iframeform.find('input[type="file"]').trigger("click")}),$.isEmptyObject(that.croppedImg)||that.cropControlRemoveCroppedImage.on("click",function(){typeof that.options.onBeforeRemoveCroppedImg==typeof Function&&that.options.onBeforeRemoveCroppedImg.call(that),that.croppedImg.remove(),that.croppedImg={},$(this).hide(),typeof that.options.onAfterRemoveCroppedImg==typeof Function&&that.options.onAfterRemoveCroppedImg.call(that),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==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(),that.options.processInline)if("undefined"==typeof FileReader)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,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=image.src,that.obj.append(''),that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}},reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0])}else{try{formData=new FormData(that.form[0])}catch(e){formData=new FormData,formData.append("img",that.form.find("input[type=file]")[0].files[0])}for(var key in that.options.uploadData)that.options.uploadData.hasOwnProperty(key)&&formData.append(key,that.options.uploadData[key]);$.ajax({url:that.options.uploadUrl,data:formData,context:document.body,cache:!1,contentType:!1,processData:!1,type:"POST"}).always(function(data){that.afterUpload(data)})}})},loadExistingImage:function(){var that=this;if($.isEmptyObject(that.croppedImg)){that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.showLoader(),that.options.modal&&that.createModal(),$.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(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)})}else that.cropControlRemoveCroppedImage.on("click",function(){that.croppedImg.remove(),$(this).hide(),$.isEmptyObject(that.defaultImg)||that.obj.append(that.defaultImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(""),that.croppedImg="",that.reset()})},afterUpload:function(data){var that=this;if(response="object"==typeof data?data:jQuery.parseJSON(data),"success"==response.status){that.imgInitW=that.imgW=response.width,that.imgInitH=that.imgH=response.height,that.options.modal&&that.createModal(),$.isEmptyObject(that.croppedImg)||that.croppedImg.remove(),that.imgUrl=response.url;var img=$('');that.obj.append(img),img.load(function(){that.initCropper(),that.hideLoader(),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}),that.options.onAfterImgUpload&&that.options.onAfterImgUpload.call(that)}"error"==response.status&&(alert(response.message),that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))},createModal:function(){var that=this,marginTop=that.windowH/2-that.objH/2,modalHTML="";modalHTML=that.options.customModal?that.options.modalHTML:'
',$("body").append(modalHTML),that.modal=$("#croppicModal"),that.obj=$("#croppicModalObj"),that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv,that.modal.remove(),that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img"),that.img.wrap('
'),that.createCropControls(),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(){this.imgEyecandy.remove()},initialScaleImg:function(){var that=this;that.zoom(-that.imgInitW),that.zoom(40),that.options.enableMousescroll&&that.img.on("mousewheel",function(event){event.preventDefault(),that.zoom(that.options.zoomFactor*event.deltaY)}),that.img.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"}),that.options.imgEyecandy&&that.imgEyecandy.css({left:-(that.imgW-that.objW)/2,top:-(that.imgH-that.objH)/2,position:"relative"})},createCropControls:function(){var html,that=this,cropControlZoomMuchIn="",cropControlZoomMuchOut="",cropControlRotateLeft="",cropControlRotateRight="";that.options.doubleZoomControls&&(cropControlZoomMuchIn='',cropControlZoomMuchOut=''),that.options.rotateControls&&(cropControlRotateLeft='',cropControlRotateRight=''),html='
'+cropControlZoomMuchIn+''+cropControlZoomMuchOut+cropControlRotateLeft+cropControlRotateRight+'
',that.obj.append(html),that.cropControlsCrop=that.obj.find(".cropControlsCrop"),that.options.doubleZoomControls&&(that.cropControlZoomMuchIn=that.cropControlsCrop.find(".cropControlZoomMuchIn"),that.cropControlZoomMuchIn.on("click",function(){that.zoom(10*that.options.zoomFactor)}),that.cropControlZoomMuchOut=that.cropControlsCrop.find(".cropControlZoomMuchOut"),that.cropControlZoomMuchOut.on("click",function(){that.zoom(10*-that.options.zoomFactor)})),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();var pageX,pageY,userAgent=window.navigator.userAgent;userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(pageX=e.originalEvent.touches[0].pageX,pageY=e.originalEvent.touches[0].pageY):(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",1e3).on("mousemove touchmove",function(e){var imgTop,imgLeft;if(userAgent.match(/iPad/i)||userAgent.match(/iPhone/i)||userAgent.match(/android/i)||void 0==(e.pageY&&e.pageX)?(imgTop=e.originalEvent.touches[0].pageY+pos_y-drg_h,imgLeft=e.originalEvent.touches[0].pageX+pos_x-drg_w):(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)}),that.options.imgEyecandy&&that.imgEyecandy.offset({top:imgTop,left:imgLeft}),that.objH0&&(that.img.css("top",0),that.options.imgEyecandy&&that.imgEyecandy.css("top",0));var maxTop=-(that.imgH-that.objH);parseInt(that.img.css("top"))maxTop&&(that.img.css("top",maxTop),that.options.imgEyecandy&&that.imgEyecandy.css("top",maxTop))}if(that.objW0&&(that.img.css("left",0),that.options.imgEyecandy&&that.imgEyecandy.css("left",0));var maxLeft=-(that.imgW-that.objW);parseInt(that.img.css("left"))maxLeft&&(that.img.css("left",maxLeft),that.options.imgEyecandy&&that.imgEyecandy.css("left",maxLeft))}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)"}),that.options.imgEyecandy&&that.imgEyecandy.css({"-webkit-transform":"rotate("+that.actualRotation+"deg)","-moz-transform":"rotate("+that.actualRotation+"deg)",transform:"rotate("+that.actualRotation+"deg)"}),"function"==typeof that.options.onImgRotate&&that.options.onImgRotate.call(that)},zoom:function(x){var that=this,ratio=that.imgW/that.imgH,newWidth=that.imgW+x,newHeight=newWidth/ratio,doPositioning=!0;(newWidththat.imgInitW||newHeight>that.imgInitH)&&(newWidth-that.imgInitW0&&(newTop=0),newLeft>0&&(newLeft=0);var maxTop=-(newHeight-that.objH);newTop'),that.croppedImg=customImageDiv.find(".croppedImg"),croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",transform:"rotate("+data.rotation+"deg)",position:"relative"},that.croppedImg.css(croppedImgCSS),$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW}),that.init(),that.hideLoader()}else{try{response=jQuery.parseJSON(data)}catch(err){response="object"==typeof data?data:jQuery.parseJSON(data)}"success"==response.status&&(that.options.imgEyecandy&&that.imgEyecandy.hide(),that.destroy(),that.obj.append(''),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(response.url),that.croppedImg=that.obj.find(".croppedImg"),that.init(),that.hideLoader()),"error"==response.status&&(that.options.onError&&that.options.onError.call(that,response.message),that.hideLoader(),setTimeout(function(){that.reset()},2e3))}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(){this.loader.remove()},reset:function(){var that=this;that.destroy(),that.init(),$.isEmptyObject(that.croppedImg)||(that.obj.append(that.croppedImg),""!==that.options.outputUrlId&&$("#"+that.options.outputUrlId).val(that.croppedImg.attr("url"))),"function"==typeof that.options.onReset&&that.options.onReset.call(that)},destroy:function(){var that=this;that.options.modal&&!$.isEmptyObject(that.modal)&&that.destroyModal(),that.options.imgEyecandy&&!$.isEmptyObject(that.imgEyecandy)&&that.destroyEyecandy(),$.isEmptyObject(that.cropControlsUpload)||that.cropControlsUpload.remove(),$.isEmptyObject(that.cropControlsCrop)||that.cropControlsCrop.remove(),$.isEmptyObject(that.loader)||that.loader.remove(),$.isEmptyObject(that.form)||that.options.passthrough||that.form.remove(),that.obj.html("")},isAjaxUploadSupported:function(){var input=document.createElement("input");return input.type="file","multiple"in input&&"undefined"!=typeof File&&"undefined"!=typeof FormData&&void 0!==(new XMLHttpRequest).upload},CreateFallbackIframe:function(){var that=this;if(that.isAjaxUploadSupported())return"";if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe"),iframe.setAttribute("name",that.id+"_upload_iframe"),iframe.setAttribute("width","0"),iframe.setAttribute("height","0"),iframe.setAttribute("border","0"),iframe.setAttribute("src","javascript:false;"),iframe.style.display="none",document.body.appendChild(iframe)}else iframe=that.iframeobj[0];var myContent='Uploading File";iframe.contentWindow.document.open("text/htmlreplace"),iframe.contentWindow.document.write(myContent),iframe.contentWindow.document.close(),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.find("input")[0].attachEvent("onchange",function(){that.SubmitFallbackIframe(that)});var eventHandlermyFile=function(){iframe.detachEvent?iframe.detachEvent("onload",eventHandlermyFile):iframe.removeEventListener("load",eventHandlermyFile,!1);var response=that.getIframeContentJSON(iframe);jQuery.isEmptyObject(that.modal)&&that.afterUpload(response)};return iframe.addEventListener&&iframe.addEventListener("load",eventHandlermyFile,!0),iframe.attachEvent&&iframe.attachEvent("onload",eventHandlermyFile),"#"+that.id+"_imgUploadField"},SubmitFallbackIframe:function(that){that.showLoader(),that.options.processInline&&!that.options.uploadUrl?that.options.onError&&(that.options.onError.call(that,"processInline is not supported by your browser "),that.hideLoader()):(that.options.onBeforeImgUpload&&that.options.onBeforeImgUpload.call(that),that.iframeform[0].submit())},getIframeContentJSON:function(iframe){try{var response,doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,innerHTML=doc.body.innerHTML;"
"==innerHTML.slice(0,5).toLowerCase()&&"
"==innerHTML.slice(-6).toLowerCase()&&(innerHTML=doc.body.firstChild.firstChild.nodeValue),response=jQuery.parseJSON(innerHTML)}catch(err){response={success:!1}}return response}}}(window,document); \ No newline at end of file +(function(window,document){Croppic=function(id,options){var that=this;that.id=id;that.obj=$("#"+id);that.outputDiv=that.obj;that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:false,yieldCropData:null,imgEyecandy:true,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:true,rotateControls:true,modal:false,customModal:false,modalHTML:"",customUploadButtonId:"",customImgOutput:false,customImgOuptutTarget:null,loaderHtml:"",scaleToFill:true,processInline:false,loadPicture:"",onReset:null,enableMousescroll:false,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width();that.objH=that.obj.height();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;if(that.options.passthrough){that.form=$(that.obj).parents("form")}else{var formHtml='';that.outputDiv.append(formHtml);that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click");that.imgUploadControl.on("click",function(){if(fileUploadId===""){that.form.find('input[type="file"]').trigger("click")}else{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"]').off("change");that.form.find('input[type="file"]').on("change",function(){if(that.options.onBeforeImgUpload)that.options.onBeforeImgUpload.call(that);that.showLoader();that.imgUploadControl.hide();if(that.options.processInline){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{formData=new FormData(that.form[0])}catch(e){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.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){var that=this;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);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);if(that.options.onError)that.options.onError.call(that,response.message);that.hideLoader();setTimeout(function(){that.reset()},2e3)}},createModal:function(){var that=this;var marginTop=that.windowH/2-that.objH/2;var modalHTML="";if(that.options.customModal){modalHTML=that.options.modalHTML}else{modalHTML='
'+'
'+"
"}$("body").append(modalHTML);that.modal=$("#croppicModal");that.obj=$("#croppicModalObj");that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv;that.modal.remove();that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img");that.img.wrap('
');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(40);if(that.options.enableMousescroll){that.img.on("mousewheel",function(event){event.preventDefault();that.zoom(that.options.zoomFactor*event.deltaY)})}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;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");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();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){pageX=e.originalEvent.touches[0].pageX;pageY=e.originalEvent.touches[0].pageY}else{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",1e3).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.objH0){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)}}}if(that.objW0){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)}}}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(newWidththat.imgInitW||newHeight>that.imgInitH)){if(newWidth-that.imgInitW0){newTop=0}if(newLeft>0){newLeft=0}var maxTop=-(newHeight-that.objH);if(newTop');that.croppedImg=customImageDiv.find(".croppedImg");croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",transform:"rotate("+data.rotation+"deg)",position:"relative"};that.croppedImg.css(croppedImgCSS);$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW});that.init();that.hideLoader();if(that.options.onAfterImgCrop)that.options.onAfterImgCrop.call(that)}else{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.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()},2e3)}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")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.options.passthrough){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"},CreateFallbackIframe:function(){var that=this;if(!that.isAjaxUploadSupported()){if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe");iframe.setAttribute("name",that.id+"_upload_iframe");iframe.setAttribute("width","0");iframe.setAttribute("height","0");iframe.setAttribute("border","0");iframe.setAttribute("src","javascript:false;");iframe.style.display="none";document.body.appendChild(iframe)}else{iframe=that.iframeobj[0]}var myContent=""+"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.iframeform=that.iframeobj.contents().find("html").find("."+that.id+"_upload_iframe_form");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);else iframe.removeEventListener("load",eventHandlermyFile,false);var response=that.getIframeContentJSON(iframe);if(jQuery.isEmptyObject(that.modal)){that.afterUpload(response)}};if(iframe.addEventListener)iframe.addEventListener("load",eventHandlermyFile,true);if(iframe.attachEvent)iframe.attachEvent("onload",eventHandlermyFile);return"#"+that.id+"_imgUploadField"}else{return""}},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()}},getIframeContentJSON:function(iframe){try{var doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,response;var innerHTML=doc.body.innerHTML;if(innerHTML.slice(0,5).toLowerCase()=="
"&&innerHTML.slice(-6).toLowerCase()=="
"){innerHTML=doc.body.firstChild.firstChild.nodeValue}response=jQuery.parseJSON(innerHTML)}catch(err){response={success:false}}return response}}})(window,document); \ No newline at end of file From e2b781159a8fbd5174918d0e35126fd27f978d7c Mon Sep 17 00:00:00 2001 From: My Nguyen Date: Tue, 4 Apr 2017 16:22:52 -0500 Subject: [PATCH 7/8] Will not read the file when none specified --- croppic.js | 4 +++- croppic.min.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/croppic.js b/croppic.js index a198c3f..b29882d 100755 --- a/croppic.js +++ b/croppic.js @@ -227,7 +227,9 @@ } }; - reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]); + if (that.form.find('input[type="file"]')[0].files.length > 0){ + reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0]); + } } } else { diff --git a/croppic.min.js b/croppic.min.js index 4615a82..61a1443 100644 --- a/croppic.min.js +++ b/croppic.min.js @@ -1 +1 @@ -(function(window,document){Croppic=function(id,options){var that=this;that.id=id;that.obj=$("#"+id);that.outputDiv=that.obj;that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:false,yieldCropData:null,imgEyecandy:true,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:true,rotateControls:true,modal:false,customModal:false,modalHTML:"",customUploadButtonId:"",customImgOutput:false,customImgOuptutTarget:null,loaderHtml:"",scaleToFill:true,processInline:false,loadPicture:"",onReset:null,enableMousescroll:false,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width();that.objH=that.obj.height();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;if(that.options.passthrough){that.form=$(that.obj).parents("form")}else{var formHtml='';that.outputDiv.append(formHtml);that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click");that.imgUploadControl.on("click",function(){if(fileUploadId===""){that.form.find('input[type="file"]').trigger("click")}else{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"]').off("change");that.form.find('input[type="file"]').on("change",function(){if(that.options.onBeforeImgUpload)that.options.onBeforeImgUpload.call(that);that.showLoader();that.imgUploadControl.hide();if(that.options.processInline){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{formData=new FormData(that.form[0])}catch(e){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.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){var that=this;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);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);if(that.options.onError)that.options.onError.call(that,response.message);that.hideLoader();setTimeout(function(){that.reset()},2e3)}},createModal:function(){var that=this;var marginTop=that.windowH/2-that.objH/2;var modalHTML="";if(that.options.customModal){modalHTML=that.options.modalHTML}else{modalHTML='
'+'
'+"
"}$("body").append(modalHTML);that.modal=$("#croppicModal");that.obj=$("#croppicModalObj");that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv;that.modal.remove();that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img");that.img.wrap('
');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(40);if(that.options.enableMousescroll){that.img.on("mousewheel",function(event){event.preventDefault();that.zoom(that.options.zoomFactor*event.deltaY)})}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;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");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();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){pageX=e.originalEvent.touches[0].pageX;pageY=e.originalEvent.touches[0].pageY}else{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",1e3).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.objH0){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)}}}if(that.objW0){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)}}}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(newWidththat.imgInitW||newHeight>that.imgInitH)){if(newWidth-that.imgInitW0){newTop=0}if(newLeft>0){newLeft=0}var maxTop=-(newHeight-that.objH);if(newTop');that.croppedImg=customImageDiv.find(".croppedImg");croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",transform:"rotate("+data.rotation+"deg)",position:"relative"};that.croppedImg.css(croppedImgCSS);$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW});that.init();that.hideLoader();if(that.options.onAfterImgCrop)that.options.onAfterImgCrop.call(that)}else{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.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()},2e3)}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")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.options.passthrough){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"},CreateFallbackIframe:function(){var that=this;if(!that.isAjaxUploadSupported()){if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe");iframe.setAttribute("name",that.id+"_upload_iframe");iframe.setAttribute("width","0");iframe.setAttribute("height","0");iframe.setAttribute("border","0");iframe.setAttribute("src","javascript:false;");iframe.style.display="none";document.body.appendChild(iframe)}else{iframe=that.iframeobj[0]}var myContent=""+"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.iframeform=that.iframeobj.contents().find("html").find("."+that.id+"_upload_iframe_form");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);else iframe.removeEventListener("load",eventHandlermyFile,false);var response=that.getIframeContentJSON(iframe);if(jQuery.isEmptyObject(that.modal)){that.afterUpload(response)}};if(iframe.addEventListener)iframe.addEventListener("load",eventHandlermyFile,true);if(iframe.attachEvent)iframe.attachEvent("onload",eventHandlermyFile);return"#"+that.id+"_imgUploadField"}else{return""}},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()}},getIframeContentJSON:function(iframe){try{var doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,response;var innerHTML=doc.body.innerHTML;if(innerHTML.slice(0,5).toLowerCase()=="
"&&innerHTML.slice(-6).toLowerCase()=="
"){innerHTML=doc.body.firstChild.firstChild.nodeValue}response=jQuery.parseJSON(innerHTML)}catch(err){response={success:false}}return response}}})(window,document); \ No newline at end of file +(function(window,document){Croppic=function(id,options){var that=this;that.id=id;that.obj=$("#"+id);that.outputDiv=that.obj;that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:false,yieldCropData:null,imgEyecandy:true,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:true,rotateControls:true,modal:false,customModal:false,modalHTML:"",customUploadButtonId:"",customImgOutput:false,customImgOuptutTarget:null,loaderHtml:"",scaleToFill:true,processInline:false,loadPicture:"",onReset:null,enableMousescroll:false,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width();that.objH=that.obj.height();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;if(that.options.passthrough){that.form=$(that.obj).parents("form")}else{var formHtml='';that.outputDiv.append(formHtml);that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click");that.imgUploadControl.on("click",function(){if(fileUploadId===""){that.form.find('input[type="file"]').trigger("click")}else{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"]').off("change");that.form.find('input[type="file"]').on("change",function(){if(that.options.onBeforeImgUpload)that.options.onBeforeImgUpload.call(that);that.showLoader();that.imgUploadControl.hide();if(that.options.processInline){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)}};if(that.form.find('input[type="file"]')[0].files.length>0){reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0])}}}else{try{formData=new FormData(that.form[0])}catch(e){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.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){var that=this;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);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);if(that.options.onError)that.options.onError.call(that,response.message);that.hideLoader();setTimeout(function(){that.reset()},2e3)}},createModal:function(){var that=this;var marginTop=that.windowH/2-that.objH/2;var modalHTML="";if(that.options.customModal){modalHTML=that.options.modalHTML}else{modalHTML='
'+'
'+"
"}$("body").append(modalHTML);that.modal=$("#croppicModal");that.obj=$("#croppicModalObj");that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv;that.modal.remove();that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img");that.img.wrap('
');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(40);if(that.options.enableMousescroll){that.img.on("mousewheel",function(event){event.preventDefault();that.zoom(that.options.zoomFactor*event.deltaY)})}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;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");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();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){pageX=e.originalEvent.touches[0].pageX;pageY=e.originalEvent.touches[0].pageY}else{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",1e3).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.objH0){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)}}}if(that.objW0){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)}}}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(newWidththat.imgInitW||newHeight>that.imgInitH)){if(newWidth-that.imgInitW0){newTop=0}if(newLeft>0){newLeft=0}var maxTop=-(newHeight-that.objH);if(newTop');that.croppedImg=customImageDiv.find(".croppedImg");croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",transform:"rotate("+data.rotation+"deg)",position:"relative"};that.croppedImg.css(croppedImgCSS);$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW});that.init();that.hideLoader();if(that.options.onAfterImgCrop)that.options.onAfterImgCrop.call(that)}else{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.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()},2e3)}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")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.options.passthrough){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"},CreateFallbackIframe:function(){var that=this;if(!that.isAjaxUploadSupported()){if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe");iframe.setAttribute("name",that.id+"_upload_iframe");iframe.setAttribute("width","0");iframe.setAttribute("height","0");iframe.setAttribute("border","0");iframe.setAttribute("src","javascript:false;");iframe.style.display="none";document.body.appendChild(iframe)}else{iframe=that.iframeobj[0]}var myContent=""+"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.iframeform=that.iframeobj.contents().find("html").find("."+that.id+"_upload_iframe_form");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);else iframe.removeEventListener("load",eventHandlermyFile,false);var response=that.getIframeContentJSON(iframe);if(jQuery.isEmptyObject(that.modal)){that.afterUpload(response)}};if(iframe.addEventListener)iframe.addEventListener("load",eventHandlermyFile,true);if(iframe.attachEvent)iframe.attachEvent("onload",eventHandlermyFile);return"#"+that.id+"_imgUploadField"}else{return""}},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()}},getIframeContentJSON:function(iframe){try{var doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,response;var innerHTML=doc.body.innerHTML;if(innerHTML.slice(0,5).toLowerCase()=="
"&&innerHTML.slice(-6).toLowerCase()=="
"){innerHTML=doc.body.firstChild.firstChild.nodeValue}response=jQuery.parseJSON(innerHTML)}catch(err){response={success:false}}return response}}})(window,document); \ No newline at end of file From 7e4a9effe817a6e287dd72c58b19023d8524acec Mon Sep 17 00:00:00 2001 From: Gerardo Castro Date: Thu, 29 Mar 2018 10:51:14 -0600 Subject: [PATCH 8/8] add containerSize option instead of getting it with js --- croppic.js | 20 ++++++++++---------- croppic.min.js | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/croppic.js b/croppic.js index b29882d..e4fd188 100755 --- a/croppic.js +++ b/croppic.js @@ -22,6 +22,7 @@ outputUrlId:'', passthrough: false, yieldCropData: null, + containerSize: 195, //styles imgEyecandy:true, imgEyecandyOpacity:0.2, @@ -100,8 +101,7 @@ init: function () { var that = this; - that.objW = that.obj.width(); - that.objH = that.obj.height(); + that.objW = that.objH = that.options.containerSize; // reset rotation that.actualRotation = 0; @@ -133,7 +133,7 @@ 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(); } + else{ that.imgUploadControl = $('#'+that.options.customUploadButtonId); that.imgUploadControl.show(); } if( !$.isEmptyObject(that.croppedImg)){ that.cropControlRemoveCroppedImage = that.outputDiv.find('.cropControlRemoveCroppedImage'); @@ -186,7 +186,7 @@ that.obj.append(that.defaultImg); } - if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } }); @@ -271,7 +271,7 @@ if (that.options.onBeforeImgUpload) that.options.onBeforeImgUpload.call(that); that.showLoader(); - if(that.options.modal){ that.createModal(); } + if(that.options.modal){ that.createModal(); } if( !$.isEmptyObject(that.croppedImg)){ that.croppedImg.remove(); } that.imgUrl=that.options.loadPicture ; @@ -294,7 +294,7 @@ if( !$.isEmptyObject(that.defaultImg)){ that.obj.append(that.defaultImg); } - if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(''); } that.croppedImg = ''; that.reset(); }); @@ -606,8 +606,8 @@ 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; } + 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}); @@ -791,7 +791,7 @@ if( !$.isEmptyObject(that.croppedImg)){ that.obj.append(that.croppedImg); - if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); } + if(that.options.outputUrlId !== ''){ $('#'+that.options.outputUrlId).val(that.croppedImg.attr('url')); } } if (typeof that.options.onReset == 'function') that.options.onReset.call(that); @@ -915,4 +915,4 @@ } }; -})(window, document); +})(window, document); \ No newline at end of file diff --git a/croppic.min.js b/croppic.min.js index 61a1443..e6481f9 100644 --- a/croppic.min.js +++ b/croppic.min.js @@ -1 +1 @@ -(function(window,document){Croppic=function(id,options){var that=this;that.id=id;that.obj=$("#"+id);that.outputDiv=that.obj;that.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:false,yieldCropData:null,imgEyecandy:true,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:true,rotateControls:true,modal:false,customModal:false,modalHTML:"",customUploadButtonId:"",customImgOutput:false,customImgOuptutTarget:null,loaderHtml:"",scaleToFill:true,processInline:false,loadPicture:"",onReset:null,enableMousescroll:false,onBeforeImgUpload:null,onAfterImgUpload:null,onImgDrag:null,onImgZoom:null,onImgRotate:null,onBeforeImgCrop:null,onAfterImgCrop:null,onBeforeRemoveCroppedImg:null,onAfterRemoveCroppedImg:null,onError:null};for(i in options)that.options[i]=options[i];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:{},cropControlZoomOut:{},cropControlCrop:{},cropControlReset:{},cropControlRemoveCroppedImage:{},modal:{},loader:{},init:function(){var that=this;that.objW=that.obj.width();that.objH=that.obj.height();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;if(that.options.passthrough){that.form=$(that.obj).parents("form")}else{var formHtml='';that.outputDiv.append(formHtml);that.form=that.outputDiv.find("."+that.id+"_imgUploadForm")}var fileUploadId=that.CreateFallbackIframe();that.imgUploadControl.off("click");that.imgUploadControl.on("click",function(){if(fileUploadId===""){that.form.find('input[type="file"]').trigger("click")}else{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"]').off("change");that.form.find('input[type="file"]').on("change",function(){if(that.options.onBeforeImgUpload)that.options.onBeforeImgUpload.call(that);that.showLoader();that.imgUploadControl.hide();if(that.options.processInline){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)}};if(that.form.find('input[type="file"]')[0].files.length>0){reader.readAsDataURL(that.form.find('input[type="file"]')[0].files[0])}}}else{try{formData=new FormData(that.form[0])}catch(e){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.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){var that=this;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);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);if(that.options.onError)that.options.onError.call(that,response.message);that.hideLoader();setTimeout(function(){that.reset()},2e3)}},createModal:function(){var that=this;var marginTop=that.windowH/2-that.objH/2;var modalHTML="";if(that.options.customModal){modalHTML=that.options.modalHTML}else{modalHTML='
'+'
'+"
"}$("body").append(modalHTML);that.modal=$("#croppicModal");that.obj=$("#croppicModalObj");that.obj.css({width:that.objW+"px",height:that.objH+"px",position:"relative"})},destroyModal:function(){var that=this;that.obj=that.outputDiv;that.modal.remove();that.modal={}},initCropper:function(){var that=this;that.img=that.obj.find("img");that.img.wrap('
');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(40);if(that.options.enableMousescroll){that.img.on("mousewheel",function(event){event.preventDefault();that.zoom(that.options.zoomFactor*event.deltaY)})}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;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");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();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){pageX=e.originalEvent.touches[0].pageX;pageY=e.originalEvent.touches[0].pageY}else{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",1e3).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.objH0){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)}}}if(that.objW0){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)}}}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(newWidththat.imgInitW||newHeight>that.imgInitH)){if(newWidth-that.imgInitW0){newTop=0}if(newLeft>0){newLeft=0}var maxTop=-(newHeight-that.objH);if(newTop');that.croppedImg=customImageDiv.find(".croppedImg");croppedImgCSS={height:data.imgH+"px",width:data.imgW+"px",top:-data.imgY1+"px",left:-data.imgX1+"px",transform:"rotate("+data.rotation+"deg)",position:"relative"};that.croppedImg.css(croppedImgCSS);$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:data.cropH,width:data.cropW});that.init();that.hideLoader();if(that.options.onAfterImgCrop)that.options.onAfterImgCrop.call(that)}else{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.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()},2e3)}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")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.options.passthrough){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"},CreateFallbackIframe:function(){var that=this;if(!that.isAjaxUploadSupported()){if(jQuery.isEmptyObject(that.iframeobj)){var iframe=document.createElement("iframe");iframe.setAttribute("id",that.id+"_upload_iframe");iframe.setAttribute("name",that.id+"_upload_iframe");iframe.setAttribute("width","0");iframe.setAttribute("height","0");iframe.setAttribute("border","0");iframe.setAttribute("src","javascript:false;");iframe.style.display="none";document.body.appendChild(iframe)}else{iframe=that.iframeobj[0]}var myContent=""+"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.iframeform=that.iframeobj.contents().find("html").find("."+that.id+"_upload_iframe_form");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);else iframe.removeEventListener("load",eventHandlermyFile,false);var response=that.getIframeContentJSON(iframe);if(jQuery.isEmptyObject(that.modal)){that.afterUpload(response)}};if(iframe.addEventListener)iframe.addEventListener("load",eventHandlermyFile,true);if(iframe.attachEvent)iframe.attachEvent("onload",eventHandlermyFile);return"#"+that.id+"_imgUploadField"}else{return""}},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()}},getIframeContentJSON:function(iframe){try{var doc=iframe.contentDocument?iframe.contentDocument:iframe.contentWindow.document,response;var innerHTML=doc.body.innerHTML;if(innerHTML.slice(0,5).toLowerCase()=="
"&&innerHTML.slice(-6).toLowerCase()=="
"){innerHTML=doc.body.firstChild.firstChild.nodeValue}response=jQuery.parseJSON(innerHTML)}catch(err){response={success:false}}return response}}})(window,document); \ No newline at end of file +!function(o,t){Croppic=function(o,t){var e=this;for(i in e.id=o,e.obj=$("#"+o),e.outputDiv=e.obj,e.options={uploadUrl:"",uploadData:{},cropUrl:"",cropData:{},outputUrlId:"",passthrough:!1,yieldCropData:null,containerSize:195,imgEyecandy:!0,imgEyecandyOpacity:.2,zoomFactor:10,rotateFactor:5,doubleZoomControls:!0,rotateControls:!0,modal:!1,customModal:!1,modalHTML:"",customUploadButtonId:"",customImgOutput:!1,customImgOuptutTarget:null,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},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.objH=o.options.containerSize,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 i='
'+t+e+"
";o.outputDiv.append(i),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;if(o.options.passthrough)o.form=$(o.obj).parents("form");else{var e='';o.outputDiv.append(e),o.form=o.outputDiv.find("."+o.id+"_imgUploadForm")}var i=o.CreateFallbackIframe();o.imgUploadControl.off("click"),o.imgUploadControl.on("click",function(){""===i?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"]').off("change"),o.form.find('input[type="file"]').on("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)}},o.form.find('input[type="file"]')[0].files.length>0&&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 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="";e=o.options.customModal?o.options.modalHTML:'
',$("body").append(e),o.modal=$("#croppicModal"),o.obj=$("#croppicModalObj"),o.obj.css({width:o.objW+"px",height:o.objH+"px",position:"relative"})},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(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="",i="",n="",r="";t.options.doubleZoomControls&&(e='',i=''),t.options.rotateControls&&(n='',r=''),o='
'+e+''+i+n+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){var i,n;e.preventDefault();var r=o.navigator.userAgent;r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||null==(e.pageY&&e.pageX)?(i=e.originalEvent.touches[0].pageX,n=e.originalEvent.touches[0].pageY):(i=e.pageX,n=e.pageY);var p=t.img.css("z-index"),a=t.img.outerHeight(),s=t.img.outerWidth(),c=t.img.offset().top+a-n,l=t.img.offset().left+s-i;t.img.css("z-index",1e3).on("mousemove touchmove",function(o){var e,i;if(r.match(/iPad/i)||r.match(/iPhone/i)||r.match(/android/i)||null==(o.pageY&&o.pageX)?(e=o.originalEvent.touches[0].pageY+c-a,i=o.originalEvent.touches[0].pageX+l-s):(e=o.pageY+c-a,i=o.pageX+l-s),t.img.offset({top:e,left:i}).on("mouseup",function(){$(this).removeClass("draggable").css("z-index",p)}),t.options.imgEyecandy&&t.imgEyecandy.offset({top:e,left:i}),t.objH0&&(t.img.css("top",0),t.options.imgEyecandy&&t.imgEyecandy.css("top",0));var n=-(t.imgH-t.objH);parseInt(t.img.css("top"))n&&(t.img.css("top",n),t.options.imgEyecandy&&t.imgEyecandy.css("top",n))}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,i=t.imgW+o,n=i/e,r=!0;(it.imgInitW||n>t.imgInitH)&&(i-t.imgInitW0&&(p=0),a>0&&(a=0);var s=-(n-t.objH);p'),e.croppedImg=i.find(".croppedImg"),croppedImgCSS={height:o.imgH+"px",width:o.imgW+"px",top:-o.imgY1+"px",left:-o.imgX1+"px",transform:"rotate("+o.rotation+"deg)",position:"relative"},e.croppedImg.css(croppedImgCSS),$("#croppedImgContainer").css({overflow:"hidden",position:"relative",height:o.cropH,width:o.cropW}),e.init(),e.hideLoader(),e.options.onAfterImgCrop&&e.options.onAfterImgCrop.call(e)}else{try{response=jQuery.parseJSON(o)}catch(t){response="object"==typeof o?o:jQuery.parseJSON(o)}"success"==response.status&&(e.options.imgEyecandy&&e.imgEyecandy.hide(),e.destroy(),e.obj.append(''),""!==e.options.outputUrlId&&$("#"+e.options.outputUrlId).val(response.url),e.croppedImg=e.obj.find(".croppedImg"),e.init(),e.hideLoader()),"error"==response.status&&(e.options.onError&&e.options.onError.call(e,response.message),e.hideLoader(),setTimeout(function(){e.reset()},2e3)),e.options.onAfterImgCrop&&e.options.onAfterImgCrop.call(e,response)}},showLoader:function(){this.obj.append(this.options.loaderHtml),this.loader=this.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.options.passthrough||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 i='Uploading File";e.contentWindow.document.open("text/htmlreplace"),e.contentWindow.document.write(i),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 n=function(){e.detachEvent?e.detachEvent("onload",n):e.removeEventListener("load",n,!1);var t=o.getIframeContentJSON(e);jQuery.isEmptyObject(o.modal)&&o.afterUpload(t)};return e.addEventListener&&e.addEventListener("load",n,!0),e.attachEvent&&e.attachEvent("onload",n),"#"+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,i=e.body.innerHTML;"
"==i.slice(0,5).toLowerCase()&&"
"==i.slice(-6).toLowerCase()&&(i=e.body.firstChild.firstChild.nodeValue),t=jQuery.parseJSON(i)}catch(o){t={success:!1}}return t}}}(window,document); \ No newline at end of file