https://www.chemicalguys.com/cdn/shop/t/5/assets/wlsn-scrolling-bar.js?v=176690129630307889511787733460

1if(!customElements.get("wlsn-scrolling-bar")){class WLSScrollingBar extends HTMLElement{constructor(){super();const n=(v,fb=40)=>{const num=Number(v);return Number.isFinite(num)&&num>=0?num:fb};this.scrollSpeedDesktop=n(this.getAttribute("data-speed-desk"),40),this.scrollSpeedTablet=n(this.getAttribute("data-speed-tab"),40),this.scrollSpeedMobile=n(this.getAttribute("data-speed-mob"),40);const dir=v=>{const s=(v||"rtl").toLowerCase();return s==="ltr"||s==="ttb"?s:s==="btt"||s==="y"?"btt":"rtl"};this.directionDesktop=dir(this.getAttribute("data-direction-desk")),this.directionTablet=dir(this.getAttribute("data-direction-tab")),this.directionMobile=dir(this.getAttribute("data-direction-mob"));const ch=(v,fb)=>{const num=Number(v);return Number.isFinite(num)&&num>0?num:fb};this.containerHeightDesktop=ch(this.getAttribute("data-container-height-desk"),300),this.containerHeightTablet=ch(this.getAttribute("data-container-height-tab"),300),this.containerHeightMobile=ch(this.getAttribute("data-container-height-mob"),300),this.allowAnimation=String(this.getAttribute("data-allow-animation")).toLowerCase()==="true",this.pauseOnHoverDesktop=String(this.getAttribute("data-pause-on-hover-desk")).toLowerCase()==="true",this.classes={track:"js-wlsn-scrolling-bar-track",vertical:"wlsn-scrolling-bar__track--vertical",fallback:"wlsn-scrolling-bar--fallback",scrolling:"wlsn-scrolling-bar--scrolling",scrollingParent:"wlsn-scrolling-bar-parent"},this.state={rafId:0,lastTs:null,offset:0,wrapSize:0,axis:"x",direction:"rtl",originalItemCount:0,paused:!1,built:!1,triedAutoStart:!1},this._intersectionObserver=null,this._resizeObserver=null,this._mqlDesktop=window.matchMedia("(min-width: 1024px)"),this._mqlTablet=window.matchMedia("(min-width: 768px) and (max-width: 1023.98px)"),this._mqlMobile=window.matchMedia("(max-width: 767.98px)"),this._mqlReduced=window.matchMedia("(prefers-reduced-motion: reduce)"),this._onVisChange=this._onVisChange.bind(this),this._onMqlChange=this._onMqlChange.bind(this),this._onResize=this._debounce(()=>this.rebuild(),120),this._onIntersect=this._onIntersect.bind(this),this._autoStart=this._autoStart.bind(this),this._onMouseEnter=this._onMouseEnter.bind(this),this._onMouseLeave=this._onMouseLeave.bind(this)}get elements(){return{track:this.querySelector(`.${this.classes.track}`)}}_getForceScroll(){return String(this.getAttribute("data-force-scroll")).toLowerCase()==="true"}connectedCallback(){if(!this.allowAnimation)return;const{track}=this.elements;track&&(track.style.willChange="transform",this._waitForImages(this,1200).then(()=>this._build()),document.addEventListener("visibilitychange",this._onVisChange),this._mqlDesktop.addEventListener("change",this._onMqlChange),this._mqlTablet.addEventListener("change",this._onMqlChange),this._mqlMobile.addEventListener("change",this._onMqlChange),this._mqlReduced.addEventListener("change",this._onMqlChange),this._intersectionObserver=new IntersectionObserver(this._onIntersect,{root:null,threshold:0}),this._intersectionObserver.observe(this),this._resizeObserver=new ResizeObserver(this._onResize),this._resizeObserver.observe(this),window.addEventListener("resize",this._onResize,{passive:!0}),window.addEventListener("orientationchange",()=>{setTimeout(()=>this.rebuild(),100)},{passive:!0}),this.pauseOnHoverDesktop&&(this.addEventListener("mouseenter",this._onMouseEnter,{passive:!0}),this.addEventListener("mouseleave",this._onMouseLeave,{passive:!0})),setTimeout(this._autoStart,1500))}disconnectedCallback(){this._teardown(),document.removeEventListener("visibilitychange",this._onVisChange),window.removeEventListener("resize",this._onResize),window.removeEventListener("orientationchange",this._rebuild),this._mqlDesktop.removeEventListener("change",this._onMqlChange),this._mqlTablet.removeEventListener("change",this._onMqlChange),this._mqlMobile.removeEventListener("change",this._onMqlChange),this._mqlReduced.removeEventListener("change",this._onMqlChange),this.pauseOnHoverDesktop&&(this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave)),this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=null),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}pause(){this.state.paused||(this.state.paused=!0,this.state.rafId&&cancelAnimationFrame(this.state.rafId),this.state.rafId=0)}resume(){!this.allowAnimation||this._mqlReduced.matches||!this.state.built||this.state.paused&&(this.state.paused=!1,this.state.lastTs=null,this._getScrollSpeed()>0&&(this.state.rafId=requestAnimationFrame(ts=>this._step(ts))))}onResize(){this._onResize()}_syncParentInnerLayoutClass(){const parent=this.closest(`.${this.classes.scrollingParent}`);parent&&parent.classList.toggle(`${this.classes.scrollingParent}--scroll-active`,this.classList.contains(this.classes.scrolling))}rebuild(){this._teardown(),this._waitForImages(this,1500).then(()=>this._build())}_build(){const track=this.elements.track;if(!track)return;this._removeClones(track),this.classList.remove(this.classes.fallback,this.classes.scrolling),this._syncParentInnerLayoutClass(),track.classList.remove(this.classes.vertical),this.style.minHeight="",this.state.offset=0,this.state.lastTs=null;const direction=this._getDirection();this.state.direction=direction,this.state.axis=direction==="btt"||direction==="ttb"?"y":"x";const originals=Array.from(track.children);if(originals.length<=1){this._exitBuildNoScroll(track);return}if(this.state.axis==="y"){track.classList.add(this.classes.vertical);const containerHeight=this._getContainerHeight();this.style.minHeight=`${containerHeight}px`;

1const baseHeight=this._measureBaseHeightOriginals(track,originals.length);if(baseHeight<=0){this._exitBuildNoScroll(track);return}if(!this._getForceScroll()&&containerHeight>0&&baseHeight<=containerHeight){this._exitBuildNoScroll(track);return}const minCoverage=containerHeight+baseHeight+20,setsNeeded=Math.max(2,Math.ceil(minCoverage/baseHeight));this._prependCloneSets(track,originals,1),this._appendCloneSets(track,originals,setsNeeded-1),this.state.originalItemCount=originals.length,this.state.wrapSize=baseHeight,this.state.built=!0,this.classList.add(this.classes.scrolling),track.style.willChange="transform"}else{const baseWidth=this._measureBaseWidthOriginals(track,originals.length);if(baseWidth<=0){this._exitBuildNoScroll(track);return}const containerWidth=this.clientWidth||track.clientWidth||window.innerWidth||0;if(!this._getForceScroll()&&(containerWidth<=0||baseWidth<=containerWidth)){this._exitBuildNoScroll(track);return}const buffer=window.innerWidth<768?100:2,minCoverage=containerWidth+baseWidth+buffer,setsNeeded=Math.max(2,Math.ceil(minCoverage/baseWidth));this._prependCloneSets(track,originals,1),this._appendCloneSets(track,originals,setsNeeded-1),this.state.originalItemCount=originals.length,this.state.wrapSize=baseWidth,this.state.built=!0,this.classList.add(this.classes.scrolling),track.style.willChange="transform"}this._syncParentInnerLayoutClass();const speed=this._getScrollSpeed();!this._mqlReduced.matches&&speed>0&&(this.state.rafId=requestAnimationFrame(ts=>this._step(ts)))}_exitBuildNoScroll(track){this.state.built=!1,track.style.transform="translate3d(0, 0, 0)",track.style.willChange="",this.classList.remove(this.classes.scrolling),this.classList.add(this.classes.fallback),this._syncParentInnerLayoutClass()}_teardown(){this.state.rafId&&cancelAnimationFrame(this.state.rafId),this.state.rafId=0,this.state.lastTs=null,this.state.offset=0;const track=this.elements.track;track&&(this._removeClones(track),track.style.transform="translate3d(0, 0, 0)",track.classList.remove(this.classes.vertical)),this.style.minHeight="",this.state.built=!1,this.classList.remove(this.classes.fallback,this.classes.scrolling),this._syncParentInnerLayoutClass()}_step(timestamp){if(this.state.paused||!this.state.built)return;const speed=this._getScrollSpeed();if(speed<=0||this._mqlReduced.matches){this.pause();return}this.state.lastTs==null&&(this.state.lastTs=timestamp);const dt=(timestamp-this.state.lastTs)/1e3;this.state.lastTs=timestamp,this.state.offset+=speed*dt,this.state.offset>=this.state.wrapSize&&(this.state.offset-=this.state.wrapSize);const dpr=Math.max(1,window.devicePixelRatio||1),snapped=Math.round(this.state.offset*dpr)/dpr,d=this.state.direction,wrap=this.state.wrapSize,tx=d==="ltr"?snapped-wrap:d==="rtl"?-snapped:0,ty=d==="ttb"?snapped:d==="btt"?-snapped:0,{track}=this.elements;track&&(track.style.transform=`translate3d(${tx}px, ${ty}px, 0)`),this.state.rafId=requestAnimationFrame(nextTs=>this._step(nextTs))}_getScrollSpeed(){if(this._mqlReduced.matches)return 0;if(this._mqlDesktop.matches)return this.scrollSpeedDesktop;if(this._mqlTablet.matches)return this.scrollSpeedTablet;if(this._mqlMobile.matches)return this.scrollSpeedMobile;const w=window.innerWidth||document.documentElement.clientWidth||0;return w>=1024?this.scrollSpeedDesktop:w>=768?this.scrollSpeedTablet:this.scrollSpeedMobile}_getDirection(){if(this._mqlDesktop.matches)return this.directionDesktop;if(this._mqlTablet.matches)return this.directionTablet;if(this._mqlMobile.matches)return this.directionMobile;const w=window.innerWidth||document.documentElement.clientWidth||0;return w>=1024?this.directionDesktop:w>=768?this.directionTablet:this.directionMobile}_getContainerHeight(){if(this._mqlDesktop.matches)return this.containerHeightDesktop;if(this._mqlTablet.matches)return this.containerHeightTablet;if(this._mqlMobile.matches)return this.containerHeightMobile;const w=window.innerWidth||document.documentElement.clientWidth||0;return w>=1024?this.containerHeightDesktop:w>=768?this.containerHeightTablet:this.containerHeightMobile}_appendCloneSets(track,originals,setsToAdd){if(setsToAdd<=0)return;const frag=document.createDocumentFragment();for(let s=0;s<setsToAdd;s++)for(const el of originals){const clone=el.cloneNode(!0);clone.classList.add("is-clone"),clone.setAttribute("aria-hidden","true"),frag.appendChild(clone)}track.appendChild(frag)}_prependCloneSets(track,originals,setsToAdd){if(setsToAdd<=0)return;const frag=document.createDocumentFragment();for(let s=0;s<setsToAdd;s++)for(const el of originals){const clone=el.cloneNode(!0);clone.classList.add("is-clone"),clone.setAttribute("aria-hidden","true"),frag.appendChild(clone)}track.insertBefore(frag,track.firstChild)}_measureBaseWidthOriginals(track,originalCount){const children=track.children;if(!children||children.length<originalCount)return 0;const first=children[0],last=children[originalCount-1];if(!first||!last)return 0;const r1=first.getBoundingClientRect(),w=last.getBoundingClientRect().right-r1.left;return Number.isFinite(w)&&w>0?w:0}_measureBaseHeightOriginals(track,originalCount){const children=track.children;if(!children||children.length<originalCount)return 0;const first=children[0],last=children[originalCount-1];if(!first||!last)return 0;const r1=first.getBoundingClientRect(),h=last.getBoundingClientRect().bottom-r1.top;return Number.isFinite(h)&&h>0?h:0}_removeClones(track){track.querySelectorAll(".is-clone").forEach(n=>n.remove())}_waitForImages(scope,timeoutMs=1200){const imgs=Array.from(scope.querySelectorAll("img"));if(imgs.length===0)return Promise.resolve();const waiters=imgs.map(img=>

1img.complete&&(img.naturalWidth||img.width)?Promise.resolve():(img.loading==="lazy"&&(img.loading="eager"),new Promise(res=>{const done=()=>{img.removeEventListener("load",done),img.removeEventListener("error",done),res()};img.addEventListener("load",done,{once:!0,passive:!0}),img.addEventListener("error",done,{once:!0,passive:!0}),img.src&&!img.complete&&(img.src=img.src)}))),all=Promise.allSettled(waiters).then(()=>{}),timeout=new Promise(res=>setTimeout(res,timeoutMs));return Promise.race([all,timeout])}_debounce(fn,delayMs=120){let id;return(...args)=>{clearTimeout(id),id=setTimeout(()=>fn(...args),delayMs)}}_onVisChange(){document.hidden?this.pause():this.resume()}_onMqlChange(){this._mqlReduced.matches||this._getScrollSpeed()<=0?this.pause():this.resume()}_onIntersect(entries){const e=entries[0];e&&(e.isIntersecting?this.state.built?this.resume():window.innerWidth<768?setTimeout(()=>this.rebuild(),150):this.rebuild():this.pause())}_autoStart(){!this.state.built&&!this.state.triedAutoStart&&(this.state.triedAutoStart=!0,this.rebuild())}_onMouseEnter(){this.pauseOnHoverDesktop&&this._mqlDesktop.matches&&this.pause()}_onMouseLeave(){this.pauseOnHoverDesktop&&this._mqlDesktop.matches&&this.resume()}}customElements.define("wlsn-scrolling-bar",WLSScrollingBar)}
2//# sourceMappingURL=/cdn/shop/t/5/assets/wlsn-scrolling-bar.js.map?v=176690129630307889511787733460