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

Scandit Data Capture SDK for the Web

import{didDrag as e}from"./utils/didDrag.js";import{DragController as t}from"./controllers/DragController.js";import{dropShadow100 as n,dropShadow200 as r}from"./constants/colors.js";import{triggerButtonAnimationColorCssVariable as i,triggerButtonCollapsedColorCssVariable as a,triggerButtonCollapsedPressedColorCssVariable as o,triggerButtonExpandedColorCssVariable as s,triggerButtonExpandedPressedColorCssVariable as c,triggerButtonTintColorCssVariable as l}from"./constants/cssVariables.js";import{LongPressController as u}from"./controllers/LongPressController.js";import{sparkScanViewTriggerButtonTag as d}from"./constants/tags.js";import"./constants/constants.js";import{Point as f}from"@scandit/web-datacapture-core";import{ScanditHTMLElement as p,css as m,defineCustomElements as h,html as g,safeCancelAnimation as _}from"@scandit/web-datacapture-core/build/js/private/utils/index.js";var v=class v extends p{constructor(...e){super(...e),this._pointerDownListener=this.onPointerDown.bind(this),this._pointerUpListener=this.onPointerUp.bind(this),this._longPressController=new u(this),this._longPressStartListener=this.onLongPressStart.bind(this)}get styleElement(){return this._styleElement??=m`${d}{background:#0000;border-radius:50%;display:none;height:90px;left:0;position:absolute;top:0;width:90px;z-index:10}${d}[unconstrained]{position:fixed;z-index:9999}${d}[expanded]{height:220px;margin-left:-65px;margin-top:-65px;width:220px}${d}[visible]{align-items:center;display:flex;justify-content:center}${d} div{background:var(${a});border-radius:50%;filter:drop-shadow(0 2px 6px #${n.toJSON()}) drop-shadow(0 1px 2px #${r.toJSON()});height:90px;position:relative;transition:filter .3s ease;width:90px}${d} div .pulse{background:#0000;height:100%;left:50%;opacity:.3;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%;z-index:-1}${d}[pressed] div{background:var(${o});filter:drop-shadow(0 4px 4px #${n.toJSON()}) drop-shadow(0 8px 12px #${r.toJSON()})}${d}[pressed][expanded] div{background:var(${c})}${d}[expanded] div{background:var(${s});height:200px;width:200px}${d} div img,${d} div svg{height:auto;left:50%;max-height:48px;max-width:48px;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}${d}[expanded] div img,${d}[expanded] div svg{max-height:64px;max-width:64px}`,this._styleElement}get minimized(){return!this.hasAttribute(`expanded`)}set minimized(e){this.toggleAttribute(`minimized`,!e)}get expanded(){return this.hasAttribute(`expanded`)}set expanded(e){this.toggleAttribute(`expanded`,e),this._dragController&&(this._dragController.margin=e?new f(-65,-65):new f(0,0),this._dragController.repositionIfOutOfBounds())}get pressed(){return this.hasAttribute(`pressed`)}set pressed(e){this.toggleAttribute(`pressed`,e)}get visible(){return this.hasAttribute(`visible`)}set visible(e){this.toggleAttribute(`visible`,e)}set useViewportBounds(e){this._dragController&&(this._dragController.useViewportBounds=e)}static create(){return h({[d]:v}),document.createElement(d)}connectedCallback(){var e;this.render(),this.append(this.styleElement),this._dragController=new t(this,(e=this.parentElement)==null?void 0:e.parentElement),this._dragController.connect(),this.addEventListener(`pointerdown`,this._pointerDownListener),this.addEventListener(`pointerup`,this._pointerUpListener),this.addEventListener(`longpressstart`,this._longPressStartListener),this._longPressController.connect(),this._longPressController.elementsAllowedToTriggerLongPressEvents.add(this),this._pulse=this.querySelector(`.pulse`),this._pulseAnimation=new Animation(new KeyframeEffect(this._pulse,[{background:`rgba(0, 0, 0, 0)`},{background:`var(${i})`,transform:`translate(-50%, -50%) scale(1.1)`},{background:`rgba(0, 0, 0, 0)`}],{duration:1100,easing:`ease-out`,iterations:1/0}))}disconnectedCallback(){var e;this.removeEventListener(`pointerdown`,this._pointerDownListener),this.removeEventListener(`pointerup`,this._pointerUpListener),this.removeEventListener(`longpressstart`,this._longPressStartListener),(e=this._dragController)==null||e.disconnect(),this._longPressController.disconnect(),this.innerHTML=``}repositionIfOutOfBounds(){var e;(e=this._dragController)==null||e.repositionIfOutOfBounds()}translateTo(e){var t;(t=this._dragController)==null||t.translateTo(e,!1)}setImage(e){var t;let n=this.querySelector(`div`);(t=n.firstElementChild)==null||t.remove(),e&&n.append(e)}startPulsating(){var e;(e=this._pulseAnimation)==null||e.play()}stopPulsating(){this._pulseAnimation&&(_(this._pulseAnimation),this._pulseAnimation.currentTime=0)}render(){this.innerHTML=g`<div><div class="pulse"></div><svg width="49" height="26" viewBox="0 0 49 26" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="7.57422" y="-0.00390625" width="3.20017" height="25.7171" rx="0.5" fill="white" style="fill:var(${l})"/><path d="M44.8418 0.496094C44.8418 0.219952 45.0657 -0.00390625 45.3418 -0.00390625H48.001C48.2771 -0.00390625 48.501 0.219951 48.501 0.496094V25.2132C48.501 25.4894 48.2771 25.7132 48.001 25.7132H45.3418C45.0657 25.7132 44.8418 25.4894 44.8418 25.2132V0.496094Z" fill="white" style="fill:var(${l})"/><path d="M33.8271 0.896094C33.8271 0.399038 34.2301 -0.00390625 34.7271 -0.00390625H39.1368C39.6338 -0.00390625 40.0368 0.399038 40.0368 0.896094V24.8132C40.0368 25.3103 39.6338 25.7132 39.1368 25.7132H34.7271C34.2301 25.7132 33.8271 25.3103 33.8271 24.8132V0.896094Z" fill="white" style="fill:var(${l})"/><path d="M16.3154 0.746095C16.3154 0.331881 16.6512 -0.00390625 17.0654 -0.00390625H20.1879C20.6021 -0.00390625 20.9379 0.33188 20.9379 0.746094V24.9632C20.9379 25.3774 20.6021 25.7132 20.1879 25.7132H17.0654C16.6512 25.7132 16.3154 25.3774 16.3154 24.9632V0.746095Z" fill="white" style="fill:var(${l})"/><path d="M0.5 0.246094C0.5 0.108023 0.611929 -0.00390625 0.75 -0.00390625H2.2897C2.42777 -0.00390625 2.5397 0.108023 2.5397 0.246094V25.4632C2.5397 25.6013 2.42777 25.7132 2.2897 25.7132H0.75C0.611929 25.7132 0.5 25.6013 0.5 25.4632V0.246094Z" fill="white" style="fill:var(${l})"/><rect x="25.9688" y="-0.00390625" width="3.05794" height="25.7171" rx="0.5" fill="white" style="fill:var(${l})"/></svg></div>`}onPointerDown(e){e instanceof PointerEvent&&(this._dragController&&(this._dragController.draggable=this.minimized),this._holdStart=Date.now(),this.setPointerCapture(e.pointerId))}onPointerUp(t){if(t instanceof PointerEvent){var n;let r=this._holdStart!=null&&Date.now()-this._holdStart<400,i=!((n=this._dragController)!=null&&n.pointerDownEvent)||!e(this._dragController.pointerDownEvent,t);r&&i&&this.dispatchEvent(new CustomEvent(`tap`)),this.pressed=!1,this._holdStart=void 0,this.releasePointerCapture(t.pointerId)}}onLongPressStart(){this._dragController&&(this._dragController.draggable=!0),this.pressed=!0,this._holdStart=void 0}};export{v as SparkScanViewTriggerButton};