Skip to content

Commit c3d47b5

Browse files
MDA2AVMDA2AV
authored
Merge pull request #598 from MDA2AV/site-h2-tab
fix h2 inner tabs type selectiomns
2 parents 0de026c + 4a5212a commit c3d47b5

7 files changed

Lines changed: 157 additions & 63 deletions

File tree

‎site/content/leaderboard/_index.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,19 @@ html.dark .http-ver[data-ver="ws"].active { color: #22d3ee; background: rgba(8,1
101101
if (f.dataset.lang === 'all') f.classList.toggle('active', allActive);
102102
else f.classList.toggle('active', allActive || activeLangs.has(f.dataset.lang));
103103
});
104-
/* Trigger re-filter on all visible wrappers */
104+
/* Trigger re-filter on every wrapper so the newly-reset
105+
* Production+Tuned type filter actually takes effect on the
106+
* just-switched-to table. h2/h3/gateway/grpc/ws were previously
107+
* missing and their tables kept stale rows visible even though
108+
* the Production/Tuned buttons were visually toggled. */
105109
if (typeof applyH1IsoFilters === 'function') applyH1IsoFilters();
106110
if (typeof applyH1WkFilters === 'function') applyH1WkFilters();
111+
if (typeof applyFilters_h2 === 'function') applyFilters_h2();
112+
if (typeof applyFilters_h3 === 'function') applyFilters_h3();
113+
if (typeof applyFilters_gw === 'function') applyFilters_gw();
114+
if (typeof applyFilters_prodstack === 'function') applyFilters_prodstack();
115+
if (typeof applyFilters_grpc === 'function') applyFilters_grpc();
116+
if (typeof applyFilters_ws === 'function') applyFilters_ws();
107117
if (typeof renderComposite === 'function') renderComposite();
108118
if (typeof updateCompositeNote === 'function') updateCompositeNote();
109119
});

‎site/layouts/shortcodes/leaderboard-gateway.html‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -466,21 +466,32 @@
466466
});
467467
});
468468

469+
/* Type filters — mirrored across every panel's copy so the selection
470+
* survives inner-tab (profile) switches. */
469471
w.querySelectorAll('.lb-type-filter').forEach(function(btn) {
470472
btn.addEventListener('click', function() {
471473
var type = btn.dataset.type;
472-
var allBtn = w.querySelector('.lb-type-filter[data-type="all"]');
473-
var typeButtons = w.querySelectorAll('.lb-type-filter:not([data-type="all"])');
474+
var allBtns = w.querySelectorAll('.lb-type-filter[data-type="all"]');
474475
if (type === 'all') {
475-
var allActive = allBtn.classList.contains('active');
476-
typeButtons.forEach(function(f) { f.classList.toggle('active', !allActive); });
477-
allBtn.classList.toggle('active', !allActive);
476+
var allActive = btn.classList.contains('active');
477+
w.querySelectorAll('.lb-type-filter').forEach(function(f) {
478+
f.classList.toggle('active', !allActive);
479+
});
478480
} else {
479-
btn.classList.toggle('active');
480-
var allOn = Array.from(typeButtons).every(function(f) { return f.classList.contains('active'); });
481-
allBtn.classList.toggle('active', allOn);
482-
var anyOn = Array.from(typeButtons).some(function(f) { return f.classList.contains('active'); });
483-
if (!anyOn) { btn.classList.add('active'); }
481+
var isNowActive = !btn.classList.contains('active');
482+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
483+
f.classList.toggle('active', isNowActive);
484+
});
485+
var firstPanel = w.querySelector('.lb-panel-gw') || w;
486+
var panelTypeBtns = firstPanel.querySelectorAll('.lb-type-filter:not([data-type="all"])');
487+
var everyOn = Array.from(panelTypeBtns).every(function(f) { return f.classList.contains('active'); });
488+
allBtns.forEach(function(f) { f.classList.toggle('active', everyOn); });
489+
var anyOn = Array.from(panelTypeBtns).some(function(f) { return f.classList.contains('active'); });
490+
if (!anyOn) {
491+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
492+
f.classList.add('active');
493+
});
494+
}
484495
}
485496
applyFilters_gw();
486497
if (window.dlScheduleUpdate) window.dlScheduleUpdate();

‎site/layouts/shortcodes/leaderboard-grpc.html‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -431,21 +431,32 @@
431431
});
432432
});
433433

