@scandit/web-datacapture-barcode/build/js/find/BarcodeFindView.js

Scandit Data Capture SDK for the Web

import{defaultBarcodeFind as e}from"../defaults/DefaultsBarcodeFind.js";import{BarcodeFind as t}from"./BarcodeFind.js";import{BarcodeFindBasicOverlay as n}from"./BarcodeFindBasicOverlay.js";import{BarcodeFindPresenter as r}from"./BarcodeFindPresenter.js";import{Dot as i}from"./ui/atoms/Dot.js";import{ExitSvgIcon as a}from"./ui/atoms/ExitSvgIcon.js";import{ItemFoundSvgIcon as o}from"./ui/atoms/ItemFoundSvgIcon.js";import{CardListContainer as s}from"./ui/molecules/CardListContainer.js";import{ProgressBarWithLabel as c}from"./ui/molecules/ProgressBarWithLabel.js";import{FindLayout as l}from"./ui/organisms/FindLayout.js";import{isDataCaptureView as u}from"../private/isDataCaptureView.js";import{BarcodeSvgIcon as d}from"./ui/atoms/BarcodeSvgIcon.js";import{ImageAndTextCardLayout as f}from"./ui/molecules/ImageAndTextCardLayout.js";import{Anchor as p,DataCaptureView as m,Localization as h,Point as g,Size as _,ZoomSwitchControl as v}from"@scandit/web-datacapture-core";import{ShutterButton as y}from"@scandit/web-datacapture-core/build/js/private/ui/atoms/ShutterButton.js";import{ScanditHTMLElement as b}from"@scandit/web-datacapture-core/build/js/private/utils/ScanditHTMLElement.js";import{defineCustomElements as x}from"@scandit/web-datacapture-core/build/js/private/utils/defineCustomElements.js";import{html as S}from"@scandit/web-datacapture-core/build/js/private/utils/html.js";import{Card as C}from"@scandit/web-datacapture-core/build/js/private/ui/atoms/Card.js";import{TorchSwitchIconButton as w}from"@scandit/web-datacapture-core/build/js/private/ui/molecules/TorchSwitchIconButton.js";const T={FinishButton:a.tag,ShutterButton:y.tag,ProgressBarWithLabel:c.tag,CardListContainer:s.tag,TorchSwitchIconButton:w.tag};var E=class E extends b{constructor(...e){super(...e),this.shouldShowCarousel=!0,this.shouldShowPauseButton=!0,this.shouldShowFinishButton=!0,this.shouldShowProgressBar=!0,this.torchControlPosition=p.TopLeft,this.zoomControlPosition=p.TopRight,this.textForItemListUpdatedWhenPausedHint=null,this.textForItemListUpdatedHint=null,this.textForTapShutterToResumeSearchHint=null,this.textForTapShutterToPauseScreenHint=null,this.textForMoveCloserToBarcodesHint=null,this.textForPointAtBarcodesToSearchHint=null,this.textForAllItemsFoundSuccessfullyHint=null,this.textForCollapseCardsButton=h.getInstance().get(`barcode.find.view.textForCollapseCardsButton`),this.barcodeFindViewUiListener=null,this.shutterButton=null,this.finishButton=null,this.progressBar=null,this.cardList=null,this.onShutterButtonClickedHandler=this.onShutterButtonClicked.bind(this),this.onFinishButtonClickedHandler=this.onFinishButtonClicked.bind(this),this.onTorchButtonClickedHandler=this.onTorchButtonClicked.bind(this),this.torchSwitchIconButton=null,this._shouldShowTorchControl=!1,this._isTorchAvailable=!1,this.zoomSwitchControl=null,this._shouldShowZoomControl=!1,this.onDotClickHandler=this.onDotClick.bind(this)}set shouldShowTorchControl(e){this._shouldShowTorchControl=e,this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.hidden=!(e&&this._isTorchAvailable))}get shouldShowTorchControl(){return this._shouldShowTorchControl}set shouldShowZoomControl(e){var t;this._shouldShowZoomControl=e;let n=(t=this.zoomSwitchControl)==null?void 0:t.zoomSwitchPill;n!=null&&(n.hidden=!e)}get shouldShowZoomControl(){return this._shouldShowZoomControl}get camera(){return this.presenter.context.frameSource}get logoStyle(){return this.dataCaptureView.logoStyle}set logoStyle(e){this.dataCaptureView.logoStyle=e}get logoAnchor(){return this.dataCaptureView.logoAnchor}set logoAnchor(e){this.dataCaptureView.logoAnchor=e}static async createWithSettings(e,i,o,d,f){let p=document.createElement(E.tag);p.barcodeFindViewSettings=d,p.layout=l.create(),p.layout.innerHTML=S`<${c.tag} slot="progress" value="0" max="1" ${p.shouldShowProgressBar?``:`hidden`}></${c.tag}><${w.tag} slot="top-controls-left" ${p.shouldShowTorchControl?``:`hidden`}></${w.tag}><${s.tag} slot="card-list" hidden text-for-collapse-cards-button=${p.textForCollapseCardsButton}></${s.tag}><${y.tag} slot="bottom-controls-center" variant="play" ${p.shouldShowPauseButton?``:`hidden`}></${y.tag}><${a.tag} slot="bottom-controls-right" ${p.shouldShowFinishButton?``:`hidden`}></${a.tag}>`,p.append(p.layout),u(e)?(p.dataCaptureView=e,e.htmlElement.prepend(p),await i.setMode(o),await e.setContext(i)):(p.dataCaptureView=await m.forContext(i),p.dataCaptureView.connectToElement(e),e.prepend(p));let h=f??t.recommendedCameraSettings;return h.zoomLevels=[.5,1],p.presenter=new r(p,i,o,d,h),await p.presenter.prepare(),await p.installZoomControl(),p.barcodeFindBasicOverlay=await n.withBarcodeFind(o,p.dataCaptureView),p}static async create(n,r,i){return E.register(),E.createWithSettings(n,r,i,e.BarcodeFindViewSettings.settings,t.recommendedCameraSettings)}static register(){x({[E.tag]:E,[w.tag]:w,[y.tag]:y,[c.tag]:c,[s.tag]:s,[a.tag]:a,[l.tag]:l})}async startSearching(){return this.onShutterButtonClickedHandler()}async stopSearching(){return this.presenter.stopSearching()}async pauseSearching(){return this.onShutterButtonClickedHandler()}setListener(e){this.barcodeFindViewUiListener=e,this.presenter.barcodeFindViewUiListener=this.barcodeFindViewUiListener}async setShouldShowUserGuidanceView(e){return this.shouldShowUserGuidance=e,this.barcodeFindBasicOverlay.setUserGuidanceEnabled(this.shouldShowUserGuidance)}async setShouldShowHints(e){return this.shouldShowHints=e,this.barcodeFindBasicOverlay.setShouldShowHint(this.shouldShowHints)}setShouldShowCarousel(e){this.shouldShowCarousel=e,this.layout.toggleVisibility(T.CardListContainer,e)}setShouldShowPauseButton(e){this.shouldShowPauseButton=e,this.layout.toggleVisibility(T.ShutterButton,e)}setShouldShowFinishButton(e){this.shouldShowFinishButton=e,this.layout.toggleVisibility(T.FinishButton,e)}setShouldShowProgressBar(e){this.shouldShowProgressBar=e,this.layout.toggleVisibility(T.ProgressBarWithLabel,e)}setShouldShowTorchControl(e){this.shouldShowTorchControl=e}setShouldShowZoomControl(e){this.shouldShowZoomControl=e}setTorchAvailable(e){this._isTorchAvailable=e,this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.hidden=!(this._shouldShowTorchControl&&this._isTorchAvailable))}setTorchControlPosition(e){var t;this.torchControlPosition=e,[p.TopCenter,p.TopLeft,p.TopRight,p.BottomLeft].includes(e)||(this.torchControlPosition=p.TopLeft);let n={[p.TopCenter]:`top-controls-center`,[p.TopLeft]:`top-controls-left`,[p.TopRight]:`top-controls-right`,[p.BottomLeft]:`bottom-controls-left`}[this.torchControlPosition];(t=this.torchSwitchIconButton)==null||t.setAttribute(`slot`,n)}setZoomControlPosition(e){var t;this.zoomControlPosition=e,[p.TopCenter,p.TopLeft,p.TopRight,p.BottomLeft].includes(e)||(this.zoomControlPosition=p.TopRight);let n={[p.TopCenter]:`top-controls-center`,[p.TopLeft]:`top-controls-left`,[p.TopRight]:`top-controls-right`,[p.BottomLeft]:`bottom-controls-left`}[this.zoomControlPosition],r=(t=this.zoomSwitchControl)==null?void 0:t.zoomSwitchPill;r==null||r.setAttribute(`slot`,n)}setTextForCollapseCardsButton(e){this.textForCollapseCardsButton=e,this.cardList!=null&&(this.cardList[`text-for-collapse-cards-button`]=e)}async setTextForAllItemsFoundSuccessfullyHint(e){return this.textForAllItemsFoundSuccessfullyHint=e,this.barcodeFindBasicOverlay.setTextForAllItemsFoundSuccessfullyHint(this.textForAllItemsFoundSuccessfullyHint)}async setTextForPointAtBarcodesToSearchHint(e){return this.textForPointAtBarcodesToSearchHint=e,this.barcodeFindBasicOverlay.setTextForPointAtBarcodesToSearchHint(this.textForPointAtBarcodesToSearchHint)}async setTextForMoveCloserToBarcodesHint(e){return this.textForMoveCloserToBarcodesHint=e,this.barcodeFindBasicOverlay.setTextForMoveCloserToBarcodesHint(this.textForMoveCloserToBarcodesHint)}async setTextForTapShutterToPauseScreenHint(e){return this.textForTapShutterToPauseScreenHint=e,this.barcodeFindBasicOverlay.setTextForTapShutterToPauseScreenHint(this.textForTapShutterToPauseScreenHint)}async setTextForTapShutterToResumeSearchHint(e){return this.textForTapShutterToResumeSearchHint=e,this.barcodeFindBasicOverlay.setTextForTapShutterToResumeScreenHint(this.textForTapShutterToResumeSearchHint)}async setTextForItemListUpdatedWhenPausedHint(e){return this.textForItemListUpdatedWhenPausedHint=e,this.barcodeFindBasicOverlay.setTextForItemListUpdatedWhenPausedHint(this.textForItemListUpdatedWhenPausedHint)}async setTextForItemListUpdatedHint(e){return this.textForItemListUpdatedHint=e,this.barcodeFindBasicOverlay.setTextForItemListUpdatedHint(this.textForItemListUpdatedHint)}connectedCallback(){var e,t,n;this.shutterButton=this.layout.querySelector(T.ShutterButton),this.finishButton=this.layout.querySelector(T.FinishButton),this.progressBar=this.layout.querySelector(T.ProgressBarWithLabel),this.cardList=this.layout.querySelector(T.CardListContainer),this.torchSwitchIconButton=this.layout.querySelector(T.TorchSwitchIconButton),(e=this.torchSwitchIconButton)==null||e.addEventListener(`pointerdown`,this.onTorchButtonClickedHandler),(t=this.shutterButton)==null||t.addEventListener(`pointerdown`,this.onShutterButtonClickedHandler),(n=this.finishButton)==null||n.addEventListener(`pointerdown`,this.onFinishButtonClickedHandler),this.layout.addEventListener(`onlayouttap`,this.onDotClickHandler)}disconnectedCallback(){var e,t,n,r;(e=this.shutterButton)==null||e.removeEventListener(`pointerdown`,this.onShutterButtonClickedHandler),(t=this.torchSwitchIconButton)==null||t.addEventListener(`pointerdown`,this.onTorchButtonClickedHandler),(n=this.finishButton)==null||n.removeEventListener(`pointerdown`,this.onFinishButtonClickedHandler),this.layout.removeEventListener(`onlayouttap`,this.onDotClickHandler),(r=this.zoomSwitchControl)==null||r.remove(),this.presenter.dispose()}async installZoomControl(){this.zoomSwitchControl=new v,await this.zoomSwitchControl.install(this.dataCaptureView);let e=this.zoomSwitchControl.zoomSwitchPill;e!=null&&(e.setAttribute(`slot`,`top-controls-right`),e.hidden=!this._shouldShowZoomControl,this.layout.append(e))}async onShutterButtonClicked(){this.presenter.onShutterButtonClicked()}async onTorchButtonClicked(){this.presenter.onTorchButtonClicked()}updateProgressBar(e,t){this.progressBar&&(this.progressBar.value!==e&&(this.progressBar.value=e),t!=null&&this.progressBar.max!==t&&(this.progressBar.max=t))}setShutterButtonPulse(e){this.shutterButton!=null&&(this.shutterButton.pulse=e)}switchToPaused(e,t){var n,r;let i=[];for(let n of e){var a,s,c;let e=C.create();e.id=`${String(n.uid)}`;let r=f.create();if(e.append(r),r.title=((a=n.content)==null?void 0:a.info)??n.searchOptions.barcodeData,((s=n.content)==null?void 0:s.additionalInfo)!=null){var l;r.subtitle=((l=n.content)==null?void 0:l.additionalInfo)??``}if(t.find(e=>e.searchOptions.barcodeData===n.searchOptions.barcodeData)!=null){let e=o.create();e.slot=`right`,r.append(e)}if(((c=n.content)==null?void 0:c.image)==null){let e=d.create();e.slot=`image-left`,r.append(e)}else{var u,p;let e=document.createElement(`img`);e.slot=`image-left`,e.src=((u=n.content)==null?void 0:u.image)??``,e.alt=((p=n.content)==null?void 0:p.additionalInfo)??``,r.append(e)}i.push(e)}(n=this.cardList)==null||n.renderCards(i),(r=this.cardList)==null||r.removeAttribute(`hidden`),this.shutterButton.variant=`play`,this.shutterButton.pulse=!1,this.toggleDotPulse(!1)}moveCardOnTheFront(e){var t;if(!e)return;let n=(t=this.cardList)==null?void 0:t.getCardBySelector(`${C.tag}#${e.uid}`);if(n!=null){var r;(r=this.cardList)==null||r.unshiftCard(n)}}switchToStarted(){var e;this.clearDots(),(e=this.cardList)==null||e.setAttribute(`hidden`,``),this.shutterButton.variant=`pause`}toggleTorchIcon(e){this.torchSwitchIconButton&&(this.torchSwitchIconButton.state=e)}onFinishButtonClicked(){this.presenter.onFinishButtonClicked()}clearDots(){let e=this.layout.querySelectorAll(`[data-identifier]`);for(let t of e)t.remove()}toggleDotPulse(e){let t=[...this.layout.querySelectorAll(`[data-identifier]`)];for(let n of t)n.pulse=e}pointTransformation(e){return`translate3d(calc(${e.x}px - 50%), calc(${e.y}px - 50%), 0px)`}onDotClick(e){let t=e.detail.target;if(t.dataset.identifier!=null){for(let e of this.layout.querySelectorAll(i.tag))e.pulse=!1,t===e&&t.variant===`target`&&(t.pulse=!0);this.presenter.onDotClick(t.dataset.identifier)}}createDotForTrackedBarcode(e,t,n){var r,a;let o=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(e.anchorPositions),s=e.barcode.data!=null&&((r=t.foundTrackedBarcodesInLastProcessedFrame[`${e.identifier}`])==null?void 0:r.barcode.data)===e.barcode.data,c=s?n==null||(a=n[e.barcode.data??``])==null?void 0:a.searchOptions.brush:void 0,l=c?i.createWithBrush(c,this.barcodeFindViewSettings.notInListItemColor):i.createWithColors(this.barcodeFindViewSettings.inListItemColor,this.barcodeFindViewSettings.notInListItemColor);return l.style.setProperty(`position`,`absolute`),l.style.setProperty(`transform`,this.pointTransformation(o.center)),l.dataset.identifier=`${e.identifier}`,s&&(l.setAttribute(`variant`,`target`),l.pulse=!0),l}renderDots(e,t){for(let t of e.removedTrackedBarcodes){let e=this.layout.querySelector(`[data-identifier="${t}"]`);e==null||e.remove()}if(e.addedTrackedBarcodes.length>0){let n=document.createDocumentFragment();for(let r of e.addedTrackedBarcodes)n.append(this.createDotForTrackedBarcode(r,e,t));this.layout.append(n)}for(let r of e.updatedTrackedBarcodes){var n;let i=this.layout.querySelector(`[data-identifier="${r.identifier}"]`);if(!i){i=this.createDotForTrackedBarcode(r,e,t),this.layout.append(i);continue}let{center:a}=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(r.anchorPositions),o=((n=this.camera)==null?void 0:n.getMirrorImageEnabled())??!1,s=new _(this.dataCaptureView.width,this.dataCaptureView.height);i.style.setProperty(`position`,`absolute`);let c=o?g.mirrorX(a,s):a;i.style.setProperty(`transform`,this.pointTransformation(c))}}};E.tag=`scandit-barcode-find-view`;export{E as BarcodeFindView};