1import{Component}from"@theme/component";import{debounce}from"@theme/utilities";const ANIMATION_OPTIONS={duration:500};class MarqueeComponent extends Component{requiredRefs=["wrapper","content","marqueeItems"];connectedCallback(){super.connectedCallback();const{marqueeItems}=this.refs;marqueeItems.length!==0&&(this.#addRepeatedItems(),this.#duplicateContent(),this.#setSpeed(),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;#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.#calculateSpeed()){this.style.setProperty("--marquee-speed",`${value}s`)}#calculateSpeed(){const speedFactor=Number(this.getAttribute("data-speed-factor")),{marqueeItems}=this.refs,marqueeWidth=this.offsetWidth,marqueeRepeatedItemWidth=marqueeItems[0]?.offsetWidth??1,count=marqueeRepeatedItemWidth===0?1:Math.ceil(marqueeWidth/marqueeRepeatedItemWidth);return Math.sqrt(count)*speedFactor}#handleResize=debounce(()=>{const{marqueeItems}=this.refs,newNumberOfCopies=this.#calculateNumberOfCopies(),currentNumberOfCopies=marqueeItems.length;newNumberOfCopies>currentNumberOfCopies?this.#addRepeatedItems(newNumberOfCopies-currentNumberOfCopies):newNumberOfCopies<currentNumberOfCopies&&this.#removeRepeatedItems(currentNumberOfCopies-newNumberOfCopies),this.#duplicateContent(),this.#setSpeed(),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=this.#calculateNumberOfCopies()){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=this.#calculateNumberOfCopies()){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()}#calculateNumberOfCopies(){const{marqueeItems}=this.refs,marqueeWidth=this.offsetWidth,marqueeRepeatedItemWidth=marqueeItems[0]?.offsetWidth??1;return marqueeRepeatedItemWidth===0?1:Math.ceil(marqueeWidth/marqueeRepeatedItemWidth)}}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/5/assets/marquee.js.map?v=117276913601894321941789062164
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.