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

DOCSP-1682 - Change default tab behavior to render inline. Added 'hid… #178

Merged
merged 1 commit into from
Feb 27, 2018
Merged

DOCSP-1682 - Change default tab behavior to render inline. Added 'hid… #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions sphinxext/tabs.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,17 @@
LANGUAGES_IDS = [lang[0] for lang in LANGUAGES_RAW]
LANGUAGES_DISPLAY = [lang[1] for lang in LANGUAGES_RAW]

TABS_TOP = '''
.. raw:: html

<div class="tabs-top"></div>
'''

TABS_TEMPLATE = '''
.. raw:: html

<div class="tabs">
{{ if hidden not }}
<ul class="tab-strip tab-strip--singleton" role="tablist" %PREFERENCE%>
{{ for tab in tabs %FILTER% }}
{{ # Only render the tab here if i < 5 }}
Expand All @@ -47,6 +54,7 @@
</li>
{{ end }}
</ul>
{{ end }}
<div class="tabs__content" role="tabpanel">
{{ for tab in tabs %FILTER% }}
<div class="tabpanel-{{ tab.id }}">
Expand Down Expand Up @@ -106,6 +114,10 @@ def setup(app):
directive = template.create_directive('h4', H4_TEMPLATE_HTML, template.BUILT_IN_PATH, True)
app.add_directive('h4', directive)

# Create directive for positioning tabs at top of the page
directive = template.create_directive('tabs-top', TABS_TOP, template.BUILT_IN_PATH, True)
app.add_directive('tabs-top', directive)

# Create drivers tab directive
directive = template.create_directive('tabs-drivers', buildTemplate("sortLanguages", "drivers"), template.BUILT_IN_PATH, True)
app.add_directive('tabs-drivers', directive)
Expand Down
128 changes: 68 additions & 60 deletions themes/mongodb/src/js/componentTabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ function showHideTabContent(currentAttrValue) {
class TabsSingleton {
constructor(key) {
this.key = key;
this.tabStrip = document.querySelector('.tab-strip--singleton');
this.tabStrips = document.querySelectorAll('.tab-strip--singleton');

// Only tab sets will have a type, init and try to retrieve
this.type = null;
if (this.tabStrip !== null) {
this.type = this.tabStrip.getAttribute('data-tab-preference');
if (this.tabStrips !== null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.tabStrips will never be null given the above switch to querySelectorAll.

This should read if (this.tabStrips.length > 0) {

this.type = this.tabStrips[0].getAttribute('data-tab-preference');
}
}

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

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

setup() {
if (!this.tabStrip) { return; }
if (!this.tabStrips) { return; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above


this.hideTabBars();

for (const element of this.tabStrip.querySelectorAll('[data-tabid]')) {
element.onclick = (e) => {
// Get the tab ID of the clicked tab
const tabId = e.target.getAttribute('data-tabid');
const type = this.tabStrip.getAttribute('data-tab-preference');

// Build the pref object to set
const pref = {};
pref.tabId = tabId;
pref.type = type;

// Check to make sure value is not null, i.e., don't do anything on "other"
if (tabId) {
// Save the users preference and re-render
this.tabPref = pref;
this.update();

e.preventDefault();
}
};
for (const tabStrip of this.tabStrips) {
for (const element of tabStrip.querySelectorAll('[data-tabid]')) {
element.onclick = (e) => {
// Get the tab ID of the clicked tab
const tabId = e.target.getAttribute('data-tabid');
const type = this.tabStrips[0].getAttribute('data-tab-preference');

// Build the pref object to set
const pref = {};
pref.tabId = tabId;
pref.type = type;

// Check to make sure value is not null, i.e., don't do anything on "other"
if (tabId) {
// Save the users preference and re-render
this.tabPref = pref;
this.update();

e.preventDefault();
}
};
}
}

this.update();
}

update() {
if (!this.tabStrip) { return; }
if (!this.tabStrips) { return; }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above

let type = this.type;

let tabPref = this.tabPref;
Expand All @@ -107,7 +110,7 @@ class TabsSingleton {
// Check if current page has a one-off page specific pref
tabPref = tabPref.pages;
type = window.location.pathname;
} else if (!this.tabStrip.querySelector(`[data-tabid="${tabPref[type]}"]`)) {
} else if (!this.tabStrips[0].querySelector(`[data-tabid="${tabPref[type]}"]`)) {
// If their tabPref does not exist at the top of the page use the first tab
tabPref[type] = this.getFirstTab();
}
Expand All @@ -125,29 +128,31 @@ class TabsSingleton {
* @returns {void}
*/
showHideSelectedTab(currentAttrValue) {
// Get the <a>, <li> and <ul> of the selected tab
const tabLink = $(this.tabStrip.querySelector(`[data-tabid="${currentAttrValue}"]`));
const tabList = tabLink.parent('ul');

// Get the dropdown <a> and <li> for active and label management
const dropdownLink = $(this.tabStrip.querySelector('.dropdown-toggle'));
const dropdownListItem = $(this.tabStrip.querySelector('.dropdown'));

// Set the active tab, if it's on the dropdown set it to active and change label
if (tabList.hasClass('dropdown-menu')) {
// Use first so text doesn't repeat if more than one set of tabs
dropdownLink.text(`${tabLink.first().text()}`).append('<span class="caret"></span>');
dropdownListItem.
attr('aria-selected', true).
siblings().
attr('aria-selected', false);
} else {
// Set a non-dropdown tab to active, and change the dropdown label back to "Other"
tabLink.
attr('aria-selected', true).
siblings().
attr('aria-selected', false);
dropdownLink.text('Other ').append('<span class="caret"></span>');
for (const tabStrip of this.tabStrips) {
// Get the <a>, <li> and <ul> of the selected tab
const tabLink = $(tabStrip.querySelector(`[data-tabid="${currentAttrValue}"]`));
const tabList = tabLink.parent('ul');

// Get the dropdown <a> and <li> for active and label management
const dropdownLink = $(tabStrip.querySelector('.dropdown-toggle'));
const dropdownListItem = $(tabStrip.querySelector('.dropdown'));

// Set the active tab, if it's on the dropdown set it to active and change label
if (tabList.hasClass('dropdown-menu')) {
// Use first so text doesn't repeat if more than one set of tabs
dropdownLink.text(`${tabLink.first().text()}`).append('<span class="caret"></span>');
dropdownListItem.
attr('aria-selected', true).
siblings().
attr('aria-selected', false);
} else {
// Set a non-dropdown tab to active, and change the dropdown label back to "Other"
tabLink.
attr('aria-selected', true).
siblings().
attr('aria-selected', false);
dropdownLink.text('Other ').append('<span class="caret"></span>');
}
}
}

Expand All @@ -156,16 +161,19 @@ class TabsSingleton {
* @returns {void}
*/
hideTabBars() {
const tabBars = $('.tab-strip--singleton');
const mainTabBar = tabBars.first();
// Remove any additional tab bars
tabBars.slice(1).
detach();
// Position the main tab bar after the page title
mainTabBar.
detach().
insertAfter('h1').
first();
const isTop = document.querySelector('.tabs-top');
if (isTop) {
const tabBars = $('.tab-strip--singleton');
const mainTabBar = tabBars.first();
// Remove any additional tab bars
tabBars.slice(1).
detach();
// Position the main tab bar after the page title
mainTabBar.
detach().
insertAfter('h1').
first();
}
}
}

Expand Down
Loading