|
| 1 | +<script> |
| 2 | + function createToC() { |
| 3 | + let sidebar = document.querySelector(".sidebar"); |
| 4 | + let headers = document.querySelectorAll("#main-content h2, #main-content h3, #main-content h4"); |
| 5 | + console.log(`detected polkadot_sdk_docs: headers: ${headers.length}`); |
| 6 | + |
| 7 | + let toc = document.createElement("div"); |
| 8 | + toc.classList.add("sidebar-table-of-contents"); |
| 9 | + toc.appendChild(document.createElement("h2").appendChild(document.createTextNode("Table of Contents")).parentNode); |
| 10 | + |
| 11 | + let modules = document.querySelectorAll("main .item-table a.mod"); |
| 12 | + |
| 13 | + // the first two headers are always junk |
| 14 | + headers.forEach(header => { |
| 15 | + let link = document.createElement("a"); |
| 16 | + link.href = "#" + header.id; |
| 17 | + link.textContent = header.textContent; |
| 18 | + link.className = header.tagName.toLowerCase(); |
| 19 | + |
| 20 | + toc.appendChild(link); |
| 21 | + |
| 22 | + if (header.id == "modules" && header.textContent == "Modules") { |
| 23 | + modules.forEach(module => { |
| 24 | + let link = document.createElement("a"); |
| 25 | + link.href = module.href; |
| 26 | + link.textContent = module.textContent; |
| 27 | + link.className = "h3"; |
| 28 | + |
| 29 | + toc.appendChild(link); |
| 30 | + }); |
| 31 | + } |
| 32 | + }); |
| 33 | + |
| 34 | + // insert toc as the second child in sidebar |
| 35 | + let sidebar_children = sidebar.children; |
| 36 | + if (sidebar_children.length > 1) { |
| 37 | + sidebar.insertBefore(toc, sidebar_children[1]); |
| 38 | + } else { |
| 39 | + sidebar.appendChild(toc); |
| 40 | + } |
| 41 | + } |
| 42 | + |
| 43 | + function hideSidebarElements() { |
| 44 | + // Create the 'Expand for More' button |
| 45 | + var expandButton = document.createElement('button'); |
| 46 | + expandButton.innerText = 'Expand More Items'; |
| 47 | + expandButton.classList.add('expand-button'); |
| 48 | + |
| 49 | + // Insert the button at the top of the sidebar or before the '.sidebar-elems' |
| 50 | + var sidebarElems = document.querySelector('.sidebar-elems'); |
| 51 | + sidebarElems.parentNode.insertBefore(expandButton, sidebarElems); |
| 52 | + |
| 53 | + // Initially hide the '.sidebar-elems' |
| 54 | + sidebarElems.style.display = 'none'; |
| 55 | + |
| 56 | + // Add click event listener to the button |
| 57 | + expandButton.addEventListener('click', function() { |
| 58 | + // Toggle the display of the '.sidebar-elems' |
| 59 | + if (sidebarElems.style.display === 'none') { |
| 60 | + sidebarElems.style.display = 'block'; |
| 61 | + expandButton.innerText = 'Collapse'; |
| 62 | + } else { |
| 63 | + sidebarElems.style.display = 'none'; |
| 64 | + expandButton.innerText = 'Expand for More'; |
| 65 | + } |
| 66 | + }); |
| 67 | + } |
| 68 | + |
| 69 | + window.addEventListener("DOMContentLoaded", (event) => { |
| 70 | + // if the crate is one that starts with `polkadot_sdk_docs` |
| 71 | + let crate_name = document.querySelector("#main-content > div > h1 > a:nth-child(1)"); |
| 72 | + if (!crate_name.textContent.startsWith("polkadot_sdk_docs")) { |
| 73 | + console.log("skipping -- not `polkadot_sdk_docs`"); |
| 74 | + return; |
| 75 | + } |
| 76 | + |
| 77 | + createToC(); |
| 78 | + hideSidebarElements(); |
| 79 | + |
| 80 | + console.log("updating page based on being `polkadot_sdk_docs` crate"); |
| 81 | + }); |
| 82 | +</script> |
| 83 | + |
| 84 | +<style> |
| 85 | + |
| 86 | +nav.side-bar { |
| 87 | + width: 300px; |
| 88 | +} |
| 89 | + |
| 90 | +.sidebar-table-of-contents { |
| 91 | + margin-bottom: 1em; |
| 92 | + padding: 0.5em; |
| 93 | +} |
| 94 | + |
| 95 | +.sidebar-table-of-contents a { |
| 96 | + display: block; |
| 97 | + margin: 0.2em 0; |
| 98 | +} |
| 99 | + |
| 100 | +.sidebar-table-of-contents .h2 { |
| 101 | + font-weight: bold; |
| 102 | + margin-left: 0; |
| 103 | +} |
| 104 | + |
| 105 | +.sidebar-table-of-contents .h3 { |
| 106 | + margin-left: 1em; |
| 107 | +} |
| 108 | + |
| 109 | +.sidebar-table-of-contents .h4 { |
| 110 | + margin-left: 2em; |
| 111 | +} |
| 112 | + |
| 113 | +.sidebar h2.location { |
| 114 | + display: none; |
| 115 | +} |
| 116 | + |
| 117 | +.sidebar-elems { |
| 118 | + display: none; |
| 119 | +} |
| 120 | + |
| 121 | +/* Center the 'Expand for More' button */ |
| 122 | +.expand-button { |
| 123 | + display: inline-block; /* Use inline-block for sizing */ |
| 124 | + margin: 10px auto; /* Auto margins for horizontal centering */ |
| 125 | + padding: 5px 10px; |
| 126 | + background-color: #007bff; |
| 127 | + color: white; |
| 128 | + text-align: center; |
| 129 | + cursor: pointer; |
| 130 | + border: none; |
| 131 | + border-radius: 5px; |
| 132 | + width: auto; |
| 133 | + /* Centering the button within its parent container */ |
| 134 | + position: relative; |
| 135 | + left: 50%; |
| 136 | + transform: translateX(-50%); |
| 137 | +} |
| 138 | + |
| 139 | +</style> |
0 commit comments