dnm-croppr - npm Package Compare versions

Comparing version 2.4.5 to 2.4.6

dist/dnm-croppr.js

@@ -472,9 +472,10 @@ /**
       this.getSourceSize();
-      this.convertOptionsToPixels();
       this.attachHandlerEvents();
       this.attachRegionEvents();
       this.attachOverlayEvents();
+      this.showModal("init");
       this.initializeBox(null, false);
       this.strictlyConstrain();
       this.redraw();
+      this.resetModal("init");
       this._initialized = true;
@@ -509,4 +510,5 @@ if (this.options.onInitialize !== null) {
           newOptions = this.parseOptions(newOptions);
-          newOptions = this.convertOptionsToPixels(newOptions);
+          this.showModal("onResize");
           this.initializeBox(newOptions);
+          this.resetModal("onResize");
         };
@@ -635,6 +637,7 @@ window.onresize = function () {
         this.options = this.parseOptions(this.initOptions);
-        this.convertOptionsToPixels();
+        this.showModal("setImage");
         this.initializeBox(null, false);
         this.strictlyConstrain();
         this.redraw();
+        this.resetModal("setImage");
         if (callback) callback();
@@ -660,2 +663,3 @@ };
       if (opts === null) opts = this.options;
+      this.convertOptionsToPixels(opts);
       let boxWidth = opts.startSize.width;
@@ -706,2 +710,49 @@ let boxHeight = opts.startSize.height;
     }
+    showModal(operationName = "default") {
+      let modalStyle = this.modalStyle;
+      if (modalStyle && modalStyle.modalIsDisplayed === true) {
+        return modalStyle;
+      }
+      if (this.options.modal) {
+        let {
+          modal
+        } = this.options;
+        let display = modal.currentStyle ? modal.currentStyle.display : getComputedStyle(modal, null).display;
+        let visibility = modal.currentStyle ? modal.currentStyle.visibility : getComputedStyle(modal, null).visibility;
+        modalStyle = {
+          operationName: operationName,
+          modalIsDisplayed: true,
+          display: display,
+          visibility: visibility
+        };
+        this.modalStyle = modalStyle;
+        if (display === "none") {
+          modal.style.visibility = "hidden";
+          modal.style.display = "block";
+        }
+      }
+      return modalStyle;
+    }
+    resetModal(oldOperationName = "default") {
+      let modalStyle = this.modalStyle;
+      if (modalStyle) {
+        let {
+          visibility,
+          display,
+          operationName,
+          modalIsDisplayed
+        } = modalStyle;
+        if (modalIsDisplayed && oldOperationName === operationName) {
+          let {
+            modal
+          } = this.options;
+          modal.style.visibility = visibility;
+          modal.style.display = display;
+          this.modalStyle = {
+            operationName: null,
+            modalIsDisplayed: false
+          };
+        }
+      }
+    }
     getSourceSize() {
@@ -715,2 +766,3 @@ this.sourceSize = {};
       const convertRealDataToPixel = data => {
+        this.showModal();
         const {
@@ -720,2 +772,3 @@ width,
         } = this.imageEl.getBoundingClientRect();
+        this.resetModal();
         const factorX = this.sourceSize.width / width;
@@ -738,2 +791,3 @@ const factorY = this.sourceSize.height / height;
       const convertPercentToPixel = data => {
+        this.showModal();
         const {
@@ -743,2 +797,3 @@ width,
         } = this.imageEl.getBoundingClientRect();
+        this.resetModal();
         if (data.width) {
@@ -1097,2 +1152,3 @@ data.width = data.width / 100 * width;
     getValueAsRealData() {
+      this.showModal();
       const actualWidth = this.imageEl.naturalWidth;
@@ -1106,2 +1162,3 @@ const actualHeight = this.imageEl.naturalHeight;
       const factorY = actualHeight / elementHeight;
+      this.resetModal();
       return {
@@ -1115,2 +1172,3 @@ x: Math.round(this.box.x1 * factorX),
     getValueAsRatio() {
+      this.showModal();
       const {
@@ -1120,2 +1178,3 @@ width: elementWidth,
       } = this.imageEl.getBoundingClientRect();
+      this.resetModal();
       return {
@@ -1158,6 +1217,9 @@ x: this.box.x1 / elementWidth,
         preview: null,
-        responsive: true
+        responsive: true,
+        modal: null
       };
       let preview = null;
       if (opts.preview !== null) preview = this.getElement(opts.preview);
+      let modal = null;
+      if (opts.modal !== null) modal = this.getElement(opts.modal);
       let responsive = null;
@@ -1257,3 +1319,4 @@ if (opts.responsive !== null) responsive = opts.responsive;
         preview: defaultValue(preview, defaults.preview),
-        responsive: defaultValue(responsive, defaults.responsive)
+        responsive: defaultValue(responsive, defaults.responsive),
+        modal: defaultValue(modal, defaults.modal)
       };
@@ -1295,2 +1358,3 @@ }
     moveTo(x, y, constrain = true, mode = "px") {
+      this.showModal("moveTo");
       if (mode === "%" || mode === "real") {
@@ -1307,2 +1371,3 @@ let data = this.convertor({
       this.redraw();
+      this.resetModal("moveTo");
       if (this.options.onCropEnd !== null) {
@@ -1321,2 +1386,3 @@ this.options.onCropEnd(this.getValue());
     resizeTo(width, height, origin = null, constrain = true, mode = "px") {
+      this.showModal("resize");
       if (mode === "%" || mode === "real") {
@@ -1335,2 +1401,3 @@ let data = {
       this.redraw();
+      this.resetModal("resize");
       if (this.options.onCropEnd !== null) {
@@ -1342,5 +1409,9 @@ this.options.onCropEnd(this.getValue());
     setValue(data, constrain = true, mode = "%") {
-      if (mode === "%" || mode === "real") data = this.convertor(data, mode, "px");
+      this.showModal("setValue");
+      if (mode === "%" || mode === "real") {
+        data = this.convertor(data, mode, "px");
+      }
       this.moveTo(data.x, data.y, false);
       this.resizeTo(data.width, data.height, [0, 0], constrain);
+      this.resetModal("setValue");
       return this;
@@ -1356,5 +1427,7 @@ }
       if (origin === null) origin = [.5, .5];
+      this.showModal("scaleBy");
       this.box.scale(factor, origin);
       if (constrain === true) this.strictlyConstrain();
       this.redraw();
+      this.resetModal("scaleBy");
       if (this.options.onCropEnd !== null) {
@@ -1366,4 +1439,6 @@ this.options.onCropEnd(this.getValue());
     reset() {
+      this.showModal("reset");
       this.box = this.initializeBox(this.options);
       this.redraw();
+      this.resetModal("reset");
       if (this.options.onCropEnd !== null) {
@@ -1370,0 +1445,0 @@ this.options.onCropEnd(this.getValue());

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(){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(),s=Math.max(0,16-(n-t)),o=window.setTimeout(function(){e(n+s)},s);return t=n+s,o}),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);class t{constructor(t,e,i,n){var s=this;function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",h),s.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:s}}))}function h(t){t.stopPropagation(),s.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=t,this.constraints=e,this.cursor=i,this.eventBus=n,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",function(t){t.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",h),s.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:s}}))})}}class e{constructor(t,e,i,n){this.x1=t,this.y1=e,this.x2=i,this.y2=n}set(t=null,e=null,i=null,n=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}width(){return Math.abs(this.x2-this.x1)}height(){return Math.abs(this.y2-this.y1)}resize(t,e,i=[0,0]){const n=this.x1+this.width()*i[0],s=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=s-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}scale(t,e=[0,0],i=null,n=null){const s=this.width()*t,o=this.height()*t;return this.resize(s,o,e),this}move(t=null,e=null){let 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}getRelativePoint(t=[0,0]){return[this.width()*t[0],this.height()*t[1]]}getAbsolutePoint(t=[0,0]){return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}getRatio(t=null,e=null){if(null===t)return null;if(null===e)return t;const i=this.width()/this.height();if(t>e){let i=t;t=e,e=i}return i>e?e:i<t?t:i}constrainToRatio(t=null,e=[0,0],i="height",n=null){if(null===t)return;const s=this.width(),o=this.height();if(null!==n){let i=t;i>n&&(i=n,n=t);let h=s/o;if(h<i||h>n){let t=s,l=o;h>n?l=s/n:t=o*i,this.resize(t,l,e)}}else switch(i){case"height":this.resize(s,s/t,e);break;case"width":this.resize(o*t,o,e);break;default:this.resize(s,s/t,e)}return this}constrainToBoundary(t,e,i=[0,0]){const[n,s]=this.getAbsolutePoint(i),o=n,h=s,l=t-n,r=e-s,a=-2*i[0]+1,u=-2*i[1]+1;let[d,p]=[null,null];switch(a){case-1:d=o;break;case 0:d=2*Math.min(o,l);break;case 1:d=l}switch(u){case-1:p=h;break;case 0:p=2*Math.min(h,r);break;case 1:p=r}if(this.width()>d){const t=d/this.width();this.scale(t,i)}if(this.height()>p){const t=p/this.height();this.scale(t,i)}return this}constrainToSize(t=null,e=null,i=null,n=null,s=[0,0],o=null,h=null){let l=this.getRatio(o,h);if(t&&this.width()>t){const e=t,i=null===l?this.height():t/l;this.resize(e,i,s)}if(e&&this.height()>e){const t=null===l?this.width():e*l,i=e;this.resize(t,i,s)}if(i&&this.width()<i){const t=i,e=null===l?this.height():i/l;this.resize(t,e,s)}if(n&&this.height()<n){const t=null===l?this.width():n*l,e=n;this.resize(t,e,s)}return this}}function i(t){t.preventDefault();const 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}))}const n=[{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"}];class s{constructor(t,e,i=!1){if(this.initOptions=e,this.options=this.parseOptions(e),!(t=this.getElement(t)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),i||(0===t.width||0===t.height?t.onload=(()=>{this.initialize(t)}):this.initialize(t))}initialize(t){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=(t=>{t.preventDefault();let{deltaY:e}=t;e=1+(e>0?1:-1)*(e=(e=Math.abs(e)/100)>.05?.05:e),this.scaleBy(e)}),this.options.responsive){let t;const e=()=>{let t=this.options,e=this.responsiveData;const i=["x","y","width","height"];for(var n=0;n<i.length;n++)e[i[n]]*=100,e[i[n]]=e[i[n]]>100?100:e[i[n]]<0?0:e[i[n]];t.startPosition=[e.x,e.y,"%"],t.startSize=[e.width,e.height,"%"],t=this.parseOptions(t),t=this.convertOptionsToPixels(t),this.initializeBox(t)};window.onresize=function(){clearTimeout(t),t=setTimeout(()=>{e()},100)}}}getElement(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}createDOM(e){var s;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(s=this.containerEl).addEventListener("touchstart",i),s.addEventListener("touchend",i),s.addEventListener("touchmove",i),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.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";let o=document.createElement("div");o.className="croppr-handleContainer",this.handles=[];for(let e=0;e<n.length;e++){const i=new t(n[e].position,n[e].constraints,n[e].cursor,this.eventBus);this.handles.push(i),o.appendChild(i.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(o),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e),this.setLivePreview()}setLivePreview(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";let 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%)"}}resizePreview(t=null){if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){const e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,s=this.sourceSize.width*t.width,o=this.sourceSize.height*t.height,h=s/o;let l=e,r=i;n>h?l=r*h:r=l/h,this.preview.container.style.width=l+"px",this.preview.container.style.height=r+"px";let a=this.sourceSize.width*l/s,u=this.sourceSize.height*r/o,d=-t.x*a,p=-t.y*u;this.preview.image.style.width=a+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=d+"px",this.preview.image.style.top=p+"px"}}strictlyConstrain(t=null,e=null){let i;null===e?(i=[[0,0],[1,1]],e=[.5,.5]):i=[e],null===t&&(t=this.options);const{width:n,height:s}=this.imageEl.getBoundingClientRect();this.box.constrainToRatio(t.aspectRatio,e,"height",t.maxAspectRatio),this.box.constrainToSize(t.maxSize.width,t.maxSize.height,t.minSize.width,t.minSize.height,e,t.aspectRatio,t.maxAspectRatio),i.map(t=>{this.box.constrainToBoundary(n,s,t)})}setImage(t,e){return this.imageEl.onload=(()=>{this.getSourceSize(),this.options=this.parseOptions(this.initOptions),this.convertOptionsToPixels(),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),e&&e()}),this.imageEl.src=t,this.imageClippedEl.src=t,this}destroy(){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))}initializeBox(t=null,i=!0){null===t&&(t=this.options);let n=t.startSize.width,s=t.startSize.height;t.minSize&&(n<t.minSize.width?n=t.minSize.width:n<t.maxSize.width&&(n=t.maxSize.width)),t.maxSize&&(s<t.minSize.height?s=t.minSize.height:s<t.maxSize.height&&(s=t.maxSize.height));let o=new e(0,0,n,s),h=0,l=0;if(null===t.startPosition){const{width:t,height:e}=this.imageEl.getBoundingClientRect();h=t/2-n/2,l=e/2-s/2}else h=t.startPosition.x,l=t.startPosition.y;if(o.move(h,l),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);let t=document.createElement("img");t.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(t),this.preview.image.style.position="relative"}!0===i&&this.strictlyConstrain(),this.box=o,this.redraw();for(var r=0;r<this.handles.length;r++)!this.options.maxAspectRatio||.5!=this.handles[r].position[0]&&.5!=this.handles[r].position[1]?this.handles[r].el.style.display="block":this.handles[r].el.style.display="none";return o}getSourceSize(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}convertor(t,e,i){const n=t=>{const{width:e,height:i}=this.imageEl.getBoundingClientRect();return t.width&&(t.width=t.width/100*e),t.x&&(t.x=t.x/100*e),t.height&&(t.height=t.height/100*i),t.y&&(t.y=t.y/100*i),t};return"real"===e&&"px"===i?(t=>{const{width:e,height:i}=this.imageEl.getBoundingClientRect(),n=this.sourceSize.width/e,s=this.sourceSize.height/i;return t.width&&(t.width/=n),t.x&&(t.x/=n),t.height&&(t.height/=s),t.y&&(t.y/=s),t})(t):"%"===e&&"px"===i?n(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:n}=this.imageEl.getBoundingClientRect(),s=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<s.length;e++){const i=s[e];null!==t[i]&&("%"==t[i].unit?t[i]=this.convertor(t[i],"%","px"):!0===t[i].real&&(t[i]=this.convertor(t[i],"real","px")),delete t[i].unit)}if(t.minSize&&(t.minSize.width>i&&(t.minSize.width=i),t.minSize.height>n&&(t.minSize.height=n)),t.startSize&&t.startPosition){let e=t.startPosition.x+t.startSize.width;e>i&&(t.startPosition.x-=e-i);let s=t.startPosition.y+t.startSize.height;s>n&&(t.startPosition.y-=s-n)}return e&&(this.options=t),t}redraw(){this.resizePreview();const t=Math.round(this.box.width()),e=Math.round(this.box.height()),i=Math.round(this.box.x1),n=Math.round(this.box.y1),s=Math.round(this.box.x2),o=Math.round(this.box.y2);window.requestAnimationFrame(()=>{this.regionEl.style.transform=`translate(${i}px, ${n}px)`,this.regionEl.style.width=t+"px",this.regionEl.style.height=e+"px",this.imageClippedEl.style.clip=`rect(${n}px, ${s}px, ${o}px, ${i}px)`;const h=this.box.getAbsolutePoint([.5,.5]),{width:l,height:r}=this.imageEl.getBoundingClientRect(),a=h[0]-l/2>>31,u=h[1]-r/2>>31,d=-2*((a^u)+u+u+4)+8;for(let s=0;s<this.handles.length;s++){let o=this.handles[s];const h=o.el.offsetWidth,l=o.el.offsetHeight,r=i+t*o.position[0]-h/2,a=n+e*o.position[1]-l/2;o.el.style.transform=`translate(${Math.round(r)}px, ${Math.round(a)}px)`,o.el.style.zIndex=d==s?5:4}})}attachHandlerEvents(){const t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}attachRegionEvents(){const 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))}attachOverlayEvents(){const t=4,i=this;let n=null;function s(t){t.stopPropagation(),i.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",s),1!==i.box.width()||1!==i.box.height()?i.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):i.box=n}this.overlayEl.addEventListener("mousedown",function(h){h.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",s);const l=i.cropperEl.getBoundingClientRect(),r=h.clientX-l.left,a=h.clientY-l.top;n=i.box,i.box=new e(r,a,r+1,a+1),i.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:i.handles[t]}}))})}onHandleMoveStart(t){let e=t.detail.handle;const i=[1-e.position[0],1-e.position[1]];let[n,s]=this.box.getAbsolutePoint(i);this.activeHandle={handle:e,originPoint:i,originX:n,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onHandleMoveMoving(t){let{mouseX:i,mouseY:n}=t.detail,s=this.cropperEl.getBoundingClientRect();i-=s.left,n-=s.top,i<0?i=0:i>s.width&&(i=s.width),n<0?n=0:n>s.height&&(n=s.height);let o=this.activeHandle.originPoint.slice();const h=this.activeHandle.originX,l=this.activeHandle.originY,r=this.activeHandle.handle,a=1===r.constraints[0],u=1===r.constraints[1],d=1===r.constraints[2],p=1===r.constraints[3],c=(p||u)&&(a||d);let m=p||u?h:this.box.x1,v=p||u?h:this.box.x2,g=a||d?l:this.box.y1,w=a||d?l:this.box.y2;m=p?i:m,v=u?i:v,g=a?n:g,w=d?n:w;let[E,x]=[!1,!1];if((p||u)&&(E=p?i>h:i<h),(a||d)&&(x=a?n>l:n<l),E){const t=m;m=v,v=t,o[0]=1-o[0]}if(x){const t=g;g=w,w=t,o[1]=1-o[1]}let f=new e(m,g,v,w);if(this.options.aspectRatio){let t=this.options.aspectRatio,e=!1;c?e=n>f.y1+t*f.width()||n<f.y2-t*f.width():(a||d)&&(e=!0);const i=e?"width":"height";f.constrainToRatio(t,o,i,this.options.maxAspectRatio)}f.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,o,this.options.aspectRatio,this.options.maxAspectRatio);const{width:z,height:y}=this.imageEl.getBoundingClientRect();let b=[o];this.options.maxAspectRatio&&(b=[[0,0],[1,1]]),b.map(t=>{f.constrainToBoundary(z,y,t)}),this.box=f,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onHandleMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}onRegionMoveStart(t){let{mouseX:e,mouseY:i}=t.detail,n=this.cropperEl.getBoundingClientRect();e-=n.left,i-=n.top,this.currentMove={offsetX:e-this.box.x1,offsetY:i-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onRegionMoveMoving(t){let{mouseX:e,mouseY:i}=t.detail,{offsetX:n,offsetY:s}=this.currentMove,o=this.cropperEl.getBoundingClientRect();e-=o.left,i-=o.top,this.box.move(e-n,i-s),this.box.x1<0&&this.box.move(0,null),this.box.x2>o.width&&this.box.move(o.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>o.height&&this.box.move(null,o.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onRegionMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}getValue(t=null){null===t&&(t=this.options.returnMode);let 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}getValueAsRealData(){const t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,{width:i,height:n}=this.imageEl.getBoundingClientRect(),s=t/i,o=e/n;return{x:Math.round(this.box.x1*s),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*s),height:Math.round(this.box.height()*o)}}getValueAsRatio(){const{width:t,height:e}=this.imageEl.getBoundingClientRect();return{x:this.box.x1/t,y:this.box.y1/e,width:this.box.width()/t,height:this.box.height()/e}}parseOptions(t=null){null===t&&(t=this.options);const e=null,i=null,n={width:null,height:null,unit:"px",real:!1},s={width:null,height:null,unit:"px",real:!1},o={width:100,height:100,unit:"%",real:!1},h=null,l="real",r=null,a=null,u=null,d=null,p=null,c=!0;let m=null;null!==t.preview&&(m=this.getElement(t.preview));let v=null;null!==t.responsive&&(v=t.responsive);let g=null,w=null;const E=["aspectRatio","maxAspectRatio"];for(var x=0;x<E.length;x++)if(void 0!==t[E[x]])if("number"==typeof t[E[x]]){let e=t[E[x]];"aspectRatio"===E[x]?g=e:w=e}else if(t[E[x]]instanceof Array){let e=t[E[x]][1]/t[E[x]][0];"aspectRatio"===E[x]?g=e:w=e}let f=null;void 0!==t.maxSize&&null!==t.maxSize&&(f={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px",real:t.minSize[3]||!1});let 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});let y=null;void 0!==t.startSize&&null!==t.startSize&&(y={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%",real:t.startSize[3]||!1});let b=null;void 0!==t.startPosition&&null!==t.startPosition&&(b={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"%",real:t.startPosition[3]||!1});let C=null;"function"==typeof t.onInitialize&&(C=t.onInitialize);let S=null;"function"==typeof t.onCropStart&&(S=t.onCropStart);let M=null;"function"==typeof t.onCropEnd&&(M=t.onCropEnd);let P=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."),P=t.onUpdate),"function"==typeof t.onCropMove&&(P=t.onCropMove);let B=null;if(void 0!==t.returnMode){const e=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(e))throw"Invalid return mode.";B=e}const A=(t,e)=>null!==t?t:e;return{aspectRatio:A(g,e),maxAspectRatio:A(w,i),maxSize:A(f,n),minSize:A(z,s),startSize:A(y,o),startPosition:A(b,h),returnMode:A(B,l),onInitialize:A(C,r),onCropStart:A(S,a),onCropMove:A(P,u),onCropEnd:A(M,d),preview:A(m,p),responsive:A(v,c)}}}return class extends s{constructor(t,e,i=!1){super(t,e,i)}getValue(t){return super.getValue(t)}setImage(t,e=null){return super.setImage(t,e)}destroy(){return super.destroy()}moveTo(t,e,i=!0,n="px"){if("%"===n||"real"===n){let i=this.convertor({x:t,y:e},n,"px");t=i.x,e=i.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}resizeTo(t,e,i=null,n=!0,s="px"){if("%"===s||"real"===s){let i={width:t,height:e};t=(i=this.convertor(i,s,"px")).width,e=i.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}setValue(t,e=!0,i="%"){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}scaleBy(t,e=null,i=!0){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}reset(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}});
+!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(){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 s=(new Date).getTime(),n=Math.max(0,16-(s-t)),o=window.setTimeout(function(){e(s+n)},n);return t=s+n,o}),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 s=document.createEvent("MouseEvent");return s.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),s}e.prototype=Event.prototype,t.MouseEvent=e}(window);class t{constructor(t,e,i,s){var n=this;function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",l),n.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:n}}))}function l(t){t.stopPropagation(),n.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=t,this.constraints=e,this.cursor=i,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=i,this.el.addEventListener("mousedown",function(t){t.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",l),n.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:n}}))})}}class e{constructor(t,e,i,s){this.x1=t,this.y1=e,this.x2=i,this.y2=s}set(t=null,e=null,i=null,s=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==s?this.y2:s,this}width(){return Math.abs(this.x2-this.x1)}height(){return Math.abs(this.y2-this.y1)}resize(t,e,i=[0,0]){const s=this.x1+this.width()*i[0],n=this.y1+this.height()*i[1];return this.x1=s-t*i[0],this.y1=n-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}scale(t,e=[0,0],i=null,s=null){const n=this.width()*t,o=this.height()*t;return this.resize(n,o,e),this}move(t=null,e=null){let i=this.width(),s=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+s,this}getRelativePoint(t=[0,0]){return[this.width()*t[0],this.height()*t[1]]}getAbsolutePoint(t=[0,0]){return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}getRatio(t=null,e=null){if(null===t)return null;if(null===e)return t;const i=this.width()/this.height();if(t>e){let i=t;t=e,e=i}return i>e?e:i<t?t:i}constrainToRatio(t=null,e=[0,0],i="height",s=null){if(null===t)return;const n=this.width(),o=this.height();if(null!==s){let i=t;i>s&&(i=s,s=t);let l=n/o;if(l<i||l>s){let t=n,h=o;l>s?h=n/s:t=o*i,this.resize(t,h,e)}}else switch(i){case"height":this.resize(n,n/t,e);break;case"width":this.resize(o*t,o,e);break;default:this.resize(n,n/t,e)}return this}constrainToBoundary(t,e,i=[0,0]){const[s,n]=this.getAbsolutePoint(i),o=s,l=n,h=t-s,r=e-n,a=-2*i[0]+1,u=-2*i[1]+1;let[d,p]=[null,null];switch(a){case-1:d=o;break;case 0:d=2*Math.min(o,h);break;case 1:d=h}switch(u){case-1:p=l;break;case 0:p=2*Math.min(l,r);break;case 1:p=r}if(this.width()>d){const t=d/this.width();this.scale(t,i)}if(this.height()>p){const t=p/this.height();this.scale(t,i)}return this}constrainToSize(t=null,e=null,i=null,s=null,n=[0,0],o=null,l=null){let h=this.getRatio(o,l);if(t&&this.width()>t){const e=t,i=null===h?this.height():t/h;this.resize(e,i,n)}if(e&&this.height()>e){const t=null===h?this.width():e*h,i=e;this.resize(t,i,n)}if(i&&this.width()<i){const t=i,e=null===h?this.height():i/h;this.resize(t,e,n)}if(s&&this.height()<s){const t=null===h?this.width():s*h,e=s;this.resize(t,e,n)}return this}}function i(t){t.preventDefault();const 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}))}const s=[{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"}];class n{constructor(t,e,i=!1){if(this.initOptions=e,this.options=this.parseOptions(e),!(t=this.getElement(t)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),i||(0===t.width||0===t.height?t.onload=(()=>{this.initialize(t)}):this.initialize(t))}initialize(t){if(this.createDOM(t),this.getSourceSize(),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.showModal("init"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("init"),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.cropperEl.onwheel=(t=>{t.preventDefault();let{deltaY:e}=t;e=1+(e>0?1:-1)*(e=(e=Math.abs(e)/100)>.05?.05:e),this.scaleBy(e)}),this.options.responsive){let t;const e=()=>{let t=this.options,e=this.responsiveData;const i=["x","y","width","height"];for(var s=0;s<i.length;s++)e[i[s]]*=100,e[i[s]]=e[i[s]]>100?100:e[i[s]]<0?0:e[i[s]];t.startPosition=[e.x,e.y,"%"],t.startSize=[e.width,e.height,"%"],t=this.parseOptions(t),this.showModal("onResize"),this.initializeBox(t),this.resetModal("onResize")};window.onresize=function(){clearTimeout(t),t=setTimeout(()=>{e()},100)}}}getElement(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}createDOM(e){var n;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(n=this.containerEl).addEventListener("touchstart",i),n.addEventListener("touchend",i),n.addEventListener("touchmove",i),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.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";let o=document.createElement("div");o.className="croppr-handleContainer",this.handles=[];for(let e=0;e<s.length;e++){const i=new t(s[e].position,s[e].constraints,s[e].cursor,this.eventBus);this.handles.push(i),o.appendChild(i.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(o),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e),this.setLivePreview()}setLivePreview(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";let 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%)"}}resizePreview(t=null){if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){const e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,s=e/i,n=this.sourceSize.width*t.width,o=this.sourceSize.height*t.height,l=n/o;let h=e,r=i;s>l?h=r*l:r=h/l,this.preview.container.style.width=h+"px",this.preview.container.style.height=r+"px";let a=this.sourceSize.width*h/n,u=this.sourceSize.height*r/o,d=-t.x*a,p=-t.y*u;this.preview.image.style.width=a+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=d+"px",this.preview.image.style.top=p+"px"}}strictlyConstrain(t=null,e=null){let i;null===e?(i=[[0,0],[1,1]],e=[.5,.5]):i=[e],null===t&&(t=this.options);const{width:s,height:n}=this.imageEl.getBoundingClientRect();this.box.constrainToRatio(t.aspectRatio,e,"height",t.maxAspectRatio),this.box.constrainToSize(t.maxSize.width,t.maxSize.height,t.minSize.width,t.minSize.height,e,t.aspectRatio,t.maxAspectRatio),i.map(t=>{this.box.constrainToBoundary(s,n,t)})}setImage(t,e){return this.imageEl.onload=(()=>{this.getSourceSize(),this.options=this.parseOptions(this.initOptions),this.showModal("setImage"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("setImage"),e&&e()}),this.imageEl.src=t,this.imageClippedEl.src=t,this}destroy(){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))}initializeBox(t=null,i=!0){null===t&&(t=this.options),this.convertOptionsToPixels(t);let s=t.startSize.width,n=t.startSize.height;t.minSize&&(s<t.minSize.width?s=t.minSize.width:s<t.maxSize.width&&(s=t.maxSize.width)),t.maxSize&&(n<t.minSize.height?n=t.minSize.height:n<t.maxSize.height&&(n=t.maxSize.height));let o=new e(0,0,s,n),l=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.imageEl.getBoundingClientRect();l=t/2-s/2,h=e/2-n/2}else l=t.startPosition.x,h=t.startPosition.y;if(o.move(l,h),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);let t=document.createElement("img");t.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(t),this.preview.image.style.position="relative"}!0===i&&this.strictlyConstrain(),this.box=o,this.redraw();for(var r=0;r<this.handles.length;r++)!this.options.maxAspectRatio||.5!=this.handles[r].position[0]&&.5!=this.handles[r].position[1]?this.handles[r].el.style.display="block":this.handles[r].el.style.display="none";return o}showModal(t="default"){let e=this.modalStyle;if(e&&!0===e.modalIsDisplayed)return e;if(this.options.modal){let{modal:i}=this.options,s=i.currentStyle?i.currentStyle.display:getComputedStyle(i,null).display;e={operationName:t,modalIsDisplayed:!0,display:s,visibility:i.currentStyle?i.currentStyle.visibility:getComputedStyle(i,null).visibility},this.modalStyle=e,"none"===s&&(i.style.visibility="hidden",i.style.display="block")}return e}resetModal(t="default"){let e=this.modalStyle;if(e){let{visibility:i,display:s,operationName:n,modalIsDisplayed:o}=e;if(o&&t===n){let{modal:t}=this.options;t.style.visibility=i,t.style.display=s,this.modalStyle={operationName:null,modalIsDisplayed:!1}}}}getSourceSize(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}convertor(t,e,i){const s=t=>{this.showModal();const{width:e,height:i}=this.imageEl.getBoundingClientRect();return this.resetModal(),t.width&&(t.width=t.width/100*e),t.x&&(t.x=t.x/100*e),t.height&&(t.height=t.height/100*i),t.y&&(t.y=t.y/100*i),t};return"real"===e&&"px"===i?(t=>{this.showModal();const{width:e,height:i}=this.imageEl.getBoundingClientRect();this.resetModal();const s=this.sourceSize.width/e,n=this.sourceSize.height/i;return t.width&&(t.width/=s),t.x&&(t.x/=s),t.height&&(t.height/=n),t.y&&(t.y/=n),t})(t):"%"===e&&"px"===i?s(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:s}=this.imageEl.getBoundingClientRect(),n=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<n.length;e++){const i=n[e];null!==t[i]&&("%"==t[i].unit?t[i]=this.convertor(t[i],"%","px"):!0===t[i].real&&(t[i]=this.convertor(t[i],"real","px")),delete t[i].unit)}if(t.minSize&&(t.minSize.width>i&&(t.minSize.width=i),t.minSize.height>s&&(t.minSize.height=s)),t.startSize&&t.startPosition){let e=t.startPosition.x+t.startSize.width;e>i&&(t.startPosition.x-=e-i);let n=t.startPosition.y+t.startSize.height;n>s&&(t.startPosition.y-=n-s)}return e&&(this.options=t),t}redraw(){this.resizePreview();const t=Math.round(this.box.width()),e=Math.round(this.box.height()),i=Math.round(this.box.x1),s=Math.round(this.box.y1),n=Math.round(this.box.x2),o=Math.round(this.box.y2);window.requestAnimationFrame(()=>{this.regionEl.style.transform=`translate(${i}px, ${s}px)`,this.regionEl.style.width=t+"px",this.regionEl.style.height=e+"px",this.imageClippedEl.style.clip=`rect(${s}px, ${n}px, ${o}px, ${i}px)`;const l=this.box.getAbsolutePoint([.5,.5]),{width:h,height:r}=this.imageEl.getBoundingClientRect(),a=l[0]-h/2>>31,u=l[1]-r/2>>31,d=-2*((a^u)+u+u+4)+8;for(let n=0;n<this.handles.length;n++){let o=this.handles[n];const l=o.el.offsetWidth,h=o.el.offsetHeight,r=i+t*o.position[0]-l/2,a=s+e*o.position[1]-h/2;o.el.style.transform=`translate(${Math.round(r)}px, ${Math.round(a)}px)`,o.el.style.zIndex=d==n?5:4}})}attachHandlerEvents(){const t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}attachRegionEvents(){const t=this.eventBus;function e(e){e.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function i(s){s.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:s.clientX,mouseY:s.clientY}}))}this.regionEl.addEventListener("mousedown",function(s){s.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:s.clientX,mouseY:s.clientY}}))}),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}attachOverlayEvents(){const t=4,i=this;let s=null;function n(t){t.stopPropagation(),i.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!==i.box.width()||1!==i.box.height()?i.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):i.box=s}this.overlayEl.addEventListener("mousedown",function(l){l.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",n);const h=i.cropperEl.getBoundingClientRect(),r=l.clientX-h.left,a=l.clientY-h.top;s=i.box,i.box=new e(r,a,r+1,a+1),i.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:i.handles[t]}}))})}onHandleMoveStart(t){let e=t.detail.handle;const i=[1-e.position[0],1-e.position[1]];let[s,n]=this.box.getAbsolutePoint(i);this.activeHandle={handle:e,originPoint:i,originX:s,originY:n},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onHandleMoveMoving(t){let{mouseX:i,mouseY:s}=t.detail,n=this.cropperEl.getBoundingClientRect();i-=n.left,s-=n.top,i<0?i=0:i>n.width&&(i=n.width),s<0?s=0:s>n.height&&(s=n.height);let o=this.activeHandle.originPoint.slice();const l=this.activeHandle.originX,h=this.activeHandle.originY,r=this.activeHandle.handle,a=1===r.constraints[0],u=1===r.constraints[1],d=1===r.constraints[2],p=1===r.constraints[3],c=(p||u)&&(a||d);let m=p||u?l:this.box.x1,v=p||u?l:this.box.x2,g=a||d?h:this.box.y1,w=a||d?h:this.box.y2;m=p?i:m,v=u?i:v,g=a?s:g,w=d?s:w;let[E,x]=[!1,!1];if((p||u)&&(E=p?i>l:i<l),(a||d)&&(x=a?s>h:s<h),E){const t=m;m=v,v=t,o[0]=1-o[0]}if(x){const t=g;g=w,w=t,o[1]=1-o[1]}let y=new e(m,g,v,w);if(this.options.aspectRatio){let t=this.options.aspectRatio,e=!1;c?e=s>y.y1+t*y.width()||s<y.y2-t*y.width():(a||d)&&(e=!0);const i=e?"width":"height";y.constrainToRatio(t,o,i,this.options.maxAspectRatio)}y.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,o,this.options.aspectRatio,this.options.maxAspectRatio);const{width:f,height:z}=this.imageEl.getBoundingClientRect();let b=[o];this.options.maxAspectRatio&&(b=[[0,0],[1,1]]),b.map(t=>{y.constrainToBoundary(f,z,t)}),this.box=y,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onHandleMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}onRegionMoveStart(t){let{mouseX:e,mouseY:i}=t.detail,s=this.cropperEl.getBoundingClientRect();e-=s.left,i-=s.top,this.currentMove={offsetX:e-this.box.x1,offsetY:i-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onRegionMoveMoving(t){let{mouseX:e,mouseY:i}=t.detail,{offsetX:s,offsetY:n}=this.currentMove,o=this.cropperEl.getBoundingClientRect();e-=o.left,i-=o.top,this.box.move(e-s,i-n),this.box.x1<0&&this.box.move(0,null),this.box.x2>o.width&&this.box.move(o.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>o.height&&this.box.move(null,o.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}onRegionMoveEnd(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}getValue(t=null){null===t&&(t=this.options.returnMode);let 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}getValueAsRealData(){this.showModal();const t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,{width:i,height:s}=this.imageEl.getBoundingClientRect(),n=t/i,o=e/s;return this.resetModal(),{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)}}getValueAsRatio(){this.showModal();const{width:t,height:e}=this.imageEl.getBoundingClientRect();return this.resetModal(),{x:this.box.x1/t,y:this.box.y1/e,width:this.box.width()/t,height:this.box.height()/e}}parseOptions(t=null){null===t&&(t=this.options);const e=null,i=null,s={width:null,height:null,unit:"px",real:!1},n={width:null,height:null,unit:"px",real:!1},o={width:100,height:100,unit:"%",real:!1},l=null,h="real",r=null,a=null,u=null,d=null,p=null,c=!0,m=null;let v=null;null!==t.preview&&(v=this.getElement(t.preview));let g=null;null!==t.modal&&(g=this.getElement(t.modal));let w=null;null!==t.responsive&&(w=t.responsive);let E=null,x=null;const y=["aspectRatio","maxAspectRatio"];for(var f=0;f<y.length;f++)if(void 0!==t[y[f]])if("number"==typeof t[y[f]]){let e=t[y[f]];"aspectRatio"===y[f]?E=e:x=e}else if(t[y[f]]instanceof Array){let e=t[y[f]][1]/t[y[f]][0];"aspectRatio"===y[f]?E=e:x=e}let z=null;void 0!==t.maxSize&&null!==t.maxSize&&(z={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px",real:t.minSize[3]||!1});let b=null;void 0!==t.minSize&&null!==t.minSize&&(b={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px",real:t.minSize[3]||!1});let S=null;void 0!==t.startSize&&null!==t.startSize&&(S={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%",real:t.startSize[3]||!1});let C=null;void 0!==t.startPosition&&null!==t.startPosition&&(C={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"%",real:t.startPosition[3]||!1});let M=null;"function"==typeof t.onInitialize&&(M=t.onInitialize);let P=null;"function"==typeof t.onCropStart&&(P=t.onCropStart);let B=null;"function"==typeof t.onCropEnd&&(B=t.onCropEnd);let 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);let L=null;if(void 0!==t.returnMode){const e=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(e))throw"Invalid return mode.";L=e}const Y=(t,e)=>null!==t?t:e;return{aspectRatio:Y(E,e),maxAspectRatio:Y(x,i),maxSize:Y(z,s),minSize:Y(b,n),startSize:Y(S,o),startPosition:Y(C,l),returnMode:Y(L,h),onInitialize:Y(M,r),onCropStart:Y(P,a),onCropMove:Y(A,u),onCropEnd:Y(B,d),preview:Y(v,p),responsive:Y(w,c),modal:Y(g,m)}}}return class extends n{constructor(t,e,i=!1){super(t,e,i)}getValue(t){return super.getValue(t)}setImage(t,e=null){return super.setImage(t,e)}destroy(){return super.destroy()}moveTo(t,e,i=!0,s="px"){if(this.showModal("moveTo"),"%"===s||"real"===s){let i=this.convertor({x:t,y:e},s,"px");t=i.x,e=i.y}return this.box.move(t,e),!0===i&&this.strictlyConstrain(null,[0,0]),this.redraw(),this.resetModal("moveTo"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}resizeTo(t,e,i=null,s=!0,n="px"){if(this.showModal("resize"),"%"===n||"real"===n){let i={width:t,height:e};t=(i=this.convertor(i,n,"px")).width,e=i.height}return null===i&&(i=[.5,.5]),this.box.resize(t,e,i),!0===s&&this.strictlyConstrain(),this.redraw(),this.resetModal("resize"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}setValue(t,e=!0,i="%"){return this.showModal("setValue"),"%"!==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.resetModal("setValue"),this}scaleBy(t,e=null,i=!0){return null===e&&(e=[.5,.5]),this.showModal("scaleBy"),this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),this.resetModal("scaleBy"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}reset(){return this.showModal("reset"),this.box=this.initializeBox(this.options),this.redraw(),this.resetModal("reset"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}});

examples/index.js

@@ -8,6 +8,6 @@ var croppr = new Croppr("#cropper", {
     preview: "#cropPreview",
-    onInitialize: instance => {},
-    onCropEnd: data => {},
-    onCropStart: (data) => {},
-    onCropMove: data => {}
+    onInitialize: function(instance) { console.log("INIT", instance) },
+    onCropEnd: function(data) { console.log("END", data) },
+    onCropStart: function(data) { console.log("START", data) },
+    onCropMove: function(data) { console.log("MOVE", data) }
 });
@@ -14,0 +14,0 @@

package.json

 {
   "name": "dnm-croppr",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "A fork of original Croppr.js, a vanilla JavaScript image cropper, with advanced options.",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -16,2 +16,3 @@ ![Croppr.js](https://raw.githubusercontent.com/devdanim/dnm-croppr/master/assets/logo.png)
 * Responsive
+* Works seamlessly with modal, just add your modal in the options
 * Min and Max aspect ratio
@@ -112,2 +113,20 @@ * Set startPosition
 
+#### **modal**
+
+If you use dnm-croppr inside a modal, you have to define your modal parent element here.
+
+* Type: `String` or `Element`
+* Default: `null`
+* Possible values: If modal ID is "myModal", value can be `"#myModal"` or an `Element` object as `document.getElementById("myModal")`
+
+
+#### **preview**
+
+Define the container for live preview.
+
+* Type: `String` or `Element`
+* Default: `null`
+* Possible values: If container ID is "preview", value can be `"#preview"` or an `Element` object as `document.getElementById("preview")`
+
+
 #### **startSize**
@@ -201,11 +220,3 @@
 
-#### **preview**
 
-Define the container for live preview.
-
-* Type: `String` or `Element`
-* Default: `null`
-* Possible values: If container ID is "preview", value can be `"#preview"` or an `Element` object as `document.getElementById("preview")`
-
-
 ## Methods
@@ -212,0 +223,0 @@

src/core.js

@@ -75,2 +75,3 @@ /**
   initialize(element) {
+
     // Create DOM elements
@@ -81,3 +82,2 @@ this.createDOM(element);
     this.getSourceSize();
-    this.convertOptionsToPixels();
 
@@ -90,8 +90,9 @@ // Listen for events from children
     // Bootstrap this cropper instance
-    this.initializeBox(null, false);
-
+    this.showModal("init")
+    this.initializeBox(null, false)
     //Temporary FIX, see resizePreview() comments
     //Need a first redraw() to init cropprEl, imageEl dimensions
-    this.strictlyConstrain();
-    this.redraw();
+    this.strictlyConstrain()
+    this.redraw()
+    this.resetModal("init")
 
@@ -131,5 +132,6 @@ // Set the initalized flag to true and call the callback
         newOptions = this.parseOptions(newOptions);
-        newOptions = this.convertOptionsToPixels(newOptions);
- 
+        
+        this.showModal("onResize");
         this.initializeBox(newOptions);
+        this.resetModal("onResize");
         
@@ -310,3 +312,3 @@ }
       this.options = this.parseOptions(this.initOptions);
-      this.convertOptionsToPixels();
+      this.showModal("setImage")
       this.initializeBox(null, false);
@@ -316,2 +318,3 @@ //Temporary FIX, see initialize()
       this.redraw();
+      this.resetModal("setImage")
       if(callback) callback()
@@ -346,2 +349,4 @@ }
 
+    this.convertOptionsToPixels(opts);
+
     //Define box size
@@ -409,2 +414,51 @@ let boxWidth = opts.startSize.width;
 
+  showModal(operationName="default") {
+
+    let modalStyle = this.modalStyle
+    if(modalStyle && modalStyle.modalIsDisplayed === true) {
+      return modalStyle
+    }
+
+    if(this.options.modal) {
+      let { modal } = this.options
+
+      let display = modal.currentStyle ? modal.currentStyle.display :
+      getComputedStyle(modal, null).display
+      let visibility =  modal.currentStyle ? modal.currentStyle.visibility :
+      getComputedStyle(modal, null).visibility
+
+      modalStyle = {
+        operationName: operationName,
+        modalIsDisplayed: true,
+        display: display,
+        visibility: visibility
+      }
+      this.modalStyle = modalStyle
+
+      if(display === "none") {
+        modal.style.visibility = "hidden";
+        modal.style.display = "block";
+      }
+    }
+
+    return modalStyle
+
+  }
+
+  resetModal(oldOperationName="default") {
+    let modalStyle = this.modalStyle
+    if(modalStyle) {
+      let { visibility, display, operationName, modalIsDisplayed } = modalStyle
+      if( modalIsDisplayed && oldOperationName === operationName  ) {
+        let { modal } = this.options
+        modal.style.visibility = visibility
+        modal.style.display = display
+        this.modalStyle = {
+          operationName: null,
+          modalIsDisplayed: false
+        }
+      }
+    }
+  }
+
   getSourceSize() {
@@ -420,3 +474,5 @@ //Get raw image dimensions
     const convertRealDataToPixel = data => {
+      this.showModal()
       const { width, height } = this.imageEl.getBoundingClientRect();
+      this.resetModal()
       const factorX = this.sourceSize.width / width;
@@ -439,3 +495,5 @@ const factorY = this.sourceSize.height / height;
     const convertPercentToPixel = data => {
+      this.showModal()
       const { width, height } = this.imageEl.getBoundingClientRect();
+      this.resetModal()
       if (data.width) {
@@ -903,2 +961,3 @@ data.width = (data.width / 100) * width;
   getValueAsRealData() {
+    this.showModal()
     const actualWidth = this.imageEl.naturalWidth;
@@ -909,2 +968,3 @@ const actualHeight = this.imageEl.naturalHeight;
     const factorY = actualHeight / elementHeight;
+    this.resetModal()
     return {
@@ -919,3 +979,5 @@ x: Math.round(this.box.x1 * factorX),
   getValueAsRatio() {
+    this.showModal()
     const { width: elementWidth, height: elementHeight } = this.imageEl.getBoundingClientRect();
+    this.resetModal()
     return {
@@ -947,3 +1009,4 @@ x: this.box.x1 / elementWidth,
       preview: null,
-      responsive: true
+      responsive: true,
+      modal: null
     }
@@ -955,2 +1018,6 @@
 
+    //Parse preview
+    let modal = null;
+    if(opts.modal !== null) modal = this.getElement(opts.modal);
+
     //Parse responsive
@@ -1075,3 +1142,4 @@ let responsive = null;
       preview: defaultValue(preview, defaults.preview),
-      responsive: defaultValue(responsive, defaults.responsive)
+      responsive: defaultValue(responsive, defaults.responsive),
+      modal: defaultValue(modal, defaults.modal)
     }
@@ -1078,0 +1146,0 @@ }

src/croppr.js

@@ -61,2 +61,4 @@ /**
 
+    this.showModal("moveTo")
+
     if(mode === "%" || mode === "real") {
@@ -73,2 +75,4 @@ let data = this.convertor( {x, y} , mode, "px")
 
+    this.resetModal("moveTo")
+
     // Call the callback
@@ -90,2 +94,4 @@ if (this.options.onCropEnd !== null) {
 
+    this.showModal("resize")
+
     if(mode === "%" || mode === "real") {
@@ -108,2 +114,4 @@ let data = {
 
+    this.resetModal("resize")
+
     // Call the callback
@@ -117,6 +125,16 @@ if (this.options.onCropEnd !== null) {
   setValue(data, constrain = true, mode = "%") {
-    if(mode === "%" || mode === "real") data = this.convertor(data, mode, "px")
+
+    this.showModal("setValue")
+
+    if(mode === "%" || mode === "real") {
+      data = this.convertor(data, mode, "px")
+    }
+
     this.moveTo(data.x, data.y, false)
     this.resizeTo(data.width, data.height, [0,0], constrain)
+
+    this.resetModal("setValue")
+    
     return this
+
   }
@@ -134,5 +152,7 @@
     
+    this.showModal("scaleBy")
     this.box.scale(factor, origin);
     if(constrain === true) this.strictlyConstrain();
     this.redraw();
+    this.resetModal("scaleBy")
 
@@ -150,5 +170,10 @@ // Call the callback
   reset() {
+
+    this.showModal("reset")
+
     this.box = this.initializeBox(this.options);
     this.redraw();
 
+    this.resetModal("reset")
+
     // Call the callback
@@ -155,0 +180,0 @@ if (this.options.onCropEnd !== null) {

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

539195

increased by82.7%

Number of package files

29

increased by16%

Lines of code

3691

increased by20.86%

Number of lines in readme file

291

increased by3.93%

No dependency changes