dnm-croppr - npm Package Compare versions

Comparing version 2.4.1 to 2.4.2

dist/dnm-croppr.js

@@ -641,2 +641,3 @@ /**
       _classCallCheck(this, CropprCore);
+      this.initOptions = options;
       this.options = this.parseOptions(options);
@@ -846,2 +847,3 @@ element = this.getElement(element);
           _this4.getSourceSize();
+          _this4.options = _this4.parseOptions(_this4.initOptions);
           _this4.convertOptionsToPixels();
@@ -848,0 +850,0 @@ _this4.initializeBox(null, false);

dist/dnm-croppr.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Croppr=e()}(this,function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,e){return(o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function r(t,e,i){return(r="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=n(t)););return t}(t,e);if(o){var s=Object.getOwnPropertyDescriptor(o,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=[],n=!0,o=!1,s=void 0;try{for(var r,h=t[Symbol.iterator]();!(n=(r=h.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){o=!0,s=t}finally{try{n||null==h.return||h.return()}finally{if(o)throw s}}return i}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){e(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(t){}function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}e.prototype=Event.prototype,t.MouseEvent=e}(window);var l=function e(i,n,o,s){t(this,e);var r=this;function h(t){t.stopPropagation(),document.removeEventListener("mouseup",h),document.removeEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:r}}))}function l(t){t.stopPropagation(),r.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=i,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",function(t){t.stopPropagation(),document.addEventListener("mouseup",h),document.addEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:r}}))})},a=function(){function e(i,n,o,s){t(this,e),this.x1=i,this.y1=n,this.x2=o,this.y2=s}return i(e,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*i[0],o=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=o-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}},{key:"scale",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=this.width()*t,n=this.height()*t;return this.resize(i,n,e),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.width()*t[0],this.height()*t[1]]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}},{key:"getRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(null===t)return null;if(null===e)return t;var i=this.width()/this.height();if(t>e){var n=t;t=e,e=n}return i>e?e:i<t?t:i}},{key:"constrainToRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(null!==t){var o=this.width(),s=this.height();if(null!==n){var r=t;r>n&&(r=n,n=t);var h=o/s;if(h<r||h>n){var l=o,a=s;h>n?a=o/n:l=s*r,this.resize(l,a,e)}}else switch(i){case"height":this.resize(o,o/t,e);break;case"width":this.resize(s*t,s,e);break;default:this.resize(o,o/t,e)}return this}}},{key:"constrainToBoundary",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=h(this.getAbsolutePoint(i),2),o=n[0],s=n[1],r=o,l=s,a=t-o,u=e-s,v=-2*i[0]+1,d=-2*i[1]+1,c=null,p=null;switch(v){case-1:c=r;break;case 0:c=2*Math.min(r,a);break;case 1:c=a}switch(d){case-1:p=l;break;case 0:p=2*Math.min(l,u);break;case 1:p=u}if(this.width()>c){var g=c/this.width();this.scale(g,i)}if(this.height()>p){var m=p/this.height();this.scale(m,i)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,r=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,h=this.getRatio(s,r);if(t&&this.width()>t){var l=t,a=null===h?this.height():t/h;this.resize(l,a,o)}if(e&&this.height()>e){var u=null===h?this.width():e*h,v=e;this.resize(u,v,o)}if(i&&this.width()<i){var d=i,c=null===h?this.height():i/h;this.resize(d,c,o)}if(n&&this.height()<n){var p=null===h?this.width():n*h,g=n;this.resize(p,g,o)}return this}}]),e}();function u(t){t.preventDefault();var e=t.changedTouches[0];e.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}var v=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],d=function(){function e(i,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t(this,e),this.options=this.parseOptions(n),!(i=this.getElement(i)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:i.parentNode,element:i},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),s||(0===i.width||0===i.height?i.onload=function(){o.initialize(i)}:this.initialize(i))}return i(e,[{key:"initialize",value:function(t){var e=this;if(this.createDOM(t),this.getSourceSize(),this.convertOptionsToPixels(),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.cropperEl.onwheel=function(t){t.preventDefault();var i=t.deltaY;i=1+(i>0?1:-1)*(i=(i=Math.abs(i)/100)>.05?.05:i),e.scaleBy(i)},this.options.responsive){var i;window.onresize=function(){clearTimeout(i),i=setTimeout(function(){!function(){for(var t=e.options,i=e.responsiveData,n=["x","y","width","height"],o=0;o<n.length;o++)i[n[o]]*=100,i[n[o]]=i[n[o]]>100?100:i[n[o]]<0?0:i[n[o]];t.startPosition=[i.x,i.y,"%"],t.startSize=[i.width,i.height,"%"],t=e.parseOptions(t),t=e.convertOptionsToPixels(t),e.initializeBox(t)}()},100)}}}},{key:"getElement",value:function(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}},{key:"createDOM",value:function(t){var e;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(e=this.containerEl).addEventListener("touchstart",u),e.addEventListener("touchend",u),e.addEventListener("touchmove",u),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",t.getAttribute("src")),this.imageEl.setAttribute("alt",t.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<v.length;n++){var o=new l(v[n].position,v[n].constraints,v[n].cursor,this.eventBus);this.handles.push(o),i.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),t.parentElement.replaceChild(this.containerEl,t),this.setLivePreview()}},{key:"setLivePreview",value:function(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";var t=document.createElement("div");this.preview.container=this.preview.parent.appendChild(t),this.preview.container.style.overflow="hidden",this.preview.container.style.position="absolute",this.preview.container.style.top="50%",this.preview.container.style.left="50%",this.preview.container.style.transform="translate(-50%, -50%)"}}},{key:"resizePreview",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){var e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,o=this.sourceSize.width*t.width,s=this.sourceSize.height*t.height,r=o/s,h=e,l=i;n>r?h=l*r:l=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=l+"px";var a=this.sourceSize.width*h/o,u=this.sourceSize.height*l/s,v=-t.x*a,d=-t.y*u;this.preview.image.style.width=a+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=v+"px",this.preview.image.style.top=d+"px"}}},{key:"strictlyConstrain",value:function(){var t,e=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;null===n?(t=[[0,0],[1,1]],n=[.5,.5]):t=[n],null===i&&(i=this.options);var o=this.imageEl.getBoundingClientRect(),s=o.width,r=o.height;this.box.constrainToRatio(i.aspectRatio,n,"height",i.maxAspectRatio),this.box.constrainToSize(i.maxSize.width,i.maxSize.height,i.minSize.width,i.minSize.height,n,i.aspectRatio,i.maxAspectRatio),t.map(function(t){e.box.constrainToBoundary(s,r,t)})}},{key:"setImage",value:function(t,e){var i=this;return this.imageEl.onload=function(){i.getSourceSize(),i.convertOptionsToPixels(),i.initializeBox(null,!1),i.strictlyConstrain(),i.redraw(),e&&e()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.container.parentNode.removeChild(this.preview.container))}},{key:"initializeBox",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];null===t&&(t=this.options);var i=t.startSize.width,n=t.startSize.height;t.minSize&&(i<t.minSize.width?i=t.minSize.width:i<t.maxSize.width&&(i=t.maxSize.width)),t.maxSize&&(n<t.minSize.height?n=t.minSize.height:n<t.maxSize.height&&(n=t.maxSize.height));var o=new a(0,0,i,n),s=0,r=0;if(null===t.startPosition){var h=this.imageEl.getBoundingClientRect();s=h.width/2-i/2,r=h.height/2-n/2}else s=t.startPosition.x,r=t.startPosition.y;if(o.move(s,r),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);var l=document.createElement("img");l.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(l),this.preview.image.style.position="relative"}return!0===e&&this.strictlyConstrain(),this.box=o,this.redraw(),o}},{key:"getSourceSize",value:function(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}},{key:"convertor",value:function(t,e,i){var n=this;return"real"===e&&"px"===i?function(t){var e=n.imageEl.getBoundingClientRect(),i=e.width,o=e.height,s=n.sourceSize.width/i,r=n.sourceSize.height/o;return t.width&&(t.width/=s),t.x&&(t.x/=s),t.height&&(t.height/=r),t.y&&(t.y/=r),t}(t):"%"===e&&"px"===i?function(t){var e=n.imageEl.getBoundingClientRect(),i=e.width,o=e.height;return t.width&&(t.width=t.width/100*i),t.x&&(t.x=t.x/100*i),t.height&&(t.height=t.height/100*o),t.y&&(t.y=t.y/100*o),t}(t):null}},{key:"convertOptionsToPixels",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=!1;null===t&&(t=this.options,e=!0);for(var i=this.imageEl.getBoundingClientRect(),n=i.width,o=i.height,s=["maxSize","minSize","startSize","startPosition"],r=0;r<s.length;r++){var h=s[r];null!==t[h]&&("%"==t[h].unit?t[h]=this.convertor(t[h],"%","px"):!0===t[h].real&&(t[h]=this.convertor(t[h],"real","px")),delete t[h].unit)}if(t.minSize&&(t.minSize.width>n&&(t.minSize.width=n),t.minSize.height>o&&(t.minSize.height=o)),t.startSize&&t.startPosition){var l=t.startPosition.x+t.startSize.width;l>n&&(t.startPosition.x-=l-n);var a=t.startPosition.y+t.startSize.height;a>o&&(t.startPosition.y-=a-o)}return e&&(this.options=t),t}},{key:"redraw",value:function(){var t=this;this.resizePreview();var e=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate(".concat(n,"px, ").concat(o,"px)"),t.regionEl.style.width=e+"px",t.regionEl.style.height=i+"px",t.imageClippedEl.style.clip="rect(".concat(o,"px, ").concat(s,"px, ").concat(r,"px, ").concat(n,"px)");for(var h=t.box.getAbsolutePoint([.5,.5]),l=t.imageEl.getBoundingClientRect(),a=l.width,u=l.height,v=h[0]-a/2>>31,d=h[1]-u/2>>31,c=-2*((v^d)+d+d+4)+8,p=0;p<t.handles.length;p++){var g=t.handles[p],m=g.el.offsetWidth,f=g.el.offsetHeight,w=n+e*g.position[0]-m/2,y=o+i*g.position[1]-f/2;g.el.style.transform="translate(".concat(Math.round(w),"px, ").concat(Math.round(y),"px)"),g.el.style.zIndex=c==p?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){var t=this.eventBus;function e(e){e.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){var t=4,e=this,i=null;function n(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",n),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):e.box=i}this.overlayEl.addEventListener("mousedown",function(s){s.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",n);var r=e.cropperEl.getBoundingClientRect(),h=s.clientX-r.left,l=s.clientY-r.top;i=e.box,e.box=new a(h,l,h+1,l+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[t]}}))})}},{key:"onHandleMoveStart",value:function(t){var e=t.detail.handle,i=[1-e.position[0],1-e.position[1]],n=h(this.box.getAbsolutePoint(i),2),o=n[0],s=n[1];this.activeHandle={handle:e,originPoint:i,originX:o,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,i<0?i=0:i>o.width&&(i=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,u=1===l.constraints[0],v=1===l.constraints[1],d=1===l.constraints[2],c=1===l.constraints[3],p=(c||v)&&(u||d),g=c||v?r:this.box.x1,m=c||v?r:this.box.x2,f=u||d?h:this.box.y1,w=u||d?h:this.box.y2;g=c?i:g,m=v?i:m,f=u?n:f,w=d?n:w;var y=!1,E=!1;if((c||v)&&(y=c?i>r:i<r),(u||d)&&(E=u?n>h:n<h),y){var x=g;g=m,m=x,s[0]=1-s[0]}if(E){var b=f;f=w,w=b,s[1]=1-s[1]}var z=new a(g,f,m,w);if(this.options.aspectRatio){var C=this.options.aspectRatio,S=!1;p?S=n>z.y1+C*z.width()||n<z.y2-C*z.width():(u||d)&&(S=!0);var M=S?"width":"height";z.constrainToRatio(C,s,M,this.options.maxAspectRatio)}z.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,s,this.options.aspectRatio,this.options.maxAspectRatio);var k=this.imageEl.getBoundingClientRect(),P=k.width,A=k.height,B=[s];this.options.maxAspectRatio&&(B=[[0,0],[1,1]]),B.map(function(t){z.constrainToBoundary(P,A,t)}),this.box=z,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,this.currentMove={offsetX:i-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,h=this.cropperEl.getBoundingClientRect();i-=h.left,n-=h.top,this.box.move(i-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>h.width&&this.box.move(h.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>h.height&&this.box.move(null,h.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options.returnMode);var e={};return"real"==t?e=this.getValueAsRealData():"ratio"==t?e=this.getValueAsRatio():"raw"==t&&(e={x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}),this.options.responsive&&(this.responsiveData="ratio"==t?e:this.getValueAsRatio()),e}},{key:"getValueAsRealData",value:function(){var t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,i=this.imageEl.getBoundingClientRect(),n=t/i.width,o=e/i.height;return{x:Math.round(this.box.x1*n),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*n),height:Math.round(this.box.height()*o)}}},{key:"getValueAsRatio",value:function(){var t=this.imageEl.getBoundingClientRect(),e=t.width,i=t.height;return{x:this.box.x1/e,y:this.box.y1/i,width:this.box.width()/e,height:this.box.height()/i}}},{key:"parseOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options);var e=null,i=null,n={width:null,height:null,unit:"px",real:!1},o={width:null,height:null,unit:"px",real:!1},s={width:100,height:100,unit:"%",real:!1},r=null,h="real",l=null,a=null,u=null,v=null,d=null,c=!0,p=null;null!==t.preview&&(p=this.getElement(t.preview));var g=null;null!==t.responsive&&(g=t.responsive);for(var m=null,f=null,w=["aspectRatio","maxAspectRatio"],y=0;y<w.length;y++)if(void 0!==t[w[y]])if("number"==typeof t[w[y]]){var E=t[w[y]];"aspectRatio"===w[y]?m=E:f=E}else if(t[w[y]]instanceof Array){var x=t[w[y]][1]/t[w[y]][0];"aspectRatio"===w[y]?m=x:f=x}var b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px",real:t.minSize[3]||!1});var z=null;void 0!==t.minSize&&null!==t.minSize&&(z={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px",real:t.minSize[3]||!1});var C=null;void 0!==t.startSize&&null!==t.startSize&&(C={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%",real:t.startSize[3]||!1});var S=null;void 0!==t.startPosition&&null!==t.startPosition&&(S={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"%",real:t.startPosition[3]||!1});var M=null;"function"==typeof t.onInitialize&&(M=t.onInitialize);var k=null;"function"==typeof t.onCropStart&&(k=t.onCropStart);var P=null;"function"==typeof t.onCropEnd&&(P=t.onCropEnd);var A=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),A=t.onUpdate),"function"==typeof t.onCropMove&&(A=t.onCropMove);var B=null;if(void 0!==t.returnMode){var L=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(L))throw"Invalid return mode.";B=L}var O=function(t,e){return null!==t?t:e};return{aspectRatio:O(m,e),maxAspectRatio:O(f,i),maxSize:O(b,n),minSize:O(z,o),startSize:O(C,s),startPosition:O(S,r),returnMode:O(B,h),onInitialize:O(M,l),onCropStart:O(k,a),onCropMove:O(A,u),onCropEnd:O(P,v),preview:O(p,d),responsive:O(g,c)}}}]),e}();return function(e){function h(e,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return t(this,h),s(this,n(h).call(this,e,i,o))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}(h,d),i(h,[{key:"getValue",value:function(t){return r(n(h.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return r(n(h.prototype),"setImage",this).call(this,t,e)}},{key:"destroy",value:function(){return r(n(h.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,e){var i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"px";if("%"===n||"real"===n){var o=this.convertor({x:t,y:e},n,"px");t=o.x,e=o.y}return this.box.move(t,e),!0===i&&this.strictlyConstrain(null,[0,0]),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"px";if("%"===o||"real"===o){var s={width:t,height:e};t=(s=this.convertor(s,o,"px")).width,e=s.height}return null===i&&(i=[.5,.5]),this.box.resize(t,e,i),!0===n&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"setValue",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"%";return"%"!==i&&"real"!==i||(t=this.convertor(t,i,"px")),this.moveTo(t.x,t.y,!1),this.resizeTo(t.width,t.height,[0,0],e),this}},{key:"scaleBy",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return null===e&&(e=[.5,.5]),this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),h}()});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Croppr=e()}(this,function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,e){return(o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function r(t,e,i){return(r="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=n(t)););return t}(t,e);if(o){var s=Object.getOwnPropertyDescriptor(o,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=[],n=!0,o=!1,s=void 0;try{for(var r,h=t[Symbol.iterator]();!(n=(r=h.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){o=!0,s=t}finally{try{n||null==h.return||h.return()}finally{if(o)throw s}}return i}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){e(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(t){}function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}e.prototype=Event.prototype,t.MouseEvent=e}(window);var l=function e(i,n,o,s){t(this,e);var r=this;function h(t){t.stopPropagation(),document.removeEventListener("mouseup",h),document.removeEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:r}}))}function l(t){t.stopPropagation(),r.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=i,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",function(t){t.stopPropagation(),document.addEventListener("mouseup",h),document.addEventListener("mousemove",l),r.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:r}}))})},a=function(){function e(i,n,o,s){t(this,e),this.x1=i,this.y1=n,this.x2=o,this.y2=s}return i(e,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*i[0],o=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=o-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}},{key:"scale",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=this.width()*t,n=this.height()*t;return this.resize(i,n,e),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.width()*t[0],this.height()*t[1]]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}},{key:"getRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(null===t)return null;if(null===e)return t;var i=this.width()/this.height();if(t>e){var n=t;t=e,e=n}return i>e?e:i<t?t:i}},{key:"constrainToRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(null!==t){var o=this.width(),s=this.height();if(null!==n){var r=t;r>n&&(r=n,n=t);var h=o/s;if(h<r||h>n){var l=o,a=s;h>n?a=o/n:l=s*r,this.resize(l,a,e)}}else switch(i){case"height":this.resize(o,o/t,e);break;case"width":this.resize(s*t,s,e);break;default:this.resize(o,o/t,e)}return this}}},{key:"constrainToBoundary",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=h(this.getAbsolutePoint(i),2),o=n[0],s=n[1],r=o,l=s,a=t-o,u=e-s,v=-2*i[0]+1,d=-2*i[1]+1,c=null,p=null;switch(v){case-1:c=r;break;case 0:c=2*Math.min(r,a);break;case 1:c=a}switch(d){case-1:p=l;break;case 0:p=2*Math.min(l,u);break;case 1:p=u}if(this.width()>c){var g=c/this.width();this.scale(g,i)}if(this.height()>p){var m=p/this.height();this.scale(m,i)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,r=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,h=this.getRatio(s,r);if(t&&this.width()>t){var l=t,a=null===h?this.height():t/h;this.resize(l,a,o)}if(e&&this.height()>e){var u=null===h?this.width():e*h,v=e;this.resize(u,v,o)}if(i&&this.width()<i){var d=i,c=null===h?this.height():i/h;this.resize(d,c,o)}if(n&&this.height()<n){var p=null===h?this.width():n*h,g=n;this.resize(p,g,o)}return this}}]),e}();function u(t){t.preventDefault();var e=t.changedTouches[0];e.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}var v=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],d=function(){function e(i,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t(this,e),this.initOptions=n,this.options=this.parseOptions(n),!(i=this.getElement(i)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:i.parentNode,element:i},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),s||(0===i.width||0===i.height?i.onload=function(){o.initialize(i)}:this.initialize(i))}return i(e,[{key:"initialize",value:function(t){var e=this;if(this.createDOM(t),this.getSourceSize(),this.convertOptionsToPixels(),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.cropperEl.onwheel=function(t){t.preventDefault();var i=t.deltaY;i=1+(i>0?1:-1)*(i=(i=Math.abs(i)/100)>.05?.05:i),e.scaleBy(i)},this.options.responsive){var i;window.onresize=function(){clearTimeout(i),i=setTimeout(function(){!function(){for(var t=e.options,i=e.responsiveData,n=["x","y","width","height"],o=0;o<n.length;o++)i[n[o]]*=100,i[n[o]]=i[n[o]]>100?100:i[n[o]]<0?0:i[n[o]];t.startPosition=[i.x,i.y,"%"],t.startSize=[i.width,i.height,"%"],t=e.parseOptions(t),t=e.convertOptionsToPixels(t),e.initializeBox(t)}()},100)}}}},{key:"getElement",value:function(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}},{key:"createDOM",value:function(t){var e;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(e=this.containerEl).addEventListener("touchstart",u),e.addEventListener("touchend",u),e.addEventListener("touchmove",u),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",t.getAttribute("src")),this.imageEl.setAttribute("alt",t.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<v.length;n++){var o=new l(v[n].position,v[n].constraints,v[n].cursor,this.eventBus);this.handles.push(o),i.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),t.parentElement.replaceChild(this.containerEl,t),this.setLivePreview()}},{key:"setLivePreview",value:function(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";var t=document.createElement("div");this.preview.container=this.preview.parent.appendChild(t),this.preview.container.style.overflow="hidden",this.preview.container.style.position="absolute",this.preview.container.style.top="50%",this.preview.container.style.left="50%",this.preview.container.style.transform="translate(-50%, -50%)"}}},{key:"resizePreview",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){var e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,o=this.sourceSize.width*t.width,s=this.sourceSize.height*t.height,r=o/s,h=e,l=i;n>r?h=l*r:l=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=l+"px";var a=this.sourceSize.width*h/o,u=this.sourceSize.height*l/s,v=-t.x*a,d=-t.y*u;this.preview.image.style.width=a+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=v+"px",this.preview.image.style.top=d+"px"}}},{key:"strictlyConstrain",value:function(){var t,e=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;null===n?(t=[[0,0],[1,1]],n=[.5,.5]):t=[n],null===i&&(i=this.options);var o=this.imageEl.getBoundingClientRect(),s=o.width,r=o.height;this.box.constrainToRatio(i.aspectRatio,n,"height",i.maxAspectRatio),this.box.constrainToSize(i.maxSize.width,i.maxSize.height,i.minSize.width,i.minSize.height,n,i.aspectRatio,i.maxAspectRatio),t.map(function(t){e.box.constrainToBoundary(s,r,t)})}},{key:"setImage",value:function(t,e){var i=this;return this.imageEl.onload=function(){i.getSourceSize(),i.options=i.parseOptions(i.initOptions),i.convertOptionsToPixels(),i.initializeBox(null,!1),i.strictlyConstrain(),i.redraw(),e&&e()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.container.parentNode.removeChild(this.preview.container))}},{key:"initializeBox",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];null===t&&(t=this.options);var i=t.startSize.width,n=t.startSize.height;t.minSize&&(i<t.minSize.width?i=t.minSize.width:i<t.maxSize.width&&(i=t.maxSize.width)),t.maxSize&&(n<t.minSize.height?n=t.minSize.height:n<t.maxSize.height&&(n=t.maxSize.height));var o=new a(0,0,i,n),s=0,r=0;if(null===t.startPosition){var h=this.imageEl.getBoundingClientRect();s=h.width/2-i/2,r=h.height/2-n/2}else s=t.startPosition.x,r=t.startPosition.y;if(o.move(s,r),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);var l=document.createElement("img");l.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(l),this.preview.image.style.position="relative"}return!0===e&&this.strictlyConstrain(),this.box=o,this.redraw(),o}},{key:"getSourceSize",value:function(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}},{key:"convertor",value:function(t,e,i){var n=this;return"real"===e&&"px"===i?function(t){var e=n.imageEl.getBoundingClientRect(),i=e.width,o=e.height,s=n.sourceSize.width/i,r=n.sourceSize.height/o;return t.width&&(t.width/=s),t.x&&(t.x/=s),t.height&&(t.height/=r),t.y&&(t.y/=r),t}(t):"%"===e&&"px"===i?function(t){var e=n.imageEl.getBoundingClientRect(),i=e.width,o=e.height;return t.width&&(t.width=t.width/100*i),t.x&&(t.x=t.x/100*i),t.height&&(t.height=t.height/100*o),t.y&&(t.y=t.y/100*o),t}(t):null}},{key:"convertOptionsToPixels",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=!1;null===t&&(t=this.options,e=!0);for(var i=this.imageEl.getBoundingClientRect(),n=i.width,o=i.height,s=["maxSize","minSize","startSize","startPosition"],r=0;r<s.length;r++){var h=s[r];null!==t[h]&&("%"==t[h].unit?t[h]=this.convertor(t[h],"%","px"):!0===t[h].real&&(t[h]=this.convertor(t[h],"real","px")),delete t[h].unit)}if(t.minSize&&(t.minSize.width>n&&(t.minSize.width=n),t.minSize.height>o&&(t.minSize.height=o)),t.startSize&&t.startPosition){var l=t.startPosition.x+t.startSize.width;l>n&&(t.startPosition.x-=l-n);var a=t.startPosition.y+t.startSize.height;a>o&&(t.startPosition.y-=a-o)}return e&&(this.options=t),t}},{key:"redraw",value:function(){var t=this;this.resizePreview();var e=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate(".concat(n,"px, ").concat(o,"px)"),t.regionEl.style.width=e+"px",t.regionEl.style.height=i+"px",t.imageClippedEl.style.clip="rect(".concat(o,"px, ").concat(s,"px, ").concat(r,"px, ").concat(n,"px)");for(var h=t.box.getAbsolutePoint([.5,.5]),l=t.imageEl.getBoundingClientRect(),a=l.width,u=l.height,v=h[0]-a/2>>31,d=h[1]-u/2>>31,c=-2*((v^d)+d+d+4)+8,p=0;p<t.handles.length;p++){var g=t.handles[p],m=g.el.offsetWidth,f=g.el.offsetHeight,w=n+e*g.position[0]-m/2,y=o+i*g.position[1]-f/2;g.el.style.transform="translate(".concat(Math.round(w),"px, ").concat(Math.round(y),"px)"),g.el.style.zIndex=c==p?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){var t=this.eventBus;function e(e){e.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){var t=4,e=this,i=null;function n(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",n),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):e.box=i}this.overlayEl.addEventListener("mousedown",function(s){s.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",n);var r=e.cropperEl.getBoundingClientRect(),h=s.clientX-r.left,l=s.clientY-r.top;i=e.box,e.box=new a(h,l,h+1,l+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[t]}}))})}},{key:"onHandleMoveStart",value:function(t){var e=t.detail.handle,i=[1-e.position[0],1-e.position[1]],n=h(this.box.getAbsolutePoint(i),2),o=n[0],s=n[1];this.activeHandle={handle:e,originPoint:i,originX:o,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,i<0?i=0:i>o.width&&(i=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,h=this.activeHandle.originY,l=this.activeHandle.handle,u=1===l.constraints[0],v=1===l.constraints[1],d=1===l.constraints[2],c=1===l.constraints[3],p=(c||v)&&(u||d),g=c||v?r:this.box.x1,m=c||v?r:this.box.x2,f=u||d?h:this.box.y1,w=u||d?h:this.box.y2;g=c?i:g,m=v?i:m,f=u?n:f,w=d?n:w;var y=!1,E=!1;if((c||v)&&(y=c?i>r:i<r),(u||d)&&(E=u?n>h:n<h),y){var x=g;g=m,m=x,s[0]=1-s[0]}if(E){var b=f;f=w,w=b,s[1]=1-s[1]}var z=new a(g,f,m,w);if(this.options.aspectRatio){var C=this.options.aspectRatio,S=!1;p?S=n>z.y1+C*z.width()||n<z.y2-C*z.width():(u||d)&&(S=!0);var M=S?"width":"height";z.constrainToRatio(C,s,M,this.options.maxAspectRatio)}z.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,s,this.options.aspectRatio,this.options.maxAspectRatio);var k=this.imageEl.getBoundingClientRect(),P=k.width,A=k.height,O=[s];this.options.maxAspectRatio&&(O=[[0,0],[1,1]]),O.map(function(t){z.constrainToBoundary(P,A,t)}),this.box=z,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,this.currentMove={offsetX:i-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,h=this.cropperEl.getBoundingClientRect();i-=h.left,n-=h.top,this.box.move(i-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>h.width&&this.box.move(h.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>h.height&&this.box.move(null,h.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options.returnMode);var e={};return"real"==t?e=this.getValueAsRealData():"ratio"==t?e=this.getValueAsRatio():"raw"==t&&(e={x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}),this.options.responsive&&(this.responsiveData="ratio"==t?e:this.getValueAsRatio()),e}},{key:"getValueAsRealData",value:function(){var t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,i=this.imageEl.getBoundingClientRect(),n=t/i.width,o=e/i.height;return{x:Math.round(this.box.x1*n),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*n),height:Math.round(this.box.height()*o)}}},{key:"getValueAsRatio",value:function(){var t=this.imageEl.getBoundingClientRect(),e=t.width,i=t.height;return{x:this.box.x1/e,y:this.box.y1/i,width:this.box.width()/e,height:this.box.height()/i}}},{key:"parseOptions",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options);var e=null,i=null,n={width:null,height:null,unit:"px",real:!1},o={width:null,height:null,unit:"px",real:!1},s={width:100,height:100,unit:"%",real:!1},r=null,h="real",l=null,a=null,u=null,v=null,d=null,c=!0,p=null;null!==t.preview&&(p=this.getElement(t.preview));var g=null;null!==t.responsive&&(g=t.responsive);for(var m=null,f=null,w=["aspectRatio","maxAspectRatio"],y=0;y<w.length;y++)if(void 0!==t[w[y]])if("number"==typeof t[w[y]]){var E=t[w[y]];"aspectRatio"===w[y]?m=E:f=E}else if(t[w[y]]instanceof Array){var x=t[w[y]][1]/t[w[y]][0];"aspectRatio"===w[y]?m=x:f=x}var b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px",real:t.minSize[3]||!1});var z=null;void 0!==t.minSize&&null!==t.minSize&&(z={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px",real:t.minSize[3]||!1});var C=null;void 0!==t.startSize&&null!==t.startSize&&(C={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%",real:t.startSize[3]||!1});var S=null;void 0!==t.startPosition&&null!==t.startPosition&&(S={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"%",real:t.startPosition[3]||!1});var M=null;"function"==typeof t.onInitialize&&(M=t.onInitialize);var k=null;"function"==typeof t.onCropStart&&(k=t.onCropStart);var P=null;"function"==typeof t.onCropEnd&&(P=t.onCropEnd);var A=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),A=t.onUpdate),"function"==typeof t.onCropMove&&(A=t.onCropMove);var O=null;if(void 0!==t.returnMode){var B=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(B))throw"Invalid return mode.";O=B}var L=function(t,e){return null!==t?t:e};return{aspectRatio:L(m,e),maxAspectRatio:L(f,i),maxSize:L(b,n),minSize:L(z,o),startSize:L(C,s),startPosition:L(S,r),returnMode:L(O,h),onInitialize:L(M,l),onCropStart:L(k,a),onCropMove:L(A,u),onCropEnd:L(P,v),preview:L(p,d),responsive:L(g,c)}}}]),e}();return function(e){function h(e,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return t(this,h),s(this,n(h).call(this,e,i,o))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}(h,d),i(h,[{key:"getValue",value:function(t){return r(n(h.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;return r(n(h.prototype),"setImage",this).call(this,t,e)}},{key:"destroy",value:function(){return r(n(h.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,e){var i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"px";if("%"===n||"real"===n){var o=this.convertor({x:t,y:e},n,"px");t=o.x,e=o.y}return this.box.move(t,e),!0===i&&this.strictlyConstrain(null,[0,0]),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"px";if("%"===o||"real"===o){var s={width:t,height:e};t=(s=this.convertor(s,o,"px")).width,e=s.height}return null===i&&(i=[.5,.5]),this.box.resize(t,e,i),!0===n&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"setValue",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"%";return"%"!==i&&"real"!==i||(t=this.convertor(t,i,"px")),this.moveTo(t.x,t.y,!1),this.resizeTo(t.width,t.height,[0,0],e),this}},{key:"scaleBy",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return null===e&&(e=[.5,.5]),this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),h}()});

examples/index.js

 var croppr = new Croppr("#cropper", {
     returnMode: "ratio",
     responsive: true,
-    //startSize: [2000, 100, "px", true],
-    startSize: [800, 300, "px", true],
-    //aspectRatio: 2,
-    //maxAspectRatio: 1/1,
+    startSize: [500, 800, "px", true],
+    aspectRatio: 0.5,
+    maxAspectRatio: 1,
     preview: "#cropPreview",
@@ -13,2 +12,14 @@ onInitialize: instance => {},
     onCropMove: data => {}
-});
+});
+
+var setImageBtn = document.getElementsByClassName("setImage");
+
+for(var i=0; i < setImageBtn.length; i++) {
+    setImageBtn[i].addEventListener("click", function() {
+        var callback = function() {
+            console.log("New image loaded : " + src)
+        };
+        var src = this.getAttribute("data-img");
+        croppr.setImage(src, callback);
+    })
+}

package.json

 {
   "name": "dnm-croppr",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "A fork of original Croppr.js, a vanilla JavaScript image cropper, with advanced options.",
@@ -8,3 +8,3 @@ "main": "src/index.js",
     "build": "rollup --config rollup.config.dev.js",
-    "watch": "onchange \"src/**/*.*\" -v -- npm run build",
+    "dev": "onchange \"src/**/*.*\" -v -- npm run build",
     "production": "rollup --config rollup.config.prod.js & cleancss dist/dnm-croppr.css -o dist/dnm-croppr.min.css",
@@ -11,0 +11,0 @@ "dist": "npm run build && npm run production"

README.md

@@ -226,3 +226,3 @@ ![Croppr.js](https://raw.githubusercontent.com/devdanim/dnm-croppr/master/assets/logo.png)
 
-#### setImage(src: string)
+#### setImage(src: string, _callback?: function_)
 
@@ -229,0 +229,0 @@ Changes the image src. Returns the Croppr instance.

src/core.js

@@ -37,2 +37,5 @@ /**
 
+    //Save options before parsing
+    this.initOptions = options;
+
     // Parse options
@@ -303,2 +306,3 @@ this.options = this.parseOptions(options);
       this.getSourceSize();
+      this.options = this.parseOptions(this.initOptions);
       this.convertOptionsToPixels();
@@ -305,0 +309,0 @@ this.initializeBox(null, false);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

313287

increased by0.28%

Lines of code

3320

increased by0.45%

No dependency changes