import{Component}from"@theme/component";import{oncePerEditorSession}from"@theme/utilities";export class ComparisonSliderComponent extends Component{requiredRefs=["mediaWrapper","slider","afterImage"];constructor(){super(),this.hasAnimated=!1,this.boundHandleIntersection=this.handleIntersection.bind(this)}connectedCallback(){super.connectedCallback();const{mediaWrapper}=this.refs;this.orientation=mediaWrapper.dataset.orientation||"horizontal",this.sync(),this.setupIntersectionObserver()}sync(){const{mediaWrapper,slider}=this.refs;if(this.isAnimating)return;const val=(Number(slider.value)-Number(slider.min))/(Number(slider.max)-Number(slider.min)),compareValue=Math.round(val*100);mediaWrapper.style.setProperty("--compare",String(compareValue))}disconnectedCallback(){this.intersectionObserver&&this.intersectionObserver.disconnect()}setValue(value){const{slider}=this.refs;slider&&(slider.value=String(value),this.sync())}animateSlider(){const{mediaWrapper,slider}=this.refs;this.hasAnimated||(this.hasAnimated=!0,this.isAnimating=!0,mediaWrapper.style.setProperty("--transition-duration","0.5s"),setTimeout(()=>{mediaWrapper.style.setProperty("--compare","40")},100),setTimeout(()=>{mediaWrapper.style.setProperty("--compare","60")},600),setTimeout(()=>{mediaWrapper.style.setProperty("--compare","50")},1100),setTimeout(()=>{mediaWrapper.style.setProperty("--transition-duration","0s"),slider.value="50",this.isAnimating=!1},1600))}setupIntersectionObserver(){if(!window.IntersectionObserver)return;const options={root:null,rootMargin:"0px",threshold:.5};this.intersectionObserver=new IntersectionObserver(this.boundHandleIntersection,options),this.intersectionObserver.observe(this)}handleIntersection(entries){entries.forEach(entry=>{entry.isIntersecting&&!this.hasAnimated&&(setTimeout(()=>{oncePerEditorSession(this,"comparison-slider-animated",()=>{this.animateSlider()})},300),this.intersectionObserver&&this.intersectionObserver.disconnect())})}}customElements.get("comparison-slider-component")||customElements.define("comparison-slider-component",ComparisonSliderComponent);
//# sourceMappingURL=/s/files/1/0677/1399/0759/t/1/assets/comparison-slider.js.map?v=1783078800
