MyClub/test-scroll-retention.js

// Test script to verify admin navigation scroll centering functionality
// Run this in the browser console when on admin pages

console.log('🧪 Testing Admin Navigation Auto-Centering');

// 1. Find the sidebar element
const sidebar = document.querySelector('[data-sidebar="true"]');
if (sidebar) {
  console.log('✅ Sidebar element found:', sidebar);
  
  // 2. Find all navigation items
  const navItems = sidebar.querySelectorAll('a[href*="/admin/"]');
  console.log(`✅ Found ${navItems.length} navigation items`);
  
  // 3. Test current page detection
  const currentPath = window.location.pathname;
  console.log(`📍 Current path: ${currentPath}`);
  
  // 4. Find the nav item that matches current path
  let currentItem = null;
  for (let i = 0; i < navItems.length; i++) {
    const item = navItems[i];
    const href = item.getAttribute('href');
    if (href === currentPath) {
      currentItem = item;
      console.log(`✅ Exact match found: ${href}`);
      break;
    }
  }
  
  // Try partial match if no exact match
  if (!currentItem) {
    for (let i = 0; i < navItems.length; i++) {
      const item = navItems[i];
      const href = item.getAttribute('href');
      if (href && currentPath.startsWith(href) && href !== '/admin') {
        currentItem = item;
        console.log(`✅ Partial match found: ${href} for ${currentPath}`);
        break;
      }
    }
  }
  
  if (currentItem) {
    console.log('✅ Current nav item found:', currentItem);
    
    // 5. Test the centering calculation
    const containerRect = sidebar.getBoundingClientRect();
    const itemRect = currentItem.getBoundingClientRect();
    
    const itemTopRelativeToContainer = itemRect.top - containerRect.top + sidebar.scrollTop;
    const itemHeight = itemRect.height;
    const containerHeight = containerRect.height;
    
    const targetScrollTop = itemTopRelativeToContainer - (containerHeight / 2) + (itemHeight / 2);
    const maxScrollTop = sidebar.scrollHeight - containerHeight;
    const finalScrollTop = Math.max(0, Math.min(targetScrollTop, maxScrollTop));
    
    console.log('📊 Centering calculations:');
    console.log(`  - Item position relative to container: ${itemTopRelativeToContainer}px`);
    console.log(`  - Item height: ${itemHeight}px`);
    console.log(`  - Container height: ${containerHeight}px`);
    console.log(`  - Target scroll position: ${targetScrollTop}px`);
    console.log(`  - Final scroll position: ${finalScrollTop}px`);
    
    // 6. Test the actual scrolling
    console.log('🎯 Testing auto-center to current page...');
    const originalScrollTop = sidebar.scrollTop;
    
    // Scroll to top first to simulate navigation
    sidebar.scrollTop = 0;
    
    setTimeout(() => {
      console.log(`📍 Reset scroll to top: ${sidebar.scrollTop}`);
      
      // Perform the centering scroll
      sidebar.scrollTo({
        top: finalScrollTop,
        behavior: 'smooth'
      });
      
      setTimeout(() => {
        console.log(`📍 Final scroll position: ${sidebar.scrollTop}`);
        console.log(`🎯 Expected position: ${finalScrollTop}`);
        
        if (Math.abs(sidebar.scrollTop - finalScrollTop) < 5) {
          console.log('✅ SUCCESS: Auto-centering works perfectly!');
        } else {
          console.log('⚠️  Close but not exact (smooth animation may still be running)');
        }
        
        // 7. Test with different pages
        console.log('\n🔄 Testing other pages...');
        const testPaths = ['/admin', '/admin/sponzori', '/admin/analytika', '/admin/uzivatele'];
        
        testPaths.forEach((testPath, index) => {
          setTimeout(() => {
            console.log(`\n📍 Testing: ${testPath}`);
            
            // Find nav item for test path
            let testItem = null;
            for (let i = 0; i < navItems.length; i++) {
              const item = navItems[i];
              const href = item.getAttribute('href');
              if (href === testPath) {
                testItem = item;
                break;
              }
            }
            
            if (testItem) {
              const testItemRect = testItem.getBoundingClientRect();
              const testTargetScrollTop = (testItemRect.top - containerRect.top + sidebar.scrollTop) - (containerHeight / 2) + (testItemRect.height / 2);
              const testFinalScrollTop = Math.max(0, Math.min(testTargetScrollTop, maxScrollTop));
              
              console.log(`  → Should scroll to: ${testFinalScrollTop}px`);
            } else {
              console.log(`  → No nav item found for ${testPath}`);
            }
          }, index * 1000);
        });
        
      }, 500);
    }, 100);
    
  } else {
    console.log('❌ No matching nav item found for current path');
  }
  
} else {
  console.log('❌ Sidebar element not found');
  console.log('💡 Make sure you are on an admin page with the sidebar visible');
}

console.log('\n💡 Tips:');
console.log('- Run this on different admin pages to test auto-centering');
console.log('- The sidebar should automatically center the current page item');
console.log('- Navigation should be smooth and automatic');