image-mask-cropper.min.js



1


!function(i){"function"==typeof define&&define.amd?define(["jquery"],i):i("object"==typeof exports?require("jquery"):window.jQuery||window.Zepto)}(function(i){function t(i,t){if(i&&t)for(var e=window.setTimeout(function(){t()},i);e--;)window.clearTimeout(e)}var e=function(t){var e=i.Deferred(),n=i("<img>");return n.attr("src",t).load(function(){e.resolve({width:n.get(0).width,height:n.get(0).height})}).each(function(){this.complete&&i(this).trigger("load")}),e},n=function(i){return"height"===i?"width":"height"},o={width:null,height:null,originalWidth:null,originalHeight:null,$element:null},s=function(i,t){return this.eventsInitialized=!1,this.options=i,this.element=Object.create(o),this.element.$element=t,this.imageMain=Object.create(o),this.imageMask=Object.create(o),this.container=Object.create(o),this.cropZone=Object.create(o),this.isRunning=!1,this._init(),this};s.prototype={_init:function(){var i=this;if(this.isRunning===!0)throw new Error("Plugin is still running. Can't initialize.");this.isRunning=!0,this._isContainerExistingInDom()&&this.container.$element.addClass(this.options.cropperContainerClassLoading),e(this.options.imageMain).then(function(t){return i.imageMain.originalHeight=t.height,i.imageMain.originalWidth=t.width,i._isMaskDefinedInOptions()?e(i.options.imageMask).then(function(t){i.imageMask.originalHeight=t.height,i.imageMask.originalWidth=t.width,i._refreshContainer()}):void i._refreshContainer()})},changeImageMain:function(i){if(this.isRunning===!0)throw new Error("Plugin is still running. Can't change imageMain.");return"string"!=typeof i||null!==this.imageMain.$element&&this.imageMain.$element.attr("src")===i?!1:(this.options.imageMain=i,void this._init())},changeImageMaskAndItsOptions:function(t,e){if(this.isRunning===!0)throw new Error("Plugin is still running. Can't change imageMask and its options.");return"string"!=typeof t||null!==this.imageMask.$element&&this.imageMask.$element.attr("src")===t||"object"!=typeof e?!1:(this.options.imageMask=t,this.options.maskOptions=i["extends"](!0,this.options.maskOptions,e),void this._init())},changeImageMask:function(i){if(this.isRunning===!0)throw new Error("Plugin is still running. Can't change imageMask.");return"string"!=typeof i||null!==this.imageMask.$element&&this.imageMask.$element.attr("src")===i?!1:(this.options.imageMask=i,void this._init())},changeMaskOptions:function(t){if(this.isRunning===!0)throw new Error("Plugin is still running. Can't change maskOptions.");return"object"!=typeof t?!1:(this.options.maskOptions=i["extends"](!0,this.options.maskOptions,t),void this._init())},getCropPosition:function(){if(this.isRunning===!0)throw new Error("Plugin is still running. Can't get crop position.");var i=this,t=0,e=0,n=0,o=0;return this._isMaskDefinedInOptions()?(n=(i.options.maskOptions.left-i.imageMain.$element.position().left/i.container.width*100)/100*i.container.width/i.imageMain.width*100,o=(i.options.maskOptions.top-i.imageMain.$element.position().top/i.container.height*100)/100*i.container.height/i.imageMain.height*100,t=i.options.maskOptions.height*i.container.height/100/(i.container.height-(i.container.height-i.imageMain.height))*100,e=i.options.maskOptions.width*i.container.width/100/(i.container.width-(i.container.width-i.imageMain.width))*100):(n=i.cropZone.$element.find('[class*="'+i.options.cropZoneClass+'-selection"]').position().left/i.container.width*100,o=i.cropZone.$element.find('[class*="'+i.options.cropZoneClass+'-selection"]').position().top/i.container.height*100,t=i.cropZone.$element.find('[class*="'+i.options.cropZoneClass+'-selection"]').height()/i.container.height*100,e=i.cropZone.$element.find('[class*="'+i.options.cropZoneClass+'-selection"]').width()/i.container.width*100),{left:Math.min(n,100),top:Math.min(o,100),height:Math.min(t,100),width:Math.min(e,100)}},setPositionCoords:function(t){var e=null,n=null;this._setPositionCoordsY(t.y),this._setPositionCoordsX(t.x),i.isNumeric(t.y)&&(this._isMaskDefinedInOptions()?(e=t.y*this.imageMain.height/100,n=this.options.maskOptions.top*this.container.height/100,this._setPositionTopOfImageMain(-((e-n)/this.container.height*100))):this._setPositionOfCropZone()),i.isNumeric(t.x)&&(this._isMaskDefinedInOptions()?(e=t.x*this.imageMain.width/100,n=this.options.maskOptions.left*this.container.width/100,this._setPositionLeftOfImageMain(-((e-n)/this.container.width*100))):this._setPositionOfCropZone()),this.options.onMoveCrop({coords:this.getCropPosition()})},setMaskOptionsHeight:function(i){var t=Math.max(this.options.positionCoords.y+this._setMaskOptionsHeight(i)-100,0);this.setPositionCoords({y:this.options.positionCoords.y+t})},setMaskOptionsWidth:function(i){var t=Math.max(this.options.positionCoords.x+this._setMaskOptionsWidth(i)-100,0);this.setPositionCoords({x:this.options.positionCoords.x+t})},enableCrop:function(){return this.options.enableCrop===!0?!1:(this.options.enableCrop=!0,void this._updateContainerClass())},disableCrop:function(){return this.options.enableCrop===!1?!1:(this.options.enableCrop=!1,void this._updateContainerClass())},_refreshContainer:function(){var i=this,t=function(){i.container.$element.removeClass(i.options.cropperContainerClassLoading),"function"==typeof i.options.onInitialized&&i.options.onInitialized.call(i,{coords:i.getCropPosition(),imageMain:i.options.imageMain})};this._isContainerExistingInDom()===!1&&this._createContainerDOMElement(),this._isImageMaskExistingInDom()===!0&&this._isMaskDefinedInOptions()===!1&&(this._removeDomImageMask(),this._removeImageMainStyles()),this._updateContainerClass(),this._hideInitializingElement(),this._isImageMainExistingInDom()===!1?this._createDomImageMain():this._updateDomImageMain(),this._isMaskDefinedInOptions()===!0?(1==this._isCropZoneExistingInDom()&&this._removeDomCropZone(),this._isImageMaskExistingInDom()===!1?this._createDomImageMask():this._updateDomImageMask()):0==this._isCropZoneExistingInDom()&&this._createDomCropZone(),setTimeout(function(){i.imageMain.$element.removeAttr("style"),i._isMaskDefinedInOptions()===!0?i._setPositionOfImageMain():i._setPositionOfCropZone(),i._setContainerCssHeight("auto"),i.eventsInitialized===!1&&i._initEvents(),i._udpateElementsSizes(),i.isRunning=!1,t()},0)},_initEvents:function(){this._onPluginMoveCurrentCrop(),this._onWindowsResize(),this._onMoveImageOrCropZone()},_onPluginMoveCurrentCrop:function(){var i=this;this.element.$element.on("imageMaskCropper:moveCurrentCrop",function(t,e){i.setCurrentCropPosition(e),"function"==typeof i.options.onMoveCrop&&i.options.onMoveCrop.call(i,{coords:i.getCropPosition()})})},_udpateElementsSizes:function(){this._setMaxWidthOfContainer(),this._updateCacheSizeOfContainer(),this._updateCacheSizeOfElement(),this._updateCacheSizeOfImageMain(),1==this._isMaskDefinedInOptions()&&this._updateCacheSizeOfImageMask()},_onWindowsResize:function(){var t=this;i(window).resize(function(){t._udpateElementsSizes()})},_onMoveImageOrCropZone:function(){var e=this,n=null,o=null,s=function(){return e._isMaskDefinedInOptions()?e.imageMain.$element:e.cropZone.$element.find('[class*="'+e.options.cropZoneClass+'-selection"]')}(),a={down:function(i){e.options.enableCrop===!0&&(i.preventDefault(),n={x:i.pageX||function(){return"undefined"!=typeof i.originalEvent?i.originalEvent.touches[0].pageX:null}(),y:i.pageY||function(){return"undefined"!=typeof i.originalEvent?i.originalEvent.touches[0].pageY:null}()},o={top:s.position().top,left:s.position().left})},move:function(i){var s={x:null,y:null};null!==n&&null!==o&&(s.x=n.x-(i.pageX||i.originalEvent.touches[0].pageX),s.y=n.y-(i.pageY||i.originalEvent.touches[0].pageY),t(5,function(){e._moveCropZoneOrImage(o,s)}))},end:function(i){n=null,o=null}};this.options.isMobile?window.PointerEvent?(e.container.$element.on("pointerdown",a.down),e.container.$element.on("pointermove",a.move),e.container.$element.on("pointerup",a.end)):(e.container.$element.on("touchstart",a.down),e.container.$element.on("touchmove",a.move),e.container.$element.on("touchend",a.end)):(e.container.$element.on("mousedown",a.down),i(document).on("mousemove",a.move),i(document).on("mouseup mouseleave",a.end))},_moveCropZoneOrImage:function(i,t){if(this.isRunning===!0)throw new Error("Plugin is still running. Can't move.");return this._isMaskDefinedInOptions()?this._moveImageInMask(i,t):this._moveCropZone(i,t)},_moveImageInMask:function(i,t){var e=this,n=null;"width"===this.imageMain.adjustedSize?(n=this._getTopPercentOfContainer(i.top-t.y),this._setPositionTopOfImageMain(n)):(n=this._getLeftPercentOfContainer(i.left-t.x),this._setPositionLeftOfImageMain(n)),"function"==typeof e.options.onMoveCrop&&e.options.onMoveCrop.call(e,{coords:e.getCropPosition()})},_moveCropZone:function(i,t){this._setPositionCoordsX(this._getLeftPercentOfContainer(i.left-t.x)),this._setPositionCoordsY(this._getTopPercentOfContainer(i.top-t.y)),this._setPositionOfCropZone()},_getTopPercentOfContainer:function(i){return i/this.container.height*100},_getLeftPercentOfContainer:function(i){return i/this.container.width*100},_hideInitializingElement:function(){this.element.$element.hide()},_createContainerDOMElement:function(){this.container.$element=i("<div/>").addClass(this.options.cropperContainerClass+" "+this.options.cropperContainerClassLoading).insertAfter(this.element.$element)},_updateContainerClass:function(){this._isMaskDefinedInOptions()?this.container.$element.addClass(this.options.cropperContainerClassHasMask):this.container.$element.removeClass(this.options.cropperContainerClassHasMask),this.options.enableCrop===!0?this.container.$element.addClass(this.options.cropperContainerClassEnabledCrop):this.container.$element.removeClass(this.options.cropperContainerClassEnabledCrop)},_updateDomImageMain:function(){this.options.imageMain!==this.imageMain.$element.attr("src")&&(this.imageMain.$element.attr("src",this.options.imageMain),this._updateCacheSizeOfImageMain())},_updateDomImageMask:function(){this.options.imageMask!==this.imageMask.$element.attr("src")&&(this.imageMask.$element.attr("src",this.options.imageMask),this._updateCacheSizeOfImageMask())},_setPositionOfCropZone:function(){this._adjustImageMainToMaskOrCropZone(),this._updateCSSForCropZoneSelection(),this._updateCSSForCropZoneTop(),this._updateCSSForCropZoneRight(),this._updateCSSForCropZoneBottom(),this._updateCSSForCropZoneLeft()},_updateCSSForCropZoneSelection:function(){var i={top:this.options.positionCoords.y+"%",left:this.options.positionCoords.x+"%",width:this.options.maskOptions.width+"%",height:this.options.maskOptions.height+"%"};this.cropZone.$element.find('[class*="'+this.options.cropZoneClass+'-selection"]').css(i)},_updateCSSForCropZoneTop:function(){var i=this.options,t={height:i.positionCoords.y+"%"};this.cropZone.$element.find('[class*="'+i.cropZoneClass+'-top"]').css(t)},_updateCSSForCropZoneRight:function(){var i=this.options,t={top:i.positionCoords.y+"%",height:i.maskOptions.height+"%",width:100-(i.positionCoords.x+i.maskOptions.width)+"%"};this.cropZone.$element.find('[class*="'+i.cropZoneClass+'-right"]').css(t)},_updateCSSForCropZoneBottom:function(){var i=this.options,t={height:100-(i.positionCoords.y+i.maskOptions.height)+"%"};this.cropZone.$element.find('[class*="'+i.cropZoneClass+'-bottom"]').css(t)},_updateCSSForCropZoneLeft:function(){var i=this.options,t={top:i.positionCoords.y+"%",height:i.maskOptions.height+"%",width:i.positionCoords.x+"%"};this.cropZone.$element.find('[class*="'+i.cropZoneClass+'-left"]').css(t)},_setPositionOfImageMain:function(){this._adjustImageMainToMaskOrCropZone(),("width"===this.imageMain.adjustedSize&&"undefined"==typeof topPercent||"height"===this.imageMain.adjustedSize&&"undefined"==typeof leftPercent)&&this._centerImageMainInMask()},_setPositionTopOfImageMain:function(i,t){var e=0;return this.imageMain.$element.css("top",i+"%"),t===!0?!1:(this._getPercentTopOfImageMain()>this.options.maskOptions.top&&this._setPositionTopOfImageMain(this.options.maskOptions.top,!0),e=100-(this.options.maskOptions.top+this.options.maskOptions.height),void(this._getPercentBottomOfImageMain()>e&&this._setPositionBottomOfImageMain(e,!0)))},_setPositionBottomOfImageMain:function(i,t){var e=(this.options.maskOptions.top+this.options.maskOptions.height)*this.container.height/100;this._setPositionTopOfImageMain(-((this.imageMain.height-e)/this.container.height*100),t)},_setPositionLeftOfImageMain:function(i,t){var e=0;return this.imageMain.$element.css("left",i+"%"),t===!0?!1:(this._getPercentLeftOfImageMain()>this.options.maskOptions.left&&this._setPositionLeftOfImageMain(this.options.maskOptions.left,!0),e=100-(this.options.maskOptions.left+this.options.maskOptions.width),void(this._getPercentRightOfImageMain()>e&&this._setPositionRightOfImageMain(e,!0)))},_setPositionRightOfImageMain:function(i,t){var e=(this.options.maskOptions.left+this.options.maskOptions.width)*this.container.width/100;this._setPositionLeftOfImageMain(-((this.imageMain.width-e)/this.container.width*100),t)},_getPercentLeftOfImageMain:function(){return this.imageMain.$element.position().left/this.container.width*100},_getPercentRightOfImageMain:function(){return 100-(this.imageMain.$element.position().left+this.imageMain.width)/this.container.width*100},_getPercentTopOfImageMain:function(){return this.imageMain.$element.position().top/this.container.height*100},_getPercentBottomOfImageMain:function(){return 100-(this.imageMain.$element.position().top+this.imageMain.height)/this.container.height*100},_centerImageMainInMask:function(){var i=this,t=this.options.maskOptions,e=n(this.imageMain.adjustedSize),o=function(){var i="width"===e?"left":"top";return t[i]+t[e]/2}(),s=o-function(){var t=i.imageMain[e]/2,n=t/i.imageMask[e]*100;return n}();return"width"===this.imageMain.adjustedSize?this._setPositionTopOfImageMain(s,!0):this._setPositionLeftOfImageMain(s,!0)},_adjustImageMainToMaskOrCropZone:function(){var i=this.options.maskOptions,t=this.imageMain.width/this.imageMain.height,e=i.width/i.height;return t-e>0?(this._isMaskDefinedInOptions()===!0&&(this.imageMain.$element.css({height:i.height+"%",top:i.top+"%",width:"auto",left:"auto"}),this.imageMain.adjustedSize="height"),this._updateCacheSizeOfImageMain()):(this._isMaskDefinedInOptions()===!0&&(this.imageMain.$element.css({width:i.width+"%",left:i.left+"%",height:"auto",top:"auto"}),this.imageMain.adjustedSize="width"),this._updateCacheSizeOfImageMain())},_removeImageMainStyles:function(){this.imageMain.$element.removeAttr("style")},_removeDomImageMask:function(){this.imageMask.$element.remove(),this.imageMask=Object.create(o)},_removeDomCropZone:function(){this.cropZone.$element.remove(),this.cropZone=Object.create(o)},_createDomImageMain:function(){var t=this.options.imageMainClass;this.imageMain.$element=i("<img/>").attr("src",this.options.imageMain||this.element.$element.attr("src")).addClass(t).appendTo(this.container.$element),this._updateCacheSizeOfImageMain()},_createDomCropZone:function(){var t=this.options.cropZoneClass;this.cropZone.$element=i('<div class="'+t+'"><div class="'+t+'-top"></div><div class="'+t+'-right"></div><div class="'+t+'-selection"><span></span><span></span></div><div class="'+t+'-bottom"></div><div class="'+t+'-left"></div></div>').appendTo(this.container.$element)},_createDomImageMask:function(){var t=this.options.imageMaskClass;this.imageMask.$element=i("<img/>").attr("src",this.options.imageMask).addClass(t).appendTo(this.container.$element),this._updateCacheSizeOfImageMask()},_setContainerCssHeight:function(i){this.container.$element.height(i),this._updateCacheSizeOfContainer()},_setMaxWidthOfContainer:function(){var t=1,e=i(window).height(),n=0,o=0;i.isNumeric(this.options.maxContainerMargin)&&(t=this._isMaskDefinedInOptions()?this.imageMask.originalWidth/this.imageMask.originalHeight:this.imageMain.originalWidth/this.imageMain.originalHeight,n=e-this.container.$element.height(),o=this.container.$element.width()+n*t,this.container.$element.css("max-width",Math.min(this.container.$element.parent().width(),o-this.options.maxContainerMargin)+"px"))},_getSizeOfGivenObject:function(i){return function(i){return{width:i.width(),height:i.height()}}(i)},_updateCacheSizeOfImageMain:function(){var i=this._getSizeOfGivenObject(this.imageMain.$element);this.imageMain.width=i.width,this.imageMain.height=i.height},_updateCacheSizeOfContainer:function(){var i=this._getSizeOfGivenObject(this.container.$element);this.container.width=i.width,this.container.height=i.height},_updateCacheSizeOfImageMask:function(){var i=this._getSizeOfGivenObject(this.imageMask.$element);this.imageMask.width=i.width,this.imageMask.height=i.height},_updateCacheSizeOfElement:function(){var i=this._getSizeOfGivenObject(this.element.$element);this.element.width=i.width,this.element.height=i.height},_isInitializingElementVisible:function(){return this.element.$element.is(":visible")},_isCropZoneExistingInDom:function(){var t=this.options.cropZoneClass,e=this.container.$element.find(i("."+t)).length>0;return e&&null===this.imageMain.$element&&(this.cropZone.$element=this.container.$element.find(i("."+t))),e},_isImageMaskExistingInDom:function(){var t=this.options.imageMaskClass,e=this.container.$element.find(i("."+t)).length>0;return e&&null===this.imageMain.$element&&(this.imageMask.$element=this.container.$element.find(i("."+t)),this._updateCacheSizeOfImageMask()),e},_isImageMainExistingInDom:function(){var t=this.options.imageMainClass,e=this.container.$element.find(i("."+t)).length>0;return e&&null===this.imageMain.$element&&(this.imageMain.$element=this.container.$element.find(i("."+t)),this._updateCacheSizeOfImageMain()),e},_isContainerExistingInDom:function(){var t=this.options.cropperContainerClass,e=this.element.$element.parent().find(i("."+t)).length>0;return e&&null===this.container.$element&&(this.container.$element=this.element.$element.parent().find(i("."+t)),this._updateCacheSizeOfContainer()),e},_isMaskDefinedInOptions:function(){return"string"==typeof this.options.imageMask&&this.options.imageMask.length>0},_setPositionCoordsY:function(t){var e=this;if(i.isNumeric(t)){if(this._isMaskDefinedInOptions())return;this.options.positionCoords.y=Math.max(Math.min(t,100-e.options.maskOptions.height),0)}},_setPositionCoordsX:function(t){var e=this;if(i.isNumeric(t)){if(this._isMaskDefinedInOptions())return;this.options.positionCoords.x=Math.max(Math.min(t,100-e.options.maskOptions.width),0)}},_setMaskOptionsHeight:function(i){return this.options.maskOptions.height=Math.min(Math.max(i,0),100)},_setMaskOptionsWidth:function(i){return this.options.maskOptions.width=Math.min(Math.max(i,0),100)}},i.fn.imageMaskCropper=function(t){this.maskCropperInstance=null;var e=this,n=i.extend(!0,i.fn.imageMaskCropper.defaults,function(){try{var t=e.attr("data-mask-image"),n=e.attr("src"),o={imageMask:t,imageMain:n};e.attr("data-mask-options")&&(o.maskOptions=i.parseJSON(e.attr("data-mask-options"))),e.attr("data-position-coords")&&(o.positionCoords=i.parseJSON(e.attr("data-position-coords")))}catch(s){return{}}return o}(),t);return window.maskCropperInstance=e.maskCropperInstance=new s(n,e),this.maskCropperInstance},i.fn.imageMaskCropper.defaults={imageMask:"",imageMain:"",maskOptions:{left:0,top:0,width:80,height:80},positionCoords:{x:0,y:20},enableCrop:!0,maxContainerMargin:!1,cropperContainerClass:"image-mask-cropper",cropperContainerClassHasMask:"has-mask",cropperContainerClassLoading:"images-loading",cropperContainerClassEnabledCrop:"enabled-crop",cropZoneClass:"cropper-crop-zone",imageMainClass:"cropper-image-main",imageMaskClass:"cropper-image-mask",isMobile:!1,onInitialized:function(){}||!1,onMoveCrop:function(){}||!1}});