434+
/* Type filters — mirrored across every panel's copy so the selection
435+
* survives inner-tab (profile) switches. */
434436
w.querySelectorAll('.lb-type-filter').forEach(function(btn) {
435437
btn.addEventListener('click', function() {
436438
var type = btn.dataset.type;
437-
var allBtn = w.querySelector('.lb-type-filter[data-type="all"]');
438-
var typeButtons = w.querySelectorAll('.lb-type-filter:not([data-type="all"])');
439+
var allBtns = w.querySelectorAll('.lb-type-filter[data-type="all"]');
439440
if (type === 'all') {
440-
var allActive = allBtn.classList.contains('active');
441-
typeButtons.forEach(function(f) { f.classList.toggle('active', !allActive); });
442-
allBtn.classList.toggle('active', !allActive);
441+
var allActive = btn.classList.contains('active');
442+
w.querySelectorAll('.lb-type-filter').forEach(function(f) {
443+
f.classList.toggle('active', !allActive);
444+
});
443445
} else {
444-
btn.classList.toggle('active');
445-
var allOn = Array.from(typeButtons).every(function(f) { return f.classList.contains('active'); });
446-
allBtn.classList.toggle('active', allOn);
447-
var anyOn = Array.from(typeButtons).some(function(f) { return f.classList.contains('active'); });
448-
if (!anyOn) { btn.classList.add('active'); }
446+
var isNowActive = !btn.classList.contains('active');
447+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
448+
f.classList.toggle('active', isNowActive);
449+
});
450+
var firstPanel = w.querySelector('.lb-panel-grpc') || w;
451+
var panelTypeBtns = firstPanel.querySelectorAll('.lb-type-filter:not([data-type="all"])');
452+
var everyOn = Array.from(panelTypeBtns).every(function(f) { return f.classList.contains('active'); });
453+
allBtns.forEach(function(f) { f.classList.toggle('active', everyOn); });
454+
var anyOn = Array.from(panelTypeBtns).some(function(f) { return f.classList.contains('active'); });
455+
if (!anyOn) {
456+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
457+
f.classList.add('active');
458+
});
459+
}
449460
}
450461
applyFilters_grpc();
451462
if (window.dlScheduleUpdate) window.dlScheduleUpdate();

‎site/layouts/shortcodes/leaderboard-h2.html‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -220,11 +220,21 @@
220220
}
221221
buildBest();
222222

223-
/* Profile tabs — clicking switches panels */
223+
/* Profile tabs — clicking switches panels. Each panel carries its own
224+
* full set of tab buttons, and initial markup pre-renders an `active`
225+
* class on the tab that matches the panel's profile. We also sync tab
226+
* active state across every panel on click so the highlight tracks the
227+
* clicked profile regardless of which panel the user is currently in,
228+
* instead of relying on the pre-rendered class staying in lockstep. */
224229
w.querySelectorAll('.lb-tab-h2').forEach(function(tab) {
225230
tab.addEventListener('click', function() {
231+
var targetId = tab.dataset.tab;
226232
w.querySelectorAll('.lb-panel-h2').forEach(function(p) { p.classList.remove('active'); });
227-
w.querySelector('.lb-panel-h2[data-panel="' + tab.dataset.tab + '"]').classList.add('active');
233+
w.querySelector('.lb-panel-h2[data-panel="' + targetId + '"]').classList.add('active');
234+
w.querySelectorAll('.lb-tab-h2').forEach(function(t) { t.classList.remove('active'); });
235+
w.querySelectorAll('.lb-tab-h2[data-tab="' + targetId + '"]').forEach(function(t) {
236+
t.classList.add('active');
237+
});
228238
applyFilters_h2();
229239
if (window.dlScheduleUpdate) window.dlScheduleUpdate();
230240
});
@@ -431,21 +441,38 @@
431441
});
432442
});
433443

