docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Generate top-navigation instead of using javascript 

This makes sure the top-navigation works, even if javascript
is disabled.

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2020-10-08 14:53:15 +02:00
parent f4e9565b22
commit fc89461836
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
2 changed files with 7 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/navigation.html
View File

@ -23,7 +23,9 @@
<div class="nav-container hidden-sm hidden-xs"> <div class="nav-container hidden-sm hidden-xs">
<div id="tabs"> <div id="tabs">
<ul class="tabs jsTOCHorizontal"> <ul class="tabs jsTOCHorizontal">
{%- for entry in site.data.toc.horizontalnav -%}
<li><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
{%- endfor -%}
</ul> </ul>
</div> </div>
<div class="ctrl-right"> <div class="ctrl-right">

23
js/docs.js
View File

@ -26,11 +26,8 @@ function navClicked(sourceLink) {
} }
} }
var outputHorzTabs = [];
var outputLetNav = []; var outputLetNav = [];
var totalTopics = 0; var totalTopics = 0;
var currentSection;
var sectionToHighlight;
function findMyTopic(tree) { function findMyTopic(tree) {
function processBranch(branch) { function processBranch(branch) {
@ -79,7 +76,6 @@ function walkTree(tree) {
// just a regular old topic; this is a leaf, not a branch; render a link! // just a regular old topic; this is a leaf, not a branch; render a link!
outputLetNav.push('<li><a href="' + tree[j].path + '"') outputLetNav.push('<li><a href="' + tree[j].path + '"')
if (tree[j].path === pageURL && !tree[j].nosync) { if (tree[j].path === pageURL && !tree[j].nosync) {
sectionToHighlight = currentSection;
outputLetNav.push('class="active currentPage"') outputLetNav.push('class="active currentPage"')
} }
outputLetNav.push(">" + tree[j].title + "</a></li>") outputLetNav.push(">" + tree[j].title + "</a></li>")
@ -89,24 +85,15 @@ function walkTree(tree) {
function renderNav(docstoc) { function renderNav(docstoc) {
for (var i = 0; i < docstoc.horizontalnav.length; i++) { for (var i = 0; i < docstoc.horizontalnav.length; i++) {
currentSection = docstoc.horizontalnav[i].node;
// build vertical nav
var itsHere = findMyTopic(docstoc[docstoc.horizontalnav[i].node]); var itsHere = findMyTopic(docstoc[docstoc.horizontalnav[i].node]);
if (itsHere || docstoc.horizontalnav[i].path === pageURL) { if (itsHere || docstoc.horizontalnav[i].path === pageURL) {
// This is the current section. Set the corresponding header-nav link
// to active, and build the left-hand (vertical) navigation
document.getElementById(docstoc.horizontalnav[i].node).closest("li").classList.add("active")
walkTree(docstoc[docstoc.horizontalnav[i].node]); walkTree(docstoc[docstoc.horizontalnav[i].node]);
}
// build horizontal nav
outputHorzTabs.push('<li id="' + docstoc.horizontalnav[i].node + '"');
if (docstoc.horizontalnav[i].path === pageURL || docstoc.horizontalnav[i].node === sectionToHighlight) {
outputHorzTabs.push(' class="active"');
}
outputHorzTabs.push('><a href="' + docstoc.horizontalnav[i].path + '">' + docstoc.horizontalnav[i].title + "</a></li>\n");
}
document.querySelectorAll('.jsTOCHorizontal').forEach(function(element) {
element.innerHTML = outputHorzTabs.join("");
});
document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join(""); document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
}
}
// Scroll the current menu item into view. We actually pick the item *above* // Scroll the current menu item into view. We actually pick the item *above*
// the current item to give some headroom above // the current item to give some headroom above
scrollMenuItem("#jsTOCLeftNav a.currentPage") scrollMenuItem("#jsTOCLeftNav a.currentPage")