dnm-croppr - npm Package Compare versions

Comparing version 2.8.1 to 2.8.2

dist/dnm-croppr.min.js

 !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",r),n.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:n}}))}function r(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",r),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 r=n/o;if(r<i||r>s){let t=n,h=o;r>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,r=n,h=t-s,a=e-n,l=-2*i[0]+1,d=-2*i[1]+1;let[u,c]=[null,null];switch(l){case-1:u=o;break;case 0:u=2*Math.min(o,h);break;case 1:u=h}switch(d){case-1:c=r;break;case 0:c=2*Math.min(r,a);break;case 1:c=a}if(this.width()>u){const t=u/this.width();this.scale(t,i)}if(this.height()>c){const t=c/this.height();this.scale(t,i)}return this}constrainToSize(t=null,e=null,i=null,s=null,n=[0,0],o=null,r=null){let h=this.getRatio(o,r);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}))}
-/*! Fast Average Color | © 2020 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */function s(t){const e=t.toString(16);return 1===e.length?"0"+e:e}function n(t){return"#"+t.map(s).join("")}function o(t,e,i){for(let s=0;s<i.length;s++)if(r(t,e,i[s]))return!0;return!1}function r(t,e,i){switch(i.length){case 3:if(function(t,e,i){if(255!==t[e+3])return!0;if(t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2])return!0;return!1}(t,e,i))return!0;break;case 4:if(function(t,e,i){if(t[e+3]&&i[3])return t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2]&&t[e+3]===i[3];return t[e+3]===i[3]}(t,e,i))return!0;break;case 5:if(function(t,e,i){const s=i[0],n=i[1],o=i[2],r=i[3],a=i[4],l=t[e+3],d=h(l,r,a);if(!r)return d;if(!l&&d)return!0;if(h(t[e],s,a)&&h(t[e+1],n,a)&&h(t[e+2],o,a)&&d)return!0;return!1}(t,e,i))return!0;break;default:return!1}}function h(t,e,i){return t>=e-i&&t<=e+i}function a(t,e,i){const s={},n=i.ignoredColor,r=i.step;for(let i=0;i<e;i+=r){const e=t[i],r=t[i+1],h=t[i+2],a=t[i+3];if(n&&o(t,i,n))continue;const l=Math.round(e/24)+","+Math.round(r/24)+","+Math.round(h/24);s[l]?s[l]=[s[l][0]+e*a,s[l][1]+r*a,s[l][2]+h*a,s[l][3]+a,s[l][4]+1]:s[l]=[e*a,r*a,h*a,a,1]}const h=Object.keys(s).map((t=>s[t])).sort(((t,e)=>{const i=t[4],s=e[4];return i>s?-1:i===s?0:1}))[0],a=h[0],l=h[1],d=h[2],u=h[3],c=h[4];return u?[Math.round(a/u),Math.round(l/u),Math.round(d/u),Math.round(u/c)]:i.defaultColor}function l(t,e,i){let s=0,n=0,r=0,h=0,a=0;const l=i.ignoredColor,d=i.step;for(let i=0;i<e;i+=d){const e=t[i+3],d=t[i]*e,u=t[i+1]*e,c=t[i+2]*e;l&&o(t,i,l)||(s+=d,n+=u,r+=c,h+=e,a++)}return h?[Math.round(s/h),Math.round(n/h),Math.round(r/h),Math.round(h/a)]:i.defaultColor}function d(t,e,i){let s=0,n=0,r=0,h=0,a=0;const l=i.ignoredColor,d=i.step;for(let i=0;i<e;i+=d){const e=t[i],d=t[i+1],u=t[i+2],c=t[i+3];l&&o(t,i,l)||(s+=e*e*c,n+=d*d*c,r+=u*u*c,h+=c,a++)}return h?[Math.round(Math.sqrt(s/h)),Math.round(Math.sqrt(n/h)),Math.round(Math.sqrt(r/h)),Math.round(h/a)]:i.defaultColor}function u(t){return c(t,"defaultColor",[0,0,0,0])}function c(t,e,i){return void 0===t[e]?i:t[e]}const p="FastAverageColor: ";function m(t,e,i){t.silent||(console.error(p+e),i&&console.error(i))}function v(t){return Error(p+t)}class g{getColorAsync(t,e){if(!t)return Promise.reject(v("call .getColorAsync() without resource."));if("string"==typeof t){const i=new Image;return i.crossOrigin="",i.src=t,this._bindImageEvents(i,e)}if(t instanceof Image&&!t.complete)return this._bindImageEvents(t,e);{const i=this.getColor(t,e);return i.error?Promise.reject(i.error):Promise.resolve(i)}}getColor(t,e){const i=u(e=e||{});if(!t)return m(e,"call .getColor(null) without resource."),this.prepareResult(i);const s=function(t,e){const i=c(e,"left",0),s=c(e,"top",0),n=c(e,"width",t.width),o=c(e,"height",t.height);let r,h=n,a=o;return"precision"===e.mode||(n>o?(r=n/o,h=100,a=Math.round(h/r)):(r=o/n,a=100,h=Math.round(a/r)),(h>n||a>o||h<10||a<10)&&(h=n,a=o)),{srcLeft:i,srcTop:s,srcWidth:n,srcHeight:o,destWidth:h,destHeight:a}}(function(t){if(t instanceof HTMLImageElement){let e=t.naturalWidth,i=t.naturalHeight;return t.naturalWidth||-1===t.src.search(/\.svg(\?|$)/i)||(e=i=100),{width:e,height:i}}return t instanceof HTMLVideoElement?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}(t),e);if(!(s.srcWidth&&s.srcHeight&&s.destWidth&&s.destHeight))return m(e,`incorrect sizes for resource "${t.src}".`),this.prepareResult(i);if(!this._ctx&&(this._canvas="undefined"==typeof window?new OffscreenCanvas(1,1):document.createElement("canvas"),this._ctx=this._canvas.getContext&&this._canvas.getContext("2d"),!this._ctx))return m(e,"Canvas Context 2D is not supported in this browser."),this.prepareResult(i);this._canvas.width=s.destWidth,this._canvas.height=s.destHeight;let n=i;try{this._ctx.clearRect(0,0,s.destWidth,s.destHeight),this._ctx.drawImage(t,s.srcLeft,s.srcTop,s.srcWidth,s.srcHeight,0,0,s.destWidth,s.destHeight);const i=this._ctx.getImageData(0,0,s.destWidth,s.destHeight).data;n=this.getColorFromArray4(i,e)}catch(i){m(e,`security error (CORS) for resource ${t.src}.\nDetails: https://developer.mozilla.org/en/docs/Web/HTML/CORS_enabled_image`,i)}return this.prepareResult(n)}getColorFromArray4(t,e){e=e||{};const i=t.length,s=u(e);if(i<4)return s;const n=i-i%4,o=4*(e.step||1);let r;switch(e.algorithm||"sqrt"){case"simple":r=l;break;case"sqrt":r=d;break;case"dominant":r=a;break;default:throw v(`${e.algorithm} is unknown algorithm.`)}return r(t,n,{defaultColor:s,ignoredColor:(h=e.ignoredColor,h?Array.isArray(h)?"number"==typeof h[0]?[h.slice()]:h:[h]:h),step:o});var h}prepareResult(t){const e=t.slice(0,3),i=[].concat(e,t[3]/255),s=(299*(o=t)[0]+587*o[1]+114*o[2])/1e3<128;var o;return{value:t,rgb:"rgb("+e.join(",")+")",rgba:"rgba("+i.join(",")+")",hex:n(e),hexa:n(t),isDark:s,isLight:!s}}destroy(){delete this._canvas,delete this._ctx}_bindImageEvents(t,e){return new Promise(((i,s)=>{const n=()=>{h();const n=this.getColor(t,e);n.error?s(n.error):i(n)},o=()=>{h(),s(v(`Error loading image "${t.src}".`))},r=()=>{h(),s(v(`Image "${t.src}" loading aborted.`))},h=()=>{t.removeEventListener("load",n),t.removeEventListener("error",o),t.removeEventListener("abort",r)};t.addEventListener("load",n),t.addEventListener("error",o),t.addEventListener("abort",r)}))}}const w=[{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"}];return class extends class{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.";if(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){const e="video"===t.nodeName.toLowerCase()?"video":"image";"image"!==e||0!==t.width&&0!==t.height?"video"!==e||0!==t.videoWidth&&0!==t.videoHeight?this.initialize(t):t.onloadeddata=()=>this.initialize(t):t.onload=()=>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;let i=e>0?1:-1;e=Math.abs(e)/100,e=e>.05?.05:e,e=1+i*e,this.scaleBy(e),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()),null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},this.options.responsive){let t;window.onresize=()=>{clearTimeout(t),t=setTimeout((()=>{this.forceRedraw()}),100)}}}forceRedraw(){let t=this.options,e=this.responsiveData;const i=["x","y","width","height"];for(var s=0;s<i.length;s++)e[i[s]]=e[i[s]]>1?1:e[i[s]]<0?0:e[i[s]];t.startPosition=[e.x,e.y,"ratio"],t.startSize=[e.width,e.height,"ratio"],t=this.parseOptions(t),this.showModal("onResize"),this.initializeBox(t),this.resetModal("onResize")}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.mediaType="video"===e.nodeName.toLowerCase()?"video":"image",this.mediaEl=document.createElement("video"===this.mediaType?"video":"img"),"video"===this.mediaType&&["muted","loop"].forEach((t=>this.mediaEl.setAttribute(t,!0))),this.mediaEl.setAttribute("crossOrigin","anonymous"),"image"===this.mediaType&&this.mediaEl.setAttribute("alt",e.getAttribute("alt")),this.mediaEl["image"===this.mediaType?"onload":"onloadeddata"]=()=>{if(this.getSourceSize(),this.options=this.parseOptions(this.initOptions),this.showModal("setImage"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("setImage"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),"image"===this.mediaType){const t=(new g).getColor(this.mediaEl);t&&(this.isDark=t.isDark,this.isDark?this.cropperEl.className="croppr croppr-dark":this.cropperEl.className="croppr croppr-light")}else this.syncVideos();this.onMediaLoad&&this.onMediaLoad()},this.mediaEl.setAttribute("src",e.getAttribute("src")),this.mediaEl.className="croppr-image",this.mediaClippedEl=this.mediaEl.cloneNode(),this.mediaClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";let n=document.createElement("div");n.className="croppr-handleContainer",this.handles=[];for(let e=0;e<w.length;e++){const i=new t(w[e].position,w[e].constraints,w[e].cursor,this.eventBus);this.handles.push(i),n.appendChild(i.el)}this.cropperEl.appendChild(this.mediaEl),this.cropperEl.appendChild(this.mediaClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(n),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e),this.setLivePreview()}syncVideos(){const t=[this.mediaEl,this.mediaClippedEl];this.videoRef=t[0],this.videosToSync=t.filter((t=>t!==this.videoRef));const e=["play","pause","timeupdate","seeking"],i=e.map((t=>()=>{if("timeupdate"===t){if(!this.videoRef||!this.videoRef.paused)return;this.videosToSync.forEach((t=>{t.emit("timeupdate")}))}else"seeking"===t?this.videosToSync.forEach((t=>{t.currentTime=this.videoRef.currentTime})):"play"!==t&&"pause"!==t||this.videosToSync.forEach((e=>{e[t]()}))})),s=()=>t.filter((t=>4===t.readyState)).length===t.length,n=()=>{i.forEach(((t,i)=>{this.videoRef.addEventListener(e[i],t)})),this.stopVideosSyncing=()=>{this.videosToSync=[],i.forEach(((t,i)=>{this.videoRef.removeEventListener(e[i],t)})),this.videoRef=null,this.stopVideosSyncing=null};const t=()=>{this.videoRef&&this.videoRef.paused&&(this.videoRef.muted=!0,this.videoRef.play(),setTimeout((()=>t()),1e3))};t()};if(s())n();else{let e=!1;t.forEach((t=>{t.addEventListener("canplay",(()=>{!e&&s()&&(e=!0,n())}),{once:!0})}))}}setLivePreview(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";const 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,r=n/o;let h=e,a=i;s>r?h=a*r:a=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=a+"px";let l=this.sourceSize.width*h/n,d=this.sourceSize.height*a/o,u=-t.x*l,c=-t.y*d;this.preview.media.style.width=l+"px",this.preview.media.style.height=d+"px",this.preview.media.style.left=u+"px",this.preview.media.style.top=c+"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.mediaEl.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){const i=this.mediaType;if(this.mediaType="image",this.onMediaLoad=e,i&&"image"!==i){this.destroy(!0);const e=document.createElement("img");e.setAttribute("src",t),this._restore.parent.appendChild(e),this.initialize(e)}else this.mediaEl.src=t,this.mediaClippedEl.src=t;return this}setVideo(t,e){const i=this.mediaType;if(this.mediaType="video",this.onMediaLoad=e,i&&"video"!==i){this.destroy(!0);const e=document.createElement("video");e.setAttribute("src",t),this._restore.parent.appendChild(e),this.initialize(e)}else this.stopVideosSyncing&&this.stopVideosSyncing(),this.mediaEl.src=t,this.mediaClippedEl.src=t;return this}destroy(t){try{this.stopVideosSyncing&&this.stopVideosSyncing(),this.containerEl&&(t?this._restore.parent.removeChild(this.containerEl):this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.media.parentNode.removeChild(this.preview.media),this.preview.container.parentNode.removeChild(this.preview.container)))}catch(t){console.error(t)}}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),r=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.mediaEl.getBoundingClientRect();r=t/2-s/2,h=e/2-n/2}else r=t.startPosition.x,h=t.startPosition.y;if(o.move(r,h),this.preview){this.preview.media&&(this.preview.media.parentNode.removeChild(this.preview.media),this.preview.media=null);let t=document.createElement("video"===this.mediaType?"video":"img");t.src=this.mediaEl.src,"video"===this.mediaType&&(["muted","loop"].forEach((e=>t.setAttribute(e,!0))),t.setAttribute("crossOrigin","anonymous")),this.preview.media=this.preview.container.appendChild(t),this.preview.media.style.position="relative"}!0===i&&this.strictlyConstrain(),this.box=o,this.redraw();for(var a=0;a<this.handles.length;a++)!this.options.maxAspectRatio||.5!=this.handles[a].position[0]&&.5!=this.handles[a].position[1]?this.handles[a].el.style.display="block":this.handles[a].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={width:this.mediaEl["image"===this.mediaType?"naturalWidth":"videoWidth"],height:this.mediaEl["image"===this.mediaType?"naturalHeight":"videoHeight"]},this.sourceSize}convertor(t,e,i){const s=t=>{this.showModal();const{width:e,height:i}=this.mediaEl.getBoundingClientRect();return this.resetModal(),t.width&&(t.width*=e),t.x&&(t.x*=e),t.height&&(t.height*=i),t.y&&(t.y*=i),t};return"real"===e&&"raw"===i?(t=>{this.showModal();const{width:e,height:i}=this.mediaEl.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):"ratio"===e&&"raw"===i?s(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:s}=this.mediaEl.getBoundingClientRect(),n=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<n.length;e++){const i=n[e];null!==t[i]&&("ratio"==t[i].unit?t[i]=this.convertor(t[i],"ratio","raw"):"real"===t[i].unit&&(t[i]=this.convertor(t[i],"real","raw")),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.mediaClippedEl.style.clip=`rect(${s}px, ${n}px, ${o}px, ${i}px)`;const r=this.box.getAbsolutePoint([.5,.5]),{width:h,height:a}=this.mediaEl.getBoundingClientRect(),l=r[0]-h/2>>31,d=r[1]-a/2>>31,u=-2*((l^d)+d+d+4)+8;for(let n=0;n<this.handles.length;n++){let o=this.handles[n];const r=o.el.offsetWidth,h=o.el.offsetHeight,a=i+t*o.position[0]-r/2,l=s+e*o.position[1]-h/2;o.el.style.transform=`translate(${Math.round(a)}px, ${Math.round(l)}px)`,o.el.style.zIndex=u==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=this;let i=null;function s(e){e.stopPropagation(),t.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function n(e){e.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",s),1!==t.box.width()||1!==t.box.height()?t.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:e.clientX,mouseY:e.clientY}})):t.box=i}this.overlayEl.addEventListener("mousedown",(function(o){o.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",s);const r=t.cropperEl.getBoundingClientRect(),h=o.clientX-r.left,a=o.clientY-r.top;i=t.box,t.box=new e(h,a,h+1,a+1),t.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:t.handles[4]}}))}))}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 r=this.activeHandle.originX,h=this.activeHandle.originY,a=this.activeHandle.handle,l=1===a.constraints[0],d=1===a.constraints[1],u=1===a.constraints[2],c=1===a.constraints[3],p=(c||d)&&(l||u);let m=c||d?r:this.box.x1,v=c||d?r:this.box.x2,g=l||u?h:this.box.y1,w=l||u?h:this.box.y2;m=c?i:m,v=d?i:v,g=l?s:g,w=u?s:w;let[f,E]=[!1,!1];if((c||d)&&(f=c?i>r:i<r),(l||u)&&(E=l?s>h:s<h),f){const t=m;m=v,v=t,o[0]=1-o[0]}if(E){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;p?e=s>y.y1+t*y.width()||s<y.y2-t*y.width():(l||u)&&(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:x,height:b}=this.mediaEl.getBoundingClientRect();let C=[o];this.options.maxAspectRatio&&(C=[[0,0],[1,1]]),C.map((t=>{y.constrainToBoundary(x,b,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{width:t,height:e}=this.getSourceSize(),{width:i,height:s}=this.mediaEl.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.mediaEl.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:"raw"},n={width:null,height:null,unit:"raw"},o={width:1,height:1,unit:"ratio"},r=null,h="real",a=null,l=null,d=null,u=null,c=null,p=!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 f=null,E=null;const y=["aspectRatio","maxAspectRatio"];for(var x=0;x<y.length;x++)if(void 0!==t[y[x]])if("number"==typeof t[y[x]]){let e=t[y[x]];"aspectRatio"===y[x]?f=e:E=e}else if(t[y[x]]instanceof Array){let e=t[y[x]][1]/t[y[x]][0];"aspectRatio"===y[x]?f=e:E=e}let b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"raw"});let C=null;void 0!==t.minSize&&null!==t.minSize&&(C={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"raw"});let z=null;void 0!==t.startSize&&null!==t.startSize&&(z={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"ratio"});let M=null;void 0!==t.startPosition&&null!==t.startPosition&&(M={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"ratio"});let S=null;"function"==typeof t.onInitialize&&(S=t.onInitialize);let R=null;"function"==typeof t.onCropStart&&(R=t.onCropStart);let T=null;"function"==typeof t.onCropEnd&&(T=t.onCropEnd);let L=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."),L=t.onUpdate),"function"==typeof t.onCropMove&&(L=t.onCropMove);let A=null;if(void 0!==t.returnMode){const e=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(e))throw"Invalid return mode.";A=e}const P=(t,e)=>null!==t?t:e;return{aspectRatio:P(f,e),maxAspectRatio:P(E,i),maxSize:P(b,s),minSize:P(C,n),startSize:P(z,o),startPosition:P(M,r),returnMode:P(A,h),onInitialize:P(S,a),onCropStart:P(R,l),onCropMove:P(L,d),onCropEnd:P(T,u),preview:P(v,c),responsive:P(w,p),modal:P(g,m)}}}{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(t=!1){return super.destroy(t)}moveTo(t,e,i=!0,s="raw"){if(this.showModal("moveTo"),"ratio"===s||"real"===s){let i=this.convertor({x:t,y:e},s,"raw");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="raw"){if(this.showModal("resize"),"ratio"===n||"real"===n){let i={width:t,height:e};i=this.convertor(i,n,"raw"),t=i.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="ratio"){return this.showModal("setValue"),"ratio"!==i&&"real"!==i||(t=this.convertor(t,i,"raw")),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}}}));
+/*! Fast Average Color | © 2020 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */function s(t){const e=t.toString(16);return 1===e.length?"0"+e:e}function n(t){return"#"+t.map(s).join("")}function o(t,e,i){for(let s=0;s<i.length;s++)if(r(t,e,i[s]))return!0;return!1}function r(t,e,i){switch(i.length){case 3:if(function(t,e,i){if(255!==t[e+3])return!0;if(t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2])return!0;return!1}(t,e,i))return!0;break;case 4:if(function(t,e,i){if(t[e+3]&&i[3])return t[e]===i[0]&&t[e+1]===i[1]&&t[e+2]===i[2]&&t[e+3]===i[3];return t[e+3]===i[3]}(t,e,i))return!0;break;case 5:if(function(t,e,i){const s=i[0],n=i[1],o=i[2],r=i[3],a=i[4],l=t[e+3],d=h(l,r,a);if(!r)return d;if(!l&&d)return!0;if(h(t[e],s,a)&&h(t[e+1],n,a)&&h(t[e+2],o,a)&&d)return!0;return!1}(t,e,i))return!0;break;default:return!1}}function h(t,e,i){return t>=e-i&&t<=e+i}function a(t,e,i){const s={},n=i.ignoredColor,r=i.step;for(let i=0;i<e;i+=r){const e=t[i],r=t[i+1],h=t[i+2],a=t[i+3];if(n&&o(t,i,n))continue;const l=Math.round(e/24)+","+Math.round(r/24)+","+Math.round(h/24);s[l]?s[l]=[s[l][0]+e*a,s[l][1]+r*a,s[l][2]+h*a,s[l][3]+a,s[l][4]+1]:s[l]=[e*a,r*a,h*a,a,1]}const h=Object.keys(s).map((t=>s[t])).sort(((t,e)=>{const i=t[4],s=e[4];return i>s?-1:i===s?0:1}))[0],a=h[0],l=h[1],d=h[2],u=h[3],c=h[4];return u?[Math.round(a/u),Math.round(l/u),Math.round(d/u),Math.round(u/c)]:i.defaultColor}function l(t,e,i){let s=0,n=0,r=0,h=0,a=0;const l=i.ignoredColor,d=i.step;for(let i=0;i<e;i+=d){const e=t[i+3],d=t[i]*e,u=t[i+1]*e,c=t[i+2]*e;l&&o(t,i,l)||(s+=d,n+=u,r+=c,h+=e,a++)}return h?[Math.round(s/h),Math.round(n/h),Math.round(r/h),Math.round(h/a)]:i.defaultColor}function d(t,e,i){let s=0,n=0,r=0,h=0,a=0;const l=i.ignoredColor,d=i.step;for(let i=0;i<e;i+=d){const e=t[i],d=t[i+1],u=t[i+2],c=t[i+3];l&&o(t,i,l)||(s+=e*e*c,n+=d*d*c,r+=u*u*c,h+=c,a++)}return h?[Math.round(Math.sqrt(s/h)),Math.round(Math.sqrt(n/h)),Math.round(Math.sqrt(r/h)),Math.round(h/a)]:i.defaultColor}function u(t){return c(t,"defaultColor",[0,0,0,0])}function c(t,e,i){return void 0===t[e]?i:t[e]}const p="FastAverageColor: ";function m(t,e,i){t.silent||(console.error(p+e),i&&console.error(i))}function v(t){return Error(p+t)}class g{getColorAsync(t,e){if(!t)return Promise.reject(v("call .getColorAsync() without resource."));if("string"==typeof t){const i=new Image;return i.crossOrigin="",i.src=t,this._bindImageEvents(i,e)}if(t instanceof Image&&!t.complete)return this._bindImageEvents(t,e);{const i=this.getColor(t,e);return i.error?Promise.reject(i.error):Promise.resolve(i)}}getColor(t,e){const i=u(e=e||{});if(!t)return m(e,"call .getColor(null) without resource."),this.prepareResult(i);const s=function(t,e){const i=c(e,"left",0),s=c(e,"top",0),n=c(e,"width",t.width),o=c(e,"height",t.height);let r,h=n,a=o;return"precision"===e.mode||(n>o?(r=n/o,h=100,a=Math.round(h/r)):(r=o/n,a=100,h=Math.round(a/r)),(h>n||a>o||h<10||a<10)&&(h=n,a=o)),{srcLeft:i,srcTop:s,srcWidth:n,srcHeight:o,destWidth:h,destHeight:a}}(function(t){if(t instanceof HTMLImageElement){let e=t.naturalWidth,i=t.naturalHeight;return t.naturalWidth||-1===t.src.search(/\.svg(\?|$)/i)||(e=i=100),{width:e,height:i}}return t instanceof HTMLVideoElement?{width:t.videoWidth,height:t.videoHeight}:{width:t.width,height:t.height}}(t),e);if(!(s.srcWidth&&s.srcHeight&&s.destWidth&&s.destHeight))return m(e,`incorrect sizes for resource "${t.src}".`),this.prepareResult(i);if(!this._ctx&&(this._canvas="undefined"==typeof window?new OffscreenCanvas(1,1):document.createElement("canvas"),this._ctx=this._canvas.getContext&&this._canvas.getContext("2d"),!this._ctx))return m(e,"Canvas Context 2D is not supported in this browser."),this.prepareResult(i);this._canvas.width=s.destWidth,this._canvas.height=s.destHeight;let n=i;try{this._ctx.clearRect(0,0,s.destWidth,s.destHeight),this._ctx.drawImage(t,s.srcLeft,s.srcTop,s.srcWidth,s.srcHeight,0,0,s.destWidth,s.destHeight);const i=this._ctx.getImageData(0,0,s.destWidth,s.destHeight).data;n=this.getColorFromArray4(i,e)}catch(i){m(e,`security error (CORS) for resource ${t.src}.\nDetails: https://developer.mozilla.org/en/docs/Web/HTML/CORS_enabled_image`,i)}return this.prepareResult(n)}getColorFromArray4(t,e){e=e||{};const i=t.length,s=u(e);if(i<4)return s;const n=i-i%4,o=4*(e.step||1);let r;switch(e.algorithm||"sqrt"){case"simple":r=l;break;case"sqrt":r=d;break;case"dominant":r=a;break;default:throw v(`${e.algorithm} is unknown algorithm.`)}return r(t,n,{defaultColor:s,ignoredColor:(h=e.ignoredColor,h?Array.isArray(h)?"number"==typeof h[0]?[h.slice()]:h:[h]:h),step:o});var h}prepareResult(t){const e=t.slice(0,3),i=[].concat(e,t[3]/255),s=(299*(o=t)[0]+587*o[1]+114*o[2])/1e3<128;var o;return{value:t,rgb:"rgb("+e.join(",")+")",rgba:"rgba("+i.join(",")+")",hex:n(e),hexa:n(t),isDark:s,isLight:!s}}destroy(){delete this._canvas,delete this._ctx}_bindImageEvents(t,e){return new Promise(((i,s)=>{const n=()=>{h();const n=this.getColor(t,e);n.error?s(n.error):i(n)},o=()=>{h(),s(v(`Error loading image "${t.src}".`))},r=()=>{h(),s(v(`Image "${t.src}" loading aborted.`))},h=()=>{t.removeEventListener("load",n),t.removeEventListener("error",o),t.removeEventListener("abort",r)};t.addEventListener("load",n),t.addEventListener("error",o),t.addEventListener("abort",r)}))}}const w=[{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"}];return class extends class{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.";if(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){const e="video"===t.nodeName.toLowerCase()?"video":"image";"image"!==e||0!==t.width&&0!==t.height?"video"!==e||0!==t.videoWidth&&0!==t.videoHeight?this.initialize(t):t.onloadeddata=()=>this.initialize(t):t.onload=()=>this.initialize(t)}}initialize(t){this.createDOM(t,(()=>{if(this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.showModal("init"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("init"),this.cropperEl.onwheel=t=>{t.preventDefault();let{deltaY:e}=t;let i=e>0?1:-1;e=Math.abs(e)/100,e=e>.05?.05:e,e=1+i*e,this.scaleBy(e),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue()),null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())},this.options.responsive){let t;window.onresize=()=>{clearTimeout(t),t=setTimeout((()=>{this.forceRedraw()}),100)}}this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)}))}forceRedraw(){let t=this.options,e=this.responsiveData;const i=["x","y","width","height"];for(var s=0;s<i.length;s++)e[i[s]]=e[i[s]]>1?1:e[i[s]]<0?0:e[i[s]];t.startPosition=[e.x,e.y,"ratio"],t.startSize=[e.width,e.height,"ratio"],t=this.parseOptions(t),this.showModal("onResize"),this.initializeBox(t),this.resetModal("onResize")}getElement(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}createDOM(e,s){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.mediaType="video"===e.nodeName.toLowerCase()?"video":"image",this.mediaEl=document.createElement("video"===this.mediaType?"video":"img"),"video"===this.mediaType&&["muted","loop"].forEach((t=>this.mediaEl.setAttribute(t,!0))),this.mediaEl.setAttribute("crossOrigin","anonymous"),"image"===this.mediaType&&this.mediaEl.setAttribute("alt",e.getAttribute("alt")),this.mediaEl["image"===this.mediaType?"onload":"onloadeddata"]=()=>{if(this.options=this.parseOptions(this.initOptions),this.showModal("setImage"),this.initializeBox(null,!1),this.strictlyConstrain(),this.redraw(),this.resetModal("setImage"),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),"image"===this.mediaType){const t=(new g).getColor(this.mediaEl);t&&(this.isDark=t.isDark,this.isDark?this.cropperEl.className="croppr croppr-dark":this.cropperEl.className="croppr croppr-light")}else this.syncVideos();this.onMediaLoad&&this.onMediaLoad(),s&&s()},this.mediaEl.setAttribute("src",e.getAttribute("src")),this.mediaEl.className="croppr-image",this.mediaClippedEl=this.mediaEl.cloneNode(),this.mediaClippedEl.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<w.length;e++){const i=new t(w[e].position,w[e].constraints,w[e].cursor,this.eventBus);this.handles.push(i),o.appendChild(i.el)}this.cropperEl.appendChild(this.mediaEl),this.cropperEl.appendChild(this.mediaClippedEl),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()}syncVideos(){const t=[this.mediaEl,this.mediaClippedEl];this.videoRef=t[0],this.videosToSync=t.filter((t=>t!==this.videoRef));const e=["play","pause","timeupdate","seeking"],i=e.map((t=>()=>{if("timeupdate"===t){if(!this.videoRef||!this.videoRef.paused)return;this.videosToSync.forEach((t=>{t.emit("timeupdate")}))}else"seeking"===t?this.videosToSync.forEach((t=>{t.currentTime=this.videoRef.currentTime})):"play"!==t&&"pause"!==t||this.videosToSync.forEach((e=>{e[t]()}))})),s=()=>t.filter((t=>4===t.readyState)).length===t.length,n=()=>{i.forEach(((t,i)=>{this.videoRef.addEventListener(e[i],t)})),this.stopVideosSyncing=()=>{this.videosToSync=[],i.forEach(((t,i)=>{this.videoRef.removeEventListener(e[i],t)})),this.videoRef=null,this.stopVideosSyncing=null};const t=()=>{this.videoRef&&this.videoRef.paused&&(this.videoRef.muted=!0,this.videoRef.play(),setTimeout((()=>t()),1e3))};t()};if(s())n();else{let e=!1;t.forEach((t=>{t.addEventListener("canplay",(()=>{!e&&s()&&(e=!0,n())}),{once:!0})}))}}setLivePreview(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";const 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.getSourceSize().width*t.width,o=this.getSourceSize().height*t.height,r=n/o;let h=e,a=i;s>r?h=a*r:a=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=a+"px";let l=this.getSourceSize().width*h/n,d=this.getSourceSize().height*a/o,u=-t.x*l,c=-t.y*d;this.preview.media.style.width=l+"px",this.preview.media.style.height=d+"px",this.preview.media.style.left=u+"px",this.preview.media.style.top=c+"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.mediaEl.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){const i=this.mediaType;if(this.mediaType="image",this.onMediaLoad=e,i&&"image"!==i){this.destroy(!0);const e=document.createElement("img");e.setAttribute("src",t),this._restore.parent.appendChild(e),this.initialize(e)}else this.mediaEl.src=t,this.mediaClippedEl.src=t;return this}setVideo(t,e){const i=this.mediaType;if(this.mediaType="video",this.onMediaLoad=e,i&&"video"!==i){this.destroy(!0);const e=document.createElement("video");e.setAttribute("src",t),this._restore.parent.appendChild(e),this.initialize(e)}else this.stopVideosSyncing&&this.stopVideosSyncing(),this.mediaEl.src=t,this.mediaClippedEl.src=t;return this}destroy(t){try{this.stopVideosSyncing&&this.stopVideosSyncing(),this.containerEl&&(t?this._restore.parent.removeChild(this.containerEl):this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.media.parentNode.removeChild(this.preview.media),this.preview.container.parentNode.removeChild(this.preview.container)))}catch(t){console.error(t)}}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),r=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.mediaEl.getBoundingClientRect();r=t/2-s/2,h=e/2-n/2}else r=t.startPosition.x,h=t.startPosition.y;if(o.move(r,h),this.preview){this.preview.media&&(this.preview.media.parentNode.removeChild(this.preview.media),this.preview.media=null);let t=document.createElement("video"===this.mediaType?"video":"img");t.src=this.mediaEl.src,"video"===this.mediaType&&(["muted","loop"].forEach((e=>t.setAttribute(e,!0))),t.setAttribute("crossOrigin","anonymous")),this.preview.media=this.preview.container.appendChild(t),this.preview.media.style.position="relative"}!0===i&&this.strictlyConstrain(),this.box=o,this.redraw();for(var a=0;a<this.handles.length;a++)!this.options.maxAspectRatio||.5!=this.handles[a].position[0]&&.5!=this.handles[a].position[1]?this.handles[a].el.style.display="block":this.handles[a].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{width:this.mediaEl["image"===this.mediaType?"naturalWidth":"videoWidth"],height:this.mediaEl["image"===this.mediaType?"naturalHeight":"videoHeight"]}}convertor(t,e,i){const s=t=>{this.showModal();const{width:e,height:i}=this.mediaEl.getBoundingClientRect();return this.resetModal(),t.width&&(t.width*=e),t.x&&(t.x*=e),t.height&&(t.height*=i),t.y&&(t.y*=i),t};return"real"===e&&"raw"===i?(t=>{this.showModal();const{width:e,height:i}=this.mediaEl.getBoundingClientRect();this.resetModal();const s=this.getSourceSize().width/e,n=this.getSourceSize().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):"ratio"===e&&"raw"===i?s(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:s}=this.mediaEl.getBoundingClientRect(),n=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<n.length;e++){const i=n[e];null!==t[i]&&("ratio"==t[i].unit?t[i]=this.convertor(t[i],"ratio","raw"):"real"===t[i].unit&&(t[i]=this.convertor(t[i],"real","raw")),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.mediaClippedEl.style.clip=`rect(${s}px, ${n}px, ${o}px, ${i}px)`;const r=this.box.getAbsolutePoint([.5,.5]),{width:h,height:a}=this.mediaEl.getBoundingClientRect(),l=r[0]-h/2>>31,d=r[1]-a/2>>31,u=-2*((l^d)+d+d+4)+8;for(let n=0;n<this.handles.length;n++){let o=this.handles[n];const r=o.el.offsetWidth,h=o.el.offsetHeight,a=i+t*o.position[0]-r/2,l=s+e*o.position[1]-h/2;o.el.style.transform=`translate(${Math.round(a)}px, ${Math.round(l)}px)`,o.el.style.zIndex=u==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=this;let i=null;function s(e){e.stopPropagation(),t.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function n(e){e.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",s),1!==t.box.width()||1!==t.box.height()?t.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:e.clientX,mouseY:e.clientY}})):t.box=i}this.overlayEl.addEventListener("mousedown",(function(o){o.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",s);const r=t.cropperEl.getBoundingClientRect(),h=o.clientX-r.left,a=o.clientY-r.top;i=t.box,t.box=new e(h,a,h+1,a+1),t.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:t.handles[4]}}))}))}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 r=this.activeHandle.originX,h=this.activeHandle.originY,a=this.activeHandle.handle,l=1===a.constraints[0],d=1===a.constraints[1],u=1===a.constraints[2],c=1===a.constraints[3],p=(c||d)&&(l||u);let m=c||d?r:this.box.x1,v=c||d?r:this.box.x2,g=l||u?h:this.box.y1,w=l||u?h:this.box.y2;m=c?i:m,v=d?i:v,g=l?s:g,w=u?s:w;let[f,E]=[!1,!1];if((c||d)&&(f=c?i>r:i<r),(l||u)&&(E=l?s>h:s<h),f){const t=m;m=v,v=t,o[0]=1-o[0]}if(E){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;p?e=s>y.y1+t*y.width()||s<y.y2-t*y.width():(l||u)&&(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:x,height:b}=this.mediaEl.getBoundingClientRect();let C=[o];this.options.maxAspectRatio&&(C=[[0,0],[1,1]]),C.map((t=>{y.constrainToBoundary(x,b,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{width:t,height:e}=this.getSourceSize(),{width:i,height:s}=this.mediaEl.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.mediaEl.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:"raw"},n={width:null,height:null,unit:"raw"},o={width:1,height:1,unit:"ratio"},r=null,h="real",a=null,l=null,d=null,u=null,c=null,p=!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 f=null,E=null;const y=["aspectRatio","maxAspectRatio"];for(var x=0;x<y.length;x++)if(void 0!==t[y[x]])if("number"==typeof t[y[x]]){let e=t[y[x]];"aspectRatio"===y[x]?f=e:E=e}else if(t[y[x]]instanceof Array){let e=t[y[x]][1]/t[y[x]][0];"aspectRatio"===y[x]?f=e:E=e}let b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"raw"});let C=null;void 0!==t.minSize&&null!==t.minSize&&(C={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"raw"});let M=null;void 0!==t.startSize&&null!==t.startSize&&(M={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"ratio"});let z=null;void 0!==t.startPosition&&null!==t.startPosition&&(z={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"ratio"});let S=null;"function"==typeof t.onInitialize&&(S=t.onInitialize);let R=null;"function"==typeof t.onCropStart&&(R=t.onCropStart);let T=null;"function"==typeof t.onCropEnd&&(T=t.onCropEnd);let L=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."),L=t.onUpdate),"function"==typeof t.onCropMove&&(L=t.onCropMove);let A=null;if(void 0!==t.returnMode){const e=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(e))throw"Invalid return mode.";A=e}const P=(t,e)=>null!==t?t:e;return{aspectRatio:P(f,e),maxAspectRatio:P(E,i),maxSize:P(b,s),minSize:P(C,n),startSize:P(M,o),startPosition:P(z,r),returnMode:P(A,h),onInitialize:P(S,a),onCropStart:P(R,l),onCropMove:P(L,d),onCropEnd:P(T,u),preview:P(v,c),responsive:P(w,p),modal:P(g,m)}}}{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(t=!1){return super.destroy(t)}moveTo(t,e,i=!0,s="raw"){if(this.showModal("moveTo"),"ratio"===s||"real"===s){let i=this.convertor({x:t,y:e},s,"raw");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="raw"){if(this.showModal("resize"),"ratio"===n||"real"===n){let i={width:t,height:e};i=this.convertor(i,n,"raw"),t=i.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="ratio"){return this.showModal("setValue"),"ratio"!==i&&"real"!==i||(t=this.convertor(t,i,"raw")),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}}}));

package.json

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

src/core.js

@@ -79,60 +79,55 @@ /**
   initialize(element) {
-
     // Create DOM elements
-    this.createDOM(element);
+    this.createDOM(element, () => {
+      // Listen for events from children
+      this.attachHandlerEvents();
+      this.attachRegionEvents();
+      this.attachOverlayEvents();
+  
+      // Bootstrap this cropper instance
+      this.showModal("init")
+      this.initializeBox(null, false)
+  
+      // Need a first redraw() to init cropprEl, imageEl dimensions
+      this.strictlyConstrain()
+      this.redraw()
+      this.resetModal("init")
+      
+      this.cropperEl.onwheel = event => {
+        event.preventDefault();
+  
+        let { deltaY } = event;
+        const maxDelta = 0.05;
+        let coeff = deltaY > 0 ? 1 : -1;
+        deltaY = Math.abs(deltaY) / 100;
+        deltaY = deltaY > maxDelta ? maxDelta : deltaY
+        deltaY = 1 + coeff*deltaY;
+        this.scaleBy(deltaY);
+  
+        // Trigger callback
+        if(this.options.onCropMove !== null) {
+          this.options.onCropMove(this.getValue());
+        } 
+        if(this.options.onCropStart !== null) {
+          this.options.onCropStart(this.getValue());
+        }
+  
+      }
+  
+      if(this.options.responsive) {
+        let onResize;
+        window.onresize = () => {
+            clearTimeout(onResize);
+            onResize = setTimeout(() => {
+                this.forceRedraw();
+            }, 100);
+        };
+      }
 
-    // Process option values
-    this.getSourceSize();
-
-    // Listen for events from children
-    this.attachHandlerEvents();
-    this.attachRegionEvents();
-    this.attachOverlayEvents();
-
-    // Bootstrap this cropper instance
-    this.showModal("init")
-    this.initializeBox(null, false)
-
-    // Need a first redraw() to init cropprEl, imageEl dimensions
-    this.strictlyConstrain()
-    this.redraw()
-    this.resetModal("init")
-
-    // Set the initalized flag to true and call the callback
-    this._initialized = true;
-    if (this.options.onInitialize !== null) {
-      this.options.onInitialize(this);
-    }
-    
-    this.cropperEl.onwheel = event => {
-      event.preventDefault();
-
-      let { deltaY } = event;
-      const maxDelta = 0.05;
-      let coeff = deltaY > 0 ? 1 : -1;
-      deltaY = Math.abs(deltaY) / 100;
-      deltaY = deltaY > maxDelta ? maxDelta : deltaY
-      deltaY = 1 + coeff*deltaY;
-      this.scaleBy(deltaY);
-
-      // Trigger callback
-      if(this.options.onCropMove !== null) {
-        this.options.onCropMove(this.getValue());
-      } 
-      if(this.options.onCropStart !== null) {
-        this.options.onCropStart(this.getValue());
+      // Set the initalized flag to true and call the callback
+      this._initialized = true;
+      if (this.options.onInitialize !== null) {
+        this.options.onInitialize(this);
       }
-
-    }
-
-    if(this.options.responsive) {
-      let onResize;
-      window.onresize = () => {
-          clearTimeout(onResize);
-          onResize = setTimeout(() => {
-              this.forceRedraw();
-          }, 100);
-      };
-    }
-    
+    });  
   }
@@ -174,3 +169,3 @@
    */
-  createDOM(targetEl) {
+  createDOM(targetEl, onInit) {
     // Create main container and use it as the main event listeners
@@ -195,3 +190,2 @@ this.containerEl = document.createElement('div');
     this.mediaEl[this.mediaType === 'image' ? 'onload' : 'onloadeddata'] = () => {
-      this.getSourceSize();
       this.options = this.parseOptions(this.initOptions);
@@ -216,3 +210,4 @@ this.showModal("setImage")
       } else this.syncVideos();
-      if(this.onMediaLoad) this.onMediaLoad();
+      if (this.onMediaLoad) this.onMediaLoad();
+      if (onInit) onInit();
     }
@@ -295,3 +290,3 @@ this.mediaEl.setAttribute('src', targetEl.getAttribute('src'));
     }
-    const attachHandlerEvents = () => {
+    const attachVideoHandlerEvents = () => {
       videoRefEventsHandlers.forEach((evenHandler, eventIndex) => {
@@ -318,3 +313,3 @@ this.videoRef.addEventListener(eventsToListen[eventIndex], evenHandler);
     
-    if (checkIfAllVideosAreReady()) attachHandlerEvents();
+    if (checkIfAllVideosAreReady()) attachVideoHandlerEvents();
     else {
@@ -326,3 +321,3 @@ let handlersHaveBeenAttached = false;
             handlersHaveBeenAttached = true;
-            attachHandlerEvents();
+            attachVideoHandlerEvents();
           }
@@ -336,3 +331,2 @@ }, { once: true });
   setLivePreview() {
-
     if(this.options.preview) {
@@ -362,4 +356,4 @@
 
-      const cropWidth = this.sourceSize.width * cropData.width;
-      const cropHeight = this.sourceSize.height * cropData.height;
+      const cropWidth = this.getSourceSize().width * cropData.width;
+      const cropHeight = this.getSourceSize().height * cropData.height;
 
@@ -378,4 +372,4 @@ const cropRatio = cropWidth / cropHeight;
 
-      let resizeWidth = (this.sourceSize.width * containerWidth) / cropWidth;
-      let resizeHeight = (this.sourceSize.height * containerHeight) / cropHeight;
+      let resizeWidth = (this.getSourceSize().width * containerWidth) / cropWidth;
+      let resizeHeight = (this.getSourceSize().height * containerHeight) / cropHeight;
 
@@ -611,7 +605,6 @@ let deltaX = -cropData.x * resizeWidth;
   getSourceSize() {
-    this.sourceSize = {
+    return {
       width: this.mediaEl[this.mediaType === 'image' ? 'naturalWidth' : 'videoWidth'],
       height: this.mediaEl[this.mediaType === 'image' ? 'naturalHeight' : 'videoHeight'],
     };
-    return this.sourceSize;
   }
@@ -624,4 +617,4 @@
       this.resetModal()
-      const factorX = this.sourceSize.width / width;
-      const factorY = this.sourceSize.height / height;
+      const factorX = this.getSourceSize().width / width;
+      const factorY = this.getSourceSize().height / height;
       if(data.width) {
@@ -628,0 +621,0 @@ data.width /= factorX;

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

200672

increased by0.06%

Worsened metrics

Lines of code

3900

decreased by-0.08%

No dependency changes