sticky header on second table

tomteman · tomteman · commit d071eb732bd7 · 2025-07-10T19:24:38.000+03:00
diff --git a/index.html b/index.html
@@ -225,6 +225,110 @@
         .dark .hover\:bg-gray-600:hover {
             background-color: #4b5563;
         }
+
+        /* Sticky header styles */
+        #stickyHeader {
+            transition: opacity 0.2s ease-in-out;
+        }
+        
+        #stickyHeader.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        /* Ensure the sticky header table has the same styling as the original */
+        #stickyHeader table {
+            min-width: 800px;
+        }
+        
+        @media (max-width: 768px) {
+            #stickyHeader table {
+                min-width: 600px;
+            }
+        }
+        
+        /* Add some top padding to the main content when sticky header is visible */
+        body.sticky-header-active {
+            padding-top: 60px; /* Adjust based on your header height */
+        }
+
+        /* Enhanced table container styles for horizontal scrolling */
+        .table-container {
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+            position: relative;
+        }
+        
+        .table-container table {
+            min-width: 800px;
+            width: 100%;
+        }
+        
+        @media (max-width: 768px) {
+            .table-container table {
+                min-width: 600px;
+            }
+        }
+        
+        /* Sticky header styles */
+        #stickyHeader {
+            transition: opacity 0.2s ease-in-out;
+        }
+        
+        #stickyHeader.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        /* Ensure the sticky header table has the same styling as the original */
+        #stickyHeader .table-container {
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+        
+        #stickyHeader table {
+            min-width: 800px;
+            width: 100%;
+        }
+        
+        @media (max-width: 768px) {
+            #stickyHeader table {
+                min-width: 600px;
+            }
+        }
+        
+        /* Hide scrollbars on the sticky header for cleaner look */
+        #stickyHeader .table-container::-webkit-scrollbar {
+            display: none;
+        }
+        
+        #stickyHeader .table-container {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        
+        /* Ensure both containers have the same scroll behavior */
+        .table-container {
+            scrollbar-width: thin;
+            scrollbar-color: #cbd5e0 transparent;
+        }
+        
+        .table-container::-webkit-scrollbar {
+            height: 8px;
+        }
+        
+        .table-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .table-container::-webkit-scrollbar-thumb {
+            background-color: #cbd5e0;
+            border-radius: 4px;
+        }
+        
+        .dark .table-container::-webkit-scrollbar-thumb {
+            background-color: #4b5563;
+        }
     </style>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
@@ -345,15 +449,15 @@ <h2 class="text-xl font-bold border-l-4 border-black dark:border-gray-400 pl-4 m
             </div>
         </div>
 
-        <!-- Per-Test Results Table -->
+        <!-- Update the per-test table section -->
         <div id="perTestResults">
             <h2 class="text-xl font-bold border-l-4 border-black dark:border-gray-400 pl-4 mb-2 text-gray-900 dark:text-white">
                 Per-test result of latest run
             </h2>
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-6 pl-4">
                 ( ✅ success ; ❌ error ; ➖ skipped )
             </p>
-            <div class="table-container">
+            <div class="table-container" id="perTestTableContainer">
                 <table id="perTestTable" class="w-full border-collapse bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
                     <thead id="perTestTableHead">
                         <!-- Headers will be populated by JavaScript -->
@@ -364,6 +468,19 @@ <h2 class="text-xl font-bold border-l-4 border-black dark:border-gray-400 pl-4 m
                 </table>
             </div>
         </div>
+
+        <!-- Update the sticky header -->
+        <div id="stickyHeader" class="fixed top-0 left-0 right-0 z-50 hidden bg-white dark:bg-gray-800 shadow-lg border-b border-gray-200 dark:border-gray-700">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="table-container" id="stickyTableContainer">
+                    <table class="w-full border-collapse bg-white dark:bg-gray-800">
+                        <thead id="stickyTableHead">
+                            <!-- Will be populated by JavaScript -->
+                        </thead>
+                    </table>
+                </div>
+            </div>
+        </div>
     </main>
 
     <!-- Resources Section -->
diff --git a/script.js b/script.js
@@ -26,6 +26,7 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialize theme first
     initializeTheme();
     initializeVersionSelector();
+    initializeStickyHeader(); // Add this line
     loadTestResults();
 });
 
@@ -413,6 +414,151 @@ function renderOverallTable(bundlersNames, latestResults) {
     });
 }
 
