Skip to content
This repository was archived by the owner on Mar 5, 2024. It is now read-only.

Commit cb54d03

Browse files
jdestefano-mongojdestefano-mongo
committed
DOCSP-1682 - Change default tab behavior to render inline. Added 'hidden: true' property to hide tab strips. Added 'tabs-top' directive to pull tab strip to the top of the page.
1 parent a0c479a commit cb54d03

File tree

4 files changed

+82
-62
lines changed

4 files changed

+82
-62
lines changed

‎sphinxext/tabs.py

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,17 @@
2222
LANGUAGES_IDS = [lang[0] for lang in LANGUAGES_RAW]
2323
LANGUAGES_DISPLAY = [lang[1] for lang in LANGUAGES_RAW]
2424

25+
TABS_TOP = '''
26+
.. raw:: html
27+
28+
<div class="tabs-top"></div>
29+
'''
30+
2531
TABS_TEMPLATE = '''
2632
.. raw:: html
2733
2834
<div class="tabs">
35+
{{ if hidden not }}
2936
<ul class="tab-strip tab-strip--singleton" role="tablist" %PREFERENCE%>
3037
{{ for tab in tabs %FILTER% }}
3138
{{ # Only render the tab here if i < 5 }}
@@ -47,6 +54,7 @@
4754
</li>
4855
{{ end }}
4956
</ul>
57+
{{ end }}
5058
<div class="tabs__content" role="tabpanel">
5159
{{ for tab in tabs %FILTER% }}
5260
<div class="tabpanel-{{ tab.id }}">
@@ -106,6 +114,10 @@ def setup(app):
106114
directive = template.create_directive('h4', H4_TEMPLATE_HTML, template.BUILT_IN_PATH, True)
107115
app.add_directive('h4', directive)
108116

117+
# Create directive for positioning tabs at top of the page
118+
directive = template.create_directive('tabs-top', TABS_TOP, template.BUILT_IN_PATH, True)
119+
app.add_directive('tabs-top', directive)
120+
109121
# Create drivers tab directive
110122
directive = template.create_directive('tabs-drivers', buildTemplate("sortLanguages", "drivers"), template.BUILT_IN_PATH, True)
111123
app.add_directive('tabs-drivers', directive)

‎themes/mongodb/src/js/componentTabs.js

Lines changed: 68 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ function showHideTabContent(currentAttrValue) {
1212
class TabsSingleton {
1313
constructor(key) {
1414
this.key = key;
15-
this.tabStrip = document.querySelector('.tab-strip--singleton');
15+
this.tabStrips = document.querySelectorAll('.tab-strip--singleton');
1616

1717
// Only tab sets will have a type, init and try to retrieve
1818
this.type = null;
19-
if (this.tabStrip !== null) {
20-
this.type = this.tabStrip.getAttribute('data-tab-preference');
19+
if (this.tabStrips !== null) {
20+
this.type = this.tabStrips[0].getAttribute('data-tab-preference');
2121
}
2222
}
2323

@@ -61,44 +61,47 @@ class TabsSingleton {
6161
* @returns {string} The first singleton tab ID found.
6262
*/
6363
getFirstTab() {
64-
const tabsElement = this.tabStrip.querySelector('.tab-strip__element[aria-selected=true]');
64+
const tabsElement = this.tabStrips[0].
65+
querySelector('.tab-strip__element[aria-selected=true]');
6566
if (!tabsElement) { return null; }
6667

6768
return tabsElement.getAttribute('data-tabid');
6869
}
6970

7071
setup() {
71-
if (!this.tabStrip) { return; }
72+
if (!this.tabStrips) { return; }
7273

7374
this.hideTabBars();
7475

75-
for (const element of this.tabStrip.querySelectorAll('[data-tabid]')) {
76-
element.onclick = (e) => {
77-
// Get the tab ID of the clicked tab
78-
const tabId = e.target.getAttribute('data-tabid');
79-
const type = this.tabStrip.getAttribute('data-tab-preference');
80-
81-
// Build the pref object to set
82-
const pref = {};
83-
pref.tabId = tabId;
84-
pref.type = type;
85-
86-
// Check to make sure value is not null, i.e., don't do anything on "other"
87-
if (tabId) {
88-
// Save the users preference and re-render
89-
this.tabPref = pref;
90-
this.update();
91-
92-
e.preventDefault();
93-
}
94-
};
76+
for (const tabStrip of this.tabStrips) {
77+
for (const element of tabStrip.querySelectorAll('[data-tabid]')) {
78+
element.onclick = (e) => {
79+
// Get the tab ID of the clicked tab
80+
const tabId = e.target.getAttribute('data-tabid');
81+
const type = this.tabStrips[0].getAttribute('data-tab-preference');
82+
83+
// Build the pref object to set
84+
const pref = {};
85+
pref.tabId = tabId;
86+
pref.type = type;
87+
88+
// Check to make sure value is not null, i.e., don't do anything on "other"
89+
if (tabId) {
90+
// Save the users preference and re-render
91+
this.tabPref = pref;
92+
this.update();
93+
94+
e.preventDefault();
95+
}
96+
};
97+
}
9598
}
9699

97100
this.update();
98101
}
99102

100103
update() {
101-
if (!this.tabStrip) { return; }
104+
if (!this.tabStrips) { return; }
102105
let type = this.type;
103106

104107
let tabPref = this.tabPref;
@@ -107,7 +110,7 @@ class TabsSingleton {
107110
// Check if current page has a one-off page specific pref
108111
tabPref = tabPref.pages;
109112
type = window.location.pathname;
110-
} else if (!this.tabStrip.querySelector(`[data-tabid="${tabPref[type]}"]`)) {
113+
} else if (!this.tabStrips[0].querySelector(`[data-tabid="${tabPref[type]}"]`)) {
111114
// If their tabPref does not exist at the top of the page use the first tab
112115
tabPref[type] = this.getFirstTab();
113116
}
@@ -125,29 +128,31 @@ class TabsSingleton {
125128
* @returns {void}
126129
*/
127130
showHideSelectedTab(currentAttrValue) {
128-
// Get the <a>, <li> and <ul> of the selected tab
129-
const tabLink = $(this.tabStrip.querySelector(`[data-tabid="${currentAttrValue}"]`));
130-
const tabList = tabLink.parent('ul');
131-
132-
// Get the dropdown <a> and <li> for active and label management
133-
const dropdownLink = $(this.tabStrip.querySelector('.dropdown-toggle'));
134-
const dropdownListItem = $(this.tabStrip.querySelector('.dropdown'));
135-
136-
// Set the active tab, if it's on the dropdown set it to active and change label
137-
if (tabList.hasClass('dropdown-menu')) {
138-
// Use first so text doesn't repeat if more than one set of tabs
139-
dropdownLink.text(`${tabLink.first().text()}`).append('<span class="caret"></span>');
140-
dropdownListItem.
141-
attr('aria-selected', true).
142-
siblings().
143-
attr('aria-selected', false);
144-
} else {
145-
// Set a non-dropdown tab to active, and change the dropdown label back to "Other"
146-
tabLink.
147-
attr('aria-selected', true).
148-
siblings().
149-
attr('aria-selected', false);
150-
dropdownLink.text('Other ').append('<span class="caret"></span>');
131+
for (const tabStrip of this.tabStrips) {
132+
// Get the <a>, <li> and <ul> of the selected tab
133+
const tabLink = $(tabStrip.querySelector(`[data-tabid="${currentAttrValue}"]`));
134+
const tabList = tabLink.parent('ul');
135+
136+
// Get the dropdown <a> and <li> for active and label management
137+
const dropdownLink = $(tabStrip.querySelector('.dropdown-toggle'));
138+
const dropdownListItem = $(tabStrip.querySelector('.dropdown'));
139+
140+
// Set the active tab, if it's on the dropdown set it to active and change label
141+
if (tabList.hasClass('dropdown-menu')) {
142+
// Use first so text doesn't repeat if more than one set of tabs
143+
dropdownLink.text(`${tabLink.first().text()}`).append('<span class="caret"></span>');
144+
dropdownListItem.
145+
attr('aria-selected', true).
146+
siblings().
147+
attr('aria-selected', false);
148+
} else {
149+
// Set a non-dropdown tab to active, and change the dropdown label back to "Other"
150+
tabLink.
151+
attr('aria-selected', true).
152+
siblings().
153+
attr('aria-selected', false);
154+
dropdownLink.text('Other ').append('<span class="caret"></span>');
155+
}
151156
}
152157
}
153158

@@ -156,16 +161,19 @@ class TabsSingleton {
156161
* @returns {void}
157162
*/
158163
hideTabBars() {
159-
const tabBars = $('.tab-strip--singleton');
160-
const mainTabBar = tabBars.first();
161-
// Remove any additional tab bars
162-
tabBars.slice(1).
163-
detach();
164-
// Position the main tab bar after the page title
165-
mainTabBar.
166-
detach().
167-
insertAfter('h1').
168-
first();
164+
const isTop = document.querySelector('.tabs-top');
165+
if (isTop) {
166+
const tabBars = $('.tab-strip--singleton');
167+
const mainTabBar = tabBars.first();
168+
// Remove any additional tab bars
169+
tabBars.slice(1).
170+
detach();
171+
// Position the main tab bar after the page title
172+
mainTabBar.
173+
detach().
174+
insertAfter('h1').
175+
first();
176+
}
169177
}
170178
}
171179

0 commit comments

Comments
 (0)