Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Activate tabs based on browser's operating system #1216

Merged
merged 1 commit into from
Nov 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
42 changes: 42 additions & 0 deletions _static/activate_tab.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
// Based on https://stackoverflow.com/a/38241481/724176
function getOS() {
const userAgent = window.navigator.userAgent,
platform =
window.navigator?.userAgentData?.platform || window.navigator.platform,
macosPlatforms = ["macOS", "Macintosh", "MacIntel", "MacPPC", "Mac68K"],
windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
iosPlatforms = ["iPhone", "iPad", "iPod"];

if (macosPlatforms.includes(platform)) {
return "macOS";
} else if (iosPlatforms.includes(platform)) {
return "iOS";
} else if (windowsPlatforms.includes(platform)) {
return "Windows";
} else if (/Android/.test(userAgent)) {
return "Android";
} else if (/Linux/.test(platform)) {
return "Unix";
}

return "unknown";
}

function activateTab(tabName) {
// Find all label elements containing the specified tab name
const labels = document.querySelectorAll(".tab-label");

labels.forEach((label) => {
if (label.textContent.includes(tabName)) {
// Find the associated input element using the 'for' attribute
const tabInputId = label.getAttribute("for");
const tabInput = document.getElementById(tabInputId);

// Check if the input element exists before attempting to set the "checked" attribute
if (tabInput) {
// Activate the tab by setting its "checked" attribute to true
tabInput.checked = true;
}
}
});
}
3 changes: 3 additions & 0 deletions conf.py
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
html_css_files = [
'devguide_overrides.css',
]
html_js_files = [
"activate_tab.js",
]
html_logo = "_static/python-logo.svg"
html_favicon = "_static/favicon.png"

Expand Down
8 changes: 8 additions & 0 deletions index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
Python Developer's Guide
========================

.. raw:: html

<script>
document.addEventListener('DOMContentLoaded', function() {
activateTab(getOS());
});
</script>

.. highlight:: bash

This guide is a comprehensive resource for :ref:`contributing <contributing>`
Expand Down
8 changes: 8 additions & 0 deletions testing/run-write-tests.rst
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
Running and writing tests
=========================

.. raw:: html

<script>
document.addEventListener('DOMContentLoaded', function() {
activateTab(getOS());
});
</script>

Copy link
Member

Choose a reason for hiding this comment

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

I wonder if it's better to include this in every page that uses tabs or just once at the top level:

  • if we do it for each page, we need to duplicate the function call for each page, and remember to add this whenever OS-specific tabs are added to a page.
  • if we do it at the top level, it will be executed for each page, even when not needed

Another option would be contributing this upstream, and add a flag to enable/disable it. It should also possible to include this snippet of HTML in an rst |substitution| to avoid code duplication, even if it might be overkill.

FWIW I tested on Linux/Firefox and I get "Unix" tabs (my window.navigator.platform is "Linux x86_64").

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, I wasn't sure about including for all or just the required pages. It probably doesn't matter much either way, it's only a small bit of JS.

I thought about contributing upstream, but tabs can be about anything, not only operating systems. Although as you mention, a flag would help. Another complication is the OS->tab mappings. For example, we have "Unix" shown for Linux.

Thanks for testing Linux!

.. note::

This document assumes you are working from an
Expand Down