From 7770d64ef380d3d57b65fdbfa450022a7fd8bf32 Mon Sep 17 00:00:00 2001 From: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com> Date: Sat, 5 Sep 2026 14:35:44 -0400 Subject: [PATCH] feat(tabs): sync matching tab groups across page Adds a new tabs script and wires it into theme config so tab groups with identical tab names/order stay synchronized when a tab is selected. Updates tab markup to use unique generated IDs plus a `data-tab-name` hook for matching, refreshes tab styling for a cleaner/nav-like UI, and documents the linked-tab behavior in the blog guide. --- _config_theme.yml | 1 + _includes/tabs.html | 16 ++++---- _posts/guides/1970-01-01-blog-guide.md | 1 + _sass/styles.scss | 48 ++++++++++++++++++---- assets/js/tabs.js | 57 ++++++++++++++++++++++++++ 5 files changed, 107 insertions(+), 16 deletions(-) create mode 100644 assets/js/tabs.js diff --git a/_config_theme.yml b/_config_theme.yml index 921673ce..9c79ffc4 100644 --- a/_config_theme.yml +++ b/_config_theme.yml @@ -72,6 +72,7 @@ site-css: site-js: - href: "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2026.812.190302/dist/crowdin.js" - "/assets/js/crowdin-init.js" + - "/assets/js/tabs.js" theme-switcher: true theme-switcher-style: 'button' gtag: "G-SSW90X5YZX" diff --git a/_includes/tabs.html b/_includes/tabs.html index 711788b8..3815c905 100644 --- a/_includes/tabs.html +++ b/_includes/tabs.html @@ -1,15 +1,17 @@ -
-
+{% capture tabs_id %}tabs-{% increment tabs_counter %}{% endcapture %} +
+
{% for tab in include.tabs %}
@@ -19,9 +21,9 @@ {% for tab in include.tabs %}
{% if include.index and include.index >= 0 %} {{ tab.content[include.index] | markdownify }} diff --git a/_posts/guides/1970-01-01-blog-guide.md b/_posts/guides/1970-01-01-blog-guide.md index 236565d2..4054d064 100644 --- a/_posts/guides/1970-01-01-blog-guide.md +++ b/_posts/guides/1970-01-01-blog-guide.md @@ -118,6 +118,7 @@ You can use indexed tabs with the following syntax: The tabs object must have a `name` and `content` field. The `content` field should be an array of strings when using indexed tabs. +Groups with the same tab names in the same order are linked, so selecting a tab in one group selects it in all of them. ### Examples diff --git a/_sass/styles.scss b/_sass/styles.scss index 9d2dcc7f..394a17ac 100644 --- a/_sass/styles.scss +++ b/_sass/styles.scss @@ -14,6 +14,8 @@ --admonition-text: #212529; --circular-progress-border: #dee2e6; --circular-progress-bg: #e9ecef; + --tabs-hover-bg: rgba(40, 169, 230, 0.1); + --tabs-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); /* Light theme commit activity colors */ --commit-activity-empty: rgba(0, 0, 0, 0.08); @@ -40,6 +42,8 @@ --admonition-text: #18191a; --circular-progress-border: #2b3035; --circular-progress-bg: #2b3035; + --tabs-hover-bg: rgba(40, 169, 230, 0.16); + --tabs-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.24); /* Dark theme commit activity colors */ --commit-activity-empty: rgba(255, 255, 255, 0.1); @@ -162,24 +166,50 @@ img.invert { /* CSS for tabs */ .tabs { background-color: var(--footer-col); - padding: 1rem; + border: 1px solid var(--navbar-border-col); + border-radius: 0.75rem; + box-shadow: var(--tabs-shadow); + margin: 1.5rem 0; + overflow: hidden; +} +.tabs > .nav { + border-bottom: 1px solid var(--navbar-border-col); + flex-wrap: nowrap; + gap: 0.25rem; + overflow-x: auto; + padding: 0.5rem 0.5rem 0; } .tabs .nav-link { + border: 1px solid transparent; + border-bottom: 0; + border-radius: 0.5rem 0.5rem 0 0; color: var(--link-col); + font-weight: 600; + padding: 0.625rem 1rem; + transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; + white-space: nowrap; } .tabs .nav-link:hover { + background-color: var(--tabs-hover-bg); color: var(--hover-col); } -.tabs .nav-link.active { +.tabs .nav-link:focus-visible { + outline: 0.1875rem solid var(--link-col); + outline-offset: -0.1875rem; +} +.tabs .nav-link.active, +.tabs .nav-link.active:hover { + background-color: var(--page-col); + border-color: var(--navbar-border-col); color: var(--text-col); - border-color: var(--text-col); + margin-bottom: -1px; } -.tab-content { - background-color: var(--navbar-col); - padding: 1rem; - margin-top: 1rem; - border: 1px solid var(--page-col); - border-radius: 0.5rem; +.tabs > .tab-content { + background-color: var(--page-col); + padding: 1.25rem; +} +.tabs > .tab-content > .tab-pane > :last-child { + margin-bottom: 0; } /* tables */ diff --git a/assets/js/tabs.js b/assets/js/tabs.js new file mode 100644 index 00000000..411e285c --- /dev/null +++ b/assets/js/tabs.js @@ -0,0 +1,57 @@ +/** + * Keep matching groups of tabs in sync. + */ +(function() { + 'use strict'; + + let synchronizing = false; + + function getTabButtons(group) { + const tabList = Array.from(group.children).find((child) => child.getAttribute('role') === 'tablist'); + + if (!tabList) { + return []; + } + + return Array.from(tabList.querySelectorAll('[role="tab"][data-tab-name]')); + } + + function haveMatchingNames(firstButtons, secondButtons) { + return firstButtons.length === secondButtons.length && firstButtons.every( + (button, index) => button.dataset.tabName === secondButtons[index].dataset.tabName + ); + } + + function synchronizeTabs(event) { + const selectedTab = event.target; + + if (synchronizing || !selectedTab.matches('.tabs [role="tab"][data-tab-name]')) { + return; + } + + const selectedGroup = selectedTab.closest('.tabs'); + const selectedButtons = getTabButtons(selectedGroup); + const selectedIndex = selectedButtons.indexOf(selectedTab); + + synchronizing = true; + + try { + document.querySelectorAll('.tabs').forEach((group) => { + const groupButtons = getTabButtons(group); + const matchingTab = groupButtons[selectedIndex]; + + if ( + group !== selectedGroup && + haveMatchingNames(selectedButtons, groupButtons) && + !matchingTab.classList.contains('active') + ) { + bootstrap.Tab.getOrCreateInstance(matchingTab).show(); + } + }); + } finally { + synchronizing = false; + } + } + + document.addEventListener('shown.bs.tab', synchronizeTabs); +})();