|
1 | 1 | /** |
2 | | - * Keep API Reference nav expanded on /clients/ pages and highlight active client. |
3 | | - * Uses Material for MkDocs document$ observable for instant navigation compatibility. |
| 2 | + * Keep the active client highlighted and its nav section expanded across all |
| 3 | + * of its API reference pages (/clients/<name>/...). |
| 4 | + * |
| 5 | + * Zensical already auto-expands "Available Clients" and highlights the active |
| 6 | + * client on that client's own index page, but not on its nested symbol pages |
| 7 | + * (operations/, enums/, structures/, unions/, errors/). This restores that |
| 8 | + * orientation so the sidebar stays anchored while browsing a client's API. |
4 | 9 | */ |
5 | | -function expandClientsNav() { |
6 | | - if (!location.pathname.includes("/clients/")) return; |
7 | | - document.querySelectorAll(".md-nav__item--nested").forEach(function (item) { |
8 | | - var link = item.querySelector(":scope > .md-nav__link"); |
9 | | - if (link && link.textContent.trim().includes("Available Clients")) { |
10 | | - // Expand "All Available Clients" drop down |
11 | | - var toggle = item.querySelector(":scope > .md-nav__toggle"); |
12 | | - if (toggle) toggle.checked = true; |
13 | | - item.setAttribute("data-md-state", "expanded"); |
14 | | - |
15 | | - // Highlight active client |
16 | | - var navItems = item.querySelectorAll(".md-nav__item .md-nav__link"); |
17 | | - navItems.forEach(function (navLink) { |
18 | | - if (navLink.href && location.pathname.includes(navLink.pathname)) { |
19 | | - navLink.classList.add("md-nav__link--active"); |
20 | | - } |
21 | | - }); |
| 10 | +function highlightActiveClient() { |
| 11 | + // Match ".../clients/<name>/..." and capture the client segment. |
| 12 | + var match = location.pathname.match(/\/clients\/([^/]+)\//); |
| 13 | + if (!match) return; |
| 14 | + |
| 15 | + // Reconstruct the client's index path, e.g. "/clients/polly/", preserving |
| 16 | + // any site base path (the docs are served under a sub-path in production). |
| 17 | + var clientRoot = |
| 18 | + location.pathname.slice(0, match.index) + "/clients/" + match[1] + "/"; |
| 19 | + |
| 20 | + // Scope to the primary sidebar only. The secondary "On this page" TOC uses |
| 21 | + // the same link classes, and its same-page anchors would otherwise all match |
| 22 | + // clientRoot on a client's index page and get highlighted. |
| 23 | + var sidebar = document.querySelector(".md-nav--primary"); |
| 24 | + if (!sidebar) return; |
| 25 | + |
| 26 | + // The client appears exactly once in the sidebar, so find it and stop — |
| 27 | + // avoids scanning the rest of the nav (hundreds of links once many clients |
| 28 | + // exist). |
| 29 | + var links = sidebar.querySelectorAll(".md-nav__link[href]"); |
| 30 | + var link = null; |
| 31 | + for (var i = 0; i < links.length; i++) { |
| 32 | + if (links[i].pathname === clientRoot && !links[i].hash) { |
| 33 | + link = links[i]; |
| 34 | + break; |
22 | 35 | } |
23 | | - }); |
| 36 | + } |
| 37 | + if (!link) return; |
| 38 | + |
| 39 | + // Highlight the client whose pages we're currently viewing. |
| 40 | + link.classList.add("md-nav__link--active"); |
| 41 | + |
| 42 | + // Expand every collapsible ancestor (incl. "Available Clients") so the |
| 43 | + // highlighted link is visible. Expansion is driven by the toggle checkbox. |
| 44 | + var item = link.closest(".md-nav__item--nested"); |
| 45 | + while (item) { |
| 46 | + var toggle = item.querySelector(":scope > .md-nav__toggle"); |
| 47 | + if (toggle) toggle.checked = true; |
| 48 | + var parent = item.parentElement; |
| 49 | + item = parent && parent.closest(".md-nav__item--nested"); |
| 50 | + } |
24 | 51 | } |
25 | 52 |
|
26 | | -// Subscribe to Material's document$ observable for instant navigation support |
27 | | -document$.subscribe(expandClientsNav); |
28 | | -// Also run on initial page load |
29 | | -expandClientsNav(); |
| 53 | +// Re-run on every instant-navigation page load; fall back to a one-time run if |
| 54 | +// the document$ observable isn't available. |
| 55 | +if (typeof document$ !== "undefined" && document$.subscribe) { |
| 56 | + document$.subscribe(highlightActiveClient); |
| 57 | +} else { |
| 58 | + highlightActiveClient(); |
| 59 | +} |
0 commit comments