https://boardgamegeekstore.com/cdn/shop/t/59/assets/element.marquee.js?v=146838365732890290641783094905

1import{debounce}from"util.misc";class ElementMarquee extends HTMLElement{constructor(){super(),this.resizeObserver=null,this.hasResizedOnce=!1,this.lastWidth=0,this.elements={}}connectedCallback(){this.elements.content=this.querySelector(".element-marquee__content"),this.elements.wrapper=this.querySelector(".element-marquee__wrapper"),!(!this.elements.content||!this.elements.content.firstElementChild?.children?.length)&&(this.setupContent(),this.setSpeed(),this.setupHover(),this.setupResizeObserver(),this.setAttribute("data-loaded",""))}disconnectedCallback(){this.cleanupResizeObserver()}setupContent(){const copies=this.calculateNumberOfCopies();[...this.elements.content.children].slice(1).forEach(container=>container.remove());const originalContainer=this.elements.content.firstElementChild;for(let i=1;i<copies;i++){const clone=originalContainer.cloneNode(!0);this.elements.content.appendChild(clone)}this.duplicateContent()}calculateNumberOfCopies(){const containerWidth=this.offsetWidth,itemsContainer=this.elements.content.firstElementChild,itemWidth=itemsContainer instanceof HTMLElement?itemsContainer.offsetWidth:1;return itemWidth===0?1:Math.ceil(containerWidth/itemWidth)+1}duplicateContent(){if(!this.elements.wrapper||!this.elements.content)return;const existingClone=this.elements.wrapper.querySelector('.element-marquee__content[aria-hidden="true"]');existingClone&&existingClone.remove();const clone=this.elements.content.cloneNode(!0);clone.setAttribute("aria-hidden","true"),this.elements.wrapper.appendChild(clone)}setSpeed(){const pixelsPerSecond=50*((parseInt(this.getAttribute("data-speed"))||5)/5),duration=this.offsetWidth/pixelsPerSecond;this.style.setProperty("--marquee-speed",`${duration}s`)}setupHover(){const smoothTransition=targetRate=>{const animation=this.elements.wrapper?.getAnimations()[0];if(!animation)return;const start=animation.playbackRate,duration=300,startTime=performance.now(),animate=time=>{const progress=Math.min((time-startTime)/duration,1),rate=start+(targetRate-start)*progress;animation.updatePlaybackRate(rate),progress<1&&requestAnimationFrame(animate)};requestAnimationFrame(animate)};this.addEventListener("pointerenter",()=>smoothTransition(0)),this.addEventListener("pointerleave",()=>smoothTransition(1))}setupResizeObserver(){this.lastWidth=this.offsetWidth,this.resizeObserver=new ResizeObserver(debounce(250,()=>this.handleResize())),this.resizeObserver.observe(this)}cleanupResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleResize(){if(!this.hasResizedOnce){this.hasResizedOnce=!0;return}const currentWidth=this.offsetWidth;Math.abs(currentWidth-this.lastWidth)/this.lastWidth>.2&&(this.setupContent(),this.setSpeed(),this.lastWidth=currentWidth)}}customElements.define("element-marquee",ElementMarquee);
2//# sourceMappingURL=/cdn/shop/t/59/assets/element.marquee.js.map?v=146838365732890290641783094905