https://azzaik.com/cdn/shop/t/38/assets/marquee.js?v=146312856161197747391747835779

1import{Component}from"@theme/component";import{debounce}from"@theme/utilities";const ANIMATION_OPTIONS={duration:500};class MarqueeComponent extends Component{requiredRefs=["wrapper","content"];connectedCallback(){super.connectedCallback(),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")),marqueeWidth=this.offsetWidth;return Math.ceil(marqueeWidth/speedFactor/2)}#handleResize=debounce(()=>{const{content}=this.refs,newNumberOfCopies=this.#calculateNumberOfCopies(),currentNumberOfCopies=content.children.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}=this.refs,wrapper=content.firstElementChild;if(wrapper)for(let i=0;i<numberOfCopies-1;i++){const clone=wrapper.cloneNode(!0);content.appendChild(clone)}}#removeRepeatedItems(numberOfCopies=this.#calculateNumberOfCopies()){const{content}=this.refs;for(let i=0;i<numberOfCopies;i++)content.lastElementChild?.remove()}#calculateNumberOfCopies(){const{content}=this.refs,marqueeWidth=this.offsetWidth,marqueeRepeatedItemWidth=content.firstElementChild instanceof HTMLElement?content.firstElementChild.offsetWidth:0;return 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/38/assets/marquee.js.map?v=146312856161197747391747835779