/** * InfiniteScroller - Lightweight, performant infinite scrolling component */ class InfiniteScroller { constructor(element, options = {}, index = 0) { const indexBasedDirection = index % 2 === 0 ? 'left' : 'right'; this.settings = { maxSpeed: 10, speed: 1, scrollOnMouseOver: true, resetOnMouseOut: true, direction: options.direction || indexBasedDirection, gap: 20, ...options }; this.controller = { currentSpeed: 0, targetSpeed: this.settings.direction === 'left' ? this.settings.speed : -this.settings.speed, animationId: null, isScrollingEnabled: false }; this.element = element; this.slideWrap = element.querySelector('.slide-wrap'); this.slideData = element.querySelector('.slide-data'); this.imagesList = element.querySelector('.images-list'); this.originalItems = Array.from(this.imagesList.children); this.scrollerId = element.id || `scroller-${Math.random().toString(36).substring(2, 9)}`; this.init(); this.resizeHandler = this.debounce(this.handleResize.bind(this), 200); window.addEventListener('resize', this.resizeHandler); } init() { this.imagesList.innerHTML = ''; const fragment = document.createDocumentFragment(); this.originalItems.forEach(item => { fragment.appendChild(item.cloneNode(true)); }); this.imagesList.appendChild(fragment); if (this.settings.imageMaxWidth) { this.element.style.setProperty('--scoller-section-image-width', `${this.settings.imageMaxWidth}px`); } if (this.settings.imageMaxHeight) { this.element.style.setProperty('--scoller-section-image-height', `${this.settings.imageMaxHeight}px`); } const shouldScroll = this.calculateDimensions(); if (shouldScroll) { this.setupForScrolling(); this.startAnimation(); if (this.settings.scrollOnMouseOver) { this.setupMouseHandlers(); } } else { this.centerItems(); } this.element.style.visibility = 'visible'; } calculateTotalWidth(items) { let totalWidth = 0; for (let i = 0; i < items.length; i++) { const item = items[i]; totalWidth += item.offsetWidth + this.getMarginWidth(item); if (i < items.length - 1) totalWidth += this.settings.gap; } return totalWidth; } calculateDimensions() { const items = this.imagesList.children; this.originalContentWidth = this.calculateTotalWidth(items); this.containerWidth = this.slideData.offsetWidth; const shouldEnableScrolling = this.originalContentWidth > this.containerWidth; this.controller.isScrollingEnabled = shouldEnableScrolling; return shouldEnableScrolling; } setupForScrolling() { let totalWidth = 0; const items = Array.from(this.imagesList.children); for (let i = 0; i < items.length; i++) { const item = items[i]; item.style.position = 'absolute'; item.style.left = `${totalWidth}px`; totalWidth += item.offsetWidth + this.getMarginWidth(item); if (i < items.length - 1) totalWidth += this.settings.gap; } const neededWidth = Math.max(this.containerWidth * 2, totalWidth * 2); let currentWidth = totalWidth; totalWidth += this.settings.gap; currentWidth += this.settings.gap; while (currentWidth < neededWidth) { for (let i = 0; i < items.length; i++) { const originalItem = items[i]; const clone = originalItem.cloneNode(true); clone.style.position = 'absolute'; clone.style.left = `${totalWidth}px`; const itemWidth = originalItem.offsetWidth + this.getMarginWidth(originalItem); totalWidth += itemWidth; if (i < items.length - 1) totalWidth += this.settings.gap; this.imagesList.appendChild(clone); currentWidth += itemWidth + (i < items.length - 1 ? this.settings.gap : 0); } totalWidth += this.settings.gap; currentWidth += this.settings.gap; } this.halfWidth = this.originalContentWidth + this.settings.gap; this.slideData.scrollLeft = 0; } centerItems() { const items = this.imagesList.children; const totalWidth = this.calculateTotalWidth(items); const startX = Math.max(0, (this.containerWidth - totalWidth) / 2); let currentX = startX; for (let i = 0; i < items.length; i++) { const item = items[i]; item.style.position = 'absolute'; item.style.left = `${currentX}px`; currentX += item.offsetWidth + this.getMarginWidth(item) + this.settings.gap; } if (this.controller.animationId) { cancelAnimationFrame(this.controller.animationId); this.controller.animationId = null; } this.removeMouseHandlers(); } getMarginWidth(element) { const styles = window.getComputedStyle(element); return parseFloat(styles.marginLeft) + parseFloat(styles.marginRight); } startAnimation() { if (this.controller.animationId) cancelAnimationFrame(this.controller.animationId); const animate = () => { if (!this.controller.isScrollingEnabled) return; const speedDiff = this.controller.targetSpeed - this.controller.currentSpeed; this.controller.currentSpeed += Math.abs(speedDiff) > 0.01 ? speedDiff * 0.1 : 0; if (Math.abs(speedDiff) <= 0.01) this.controller.currentSpeed = this.controller.targetSpeed; let newPosition = this.slideData.scrollLeft + this.controller.currentSpeed; if (newPosition >= this.halfWidth) { newPosition -= this.halfWidth; } else if (newPosition <= 0) { newPosition += this.halfWidth; } this.slideData.scrollLeft = newPosition; this.controller.animationId = requestAnimationFrame(animate); }; this.controller.animationId = requestAnimationFrame(animate); } setupMouseHandlers() { this.removeMouseHandlers(); this.mouseMoveHandler = (event) => { if (!this.controller.isScrollingEnabled) return; const rect = this.slideData.getBoundingClientRect(); const containerWidth = rect.width; const centerPoint = rect.left + containerWidth / 2; const distanceFromCenter = event.clientX - centerPoint; const normalizedDistance = distanceFromCenter / (containerWidth / 2); const cubicFactor = Math.pow(normalizedDistance, 3); const directionMultiplier = this.settings.direction === 'right' ? -1 : 1; this.controller.targetSpeed = this.settings.maxSpeed * cubicFactor * directionMultiplier; }; this.mouseLeaveHandler = () => { if (!this.controller.isScrollingEnabled) return; this.controller.targetSpeed = this.settings.direction === 'left' ? this.settings.speed : -this.settings.speed; }; this.slideData.addEventListener('mousemove', this.mouseMoveHandler, { passive: true }); if (this.settings.resetOnMouseOut) { this.slideData.addEventListener('mouseleave', this.mouseLeaveHandler, { passive: true }); } } removeMouseHandlers() { if (this.mouseMoveHandler) this.slideData.removeEventListener('mousemove', this.mouseMoveHandler); if (this.mouseLeaveHandler) this.slideData.removeEventListener('mouseleave', this.mouseLeaveHandler); } handleResize() { this.init(); } debounce = (func, wait) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => func(...args), wait); }; } updateSettings(newSettings) { this.settings = { ...this.settings, ...newSettings }; this.controller.targetSpeed = this.settings.direction === 'left' ? this.settings.speed : -this.settings.speed; this.init(); } destroy() { if (this.controller.animationId) { cancelAnimationFrame(this.controller.animationId); } this.removeMouseHandlers(); window.removeEventListener('resize', this.resizeHandler); } } const defaultScrollerOptions = { scrollOnMouseOver: true, resetOnMouseOut: true, maxSpeed: 10, speed: 1, gap: 30 }; window.scrollerInstances = {}; function initializeScroller(scrollerId, options = {}) { const element = document.getElementById(scrollerId); if (!element) { console.warn(`Scroller with ID ${scrollerId} not found`); return; } let dataOptions = {}; const optionsAttr = element.getAttribute('data-options'); if (optionsAttr) { try { dataOptions = JSON.parse(optionsAttr); } catch (e) { console.warn(`Invalid JSON in data-options for ${scrollerId}`, e); } } const configOptions = window.scrollerConfigs && window.scrollerConfigs[scrollerId] ? window.scrollerConfigs[scrollerId] : {}; const mergedOptions = { ...defaultScrollerOptions, ...(window.scrollerOptions || {}), ...configOptions, ...dataOptions, ...options }; if (window.scrollerInstances[scrollerId]) { window.scrollerInstances[scrollerId].updateSettings(mergedOptions); } else { window.scrollerInstances[scrollerId] = new InfiniteScroller(element, mergedOptions); } return window.scrollerInstances[scrollerId]; } function updateScrollerSettings(scrollerId, options) { if (window.scrollerInstances[scrollerId]) { window.scrollerInstances[scrollerId].updateSettings(options); } } document.addEventListener('appLoaded', () => { const scrollerElements = document.querySelectorAll('.infinite-scroller'); scrollerElements.forEach((element, index) => { let options = {}; const optionsAttr = element.getAttribute('data-options'); if (optionsAttr) { try { options = JSON.parse(optionsAttr); } catch (e) { console.warn('Invalid JSON in data-options', e); } } if (element.id && window.scrollerConfigs && window.scrollerConfigs[element.id]) { options = { ...options, ...window.scrollerConfigs[element.id] }; } const mergedOptions = { ...defaultScrollerOptions, ...(window.scrollerOptions || {}), ...options }; const scroller = new InfiniteScroller(element, mergedOptions, index); if (element.id) { window.scrollerInstances[element.id] = scroller; } }); });

2021 ASPMA Conference