@scandit/web-datacapture-core
Version:
Scandit Data Capture SDK for the Web
1 lines • 5.6 kB
JavaScript
import {c,a as a$1,b}from'./chunk-JFRSUCMO.js';import {a as a$3}from'./chunk-EQRBQJYM.js';import {a as a$2}from'./chunk-GHTCNOQN.js';import {a as a$4}from'./chunk-XR65N6EG.js';var a=class a{constructor(e){this.canUploadFile=false;this._mounted=false;this._loading=false;this._htmlRoot=void 0;this._canvas=void 0;this._onInputCheck=void 0;this._onBeforeFileRead=void 0;this._onImageLoadError=void 0;this._onFileReaderError=void 0;this._onCaptureReady=void 0;this._resizedImageSizeLimit=1440;this._inputElement=void 0;this._buttonElement=void 0;this._informationElement=void 0;this._chooseImageText="";this._localizationSubscription=void 0;this._onLocalizationUpdated=this.onLocalizationUpdated.bind(this);this._settings=e;}get canvas(){return this._canvas||(this._canvas=document.createElement("canvas")),this._canvas}get canvasContext(){return this._canvasContext||(this._canvasContext=this.canvas.getContext("2d",{willReadFrequently:true})),this._canvasContext}mount(e){var g;if(this._mounted)return;if(!document.head.querySelector(`[data-component=${a.componentName}]`)){let s=document.createElement("style");s.dataset.component=a.componentName,s.textContent=c,document.head.append(s);}let t=document.createElement("div");t.className=a$1.SINGLE_IMAGE_UPLOADER_CONTAINER,Object.assign(t.style,b.SINGLE_IMAGE_UPLOADER_CONTAINER_STYLE,this._settings.containerStyle),e.append(t);let{iconElement:n,iconStyle:r,informationElement:i,informationStyle:l,buttonElement:d,buttonStyle:h,onlyCameraCapture:p}=this._settings;Object.assign(n.style,b.SINGLE_IMAGE_UPLOADER_ICON_STYLE,r,{maxWidth:"100px",maxHeight:"100px"}),t.append(n),i.hasAttribute(a.DEFAULT_DOM_ATTRIBUTE)&&(Object.assign(i.style,b.SINGLE_IMAGE_UPLOADER_INFORMATION_STYLE,l),i.textContent=a$2.getInstance().get("core.singleImageUploader.title")),t.append(i);let o=document.createElement("input");o.type="file",o.accept="image/*",p&&(o.capture="environment",o.dataset.onlyCaptureOnMobile="environment"),o.addEventListener("change",s=>{this.onFileUpload(s);}),o.addEventListener("click",s=>{var m;(m=this._onInputCheck)==null||m.call(this,s);}),o.addEventListener("keydown",s=>{var m;(m=this._onInputCheck)==null||m.call(this,s);});let v=document.createElement("label");v.append(o),d.hasAttribute(a.DEFAULT_DOM_ATTRIBUTE)&&Object.assign(d.style,b.SINGLE_IMAGE_UPLOADER_BUTTON_STYLE,h),v.append(d),t.append(v);let E=document.createRange().createContextualFragment(atob(a$3)).firstElementChild;Object.assign(E.style,{position:"absolute",bottom:"1em",right:"1em",width:"10em"}),t.append(E),this._htmlRoot=t,this._mounted=true,this._inputElement=o,this._buttonElement=d,this._chooseImageText=(g=d.textContent)!=null?g:"",this._informationElement=i,this._localizationSubscription=a$2.getInstance().subscribe(this._onLocalizationUpdated);}unmount(){var e,t,n;this._mounted&&((e=this._htmlRoot)==null||e.remove(),(t=document.head.querySelector(`[data-component=${a.componentName}]`))==null||t.remove(),(n=this._localizationSubscription)==null||n.cancel(),this._mounted=false);}setButtonState(e){this._inputElement&&(this._inputElement.disabled=e==="disabled");}getButtonState(){return this._inputElement?this._inputElement.disabled?"disabled":"enabled":"disabled"}onInputCheck(e){this._onInputCheck=e;}onBeforeFileRead(e){this._onBeforeFileRead=e;}onImageLoadError(e){this._onImageLoadError=e;}onFileReaderError(e){this._onFileReaderError=e;}onCaptureReady(e){this._onCaptureReady=e;}onAfterImageProcessed(){this.setLoading(false);}onLocalizationUpdated(){var e,t;(e=this._buttonElement)!=null&&e.hasAttribute(a.DEFAULT_DOM_ATTRIBUTE)&&(this._buttonElement.textContent=a$2.getInstance().get("core.singleImageUploader.button")),(t=this._informationElement)!=null&&t.hasAttribute(a.DEFAULT_DOM_ATTRIBUTE)&&(this._informationElement.textContent=a$2.getInstance().get("core.singleImageUploader.title"));}setLoading(e){this._buttonElement&&(this.setButtonState(e?"disabled":"enabled"),this._buttonElement.textContent=e?"...":this._chooseImageText,this._loading=e);}getResizedImageDimensions(e,t){return e<=this._resizedImageSizeLimit&&t<=this._resizedImageSizeLimit?{width:e,height:t}:e>t?{width:this._resizedImageSizeLimit,height:Math.round(t/e*this._resizedImageSizeLimit)}:{width:Math.round(e/t*this._resizedImageSizeLimit),height:this._resizedImageSizeLimit}}onImageLoad(e){var i;let{height:t,width:n}=this.getResizedImageDimensions(e.naturalWidth,e.naturalHeight);this.canvasContext.canvas.width=n,this.canvasContext.canvas.height=t,this.canvasContext.drawImage(e,0,0,n,t);let r={data:this.canvasContext.getImageData(0,0,n,t).data,width:n,height:t};(i=this._onCaptureReady)==null||i.call(this,r);}onFileReaderLoad(e,t,n){e.value="",t.result!=null&&(n.addEventListener("load",()=>{this.onImageLoad(n);},{once:true}),n.addEventListener("error",r=>{var i;(i=this._onImageLoadError)==null||i.call(this,r),this.setLoading(false);},{once:true}),n.src=t.result);}async onFileUpload(e){var d;this.setLoading(true);let t=e.currentTarget,{files:n}=t;if(n==null||n.length===0){this.setLoading(false);return}let r=(d=this._onBeforeFileRead)==null?void 0:d.call(this,e);if(r instanceof Promise&&await r,!this.canUploadFile){t.value="",a$4.warn("Can't upload file, no capture mode enabled."),this.setLoading(false);return}let i=new Image,l=new FileReader;l.addEventListener("load",()=>{this.onFileReaderLoad(t,l,i);}),l.addEventListener("error",h=>{var p;(p=this._onFileReaderError)==null||p.call(this,h),this.setLoading(false);}),l.readAsDataURL(n[0]);}};a.componentName="SingleImageUploaderView",a.DEFAULT_DOM_ATTRIBUTE="data-scandit-default";var I=a;export{I as a};