|
| 1 | +// Extracts the module name from a given URL href |
| 2 | +function extractModuleName(href) { |
| 3 | + try{ |
| 4 | + const url = new URL(href, window.location.origin); |
| 5 | + const pathname = url.pathname; |
| 6 | + const pathSegments = pathname.split('/').filter(Boolean); |
| 7 | + |
| 8 | + // For local hosting |
| 9 | + if (url.hostname === 'localhost') { |
| 10 | + return pathSegments.length >= 1 ? pathSegments[0] : null; |
| 11 | + } |
| 12 | + |
| 13 | + return pathSegments.length >= 4 ? pathSegments[3] : null; |
| 14 | + } |
| 15 | + catch (error) { |
| 16 | + return null; |
| 17 | + } |
| 18 | +} |
| 19 | + |
| 20 | +// Hides the sidebar and adjusts main content layout |
| 21 | +function hideSidebar() { |
| 22 | + const sidebar = document.getElementById('leftColumn'); |
| 23 | + const main = document.getElementById('main'); |
| 24 | + |
| 25 | + if (sidebar) { |
| 26 | + sidebar.style.display = 'none'; |
| 27 | + } |
| 28 | + |
| 29 | + if (main) { |
| 30 | + main.style.marginLeft = '0'; |
| 31 | + main.style.width = '100%'; |
| 32 | + } |
| 33 | +} |
| 34 | + |
| 35 | +function loadNavigation() { |
| 36 | + const moduleName = extractModuleName(window.location.href); |
| 37 | + |
| 38 | + // Hide sidebar for root index page |
| 39 | + if (moduleName === "index.html") { |
| 40 | + hideSidebar() |
| 41 | + return Promise.resolve(''); |
| 42 | + } |
| 43 | + |
| 44 | + const navigationPath = moduleName |
| 45 | + ? `${pathToRoot}${moduleName}/navigation.html` |
| 46 | + : `${pathToRoot}navigation.html`; |
| 47 | + |
| 48 | + return fetch(navigationPath) |
| 49 | + .then(response => response.text()) |
| 50 | + .catch(error => { |
| 51 | + // Use root navigation as a fallback |
| 52 | + return fetch(pathToRoot + "navigation.html") |
| 53 | + .then(response => response.text()); |
| 54 | + }); |
| 55 | +} |
| 56 | + |
| 57 | +navigationPageText = loadNavigation() |
| 58 | +// navigationPageText = fetch(pathToRoot + extractModuleName() + "/navigation.html").then(response => response.text()) |
| 59 | + |
| 60 | +displayNavigationFromPage = () => { |
| 61 | + navigationPageText.then(data => { |
| 62 | + document.getElementById("sideMenu").innerHTML = data; |
| 63 | + }).then(() => { |
| 64 | + document.querySelectorAll(".overview > a").forEach(link => { |
| 65 | + link.setAttribute("href", pathToRoot + link.getAttribute("href")); |
| 66 | + }) |
| 67 | + }).then(() => { |
| 68 | + document.querySelectorAll(".sideMenuPart").forEach(nav => { |
| 69 | + if (!nav.classList.contains("hidden")) |
| 70 | + nav.classList.add("hidden") |
| 71 | + }) |
| 72 | + }).then(() => { |
| 73 | + revealNavigationForCurrentPage() |
| 74 | + }).then(() => { |
| 75 | + scrollNavigationToSelectedElement() |
| 76 | + }) |
| 77 | + document.querySelectorAll('.footer a[href^="#"]').forEach(anchor => { |
| 78 | + anchor.addEventListener('click', function (e) { |
| 79 | + e.preventDefault(); |
| 80 | + document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| 81 | + behavior: 'smooth' |
| 82 | + }); |
| 83 | + }); |
| 84 | + }); |
| 85 | +} |
| 86 | + |
| 87 | +revealNavigationForCurrentPage = () => { |
| 88 | + let pageId = document.getElementById("content").attributes["pageIds"].value.toString(); |
| 89 | + let parts = document.querySelectorAll(".sideMenuPart"); |
| 90 | + let found = 0; |
| 91 | + do { |
| 92 | + parts.forEach(part => { |
| 93 | + if (part.attributes['pageId'].value.indexOf(pageId) !== -1 && found === 0) { |
| 94 | + found = 1; |
| 95 | + if (part.classList.contains("hidden")) { |
| 96 | + part.classList.remove("hidden"); |
| 97 | + part.setAttribute('data-active', ""); |
| 98 | + } |
| 99 | + revealParents(part) |
| 100 | + } |
| 101 | + }); |
| 102 | + pageId = pageId.substring(0, pageId.lastIndexOf("/")) |
| 103 | + } while (pageId.indexOf("/") !== -1 && found === 0) |
| 104 | +}; |
| 105 | +revealParents = (part) => { |
| 106 | + if (part.classList.contains("sideMenuPart")) { |
| 107 | + if (part.classList.contains("hidden")) |
| 108 | + part.classList.remove("hidden"); |
| 109 | + revealParents(part.parentNode) |
| 110 | + } |
| 111 | +}; |
| 112 | + |
| 113 | +scrollNavigationToSelectedElement = () => { |
| 114 | + let selectedElement = document.querySelector('div.sideMenuPart[data-active]') |
| 115 | + if (selectedElement == null) { // nothing selected, probably just the main page opened |
| 116 | + return |
| 117 | + } |
| 118 | + |
| 119 | + let hasIcon = selectedElement.querySelectorAll(":scope > div.overview span.nav-icon").length > 0 |
| 120 | + |
| 121 | + // for instance enums also have children and are expandable, but are not package/module elements |
| 122 | + let isPackageElement = selectedElement.children.length > 1 && !hasIcon |
| 123 | + if (isPackageElement) { |
| 124 | + // if package is selected or linked, it makes sense to align it to top |
| 125 | + // so that you can see all the members it contains |
| 126 | + selectedElement.scrollIntoView(true) |
| 127 | + } else { |
| 128 | + // if a member within a package is linked, it makes sense to center it since it, |
| 129 | + // this should make it easier to look at surrounding members |
| 130 | + selectedElement.scrollIntoView({ |
| 131 | + behavior: 'auto', |
| 132 | + block: 'center', |
| 133 | + inline: 'center' |
| 134 | + }) |
| 135 | + } |
| 136 | +} |
| 137 | + |
| 138 | +/* |
| 139 | + This is a work-around for safari being IE of our times. |
| 140 | + It doesn't fire a DOMContentLoaded, presumabely because eventListener is added after it wants to do it |
| 141 | +*/ |
| 142 | +if (document.readyState == 'loading') { |
| 143 | + window.addEventListener('DOMContentLoaded', () => { |
| 144 | + displayNavigationFromPage() |
| 145 | + }) |
| 146 | +} else { |
| 147 | + displayNavigationFromPage() |
| 148 | +} |
0 commit comments