https://customspacover.com/cdn/shop/t/6/assets/section-dual-scroll.js?v=39769671162716719941769541013

1if(!customElements.get("dual-scroll-component")){const hexToRgb=hex=>{const result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);return result?{r:parseInt(result[1],16),g:parseInt(result[2],16),b:parseInt(result[3],16)}:null};class DualScrollComponent extends HTMLDivElement{constructor(){super(),this.currentActiveKey=null,this.currentActiveImage=null,this.ticking=!1,this.cachedRotation=null,this.cachedScale=null,this.onScroll=this.onScroll.bind(this),this.onResize=this.onResize.bind(this),this.updateMediaWithScrollProgress=this.updateMediaWithScrollProgress.bind(this)}connectedCallback(){if(!this.initialized){if(this.initialized=!0,this.panels=Array.from(this.querySelectorAll(".dual-scroll-panel")),this.mediaViewport=this.querySelector(".dual-scroll-media-viewport"),this.mediaImages=Array.from(this.querySelectorAll(".dual-scroll-media-image")),this.keyToImage=new Map(this.mediaImages.map(img=>[img.getAttribute("data-key"),img])),this.cacheMediaStyles(),this.mediaViewport&&this.panels.length>0){const initialBgColor=this.panels[0].getAttribute("data-media-bg-color");initialBgColor&&(this.mediaViewport.style.backgroundColor=initialBgColor)}this.setupScrollListeners(),window.addEventListener("resize",this.onResize,{passive:!0}),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.updateMediaWithScrollProgress()})}),this.setupMobileAnimations()}}disconnectedCallback(){this.cleanup()}cleanup(){window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize),this.mobileObserver&&(this.mobileObserver.disconnect(),this.mobileObserver=null),this.initialized=!1,this.currentActiveKey=null,this.currentActiveImage=null,this.cachedRotation=null,this.cachedScale=null}cacheMediaStyles(){const styles=getComputedStyle(this);this.cachedRotation=styles.getPropertyValue("--media-rotation").trim()||"-6deg",this.cachedScale=styles.getPropertyValue("--media-scale").trim()||"1.02"}setupMobileAnimations(){window.innerWidth<=860&&"IntersectionObserver"in window&&(this.mobileObserver=new IntersectionObserver(entries=>{entries.forEach(entry=>{entry.isIntersecting&&entry.target.classList.add("is-in-view")})},{rootMargin:"0px 0px -30% 0px",threshold:0}),this.panels.forEach(panel=>{this.mobileObserver.observe(panel);const rect=panel.getBoundingClientRect(),viewportHeight=window.innerHeight,scrollPastBottom=viewportHeight-rect.top,triggerPoint=viewportHeight*.3;scrollPastBottom>=triggerPoint&&rect.bottom>0&&panel.classList.add("is-in-view")}))}updateMediaWithScrollProgress(){if(window.innerWidth<=860)return;let activePanel=null,nextPanel=null,progress=0;for(let i=0;i<this.panels.length;i++){const panel=this.panels[i],rect=panel.getBoundingClientRect(),panelTop=rect.top,panelBottom=rect.bottom;if(panelTop<=0&&panelBottom>0){activePanel=panel,nextPanel=this.panels[i+1]||null,progress=Math.max(0,Math.min(1,-panelTop/rect.height));break}else if(panelTop>0){activePanel=panel,nextPanel=this.panels[i+1]||null,progress=-Math.min(1,panelTop/rect.height);break}}if(!activePanel&&this.panels.length>0&&(activePanel=this.panels[this.panels.length-1],progress=1),!activePanel)return;if(this.mediaViewport){const bgColor=activePanel.getAttribute("data-media-bg-color"),nextBgColor=nextPanel?nextPanel.getAttribute("data-media-bg-color"):null;if(nextPanel&&nextBgColor&&progress>=.3){const fadeProgress=Math.max(0,Math.min(1,(progress-.3)/.7)),currentRgb=hexToRgb(bgColor),nextRgb=hexToRgb(nextBgColor);if(currentRgb&&nextRgb){const r=Math.round(currentRgb.r+(nextRgb.r-currentRgb.r)*fadeProgress),g=Math.round(currentRgb.g+(nextRgb.g-currentRgb.g)*fadeProgress),b=Math.round(currentRgb.b+(nextRgb.b-currentRgb.b)*fadeProgress);this.mediaViewport.style.backgroundColor=`rgb(${r}, ${g}, ${b})`}}else bgColor&&(this.mediaViewport.style.backgroundColor=bgColor)}const activeKey=activePanel.getAttribute("data-key"),nextKey=nextPanel?nextPanel.getAttribute("data-key"):null,transitionType=this.getAttribute("data-transition-type")||"fade",rotation=this.cachedRotation,scale=this.cachedScale;if(activeKey!==this.currentActiveKey&&(this.currentActiveImage&&(this.currentActiveImage.classList.remove("is-active","is-transitioning"),transitionType==="scroll"&&(this.currentActiveImage.style.transform=`translateY(100%) rotate(${rotation}) scale(${scale})`)),this.currentActiveKey=activeKey,this.currentActiveImage=this.keyToImage.get(activeKey),this.currentActiveImage&&this.currentActiveImage.classList.add("is-active")),nextKey&&progress>(transitionType==="scroll"?0:.3)){const nextImage=this.keyToImage.get(nextKey);if(nextImage&&this.currentActiveImage){const transitionProgress=transitionType==="scroll"?Math.max(0,Math.min(1,progress/1)):Math.max(0,Math.min(1,(progress-.3)/.7));if(transitionType==="fade"){const pullDistance=(1-transitionProgress)*100;this.currentActiveImage.style.transform=`translateY(0) rotate(${rotation}) scale(${scale})`,this.currentActiveImage.style.opacity=1-transitionProgress,nextImage.style.transform=`translateY(-${pullDistance}%) rotate(${rotation}) scale(${scale})`,nextImage.style.opacity=transitionProgress,nextImage.classList.add("is-transitioning")}else if(transitionType==="scroll"){const scrollDownDistance=transitionProgress*100;this.currentActiveImage.style.transform=`translateY(${scrollDownDistance}%) rotate(${rotation}) scale(${scale})`;const pullUpDistance=(1-transitionProgress)*100;nextImage.style.transform=`translateY(-${pullUpDistance}%) rotate(${rotation}) scale(${scale})`,nextImage.classList.add("is-transitioning")}}}else if(this.currentActiveImage){const resetTransform=`translateY(-100%) rotate(${rotation}) scale(${scale})`;for(const img of this.mediaImages)img!==this.currentActiveImage&&(img.classList.remove("is-transitioning"),img.style.transform=resetTransform,transitionType==="fade"&&(img.style.opacity="0"));this.currentActiveImage.style.transform=`translateY(0) rotate(${rotation}) scale(${scale})`,transitionType==="fade"&&(this.currentActiveImage.style.opacity="1")}}onScroll(){this.ticking||(this.ticking=!0,requestAnimationFrame(()=>{this.updateMediaWithScrollProgress(),this.ticking=!1}))}setupScrollListeners(){window.removeEventListener("scroll",this.onScroll),window.innerWidth<=860||window.addEventListener("scroll",this.onScroll,{passive:!0})}onResize(){this.mobileObserver&&(this.mobileObserver.disconnect(),this.mobileObserver=null),this.cacheMediaStyles(),this.setupScrollListeners(),this.setupMobileAnimations(),this.onScroll()}}

1customElements.define("dual-scroll-component",DualScrollComponent,{extends:"div"})}
2//# sourceMappingURL=/cdn/shop/t/6/assets/section-dual-scroll.js.map?v=39769671162716719941769541013