444+
/* Type filters — mutually mirrored across every panel's copy so switching
445+
* profile tabs preserves the current Production/Tuned/Infrastructure/Engine
446+
* selection. Each panel renders its own set of buttons, so toggling only
447+
* the clicked element would leave other panels at their pre-rendered
448+
* default and "reset" the filter on tab switch. */
434449
w.querySelectorAll('.lb-type-filter').forEach(function(btn) {
435450
btn.addEventListener('click', function() {
436451
var type = btn.dataset.type;
437-
var allBtn = w.querySelector('.lb-type-filter[data-type="all"]');
438-
var typeButtons = w.querySelectorAll('.lb-type-filter:not([data-type="all"])');
452+
var allBtns = w.querySelectorAll('.lb-type-filter[data-type="all"]');
439453
if (type === 'all') {
440-
var allActive = allBtn.classList.contains('active');
441-
typeButtons.forEach(function(f) { f.classList.toggle('active', !allActive); });
442-
allBtn.classList.toggle('active', !allActive);
454+
var allActive = btn.classList.contains('active');
455+
w.querySelectorAll('.lb-type-filter').forEach(function(f) {
456+
f.classList.toggle('active', !allActive);
457+
});
443458
} else {
444-
btn.classList.toggle('active');
445-
var allOn = Array.from(typeButtons).every(function(f) { return f.classList.contains('active'); });
446-
allBtn.classList.toggle('active', allOn);
447-
var anyOn = Array.from(typeButtons).some(function(f) { return f.classList.contains('active'); });
448-
if (!anyOn) { btn.classList.add('active'); }
459+
var isNowActive = !btn.classList.contains('active');
460+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
461+
f.classList.toggle('active', isNowActive);
462+
});
463+
// Recompute whether "All" should show as active by looking at any
464+
// one panel's buttons (they are all in sync after the toggle above).
465+
var firstPanel = w.querySelector('.lb-panel-h2') || w;
466+
var panelTypeBtns = firstPanel.querySelectorAll('.lb-type-filter:not([data-type="all"])');
467+
var everyOn = Array.from(panelTypeBtns).every(function(f) { return f.classList.contains('active'); });
468+
allBtns.forEach(function(f) { f.classList.toggle('active', everyOn); });
469+
// Never allow zero type filters — re-enable the clicked one.
470+
var anyOn = Array.from(panelTypeBtns).some(function(f) { return f.classList.contains('active'); });
471+
if (!anyOn) {
472+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
473+
f.classList.add('active');
474+
});
475+
}
449476
}
450477
applyFilters_h2();
451478
if (window.dlScheduleUpdate) window.dlScheduleUpdate();

‎site/layouts/shortcodes/leaderboard-h3.html‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -430,21 +430,34 @@
430430
});
431431
});
432432

433+
/* Type filters — mirrored across every panel's copy so the selection
434+
* survives inner-tab (profile) switches. Each panel pre-renders its own
435+
* button set; toggling only the clicked element would leave sibling
436+
* panels at their defaults. */
433437
w.querySelectorAll('.lb-type-filter').forEach(function(btn) {
434438
btn.addEventListener('click', function() {
435439
var type = btn.dataset.type;
436-
var allBtn = w.querySelector('.lb-type-filter[data-type="all"]');
437-
var typeButtons = w.querySelectorAll('.lb-type-filter:not([data-type="all"])');
440+
var allBtns = w.querySelectorAll('.lb-type-filter[data-type="all"]');
438441
if (type === 'all') {
439-
var allActive = allBtn.classList.contains('active');
440-
typeButtons.forEach(function(f) { f.classList.toggle('active', !allActive); });
441-
allBtn.classList.toggle('active', !allActive);
442+
var allActive = btn.classList.contains('active');
443+
w.querySelectorAll('.lb-type-filter').forEach(function(f) {
444+
f.classList.toggle('active', !allActive);
445+
});
442446
} else {
443-
btn.classList.toggle('active');
444-
var allOn = Array.from(typeButtons).every(function(f) { return f.classList.contains('active'); });
445-
allBtn.classList.toggle('active', allOn);
446-
var anyOn = Array.from(typeButtons).some(function(f) { return f.classList.contains('active'); });
447-
if (!anyOn) { btn.classList.add('active'); }
447+
var isNowActive = !btn.classList.contains('active');
448+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
449+
f.classList.toggle('active', isNowActive);
450+
});
451+
var firstPanel = w.querySelector('.lb-panel-h3') || w;
452+
var panelTypeBtns = firstPanel.querySelectorAll('.lb-type-filter:not([data-type="all"])');
453+
var everyOn = Array.from(panelTypeBtns).every(function(f) { return f.classList.contains('active'); });
454+
allBtns.forEach(function(f) { f.classList.toggle('active', everyOn); });
455+
var anyOn = Array.from(panelTypeBtns).some(function(f) { return f.classList.contains('active'); });
456+
if (!anyOn) {
457+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
458+
f.classList.add('active');
459+
});
460+
}
448461
}
449462
applyFilters_h3();
450463
if (window.dlScheduleUpdate) window.dlScheduleUpdate();

‎site/layouts/shortcodes/leaderboard-production-stack.html‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -448,21 +448,32 @@
448448
});
449449
});
450450

