https://store.guitargate.com/cdn/shop/t/4/assets/marquee.js?v=131793217881894452351767395514

1import{Component}from"@theme/component";import{debounce}from"@theme/utilities";const ANIMATION_OPTIONS={duration:500};class MarqueeComponent extends Component{requiredRefs=["wrapper","content","marqueeItems"];async connectedCallback(){super.connectedCallback();const{marqueeItems}=this.refs;if(marqueeItems.length===0)return;const{numberOfCopies}=await this.#queryNumberOfCopies(),speed=this.#calculateSpeed(numberOfCopies);this.#addRepeatedItems(numberOfCopies),this.#duplicateContent(),this.#setSpeed(speed),window.addEventListener("resize",this.#handleResize),this.addEventListener("pointerenter",this.#slowDown),this.addEventListener("pointerleave",this.#speedUp)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.#handleResize),this.removeEventListener("pointerenter",this.#slowDown),this.removeEventListener("pointerleave",this.#speedUp)}#animation=null;#marqueeWidth=null;#slowDown=debounce(()=>{if(this.#animation)return;const animation=this.refs.wrapper.getAnimations()[0];animation&&(this.#animation=animateValue({...ANIMATION_OPTIONS,from:1,to:0,onUpdate:value=>animation.updatePlaybackRate(value),onComplete:()=>{this.#animation=null}}))},ANIMATION_OPTIONS.duration);#speedUp(){this.#slowDown.cancel();const animation=this.refs.wrapper.getAnimations()[0];if(!animation||animation.playbackRate===1)return;const from=this.#animation?.current??0;this.#animation?.cancel(),this.#animation=animateValue({...ANIMATION_OPTIONS,from,to:1,onUpdate:value=>animation.updatePlaybackRate(value),onComplete:()=>{this.#animation=null}})}get clonedContent(){const{content,wrapper}=this.refs,lastChild=wrapper.lastElementChild;return content!==lastChild?lastChild:null}#setSpeed(value){this.style.setProperty("--marquee-speed",`${value}s`)}async#queryNumberOfCopies(){const{marqueeItems}=this.refs;return new Promise(resolve=>{if(!marqueeItems[0])return setTimeout(()=>resolve({numberOfCopies:1,isHorizontalResize:!0}),0);const intersectionObserver=new IntersectionObserver(entries=>{const firstEntry=entries[0];if(!firstEntry)return;intersectionObserver.disconnect();const{width:marqueeWidth}=firstEntry.rootBounds??{width:0},{width:marqueeItemsWidth}=firstEntry.boundingClientRect,isHorizontalResize=this.#marqueeWidth!==marqueeWidth;this.#marqueeWidth=marqueeWidth,setTimeout(()=>{resolve({numberOfCopies:marqueeItemsWidth===0?1:Math.ceil(marqueeWidth/marqueeItemsWidth),isHorizontalResize})},0)},{root:this});intersectionObserver.observe(marqueeItems[0])})}#calculateSpeed(numberOfCopies){const speedFactor=Number(this.getAttribute("data-speed-factor"));return Math.sqrt(numberOfCopies)*speedFactor}#handleResize=debounce(async()=>{const{marqueeItems}=this.refs,{newNumberOfCopies,isHorizontalResize}=await this.#queryNumberOfCopies();if(!isHorizontalResize)return;const currentNumberOfCopies=marqueeItems.length,speed=this.#calculateSpeed(newNumberOfCopies);newNumberOfCopies>currentNumberOfCopies?this.#addRepeatedItems(newNumberOfCopies-currentNumberOfCopies):newNumberOfCopies<currentNumberOfCopies&&this.#removeRepeatedItems(currentNumberOfCopies-newNumberOfCopies),this.#duplicateContent(),this.#setSpeed(speed),this.#restartAnimation()},250);#restartAnimation(){const animations=this.refs.wrapper.getAnimations();requestAnimationFrame(()=>{for(const animation of animations)animation.currentTime=0})}#duplicateContent(){this.clonedContent?.remove();const clone=this.refs.content.cloneNode(!0);clone.setAttribute("aria-hidden","true"),clone.removeAttribute("ref"),this.refs.wrapper.appendChild(clone)}#addRepeatedItems(numberOfCopies){const{content,marqueeItems}=this.refs;if(marqueeItems[0])for(let i=0;i<numberOfCopies-1;i++){const clone=marqueeItems[0].cloneNode(!0);content.appendChild(clone)}}#removeRepeatedItems(numberOfCopies){const{content}=this.refs,children=Array.from(content.children),itemsToRemove=Math.min(numberOfCopies,children.length-1);for(let i=0;i<itemsToRemove;i++)content.lastElementChild?.remove()}}function animateValue({from,to,duration,onUpdate,easing=t=>t*t*(3-2*t),onComplete}){const startTime=performance.now();let cancelled=!1,currentValue=from;function animate(currentTime){if(cancelled)return;const elapsed=currentTime-startTime,progress=Math.min(elapsed/duration,1),easedProgress=easing(progress);currentValue=from+(to-from)*easedProgress,onUpdate(currentValue),progress<1?requestAnimationFrame(animate):typeof onComplete=="function"&&onComplete()}return requestAnimationFrame(animate),{get current(){return currentValue},cancel(){cancelled=!0}}}customElements.get("marquee-component")||customElements.define("marquee-component",MarqueeComponent);
2//# sourceMappingURL=/cdn/shop/t/4/assets/marquee.js.map?v=131793217881894452351767395514