Merge pull request #7579 from hugovk/docs-activate-tab

Docs: Activate tabs based on browser's operating system

docs/conf.py

@@ -166,6 +166,12 @@
 # directly to the root of the documentation.
 # html_extra_path = []
 
+html_css_files = ["css/dark.css"]
+
+html_js_files = [
+    "js/activate_tab.js",
+]
+
 # If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
 # using the given strftime format.
 # html_last_updated_fmt = '%b %d, %Y'
@@ -313,10 +319,6 @@
 # texinfo_no_detailmenu = False
 
 
-def setup(app):
-    app.add_css_file("css/dark.css")
-
-
 linkcheck_allowed_redirects = {
     r"https://www.bestpractices.dev/projects/6331": r"https://www.bestpractices.dev/en/.*",
     r"https://badges.gitter.im/python-pillow/Pillow.svg": r"https://badges.gitter.im/repo.svg",

docs/installation.rst

@@ -1,6 +1,14 @@
 Installation
 ============
 
+.. raw:: html
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      activateTab(getOS());
+    });
+    </script>
+
 Warnings
 --------
 

docs/resources/js/activate_tab.js

@@ -0,0 +1,36 @@
+// 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"];
+
+  if (macosPlatforms.includes(platform)) {
+    return "macOS";
+  } else if (windowsPlatforms.includes(platform)) {
+    return "Windows";
+  } else if (/Android/.test(userAgent)) {
+    return "Android";
+  } else if (/Linux/.test(platform)) {
+    return "Linux";
+  }
+}
+
+function activateTab(tabName) {
+  // Find all label elements with the specified tab name
+  const labels = document.querySelectorAll(".tab-label");
+
+  labels.forEach((label) => {
+    if (label.textContent == 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;
+      }
+    }
+  });
+}