451+
/* Type filters — mirrored across every panel's copy so the selection
452+
* survives inner-tab (profile) switches. */
451453
w.querySelectorAll('.lb-type-filter').forEach(function(btn) {
452454
btn.addEventListener('click', function() {
453455
var type = btn.dataset.type;
454-
var allBtn = w.querySelector('.lb-type-filter[data-type="all"]');
455-
var typeButtons = w.querySelectorAll('.lb-type-filter:not([data-type="all"])');
456+
var allBtns = w.querySelectorAll('.lb-type-filter[data-type="all"]');
456457
if (type === 'all') {
457-
var allActive = allBtn.classList.contains('active');
458-
typeButtons.forEach(function(f) { f.classList.toggle('active', !allActive); });
459-
allBtn.classList.toggle('active', !allActive);
458+
var allActive = btn.classList.contains('active');
459+
w.querySelectorAll('.lb-type-filter').forEach(function(f) {
460+
f.classList.toggle('active', !allActive);
461+
});
460462
} else {
461-
btn.classList.toggle('active');
462-
var allOn = Array.from(typeButtons).every(function(f) { return f.classList.contains('active'); });
463-
allBtn.classList.toggle('active', allOn);
464-
var anyOn = Array.from(typeButtons).some(function(f) { return f.classList.contains('active'); });
465-
if (!anyOn) { btn.classList.add('active'); }
463+
var isNowActive = !btn.classList.contains('active');
464+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
465+
f.classList.toggle('active', isNowActive);
466+
});
467+
var firstPanel = w.querySelector('.lb-panel-prodstack') || w;
468+
var panelTypeBtns = firstPanel.querySelectorAll('.lb-type-filter:not([data-type="all"])');
469+
var everyOn = Array.from(panelTypeBtns).every(function(f) { return f.classList.contains('active'); });
470+
allBtns.forEach(function(f) { f.classList.toggle('active', everyOn); });
471+
var anyOn = Array.from(panelTypeBtns).some(function(f) { return f.classList.contains('active'); });
472+
if (!anyOn) {
473+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
474+
f.classList.add('active');
475+
});
476+
}
466477
}
467478
applyFilters_prodstack();
468479
if (window.dlScheduleUpdate) window.dlScheduleUpdate();

‎site/layouts/shortcodes/leaderboard-ws.html‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -428,21 +428,32 @@
428428
});
429429
});
430430

431+
/* Type filters — mirrored across every panel's copy so the selection
432+
* survives inner-tab (profile) switches. */
431433
w.querySelectorAll('.lb-type-filter').forEach(function(btn) {
432434
btn.addEventListener('click', function() {
433435
var type = btn.dataset.type;
434-
var allBtn = w.querySelector('.lb-type-filter[data-type="all"]');
435-
var typeButtons = w.querySelectorAll('.lb-type-filter:not([data-type="all"])');
436+
var allBtns = w.querySelectorAll('.lb-type-filter[data-type="all"]');
436437
if (type === 'all') {
437-
var allActive = allBtn.classList.contains('active');
438-
typeButtons.forEach(function(f) { f.classList.toggle('active', !allActive); });
439-
allBtn.classList.toggle('active', !allActive);
438+
var allActive = btn.classList.contains('active');
439+
w.querySelectorAll('.lb-type-filter').forEach(function(f) {
440+
f.classList.toggle('active', !allActive);
441+
});
440442
} else {
441-
btn.classList.toggle('active');
442-
var allOn = Array.from(typeButtons).every(function(f) { return f.classList.contains('active'); });
443-
allBtn.classList.toggle('active', allOn);
444-
var anyOn = Array.from(typeButtons).some(function(f) { return f.classList.contains('active'); });
445-
if (!anyOn) { btn.classList.add('active'); }
443+
var isNowActive = !btn.classList.contains('active');
444+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
445+
f.classList.toggle('active', isNowActive);
446+
});
447+
var firstPanel = w.querySelector('.lb-panel-ws') || w;
448+
var panelTypeBtns = firstPanel.querySelectorAll('.lb-type-filter:not([data-type="all"])');
449+
var everyOn = Array.from(panelTypeBtns).every(function(f) { return f.classList.contains('active'); });
450+
allBtns.forEach(function(f) { f.classList.toggle('active', everyOn); });
451+
var anyOn = Array.from(panelTypeBtns).some(function(f) { return f.classList.contains('active'); });
452+
if (!anyOn) {
453+
w.querySelectorAll('.lb-type-filter[data-type="' + type + '"]').forEach(function(f) {
454+
f.classList.add('active');
455+
});
456+
}
446457
}
447458
applyFilters_ws();
448459
if (window.dlScheduleUpdate) window.dlScheduleUpdate();

0 commit comments

Comments
 (0)