dnm-croppr - npm Package Compare versions

Comparing version 2.8.5 to 2.8.6

dist/dnm-croppr.min.js

@@ -1,2 +0,2 @@
-!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 o=(new Date).getTime(),s=Math.max(0,16-(o-t)),n=window.setTimeout((function(){e(o+s)}),s);return t=o+s,n}),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 o=document.createEvent("MouseEvent");return o.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),o}e.prototype=Event.prototype,t.MouseEvent=e}(window);class t{constructor(t,e,i,o){var s=this;function n(t){t.stopPropagation(),document.removeEventListener("mouseup",n),document.removeEventListener("mousemove",r),s.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:s}}))}function r(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=o,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",n),document.addEventListener("mousemove",r),s.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:s}}))}))}}class e{constructor(t,e,i,o){this.x1=t,this.y1=e,this.x2=i,this.y2=o}set(t=null,e=null,i=null,o=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==o?this.y2:o,this}width(){return Math.abs(this.x2-this.x1)}height(){return Math.abs(this.y2-this.y1)}resize(t,e,i=[0,0]){const o=this.x1+this.width()*i[0],s=this.y1+this.height()*i[1];return this.x1=o-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,o=null){const s=this.width()*t,n=this.height()*t;return this.resize(s,n,e),this}move(t=null,e=null){let i=this.width(),o=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+o,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",o=null){if(null===t)return;const s=this.width(),n=this.height();if(null!==o){let i=t;i>o&&(i=o,o=t);let r=s/n;if(r<i||r>o){let t=s,h=n;r>o?h=s/o:t=n*i,this.resize(t,h,e)}}else switch(i){case"height":this.resize(s,s/t,e);break;case"width":this.resize(n*t,n,e);break;default:this.resize(s,s/t,e)}return this}constrainToBoundary(t,e,i=[0,0]){const[o,s]=this.getAbsolutePoint(i),n=o,r=s,h=t-o,a=e-s,l=-2*i[0]+1,d=-2*i[1]+1;let[u,c]=[null,null];switch(l){case-1:u=n;break;case 0:u=2*Math.min(n,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,o=null,s=[0,0],n=null,r=null){let h=this.getRatio(n,r);if(t&&this.width()>t){const e=t,i=null===h?this.height():t/h;this.resize(e,i,s)}if(e&&this.height()>e){const t=null===h?this.width():e*h,i=e;this.resize(t,i,s)}if(i&&this.width()<i){const t=i,e=null===h?this.height():i/h;this.resize(t,e,s)}if(o&&this.height()<o){const t=null===h?this.width():o*h,e=o;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}))}
-/*! Fast Average Color | © 2020 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */function o(t){const e=t.toString(16);return 1===e.length?"0"+e:e}function s(t){return"#"+t.map(o).join("")}function n(t,e,i){for(let o=0;o<i.length;o++)if(r(t,e,i[o]))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 o=i[0],s=i[1],n=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],o,a)&&h(t[e+1],s,a)&&h(t[e+2],n,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 o={},s=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(s&&n(t,i,s))continue;const l=Math.round(e/24)+","+Math.round(r/24)+","+Math.round(h/24);o[l]?o[l]=[o[l][0]+e*a,o[l][1]+r*a,o[l][2]+h*a,o[l][3]+a,o[l][4]+1]:o[l]=[e*a,r*a,h*a,a,1]}const h=Object.keys(o).map((t=>o[t])).sort(((t,e)=>{const i=t[4],o=e[4];return i>o?-1:i===o?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 o=0,s=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&&n(t,i,l)||(o+=d,s+=u,r+=c,h+=e,a++)}return h?[Math.round(o/h),Math.round(s/h),Math.round(r/h),Math.round(h/a)]:i.defaultColor}function d(t,e,i){let o=0,s=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&&n(t,i,l)||(o+=e*e*c,s+=d*d*c,r+=u*u*c,h+=c,a++)}return h?[Math.round(Math.sqrt(o/h)),Math.round(Math.sqrt(s/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 o=function(t,e){const i=c(e,"left",0),o=c(e,"top",0),s=c(e,"width",t.width),n=c(e,"height",t.height);let r,h=s,a=n;return"precision"===e.mode||(s>n?(r=s/n,h=100,a=Math.round(h/r)):(r=n/s,a=100,h=Math.round(a/r)),(h>s||a>n||h<10||a<10)&&(h=s,a=n)),{srcLeft:i,srcTop:o,srcWidth:s,srcHeight:n,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(!(o.srcWidth&&o.srcHeight&&o.destWidth&&o.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=o.destWidth,this._canvas.height=o.destHeight;let s=i;try{this._ctx.clearRect(0,0,o.destWidth,o.destHeight),this._ctx.drawImage(t,o.srcLeft,o.srcTop,o.srcWidth,o.srcHeight,0,0,o.destWidth,o.destHeight);const i=this._ctx.getImageData(0,0,o.destWidth,o.destHeight).data;s=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(s)}getColorFromArray4(t,e){e=e||{};const i=t.length,o=u(e);if(i<4)return o;const s=i-i%4,n=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,s,{defaultColor:o,ignoredColor:(h=e.ignoredColor,h?Array.isArray(h)?"number"==typeof h[0]?[h.slice()]:h:[h]:h),step:n});var h}prepareResult(t){const e=t.slice(0,3),i=[].concat(e,t[3]/255),o=(299*(n=t)[0]+587*n[1]+114*n[2])/1e3<128;var n;return{value:t,rgb:"rgb("+e.join(",")+")",rgba:"rgba("+i.join(",")+")",hex:s(e),hexa:s(t),isDark:o,isLight:!o}}destroy(){delete this._canvas,delete this._ctx}_bindImageEvents(t,e){return new Promise(((i,o)=>{const s=()=>{h();const s=this.getColor(t,e);s.error?o(s.error):i(s)},n=()=>{h(),o(v(`Error loading image "${t.src}".`))},r=()=>{h(),o(v(`Image "${t.src}" loading aborted.`))},h=()=>{t.removeEventListener("load",s),t.removeEventListener("error",n),t.removeEventListener("abort",r)};t.addEventListener("load",s),t.addEventListener("error",n),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.";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||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._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this,this.mediaEl),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 o=0;o<i.length;o++)e[i[o]]=e[i[o]]>1?1:e[i[o]]<0?0:e[i[o]];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}getMedia(){return this.mediaEl}createDOM(e,o){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?["loop",...this.options.muteVideo?["muted"]:[]].forEach((t=>this.mediaEl.setAttribute(t,!0))):this.mediaEl.setAttribute("alt",e.getAttribute("alt")),this.mediaEl.setAttribute("crossOrigin","anonymous"),"video"===this.mediaType&&(this.mediaEl.onerror=t=>{const{error:e}=t.target;e&&4===e.code&&this.options.onNotSupportedVideoLoad&&this.options.onNotSupportedVideoLoad(e.message)},this.mediaEl.onloadedmetadata=t=>{const{videoHeight:e}=t.target;0===e&&this.options.onNotSupportedVideoLoad&&this.options.onNotSupportedVideoLoad("Video format is not supported")}),this.mediaEl["image"===this.mediaType?"onload":"onloadeddata"]=()=>{if(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,this.mediaEl),o&&o()},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=>()=>{"seeking"===t?this.videosToSync.forEach((t=>{t.currentTime=this.videoRef.currentTime})):"play"!==t&&"pause"!==t||this.videosToSync.forEach((e=>{e[t]()}))})),o=()=>t.filter((t=>4===t.readyState)).length===t.length,s=()=>{i.forEach(((t,i)=>{this.videoRef.addEventListener(e[i],t)}));const t=()=>{this.videosToSync.forEach((t=>{4===t.readyState&&Math.abs(this.videoRef.currentTime-t.currentTime)>.1&&(t.currentTime=this.videoRef.currentTime)})),this.videoRef&&this.videosToSync.length&&requestAnimationFrame(t)};t(),this.videosToSync.forEach((t=>t.muted=!0)),this.options.muteVideo&&(this.videoRef.muted=!0),this.stopVideosSyncing=()=>{this.videosToSync=[],i.forEach(((t,i)=>{this.videoRef.removeEventListener(e[i],t)})),this.videoRef=null,this.stopVideosSyncing=null};const o=()=>{this.options.autoPlayVideo&&this.videoRef&&this.videoRef.paused&&(this.videoRef.play(),setTimeout((()=>o()),1e3))};o()};if(o())s();else{let e=!1;t.forEach((t=>{t.addEventListener("canplay",(()=>{!e&&o()&&(e=!0,s())}),{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,o=e/i,s=this.getSourceSize().width*t.width,n=this.getSourceSize().height*t.height,r=s/n;let h=e,a=i;o>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/s,d=this.getSourceSize().height*a/n,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:o,height:s}=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(o,s,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 o=t.startSize.width,s=t.startSize.height;t.minSize&&(o<t.minSize.width?o=t.minSize.width:o<t.maxSize.width&&(o=t.maxSize.width)),t.maxSize&&(s<t.minSize.height?s=t.minSize.height:s<t.maxSize.height&&(s=t.maxSize.height));let n=new e(0,0,o,s),r=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.mediaEl.getBoundingClientRect();r=t/2-o/2,h=e/2-s/2}else r=t.startPosition.x,h=t.startPosition.y;if(n.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&&(["loop","muted"].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=n,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 n}showModal(t="default"){let e=this.modalStyle;if(e&&!0===e.modalIsDisplayed)return e;if(this.options.modal){let{modal:i}=this.options,o=i.currentStyle?i.currentStyle.display:getComputedStyle(i,null).display;e={operationName:t,modalIsDisplayed:!0,display:o,visibility:i.currentStyle?i.currentStyle.visibility:getComputedStyle(i,null).visibility},this.modalStyle=e,"none"===o&&(i.style.visibility="hidden",i.style.display="block")}return e}resetModal(t="default"){let e=this.modalStyle;if(e){let{visibility:i,display:o,operationName:s,modalIsDisplayed:n}=e;if(n&&t===s){let{modal:t}=this.options;t.style.visibility=i,t.style.display=o,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 o=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 o=this.getSourceSize().width/e,s=this.getSourceSize().height/i;return t.width&&(t.width/=o),t.x&&(t.x/=o),t.height&&(t.height/=s),t.y&&(t.y/=s),t})(t):"ratio"===e&&"raw"===i?o(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:o}=this.mediaEl.getBoundingClientRect(),s=["maxSize","minSize","startSize","startPosition"];for(let e=0;e<s.length;e++){const i=s[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>o&&(t.minSize.height=o)),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>o&&(t.startPosition.y-=s-o)}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),o=Math.round(this.box.y1),s=Math.round(this.box.x2),n=Math.round(this.box.y2);window.requestAnimationFrame((()=>{this.regionEl.style.transform=`translate(${i}px, ${o}px)`,this.regionEl.style.width=t+"px",this.regionEl.style.height=e+"px",this.mediaClippedEl.style.clip=`rect(${o}px, ${s}px, ${n}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 s=0;s<this.handles.length;s++){let n=this.handles[s];const r=n.el.offsetWidth,h=n.el.offsetHeight,a=i+t*n.position[0]-r/2,l=o+e*n.position[1]-h/2;n.el.style.transform=`translate(${Math.round(a)}px, ${Math.round(l)}px)`,n.el.style.zIndex=u==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(o){o.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:o.clientX,mouseY:o.clientY}}))}this.regionEl.addEventListener("mousedown",(function(o){o.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:o.clientX,mouseY:o.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 o(e){e.stopPropagation(),t.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function s(e){e.stopPropagation(),document.removeEventListener("mouseup",s),document.removeEventListener("mousemove",o),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(n){n.stopPropagation(),document.addEventListener("mouseup",s),document.addEventListener("mousemove",o);const r=t.cropperEl.getBoundingClientRect(),h=n.clientX-r.left,a=n.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[o,s]=this.box.getAbsolutePoint(i);this.activeHandle={handle:e,originPoint:i,originX:o,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onHandleMoveMoving(t){let{mouseX:i,mouseY:o}=t.detail,s=this.cropperEl.getBoundingClientRect();i-=s.left,o-=s.top,i<0?i=0:i>s.width&&(i=s.width),o<0?o=0:o>s.height&&(o=s.height);let n=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?o:g,w=u?o:w;let[f,y]=[!1,!1];if((c||d)&&(f=c?i>r:i<r),(l||u)&&(y=l?o>h:o<h),f){const t=m;m=v,v=t,n[0]=1-n[0]}if(y){const t=g;g=w,w=t,n[1]=1-n[1]}let E=new e(m,g,v,w);if(this.options.aspectRatio){let t=this.options.aspectRatio,e=!1;p?e=o>E.y1+t*E.width()||o<E.y2-t*E.width():(l||u)&&(e=!0);const i=e?"width":"height";E.constrainToRatio(t,n,i,this.options.maxAspectRatio)}E.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,n,this.options.aspectRatio,this.options.maxAspectRatio);const{width:x,height:b}=this.mediaEl.getBoundingClientRect();let C=[n];this.options.maxAspectRatio&&(C=[[0,0],[1,1]]),C.map((t=>{E.constrainToBoundary(x,b,t)})),this.box=E,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,o=this.cropperEl.getBoundingClientRect();e-=o.left,i-=o.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:o,offsetY:s}=this.currentMove,n=this.cropperEl.getBoundingClientRect();e-=n.left,i-=n.top,this.box.move(e-o,i-s),this.box.x1<0&&this.box.move(0,null),this.box.x2>n.width&&this.box.move(n.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>n.height&&this.box.move(null,n.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:o}=this.mediaEl.getBoundingClientRect(),s=t/i,n=e/o;return this.resetModal(),{x:Math.round(this.box.x1*s),y:Math.round(this.box.y1*n),width:Math.round(this.box.width()*s),height:Math.round(this.box.height()*n)}}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=!1,o=null,s={width:null,height:null,unit:"raw"},n={width:null,height:null,unit:"raw"},r=!1,h={width:1,height:1,unit:"ratio"},a=null,l="real",d=null,u=null,c=null,p=null,m=null,v=null,g=!0,w=null;let f=null;null!==t.preview&&(f=this.getElement(t.preview));let y=null;null!==t.modal&&(y=this.getElement(t.modal));let E=null,x=null;const b=["aspectRatio","maxAspectRatio"];for(var C=0;C<b.length;C++)if(void 0!==t[b[C]])if("number"==typeof t[b[C]]){let e=t[b[C]];"aspectRatio"===b[C]?E=e:x=e}else if(t[b[C]]instanceof Array){let e=t[b[C]][1]/t[b[C]][0];"aspectRatio"===b[C]?E=e:x=e}let S=null;void 0!==t.maxSize&&null!==t.maxSize&&(S={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"raw"});let M=null;void 0!==t.minSize&&null!==t.minSize&&(M={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 R=null;void 0!==t.startPosition&&null!==t.startPosition&&(R={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"ratio"});let T=null;"function"==typeof t.onInitialize&&(T=t.onInitialize);let L=null;"function"==typeof t.onCropStart&&(L=t.onCropStart);let V=null;"function"==typeof t.onCropEnd&&(V=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 P=null;"function"==typeof t.onNotSupportedVideoLoad&&(P=t.onNotSupportedVideoLoad);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 H=(t,e)=>null!==t?t:e;return{aspectRatio:H(E,e),autoPlayVideo:H(t.autoPlayVideo,i),maxAspectRatio:H(x,o),maxSize:H(S,s),minSize:H(M,n),muteVideo:H(t.muteVideo,r),startSize:H(z,h),startPosition:H(R,a),returnMode:H(B,l),onInitialize:H(T,d),onCropStart:H(L,u),onCropMove:H(A,c),onCropEnd:H(V,p),onNotSupportedVideoLoad:H(P,m),preview:H(f,v),responsive:H(t.responsive,g),modal:H(y,w)}}}{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,o="raw"){if(this.showModal("moveTo"),"ratio"===o||"real"===o){let i=this.convertor({x:t,y:e},o,"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,o=!0,s="raw"){if(this.showModal("resize"),"ratio"===s||"real"===s){let i={width:t,height:e};i=this.convertor(i,s,"raw"),t=i.width,e=i.height}return null===i&&(i=[.5,.5]),this.box.resize(t,e,i),!0===o&&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}}}));
+!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 o=(new Date).getTime(),n=Math.max(0,16-(o-t)),s=window.setTimeout((function(){e(o+n)}),n);return t=o+n,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(t){}function e(e,i){i=i||{bubbles:!1,cancelable:!1};var o=document.createEvent("MouseEvent");return o.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),o}e.prototype=Event.prototype,t.MouseEvent=e}(window);class t{constructor(t,e,i,o){var n=this;function s(t){t.stopPropagation(),document.removeEventListener("mouseup",s),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=o,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",s),document.addEventListener("mousemove",r),n.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:n}}))}))}}class e{constructor(t,e,i,o){this.x1=t,this.y1=e,this.x2=i,this.y2=o}set(t=null,e=null,i=null,o=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==o?this.y2:o,this}width(){return Math.abs(this.x2-this.x1)}height(){return Math.abs(this.y2-this.y1)}resize(t,e,i=[0,0]){const o=this.x1+this.width()*i[0],n=this.y1+this.height()*i[1];return this.x1=o-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,o=null){const n=this.width()*t,s=this.height()*t;return this.resize(n,s,e),this}move(t=null,e=null){let i=this.width(),o=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+o,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",o=null){if(null===t)return;const n=this.width(),s=this.height();if(null!==o){let i=t;i>o&&(i=o,o=t);let r=n/s;if(r<i||r>o){let t=n,h=s;r>o?h=n/o:t=s*i,this.resize(t,h,e)}}else switch(i){case"height":this.resize(n,n/t,e);break;case"width":this.resize(s*t,s,e);break;default:this.resize(n,n/t,e)}return this}constrainToBoundary(t,e,i=[0,0]){const[o,n]=this.getAbsolutePoint(i),s=o,r=n,h=t-o,a=e-n,l=-2*i[0]+1,d=-2*i[1]+1;let[u,c]=[null,null];switch(l){case-1:u=s;break;case 0:u=2*Math.min(s,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,o=null,n=[0,0],s=null,r=null){let h=this.getRatio(s,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(o&&this.height()<o){const t=null===h?this.width():o*h,e=o;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 o(t){const e=t.toString(16);return 1===e.length?"0"+e:e}function n(t){return"#"+t.map(o).join("")}function s(t,e,i){for(let o=0;o<i.length;o++)if(r(t,e,i[o]))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 o=i[0],n=i[1],s=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],o,a)&&h(t[e+1],n,a)&&h(t[e+2],s,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 o={},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&&s(t,i,n))continue;const l=Math.round(e/24)+","+Math.round(r/24)+","+Math.round(h/24);o[l]?o[l]=[o[l][0]+e*a,o[l][1]+r*a,o[l][2]+h*a,o[l][3]+a,o[l][4]+1]:o[l]=[e*a,r*a,h*a,a,1]}const h=Object.keys(o).map((t=>o[t])).sort(((t,e)=>{const i=t[4],o=e[4];return i>o?-1:i===o?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 o=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&&s(t,i,l)||(o+=d,n+=u,r+=c,h+=e,a++)}return h?[Math.round(o/h),Math.round(n/h),Math.round(r/h),Math.round(h/a)]:i.defaultColor}function d(t,e,i){let o=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&&s(t,i,l)||(o+=e*e*c,n+=d*d*c,r+=u*u*c,h+=c,a++)}return h?[Math.round(Math.sqrt(o/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 o=function(t,e){const i=c(e,"left",0),o=c(e,"top",0),n=c(e,"width",t.width),s=c(e,"height",t.height);let r,h=n,a=s;return"precision"===e.mode||(n>s?(r=n/s,h=100,a=Math.round(h/r)):(r=s/n,a=100,h=Math.round(a/r)),(h>n||a>s||h<10||a<10)&&(h=n,a=s)),{srcLeft:i,srcTop:o,srcWidth:n,srcHeight:s,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(!(o.srcWidth&&o.srcHeight&&o.destWidth&&o.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=o.destWidth,this._canvas.height=o.destHeight;let n=i;try{this._ctx.clearRect(0,0,o.destWidth,o.destHeight),this._ctx.drawImage(t,o.srcLeft,o.srcTop,o.srcWidth,o.srcHeight,0,0,o.destWidth,o.destHeight);const i=this._ctx.getImageData(0,0,o.destWidth,o.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,o=u(e);if(i<4)return o;const n=i-i%4,s=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:o,ignoredColor:(h=e.ignoredColor,h?Array.isArray(h)?"number"==typeof h[0]?[h.slice()]:h:[h]:h),step:s});var h}prepareResult(t){const e=t.slice(0,3),i=[].concat(e,t[3]/255),o=(299*(s=t)[0]+587*s[1]+114*s[2])/1e3<128;var s;return{value:t,rgb:"rgb("+e.join(",")+")",rgba:"rgba("+i.join(",")+")",hex:n(e),hexa:n(t),isDark:o,isLight:!o}}destroy(){delete this._canvas,delete this._ctx}_bindImageEvents(t,e){return new Promise(((i,o)=>{const n=()=>{h();const n=this.getColor(t,e);n.error?o(n.error):i(n)},s=()=>{h(),o(v(`Error loading image "${t.src}".`))},r=()=>{h(),o(v(`Image "${t.src}" loading aborted.`))},h=()=>{t.removeEventListener("load",n),t.removeEventListener("error",s),t.removeEventListener("abort",r)};t.addEventListener("load",n),t.addEventListener("error",s),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.";this._videoSyncIsRunning=!1,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||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._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this,this.mediaEl),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 o=0;o<i.length;o++)e[i[o]]=e[i[o]]>1?1:e[i[o]]<0?0:e[i[o]];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}getMedia(){return this.mediaEl}createDOM(e,o){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?["loop",...this.options.muteVideo?["muted"]:[]].forEach((t=>this.mediaEl.setAttribute(t,!0))):this.mediaEl.setAttribute("alt",e.getAttribute("alt")),this.mediaEl.setAttribute("crossOrigin","anonymous"),"video"===this.mediaType&&(this.mediaEl.onerror=t=>{const{error:e}=t.target;e&&4===e.code&&this.options.onNotSupportedVideoLoad&&this.options.onNotSupportedVideoLoad(e.message)},this.mediaEl.onloadedmetadata=t=>{const{videoHeight:e}=t.target;0===e&&this.options.onNotSupportedVideoLoad&&this.options.onNotSupportedVideoLoad("Video format is not supported")}),this.mediaEl["image"===this.mediaType?"onload":"onloadeddata"]=()=>{if(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,this.mediaEl),o&&o()},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 s=document.createElement("div");s.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),s.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(s),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","seeking"],i=e.map((t=>()=>{"seeking"===t?this.videosToSync.forEach((t=>{t.currentTime=this.videoRef.currentTime})):"play"!==t&&"pause"!==t||this.videosToSync.forEach((e=>{e[t]()}))}));this._videoSyncIsRunning||(this._videoSyncIsRunning=!0,this.resyncVideosOnRequestAnimationFrame()),this.stopVideosSyncing=()=>{this.videosToSync=[],this._videoSyncIsRunning=!1,i.forEach(((t,i)=>{this.videoRef&&this.videoRef.removeEventListener(e[i],t)})),this.videoRef=null,this.stopVideosSyncing=null};const o=()=>t.filter((t=>4===t.readyState)).length===t.length,n=()=>{i.forEach(((t,i)=>{this.videoRef.addEventListener(e[i],t)})),this.videosToSync.forEach((t=>t.muted=!0)),this.options.muteVideo&&(this.videoRef.muted=!0);const t=()=>{this.options.autoPlayVideo&&this.videoRef&&this.videoRef.paused&&(this.videoRef.play(),setTimeout((()=>t()),1e3))};t()};if(o())n();else{let e=!1;t.forEach((t=>{t.addEventListener("canplay",(()=>{!e&&o()&&(e=!0,n())}),{once:!0})}))}}resyncVideosOnRequestAnimationFrame(){this.videoRef&&this.videosToSync.length>0&&this.videosToSync.forEach((t=>{4===t.readyState&&Math.abs(this.videoRef.currentTime-t.currentTime)>.1&&(t.currentTime=this.videoRef.currentTime)})),!0===this._videoSyncIsRunning&&requestAnimationFrame(this.resyncVideosOnRequestAnimationFrame.bind(this))}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,o=e/i,n=this.getSourceSize().width*t.width,s=this.getSourceSize().height*t.height,r=n/s;let h=e,a=i;o>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/s,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:o,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(o,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 o=t.startSize.width,n=t.startSize.height;t.minSize&&(o<t.minSize.width?o=t.minSize.width:o<t.maxSize.width&&(o=t.maxSize.width)),t.maxSize&&(n<t.minSize.height?n=t.minSize.height:n<t.maxSize.height&&(n=t.maxSize.height));let s=new e(0,0,o,n),r=0,h=0;if(null===t.startPosition){const{width:t,height:e}=this.mediaEl.getBoundingClientRect();r=t/2-o/2,h=e/2-n/2}else r=t.startPosition.x,h=t.startPosition.y;if(s.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&&(["loop","muted"].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=s,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 s}showModal(t="default"){let e=this.modalStyle;if(e&&!0===e.modalIsDisplayed)return e;if(this.options.modal){let{modal:i}=this.options,o=i.currentStyle?i.currentStyle.display:getComputedStyle(i,null).display;e={operationName:t,modalIsDisplayed:!0,display:o,visibility:i.currentStyle?i.currentStyle.visibility:getComputedStyle(i,null).visibility},this.modalStyle=e,"none"===o&&(i.style.visibility="hidden",i.style.display="block")}return e}resetModal(t="default"){let e=this.modalStyle;if(e){let{visibility:i,display:o,operationName:n,modalIsDisplayed:s}=e;if(s&&t===n){let{modal:t}=this.options;t.style.visibility=i,t.style.display=o,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 o=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 o=this.getSourceSize().width/e,n=this.getSourceSize().height/i;return t.width&&(t.width/=o),t.x&&(t.x/=o),t.height&&(t.height/=n),t.y&&(t.y/=n),t})(t):"ratio"===e&&"raw"===i?o(t):null}convertOptionsToPixels(t=null){let e=!1;null===t&&(t=this.options,e=!0);const{width:i,height:o}=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>o&&(t.minSize.height=o)),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>o&&(t.startPosition.y-=n-o)}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),o=Math.round(this.box.y1),n=Math.round(this.box.x2),s=Math.round(this.box.y2);window.requestAnimationFrame((()=>{this.regionEl.style.transform=`translate(${i}px, ${o}px)`,this.regionEl.style.width=t+"px",this.regionEl.style.height=e+"px",this.mediaClippedEl.style.clip=`rect(${o}px, ${n}px, ${s}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 s=this.handles[n];const r=s.el.offsetWidth,h=s.el.offsetHeight,a=i+t*s.position[0]-r/2,l=o+e*s.position[1]-h/2;s.el.style.transform=`translate(${Math.round(a)}px, ${Math.round(l)}px)`,s.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(o){o.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:o.clientX,mouseY:o.clientY}}))}this.regionEl.addEventListener("mousedown",(function(o){o.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:o.clientX,mouseY:o.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 o(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",o),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(s){s.stopPropagation(),document.addEventListener("mouseup",n),document.addEventListener("mousemove",o);const r=t.cropperEl.getBoundingClientRect(),h=s.clientX-r.left,a=s.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[o,n]=this.box.getAbsolutePoint(i);this.activeHandle={handle:e,originPoint:i,originX:o,originY:n},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}onHandleMoveMoving(t){let{mouseX:i,mouseY:o}=t.detail,n=this.cropperEl.getBoundingClientRect();i-=n.left,o-=n.top,i<0?i=0:i>n.width&&(i=n.width),o<0?o=0:o>n.height&&(o=n.height);let s=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?o:g,w=u?o:w;let[f,y]=[!1,!1];if((c||d)&&(f=c?i>r:i<r),(l||u)&&(y=l?o>h:o<h),f){const t=m;m=v,v=t,s[0]=1-s[0]}if(y){const t=g;g=w,w=t,s[1]=1-s[1]}let E=new e(m,g,v,w);if(this.options.aspectRatio){let t=this.options.aspectRatio,e=!1;p?e=o>E.y1+t*E.width()||o<E.y2-t*E.width():(l||u)&&(e=!0);const i=e?"width":"height";E.constrainToRatio(t,s,i,this.options.maxAspectRatio)}E.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,s,this.options.aspectRatio,this.options.maxAspectRatio);const{width:x,height:b}=this.mediaEl.getBoundingClientRect();let C=[s];this.options.maxAspectRatio&&(C=[[0,0],[1,1]]),C.map((t=>{E.constrainToBoundary(x,b,t)})),this.box=E,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,o=this.cropperEl.getBoundingClientRect();e-=o.left,i-=o.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:o,offsetY:n}=this.currentMove,s=this.cropperEl.getBoundingClientRect();e-=s.left,i-=s.top,this.box.move(e-o,i-n),this.box.x1<0&&this.box.move(0,null),this.box.x2>s.width&&this.box.move(s.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>s.height&&this.box.move(null,s.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:o}=this.mediaEl.getBoundingClientRect(),n=t/i,s=e/o;return this.resetModal(),{x:Math.round(this.box.x1*n),y:Math.round(this.box.y1*s),width:Math.round(this.box.width()*n),height:Math.round(this.box.height()*s)}}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=!1,o=null,n={width:null,height:null,unit:"raw"},s={width:null,height:null,unit:"raw"},r=!1,h={width:1,height:1,unit:"ratio"},a=null,l="real",d=null,u=null,c=null,p=null,m=null,v=null,g=!0,w=null;let f=null;null!==t.preview&&(f=this.getElement(t.preview));let y=null;null!==t.modal&&(y=this.getElement(t.modal));let E=null,x=null;const b=["aspectRatio","maxAspectRatio"];for(var C=0;C<b.length;C++)if(void 0!==t[b[C]])if("number"==typeof t[b[C]]){let e=t[b[C]];"aspectRatio"===b[C]?E=e:x=e}else if(t[b[C]]instanceof Array){let e=t[b[C]][1]/t[b[C]][0];"aspectRatio"===b[C]?E=e:x=e}let S=null;void 0!==t.maxSize&&null!==t.maxSize&&(S={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"raw"});let M=null;void 0!==t.minSize&&null!==t.minSize&&(M={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 R=null;void 0!==t.startPosition&&null!==t.startPosition&&(R={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"ratio"});let T=null;"function"==typeof t.onInitialize&&(T=t.onInitialize);let L=null;"function"==typeof t.onCropStart&&(L=t.onCropStart);let V=null;"function"==typeof t.onCropEnd&&(V=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 P=null;"function"==typeof t.onNotSupportedVideoLoad&&(P=t.onNotSupportedVideoLoad);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 _=(t,e)=>null!==t?t:e;return{aspectRatio:_(E,e),autoPlayVideo:_(t.autoPlayVideo,i),maxAspectRatio:_(x,o),maxSize:_(S,n),minSize:_(M,s),muteVideo:_(t.muteVideo,r),startSize:_(z,h),startPosition:_(R,a),returnMode:_(B,l),onInitialize:_(T,d),onCropStart:_(L,u),onCropMove:_(A,c),onCropEnd:_(V,p),onNotSupportedVideoLoad:_(P,m),preview:_(f,v),responsive:_(t.responsive,g),modal:_(y,w)}}}{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,o="raw"){if(this.showModal("moveTo"),"ratio"===o||"real"===o){let i=this.convertor({x:t,y:e},o,"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,o=!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===o&&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}}}));

examples/index.js

@@ -8,2 +8,4 @@ var croppr = new Croppr("#cropper", {
     preview: "#cropPreview",
+    autoPlayVideo: true,
+    muteVideo: true,
     onInitialize: function(instance) { console.log("INIT", instance) },
@@ -10,0 +12,0 @@ onNotSupportedVideoLoad: function(error) { console.error("NOT SUPPORTED", error)},

examples/modal/dnm-croppr-in-modal.js

@@ -9,2 +9,4 @@ var croppr = new Croppr("#cropper", {
     modal: "#myModal",
+    autoPlayVideo: true,
+    muteVideo: true,
     onInitialize: function(instance) { console.log("INIT", instance) },
@@ -11,0 +13,0 @@ onCropEnd: function(data) { console.log("END", data) },

package.json

 {
   "name": "dnm-croppr",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "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

@@ -51,2 +51,3 @@ /**
     // Define internal props
+    this._videoSyncIsRunning = false;
     this._initialized = false;
@@ -272,3 +273,3 @@ this._restore = {
 
-    const eventsToListen = ['play', 'pause', 'timeupdate', 'seeking'];
+    const eventsToListen = ['play', 'pause', 'seeking'];
     const videoRefEventsHandlers = eventsToListen.map(event => {
@@ -288,2 +289,16 @@ return () => {
 
+    if (!this._videoSyncIsRunning) {
+      this._videoSyncIsRunning = true;
+      this.resyncVideosOnRequestAnimationFrame();
+    }
+    this.stopVideosSyncing = () => {
+      this.videosToSync = [];
+      this._videoSyncIsRunning = false;
+      videoRefEventsHandlers.forEach((evenHandler, eventIndex) => {
+        if (this.videoRef) this.videoRef.removeEventListener(eventsToListen[eventIndex], evenHandler);
+      });
+      this.videoRef = null;
+      this.stopVideosSyncing = null;
+    }
+
     const checkIfAllVideosAreReady = () => {
@@ -296,14 +311,2 @@ return videos.filter(video => video.readyState === 4).length === videos.length;
       });
-      const sync = () => {
-        this.videosToSync.forEach(videoToSync => {
-          if (videoToSync.readyState === 4) {
-            // Do not resync if videos are already in sync
-            if (Math.abs(this.videoRef.currentTime - videoToSync.currentTime) > 0.1){
-              videoToSync.currentTime = this.videoRef.currentTime;
-            }
-          }
-        });
-        if (this.videoRef && this.videosToSync.length) requestAnimationFrame(sync);
-      }
-      sync();
 
@@ -313,10 +316,2 @@ this.videosToSync.forEach(videoToSync => videoToSync.muted = true);
 
-      this.stopVideosSyncing = () => {
-        this.videosToSync = [];
-        videoRefEventsHandlers.forEach((evenHandler, eventIndex) => {
-          this.videoRef.removeEventListener(eventsToListen[eventIndex], evenHandler);
-        });
-        this.videoRef = null;
-        this.stopVideosSyncing = null;
-      }
       const autoPlay = () => {
@@ -345,2 +340,17 @@ if (this.options.autoPlayVideo && this.videoRef && this.videoRef.paused) {
 
+  
+  resyncVideosOnRequestAnimationFrame() {
+    if (this.videoRef && this.videosToSync.length > 0) {
+      this.videosToSync.forEach(videoToSync => {
+        if (videoToSync.readyState === 4) {
+          // Do not resync if videos are already in sync
+          if (Math.abs(this.videoRef.currentTime - videoToSync.currentTime) > 0.1){
+            videoToSync.currentTime = this.videoRef.currentTime;
+          }
+        }
+      });
+    }
+    if (this._videoSyncIsRunning === true) requestAnimationFrame(this.resyncVideosOnRequestAnimationFrame.bind(this));
+  }
+
   //If preview isn't null, create preview DOM
@@ -347,0 +357,0 @@ setLivePreview() {

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

446314

increased by0.21%

Lines of code

4480

increased by0.43%

No dependency changes