+// Sticky header management
+let stickyHeader = null;
+let perTestTable = null;
+let perTestTableHead = null;
+let stickyTableHead = null;
+let perTestTableContainer = null;
+let stickyTableContainer = null;
+let isStickyHeaderVisible = false;
+let isScrolling = false; // Prevent infinite scroll loops
+
+function initializeStickyHeader() {
+    stickyHeader = document.getElementById('stickyHeader');
+    perTestTable = document.getElementById('perTestTable');
+    perTestTableHead = document.getElementById('perTestTableHead');
+    stickyTableHead = document.getElementById('stickyTableHead');
+    perTestTableContainer = document.getElementById('perTestTableContainer');
+    stickyTableContainer = document.getElementById('stickyTableContainer');
+    
+    if (!stickyHeader || !perTestTable || !perTestTableHead || !stickyTableHead || !perTestTableContainer || !stickyTableContainer) {
+        console.warn('Sticky header elements not found');
+        return;
+    }
+    
+    // Add scroll event listeners
+    window.addEventListener('scroll', handleVerticalScroll);
+    perTestTableContainer.addEventListener('scroll', handleHorizontalScroll);
+    stickyTableContainer.addEventListener('scroll', handleStickyHorizontalScroll);
+    
+    // Add resize event listener to update column widths
+    window.addEventListener('resize', updateStickyHeaderWidths);
+}
+
+function handleVerticalScroll() {
+    if (!perTestTable || !stickyHeader) return;
+    
+    const tableRect = perTestTable.getBoundingClientRect();
+    const tableTop = tableRect.top;
+    const tableBottom = tableRect.bottom;
+    const headerHeight = perTestTableHead.offsetHeight;
+    
+    // Show sticky header when original header is out of view
+    if (tableTop < 0 && tableBottom > headerHeight) {
+        if (!isStickyHeaderVisible) {
+            showStickyHeader();
+        }
+    } else {
+        if (isStickyHeaderVisible) {
+            hideStickyHeader();
+        }
+    }
+}
+
+function handleHorizontalScroll() {
+    if (!stickyTableContainer || isScrolling) return;
+    
+    isScrolling = true;
+    stickyTableContainer.scrollLeft = perTestTableContainer.scrollLeft;
+    
+    // Reset the flag after a short delay
+    setTimeout(() => {
+        isScrolling = false;
+    }, 10);
+}
+
+function handleStickyHorizontalScroll() {
+    if (!perTestTableContainer || isScrolling) return;
+    
+    isScrolling = true;
+    perTestTableContainer.scrollLeft = stickyTableContainer.scrollLeft;
+    
+    // Reset the flag after a short delay
+    setTimeout(() => {
+        isScrolling = false;
+    }, 10);
+}
+
+function showStickyHeader() {
+    if (!stickyHeader) return;
+    
+    stickyHeader.classList.remove('hidden');
+    isStickyHeaderVisible = true;
+    
+    // Update column widths to match the original table
+    updateStickyHeaderWidths();
+    
+    // Sync the horizontal scroll position
+    if (perTestTableContainer && stickyTableContainer) {
+        stickyTableContainer.scrollLeft = perTestTableContainer.scrollLeft;
+    }
+}
+
+function hideStickyHeader() {
+    if (!stickyHeader) return;
+    
+    stickyHeader.classList.add('hidden');
+    isStickyHeaderVisible = false;
+}
+
+function updateStickyHeaderWidths() {
+    if (!perTestTableHead || !stickyTableHead) return;
+    
+    // Copy the header structure from the original table
+    stickyTableHead.innerHTML = perTestTableHead.innerHTML;
+    
+    // Get all header cells from both tables
+    const originalHeaders = perTestTableHead.querySelectorAll('th');
+    const stickyHeaders = stickyTableHead.querySelectorAll('th');
+    
+    // Match the widths of each column
+    for (let i = 0; i < originalHeaders.length; i++) {
+        if (stickyHeaders[i]) {
+            const originalWidth = originalHeaders[i].offsetWidth;
+            stickyHeaders[i].style.width = `${originalWidth}px`;
+            stickyHeaders[i].style.minWidth = `${originalWidth}px`;
+        }
+    }
+    
+    // Ensure both containers have the same scroll width
+    if (perTestTableContainer && stickyTableContainer) {
+        stickyTableContainer.style.width = `${perTestTableContainer.offsetWidth}px`;
+    }
+}
+
+// Add this to the existing functions for better performance
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Use debounced scroll handlers for better performance
+const debouncedHandleHorizontalScroll = debounce(handleHorizontalScroll, 5);
+const debouncedHandleStickyHorizontalScroll = debounce(handleStickyHorizontalScroll, 5);
+
+// Update the event listeners
+perTestTableContainer.addEventListener('scroll', debouncedHandleHorizontalScroll);
+stickyTableContainer.addEventListener('scroll', debouncedHandleStickyHorizontalScroll);
+
+// Modify the existing renderPerTestTable function to also update sticky header
 function renderPerTestTable(bundlersNames, bundlersPerTestResults) {
     const tableHead = document.getElementById('perTestTableHead');
     const tableBody = document.getElementById('perTestTableBody');
@@ -468,6 +614,13 @@ function renderPerTestTable(bundlersNames, bundlersPerTestResults) {
         
         tableBody.appendChild(row);
     });
+    
+    // Update sticky header after a short delay to ensure table is rendered
+    setTimeout(() => {
+        if (isStickyHeaderVisible) {
+            updateStickyHeaderWidths();
+        }
+    }, 100);
 }
 
 function getTestResultDisplayEmoji(result) {
