@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
130 lines (120 loc) • 7.75 kB
JavaScript
import {a as a$2}from'./chunk-M7AZ5E5Z.js';import {b as b$2}from'./chunk-YZHF42BC.js';import {b as b$1}from'./chunk-5DP5VNWQ.js';import {a as a$3}from'./chunk-T2Y2C76P.js';import {a as a$1,b as b$3}from'./chunk-OPL5NVVM.js';import {e,f as f$1,a,b as b$4,d,c}from'./chunk-DVHTYKDX.js';import {f}from'./chunk-YBD5JYCX.js';import {Point}from'@scandit/web-datacapture-core';import {ScanditHTMLElement,defineCustomElements,safeCancelAnimation}from'@scandit/web-datacapture-core/build/js/private/utils/index.js';var b=class f$2 extends ScanditHTMLElement{constructor(){super(...arguments);this._pointerDownListener=this.onPointerDown.bind(this);this._pointerUpListener=this.onPointerUp.bind(this);this._longPressController=new b$1(this);this._longPressStartListener=this.onLongPressStart.bind(this);}get minimized(){return !this.hasAttribute("expanded")}set minimized(t){this.toggleAttribute("minimized",!t);}get expanded(){return this.hasAttribute("expanded")}set expanded(t){this.toggleAttribute("expanded",t),this._dragController&&(this._dragController.margin=t?new Point(-65,-65):new Point(0,0),this._dragController.repositionIfOutOfBounds());}get pressed(){return this.hasAttribute("pressed")}set pressed(t){this.toggleAttribute("pressed",t);}get visible(){return this.hasAttribute("visible")}set visible(t){this.toggleAttribute("visible",t);}static create(){return defineCustomElements({[f]:f$2}),document.createElement(f)}connectedCallback(){var t;this.append(this.render()),this._dragController=new b$2(this,(t=this.parentElement)==null?void 0:t.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(${e})`,transform:"translate(-50%, -50%) scale(1.1)"},{background:"rgba(0, 0, 0, 0)"}],{duration:1100,easing:"ease-out",iterations:Number.POSITIVE_INFINITY}));}disconnectedCallback(){var t;this.removeEventListener("pointerdown",this._pointerDownListener),this.removeEventListener("pointerup",this._pointerUpListener),this.removeEventListener("longpressstart",this._longPressStartListener),(t=this._dragController)==null||t.disconnect(),this._longPressController.disconnect(),this.innerHTML="";}repositionIfOutOfBounds(){var t;(t=this._dragController)==null||t.repositionIfOutOfBounds();}translateTo(t){var i;(i=this._dragController)==null||i.translateTo(t,false);}setImage(t){var n;let i=this.querySelector("div");(n=i.firstElementChild)==null||n.remove(),t&&i.append(t);}startPulsating(){var t;(t=this._pulseAnimation)==null||t.play();}stopPulsating(){this._pulseAnimation&&(safeCancelAnimation(this._pulseAnimation),this._pulseAnimation.currentTime=0);}render(){return a$2`
<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(${f$1})"
/>
<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(${f$1})"
/>
<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(${f$1})"
/>
<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(${f$1})"
/>
<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(${f$1})"
/>
<rect
x="25.9688"
y="-0.00390625"
width="3.05794"
height="25.7171"
rx="0.5"
fill="white"
style="fill: var(${f$1})"
/>
</svg>
</div>
<style>
${f} {
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 90px;
display: none;
background: rgba(0, 0, 0, 0);
border-radius: 50%;
z-index: 10;
}
${f}[expanded] {
width: 220px;
height: 220px;
margin-top: -65px;
margin-left: -65px;
}
${f}[visible] {
display: flex;
justify-content: center;
align-items: center;
}
${f} div {
position: relative;
width: 90px;
height: 90px;
background: var(${a});
border-radius: 50%;
filter: drop-shadow(0px 2px 6px #${a$1.toJSON()})
drop-shadow(0px 1px 2px #${b$3.toJSON()});
transition: filter 0.3s ease;
}
${f} div .pulse {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: transparent;
opacity: 0.3;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: -1;
}
${f}[pressed] div {
background: var(${b$4});
filter: drop-shadow(0px 4px 4px #${a$1.toJSON()})
drop-shadow(0px 8px 12px #${b$3.toJSON()});
}
${f}[pressed][expanded] div {
background: var(${d});
}
${f}[expanded] div {
width: 200px;
height: 200px;
background: var(${c});
}
${f} div img,
${f} div svg {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
max-width: 48px;
max-height: 48px;
transform: translate(-50%, -50%);
}
${f}[expanded] div img,
${f}[expanded] div svg {
max-width: 64px;
max-height: 64px;
}
</style>
`}onPointerDown(t){t instanceof PointerEvent&&(this._dragController&&(this._dragController.draggable=this.minimized),this._holdStart=Date.now(),this.setPointerCapture(t.pointerId));}onPointerUp(t){var i;if(t instanceof PointerEvent){let n=this._holdStart!=null&&Date.now()-this._holdStart<400,C=!((i=this._dragController)!=null&&i.pointerDownEvent)||!a$3(this._dragController.pointerDownEvent,t);n&&C&&this.dispatchEvent(new CustomEvent("tap")),this.pressed=false,this._holdStart=void 0,this.releasePointerCapture(t.pointerId);}}onLongPressStart(){this._dragController&&(this._dragController.draggable=true),this.pressed=true,this._holdStart=void 0;}};export{b as a};