https://www.umbertogiannini.com/cdn/shop/t/123/assets/before-after.js?v=97153447134644209461762780023

1if(!customElements.get("before-after")){class BeforeAfter extends HTMLElement{constructor(){super(),window.initLazyScript(this,this.init.bind(this))}init(){this.divider=this.querySelector(".before-after__divider"),this.button=this.querySelector(".before-after__btn"),this.touchStartTimeStamp=0,this.handlePointerMove=this.handlePointerMove.bind(this),this.addEventListener("pointerdown",this.handlePointerDown.bind(this)),this.addEventListener("keydown",this.handleKeyDown.bind(this)),this.addEventListener("touchstart",this.handleTouchStart.bind(this),{passive:!1}),this.classList.contains("before-after--animate")&&this.animateOnLoad()}async animateOnLoad(){this.classList.contains("before-after--animate")&&(this.classList.add("before-after--animating"),await Promise.all(this.getAnimations({subtree:!0}).map(animation=>animation.finished)),this.classList.remove("before-after--animating"),this.classList.remove("before-after--animate"))}handlePointerDown(event){this.style.setProperty("--btn-cursor","grabbing"),document.addEventListener("pointerup",this.handlePointerUp.bind(this),{once:!0}),matchMedia("screen and (pointer: fine)").matches&&(document.addEventListener("pointermove",this.handlePointerMove),this.calculatePosition(event))}handlePointerUp(event){this.style.setProperty("--btn-cursor","grab"),document.removeEventListener("pointermove",this.handlePointerMove),matchMedia("screen and (pointer: fine)").matches||event.timeStamp-this.touchStartTimeStamp<=250&&this.calculatePosition(event)}handlePointerMove(event){this.calculatePosition(event)}handleTouchStart(event){event.target===this.divider||this.divider.contains(event.target)?(event.preventDefault(),document.addEventListener("pointermove",this.handlePointerMove)):this.touchStartTimeStamp=event.timeStamp}handleKeyDown(event){if(event.target!==this.divider||event.code!=="ArrowLeft"&&event.code!=="ArrowRight")return;event.preventDefault();const offset=parseInt(getComputedStyle(this.button).getPropertyValue("width"),10)/2+4,max=this.clientWidth-offset;let x,newPosition,currentPosition=parseInt(this.style.getPropertyValue("--percent"),10);Number.isNaN(currentPosition)&&(currentPosition=parseInt(getComputedStyle(this).getPropertyValue("--percent"),10)),event.code==="ArrowLeft"?(x=this.divider.getBoundingClientRect().left-this.getBoundingClientRect().left,newPosition=currentPosition-1):event.code==="ArrowRight"&&(x=this.divider.getBoundingClientRect().right-this.getBoundingClientRect().left,newPosition=currentPosition+1);let percent=Math.max(offset,Math.min(x,max))*100/this.clientWidth;(event.code==="ArrowLeft"&&newPosition>percent||event.code==="ArrowRight"&&newPosition<percent)&&(percent=newPosition),document.dir==="rtl"&&(percent=100-percent),this.setPosition(percent)}calculatePosition(event){const offset=parseInt(getComputedStyle(this.button).getPropertyValue("width"),10)/2+4,max=this.clientWidth-offset,x=event.clientX-this.getBoundingClientRect().left;let percent=Math.max(offset,Math.min(x,max))*100/this.clientWidth;document.dir==="rtl"&&(percent=100-percent),this.setPosition(percent)}setPosition(percent){cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(()=>this.style.setProperty("--percent",`${Math.min(Math.max(percent,0),100)}%`))}}customElements.define("before-after",BeforeAfter)}
2//# sourceMappingURL=/cdn/shop/t/123/assets/before-after.js.map?v=97153447134644209461762780023