@scandit/web-datacapture-barcode
Version:
Scandit Data Capture SDK for the Web
143 lines (130 loc) • 7.32 kB
JavaScript
import { a } from './chunk-OHSTP7TM.js';
import { b as b$1 } from './chunk-FJ4SOETD.js';
import { b as b$2 } from './chunk-5DP5VNWQ.js';
import { a as a$3 } from './chunk-T2Y2C76P.js';
import { a as a$2, b as b$3 } from './chunk-OPL5NVVM.js';
import { e, f as f$1, a as a$1, 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 } from '@scandit/web-datacapture-core/build/js/private/utils/index.js';
var b=class C extends ScanditHTMLElement{constructor(){super(...arguments);this._pointerDownListener=this.onPointerDown.bind(this);this._pointerUpListener=this.onPointerUp.bind(this);this._dragController=new b$1(this);this._longPressController=new b$2(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.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]:C}),document.createElement(f)}connectedCallback(){this.append(this.render()),this.addEventListener("pointerdown",this._pointerDownListener),this.addEventListener("pointerup",this._pointerUpListener),this.addEventListener("longpressstart",this._longPressStartListener),this._dragController.connect(),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(){this.removeEventListener("pointerdown",this._pointerDownListener),this.removeEventListener("pointerup",this._pointerUpListener),this.removeEventListener("longpressstart",this._longPressStartListener),this._dragController.disconnect(),this._longPressController.disconnect();}translateTo(t){this._dragController.translateTo(t,!1);}setImage(t){var s;let r=this.querySelector("div");(s=r.firstElementChild)==null||s.remove(),t&&r.append(t);}startPulsating(){var t;(t=this._pulseAnimation)==null||t.play();}stopPulsating(){this._pulseAnimation&&(this._pulseAnimation.cancel(),this._pulseAnimation.currentTime=0);}render(){return a`
<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: fixed;
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$1});
border-radius: 50%;
filter: drop-shadow(0px 2px 6px #${a$2.toJSON()})
drop-shadow(0px 1px 2px #${b$3.toJSON()});
transition: filter 0.3s ease;
}
${f} div .pulse {
position: fixed;
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$2.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.draggable=this.minimized,this.expanded&&this.dispatchEvent(new CustomEvent("tap")));}onPointerUp(t){t instanceof PointerEvent&&((!this._dragController.pointerDownEvent||!a$3(this._dragController.pointerDownEvent,t))&&this.minimized&&this.dispatchEvent(new CustomEvent("tap")),this.pressed=!1);}onLongPressStart(){this._dragController.draggable=!0,this.pressed=!0;}};
export { b as a };