// Use an IIFE (Immediately Invoked Function Expression) to avoid global scope pollution (function() { // Scope variables to the specific section to avoid conflicts with plentymarkets const section = document.querySelector('.animalixs-category-section'); if (!section) return; // Add smooth scroll indicator for mobile const categoryScroll = section.querySelector('#categoryScroll'); const scrollHint = section.querySelector('#scrollHint'); if (!categoryScroll) return; // Track scroll position for visual feedback function checkScrollPosition() { const scrollLeft = categoryScroll.scrollLeft; const scrollWidth = categoryScroll.scrollWidth; const clientWidth = categoryScroll.clientWidth; // Show hint if there is more content to scroll to the right // (adding a small 2px buffer for rounding errors) if (scrollWidth - clientWidth - scrollLeft > 2 && scrollLeft < 20) { if(scrollHint) scrollHint.classList.remove('hidden'); } else { if(scrollHint) scrollHint.classList.add('hidden'); } } categoryScroll.addEventListener('scroll', checkScrollPosition); // Also check on window resize window.addEventListener('resize', checkScrollPosition); // Mobile-specific: Add touch scroll hint for first load window.addEventListener('load', function() { checkScrollPosition(); // Check initially on load // Removed the window.innerWidth <= 768 check so it animates on all devices categoryScroll.style.animation = 'pulse-scroll 2s ease-in-out'; }); // Add keyboard navigation support (only when mouse is over the container) section.addEventListener('mouseenter', function() { document.addEventListener('keydown', handleKeydown); }); section.addEventListener('mouseleave', function() { document.removeEventListener('keydown', handleKeydown); }); function handleKeydown(e) { if (e.key === 'ArrowLeft') { categoryScroll.scrollBy({ left: -100, behavior: 'smooth' }); } else if (e.key === 'ArrowRight') { categoryScroll.scrollBy({ left: 100, behavior: 'smooth' }); } } // Dynamically inject the keyframes animation to ensure isolation const styleId = 'animalixs-category-animations'; if (!document.getElementById(styleId)) { const styleEl = document.createElement('style'); styleEl.id = styleId; styleEl.textContent = ` @keyframes pulse-scroll { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } `; document.head.appendChild(styleEl); } })();