https://www.whiteouttequila.com/cdn/shop/t/9/assets/scrolling-text-banner.js?v=173050369352524494161781628325

1customElements.get("scrolling-text-banner")||customElements.define("scrolling-text-banner",class extends HTMLElement{constructor(){super(),this.spacing=20,this.speedFactor=10,this.speed=100,this.mobileBreakpoint=600,this.mobileSpeedFactor=.7,this.resizeObserver=null,this.sectionType=this.dataset.sectionType,this.itemIteration=10,this.showDots=this.dataset.dotSeparator,this.dot=`<svg width="20" height="20" aria-hidden="true">
2                    <circle cx="10" cy="10"/>
3                    </svg>`}connectedCallback(){this.spacing=parseInt(this.getAttribute("data-spacing"))||this.spacing;const speedInput=parseInt(this.getAttribute("data-speed"))||5;this.speed=this.mapSpeed(speedInput),this.mobileSpeedFactor=parseFloat(this.getAttribute("data-mobile-speed-factor"))||this.mobileSpeedFactor,this.sectionType==="scrolling-text-with-icon"?this.initializeScrollingIcon():this.initializeScrollingText(),this.observeResizing()}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}mapSpeed(input){return 30+270*((input-1)/9)}getAdjustedSpeed(){return window.innerWidth<this.mobileBreakpoint?this.speed*this.mobileSpeedFactor:this.speed}initializeScrollingIcon(){const heroIcon=this.querySelectorAll(".hero__icon-with-text");if(!heroIcon.length){console.error("No `.hero__icon-with-text` element found inside the scrolling-text-banner component.");return}const parentElement=heroIcon[0].parentElement,iterations=Math.ceil(this.itemIteration/heroIcon.length),scrollingOuter=document.createElement("div");scrollingOuter.classList.add("scrolling-outer");const scrollingContainer=document.createElement("div");scrollingContainer.classList.add("scrolling-container"),scrollingOuter.appendChild(scrollingContainer),parentElement?.appendChild(scrollingOuter);for(let i=0;i<2;i++){const wrapper=document.createElement("div");wrapper.classList.add("scrolling-wrapper");for(let j=0;j<iterations;j++)heroIcon.forEach(icon=>{const textWrapper=document.createElement("div");textWrapper.classList.add("scrolling-text");const clone=icon.cloneNode(!0);clone.classList.remove("scroll-trigger","scroll-trigger--offscreen","scroll-trigger--cancel");const htmlContent=clone.outerHTML;htmlContent&&(this.showDots=="true"?(textWrapper.innerHTML=htmlContent+this.dot,textWrapper.style.marginRight=`${this.spacing}px`,textWrapper.style.gap=`${this.spacing}px`):(textWrapper.innerHTML=htmlContent,textWrapper.style.marginRight=`${this.spacing}px`)),wrapper.appendChild(textWrapper)});scrollingContainer.appendChild(wrapper)}heroIcon.forEach(icon=>{icon.style.display="none",icon.inert=!0}),this.setAnimationSpeed(scrollingContainer)}initializeScrollingText(){const heroTitle=this.querySelector(".hero__title");if(!heroTitle){console.error("No `.hero__title` element found inside the scrolling-text-banner component.");return}const textContent=heroTitle.textContent.trim();if(!textContent){console.error("No text content found inside the `.hero__title` element.");return}heroTitle.innerHTML="";const scrollingContainer=document.createElement("div");scrollingContainer.classList.add("scrolling-container"),heroTitle.appendChild(scrollingContainer);for(let i=0;i<2;i++){const wrapper=document.createElement("div");wrapper.classList.add("scrolling-wrapper");for(let j=0;j<this.itemIteration;j++){const textWrapper=document.createElement("div");textWrapper.classList.add("scrolling-text"),this.showDots=="true"?(textWrapper.innerHTML=textContent+this.dot,textWrapper.style.marginRight=`${this.spacing}px`,textWrapper.style.gap=`${this.spacing}px`):(textWrapper.textContent=textContent,textWrapper.style.marginRight=`${this.spacing}px`),wrapper.appendChild(textWrapper)}scrollingContainer.appendChild(wrapper)}this.setAnimationSpeed(scrollingContainer)}setAnimationSpeed(scrollingContainer){requestAnimationFrame(()=>{const wrappers=scrollingContainer.querySelectorAll(".scrolling-wrapper");if(wrappers.length!==2)return;const wrapperWidth=wrappers[0].offsetWidth,adjustedSpeed=this.getAdjustedSpeed(),duration=wrapperWidth/adjustedSpeed;scrollingContainer.style.width=`${wrapperWidth*2}

3px`,wrappers.forEach((wrapper,index)=>{wrapper.style.animationDuration=`${duration}s`,wrapper.style.animationDelay=`${-index*duration}s`})})}observeResizing(){if(this.sectionType==="scrolling-text-with-icon"){const heroIcon=this.querySelectorAll(".hero__icon-with-text");if(!heroIcon.length)return;this.resizeObserver=new ResizeObserver(()=>{this.recalculateAnimation()}),heroIcon.forEach(icon=>{this.resizeObserver.observe(icon)})}else{const heroTitle=this.querySelector(".hero__title");if(!heroTitle)return;this.resizeObserver=new ResizeObserver(()=>{this.recalculateAnimation()}),this.resizeObserver.observe(heroTitle)}}recalculateAnimation(){const scrollingContainer=this.querySelector(".scrolling-container");scrollingContainer&&this.setAnimationSpeed(scrollingContainer)}});
4//# sourceMappingURL=/cdn/shop/t/9/assets/scrolling-text-banner.js.map?v=173050369352524494161781628325