@scandit/web-datacapture-barcode/build/js/spark/ui/SparkScanViewMiniPreview.js

Scandit Data Capture SDK for the Web

import"./SparkScanMiniPreviewSize.js";import{DragController as e,DragControllerEvent as t}from"./controllers/DragController.js";import{dropShadow100 as n,dropShadow200 as r}from"./constants/colors.js";import{toolbarBackgroundColorCssVariable as i}from"./constants/cssVariables.js";import{miniPreviewButtonTapEvent as a,miniPreviewVisibilityChangeEvent as o}from"./constants/events.js";import{LongPressController as s}from"./controllers/LongPressController.js";import{previewCloseControlVisibleAttribute as c,previewSizeControlVisibleAttribute as l,torchControlVisibleAttribute as u,torchEnabledAttribute as d,zoomFactorAttribute as f,zoomSwitchControlVisibleAttribute as p}from"./constants/attributes.js";import{sparkScanViewIconTag as m,sparkScanViewMiniPreviewTag as h,sparkScanViewToastTag as g,sparkScanViewToolbarTag as _}from"./constants/tags.js";import{SparkScanViewIcon as v}from"./SparkScanViewIcon.js";import{SparkScanViewToast as y}from"./SparkScanViewToast.js";import{SparkScanViewToolbar as b}from"./SparkScanViewToolbar.js";import"./constants/constants.js";import{Point as x}from"@scandit/web-datacapture-core";import{ScanditHTMLElement as S,Timeout as C,css as w,defineCustomElements as T,html as E,safeAwaitAnimation as D,safeCancelAnimation as O}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";let k=function(e){return e.ResizeButton=`resizeButton`,e.ZoomButton=`zoomButton`,e.TorchButton=`torchButton`,e.CloseButton=`closeButton`,e}({});var A=class k extends S{constructor(...e){super(...e),this.resizeButtonTapListener=this.onResizeButtonTap.bind(this),this.zoomButtonTapListener=this.onZoomButtonTap.bind(this),this.torchButtonTapListener=this.onTorchButtonTap.bind(this),this.closeButtonTapListener=this.onCloseButtonTap.bind(this),this.pointerDownListener=this.onPointerDown.bind(this),this.longPressStartListener=this.onLongPressStart.bind(this),this.toolbarVisibilityChangeListener=this.onToolbarVisibilityChange.bind(this),this.longPressEndListener=this.onLongPressEnd.bind(this),this.dragEndListener=this.onDragEnd.bind(this),this.fadeOutAnimation=new Animation(new KeyframeEffect(this,[{opacity:1},{opacity:0}],{duration:500,fill:`both`})),this.replayFadeOutTimeout=null,this.longPressController=new s(this)}get styleElement(){return this._styleElement??=w`${h}{background:var(${i});border-radius:16px;display:none;filter:drop-shadow(0 2px 6px #${n.toJSON()}) drop-shadow(0 1px 2px #${r.toJSON()});left:0;position:absolute;top:0;transition:filter .3s ease;z-index:100}${h}[unconstrained]{position:fixed;z-index:10000}${h},${h} #overlay{height:var(--dvw-half);max-height:min(250px,var(--dvw-half));max-width:min(250px,var(--dvw-half));min-height:192px;min-width:192px;width:var(--dvw-half)}@media (orientation:landscape){${h},${h} #overlay{height:var(--dvh-half);max-height:min(250px,var(--dvh-half));max-width:min(250px,var(--dvh-half));width:var(--dvh-half)}}@media screen (min-width:768px) and (orientation:portrait){${h} #overlay,${h}{max-height:min(375px,var(--dvw-half));max-width:min(375px,var(--dvw-half))}}@media screen (min-width:768px) and (orientation:landscape){${h},${h} #overlay{max-height:min(375px,var(--dvh-half));max-width:min(375px,var(--dvh-half))}}${h}[visible]{display:flex;flex-flow:column}${h}[expanded],${h}[expanded] #overlay{height:calc(var(--dvh-half) - ${32}px);max-height:min(400px,calc(var(--dvh-half) - ${32}px));max-width:min(400px,calc(var(--dvw) - ${32}px));width:calc(var(--dvw) - ${32}px)}${h}[pressed]{filter:drop-shadow(0 4px 4px #${r.toJSON()}) drop-shadow(0 8px 12px #${n.toJSON()})}@media (orientation:landscape){${h}[expanded],${h}[expanded] #overlay{height:calc(var(--dvh) - ${32}px);max-height:min(400px,calc(var(--dvh) - ${32}px));max-width:min(400px,calc(var(--dvw-half) - ${32}px));width:calc(var(--dvw-half) - ${32}px)}}spark-scan-view-toast{left:50%;position:absolute;top:16px;transform:translateX(-50%);z-index:20}${h} #host,${h} #host *{border-radius:16px;width:100%}${h} #host{height:calc(100% - 48px);z-index:-10}${h}[cover] #host{height:100%}${h} #controls{box-sizing:border-box;display:grid;grid-template-rows:auto max-content;height:100%;pointer-events:none;position:absolute;top:0;width:100%}${h} #controls button{pointer-events:auto}${h} #button-container-list{display:flex;flex-flow:column;height:calc(100% - 48px);justify-content:space-between;pointer-events:none;width:100%}${h}[cover] #button-container-list{height:100%}${h} .button-container{align-items:center;display:flex;justify-content:flex-end;padding:12px;pointer-events:none}${h}[${u}] .button-container:first-of-type,${h}[${l}] .button-container:nth-of-type(2){justify-content:space-between}.${h}__button{align-items:center;background:#12161980;border:none;border-radius:50%;color:#fff;display:flex;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:500;height:24px;justify-content:center;width:24px}${h} #torchButton,${h} #closeButton,${h} #resizeButton,${h} #zoomButton{display:none}${h}[${u}] #torchButton,${h}[${l}] #resizeButton{display:flex}${h}[${c}] #closeButton,${h}[${p}] #zoomButton{align-self:end;display:flex}${h} #overlay{background:#000;border-radius:16px;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .3s ease;z-index:10}${h}[darkened] #overlay{opacity:.3}`,this._styleElement}get visible(){return this.hasAttribute(`visible`)}set visible(e){this.toggleAttribute(`visible`,e),this.dispatchEvent(new CustomEvent(o,{detail:{visible:e}}))}get size(){return this.expanded?`expanded`:`regular`}set size(e){var t;this.toggleAttribute(`expanded`,e===`expanded`);let n=this.getNextTranslate();(t=this.dragController)==null||t.translateTo(n,!1).then(()=>{var e;return(e=this.dragController)==null?void 0:e.repositionIfOutOfBounds()})}get expanded(){return this.hasAttribute(`expanded`)}set useViewportBounds(e){this.dragController&&(this.dragController.useViewportBounds=e)}get[f](){return Number(this.getAttribute(`zoom-factor`)??`1`)}set[f](e){this.setAttribute(f,String(e))}get darkened(){return this.hasAttribute(`darkened`)}set darkened(e){this.toggleAttribute(`darkened`,e)}get orientation(){return this.getAttribute(`orientation`)??`portrait-primary`}set orientation(e){this.setAttribute(`orientation`,e)}get[d](){return this.hasAttribute(d)}set[d](e){this.toggleAttribute(d,e)}get[l](){return this.hasAttribute(l)}set[l](e){this.toggleAttribute(l,e)}get[p](){return this.hasAttribute(p)}set[p](e){this.toggleAttribute(p,e)}get[u](){return this.hasAttribute(u)}set[u](e){this.toggleAttribute(u,e)}get[c](){return this.hasAttribute(c)}set[c](e){this.toggleAttribute(c,e)}get cover(){return this.hasAttribute(`cover`)}set cover(e){this.toggleAttribute(`cover`,e)}get pressed(){return this.hasAttribute(`pressed`)}set pressed(e){this.toggleAttribute(`pressed`,e)}static create(){return T({[h]:k,[m]:v,[g]:y,[_]:b}),document.createElement(h)}repositionIfOutOfBounds(){var e;(e=this.dragController)==null||e.repositionIfOutOfBounds()}showToast(e,t,n){this.toast.show(e,t,n)}hideToast(){this.toast.hide()}zoomIn(){this.zoomButton&&(this[f]=2,this.zoomButton.textContent=`2x`,this.showToast(`warning`,`2x zoom`,1e3))}zoomOut(){this.zoomButton&&(this[f]=1,this.zoomButton.textContent=`1x`,this.showToast(`info`,`1x zoom`,1e3))}async fadeOut(){this.fadeOutAnimation.play(),await D(this.fadeOutAnimation),this.visible=!1}cancelFadeOut(){var e;(e=this.replayFadeOutTimeout)==null||e.stop(),O(this.fadeOutAnimation)}async rewindAnimation(){var e;if(((e=this.replayFadeOutTimeout)==null?void 0:e.running)===!0||this.fadeOutAnimation.playState!==`idle`){var t;this.cancelFadeOut(),(t=this.replayFadeOutTimeout)==null||t.start()}}translateTo(e){var t;(t=this.dragController)==null||t.translateTo(e,!1)}render(){var e,t,n,r,i,a,o;this.innerHTML=E`<spark-scan-view-toast></spark-scan-view-toast><div id="host"></div><div id="controls"><div id="button-container-list"><div class="button-container"><button id="torchButton" class="${h}__button"><spark-scan-view-icon icon="torchOff" fill="white" size="9"></spark-scan-view-icon></button><button id="closeButton" class="${h}__button"><spark-scan-view-icon icon="close" fill="white" size="9"></spark-scan-view-icon></button></div><div class="button-container"><button id="resizeButton" class="${h}__button"><spark-scan-view-icon icon="expand" fill="white" size="14"></spark-scan-view-icon></button><button id="zoomButton" class="${h}__button">${this[f]}x</button></div></div></div><spark-scan-view-toolbar></spark-scan-view-toolbar><div id="overlay"></div>`,this.toast=this.querySelector(`spark-scan-view-toast`),this.host=this.querySelector(`#host`),this.resizeButton=this.querySelector(`#resizeButton`),(e=this.resizeButton)==null||e.addEventListener(`pointerup`,this.resizeButtonTapListener),this.resizeButtonIcon=(t=this.resizeButton)==null?void 0:t.querySelector(`spark-scan-view-icon`),this.zoomButton=this.querySelector(`#zoomButton`),(n=this.zoomButton)==null||n.addEventListener(`pointerup`,this.zoomButtonTapListener),this.torchButton=this.querySelector(`#torchButton`),(r=this.torchButton)==null||r.addEventListener(`pointerup`,this.torchButtonTapListener),this.torchButtonIcon=(i=this.torchButton)==null?void 0:i.querySelector(`spark-scan-view-icon`),this.closeButton=this.querySelector(`#closeButton`),(a=this.closeButton)==null||a.addEventListener(`pointerup`,this.closeButtonTapListener),this.toolbar=this.querySelector(_),(o=this.toolbar)==null||o.addEventListener(`toolbarvisibilitychange`,this.toolbarVisibilityChangeListener),this.buttonContainerList=this.querySelector(`#button-container-list`)}onResizeButtonTap(e){e.stopPropagation(),this.size={regular:`expanded`,expanded:`regular`}[this.size],this.resizeButtonIcon&&(this.resizeButtonIcon.icon=this.expanded?`shrink`:`expand`),this.dispatchEvent(new CustomEvent(a,{detail:{tapped:`resizeButton`,expanded:this.expanded}}))}onZoomButtonTap(e){switch(e.stopPropagation(),this[f]){case 1:this.zoomIn();break;case 2:this.zoomOut();break}this.dispatchEvent(new CustomEvent(a,{detail:{tapped:`zoomButton`,zoomFactor:this[f]}}))}onTorchButtonTap(e){e.stopPropagation(),this[d]=!this[d],this.torchButtonIcon&&(this.torchButtonIcon.icon=this[`torch-enabled`]?`torchOn`:`torchOff`),this.dispatchEvent(new CustomEvent(a,{detail:{tapped:`torchButton`,enabled:this[d]}}))}onCloseButtonTap(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(a,{detail:{tapped:`closeButton`}}))}onPointerDown(){this.dragController&&(this.dragController.draggable=!1),this.rewindAnimation()}onLongPressStart(){this.dragController&&(this.dragController.draggable=!0),this.pressed=!0}onLongPressEnd(){this.pressed=!1}onDragEnd(e){e instanceof t&&(this.lastKnownTranslate=e.point)}onToolbarVisibilityChange(){this.cover=!this.toolbar||!!this.toolbar.hidden}connectedCallback(){var t,n;this.rootElement=(t=this.parentElement)==null?void 0:t.parentElement,this.dragController=new e(this,this.rootElement),this.replayFadeOutTimeout=new C(1200,async()=>{await this.fadeOut()}),this.render(),this.append(this.styleElement),this.addEventListener(`pointerdown`,this.pointerDownListener),this.addEventListener(`longpressstart`,this.longPressStartListener),this.addEventListener(`longpressend`,this.longPressEndListener),this.addEventListener(`dragend`,this.dragEndListener),this.dragController.connect(),this.longPressController.connect(),this.buttonContainerList&&(n=this.toolbar)!=null&&n.firstElementChild&&(this.longPressController.elementsAllowedToTriggerLongPressEvents.add(this.buttonContainerList),this.longPressController.elementsAllowedToTriggerLongPressEvents.add(this.toolbar.firstElementChild)),this.dragController.margin=new x(16,16)}disconnectedCallback(){var e,t,n,r,i,a,o;(e=this.resizeButton)==null||e.removeEventListener(`pointerup`,this.resizeButtonTapListener),(t=this.zoomButton)==null||t.removeEventListener(`pointerup`,this.zoomButtonTapListener),(n=this.torchButton)==null||n.removeEventListener(`pointerup`,this.torchButtonTapListener),(r=this.closeButton)==null||r.removeEventListener(`pointerup`,this.closeButtonTapListener),(i=this.toolbar)==null||i.removeEventListener(`toolbarvisibilitychange`,this.toolbarVisibilityChangeListener),this.removeEventListener(`pointerdown`,this.pointerDownListener),this.removeEventListener(`longpressstart`,this.longPressStartListener),this.removeEventListener(`longpressend`,this.longPressEndListener),this.removeEventListener(`dragend`,this.dragEndListener),O(this.fadeOutAnimation),(a=this.replayFadeOutTimeout)==null||a.stop(),(o=this.dragController)==null||o.disconnect(),this.longPressController.disconnect()}getNextTranslate(){var e,t;let n=((e=this.rootElement)==null?void 0:e.clientWidth)||document.body.clientWidth,r=((t=this.rootElement)==null?void 0:t.clientHeight)||document.body.clientHeight;if(!this.dragController)return new x(0,0);if(this.size===`regular`)return this.lastKnownTranslate??this.dragController.translate;this.lastKnownTranslate=this.dragController.translate;let i=this.dragController.translate;return(this.orientation===`portrait-primary`||this.orientation===`portrait-secondary`)&&this.dragController.translate.x>16&&(i=new x(16,i.y)),(this.orientation===`landscape-primary`||this.orientation===`landscape-secondary`)&&this.dragController.translate.x>n-this.clientWidth-16&&(i=new x(n-this.clientWidth-16,i.y)),this.dragController.translate.y>r-this.clientHeight-16&&(i=new x(i.x,r-this.clientHeight-16)),i}};A.observedAttributes=[l,p,u];export{A as SparkScanViewMiniPreview,k as SparkScanViewMiniPreviewButtonType};