mirror of https://github.com/docker/docs.git
Merge pull request #11511 from thaJeztah/header_render
Generate top-navigation instead of using javascript
This commit is contained in:
Usha Mandya
GitHub
commit
f0427f7cb5
|
|
@ -15,6 +15,8 @@ horizontalnav:
|
|||
- title: Samples
|
||||
path: /samples/
|
||||
node: samples
|
||||
# TODO unify navbbar links: homepage currently has a custom "articles" link
|
||||
hide_home: true
|
||||
|
||||
home: {}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,48 +2,26 @@
|
|||
<nav class="navbar header">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button
|
||||
type="button"
|
||||
class="navbar-toggle collapsed"
|
||||
data-toggle="collapse"
|
||||
data-target="#header-content"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-content" aria-expanded="false">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">
|
||||
<img
|
||||
src="/images/docker-docs-logo.svg"
|
||||
alt="Docker Docs"
|
||||
title="Docker Docs"
|
||||
/>
|
||||
<img src="/images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="header-content">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active">
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/get-started/overview/">Guides</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/engine/">Product manuals</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/reference/">Reference</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.docker.com/blog/">Articles</a>
|
||||
</li>
|
||||
{%- for entry in site.data.toc.horizontalnav -%}
|
||||
{%- if entry.hide_home -%}{% continue %}{%- endif -%}
|
||||
<li{% if entry.node == "home" %} class=active{% endif %}><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
|
||||
{%- endfor -%}
|
||||
<li><a href="https://www.docker.com/blog/">Articles</a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
{% include theme-switch.html %}
|
||||
</li>
|
||||
<li>{% include theme-switch.html %}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
<div class="header">
|
||||
<div class="fan"></div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<img class="logo" src="../images/docker-docs-logo.svg" alt="Docker Docs" title="Docker Docs">
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="primary nav navbar-nav">
|
||||
<li><a href="https://www.docker.com/why-docker">Why Docker?</a></li>
|
||||
<li><a href="https://docs.docker.com/get-started/">Get started</a></li>
|
||||
<li><a href="https://www.docker.com/products">Products</a></li>
|
||||
<li><a href="https://docker.com/docker-community">Community</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/.nav-collapse -->
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<nav class="nav-secondary navbar navbar-fixed-top">
|
||||
<!-- <div class="fan"></div> -->
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@
|
|||
<div class="nav-container hidden-sm hidden-xs">
|
||||
<div id="tabs">
|
||||
<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>
|
||||
</div>
|
||||
<div class="ctrl-right">
|
||||
|
|
|
|||
55
js/docs.js
55
js/docs.js
|
|
@ -26,36 +26,33 @@ function navClicked(sourceLink) {
|
|||
}
|
||||
}
|
||||
|
||||
var outputHorzTabs = [];
|
||||
var outputLetNav = [];
|
||||
var totalTopics = 0;
|
||||
var currentSection;
|
||||
var sectionToHighlight;
|
||||
|
||||
function findMyTopic(tree) {
|
||||
function pageIsInSection(tree) {
|
||||
function processBranch(branch) {
|
||||
for (var k = 0; k < branch.length; k++) {
|
||||
for (let k = 0; k < branch.length; k++) {
|
||||
if (branch[k].section) {
|
||||
processBranch(branch[k].section);
|
||||
} else {
|
||||
if (branch[k].path === pageURL && !branch[k].nosync) {
|
||||
thisIsIt = true;
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var thisIsIt = false;
|
||||
let found = false;
|
||||
processBranch(tree);
|
||||
return thisIsIt;
|
||||
return found;
|
||||
}
|
||||
|
||||
function walkTree(tree) {
|
||||
for (var j = 0; j < tree.length; j++) {
|
||||
for (let j = 0; j < tree.length; j++) {
|
||||
totalTopics++;
|
||||
if (tree[j].section) {
|
||||
var sectionHasPath = findMyTopic(tree[j].section);
|
||||
let sectionHasPath = pageIsInSection(tree[j].section);
|
||||
outputLetNav.push('<li><a onclick="navClicked(' + totalTopics + ')" data-target="#item' + totalTopics + '" data-toggle="collapse" data-parent="#stacked-menu"')
|
||||
if (sectionHasPath) {
|
||||
outputLetNav.push('aria-expanded="true"')
|
||||
|
|
@ -72,14 +69,12 @@ function walkTree(tree) {
|
|||
outputLetNav.push("false");
|
||||
}
|
||||
outputLetNav.push('">');
|
||||
var subTree = tree[j].section;
|
||||
walkTree(subTree);
|
||||
walkTree(tree[j].section);
|
||||
outputLetNav.push("</ul></li>");
|
||||
} else {
|
||||
// just a regular old topic; this is a leaf, not a branch; render a link!
|
||||
outputLetNav.push('<li><a href="' + tree[j].path + '"')
|
||||
if (tree[j].path === pageURL && !tree[j].nosync) {
|
||||
sectionToHighlight = currentSection;
|
||||
outputLetNav.push('class="active currentPage"')
|
||||
}
|
||||
outputLetNav.push(">" + tree[j].title + "</a></li>")
|
||||
|
|
@ -88,27 +83,15 @@ function walkTree(tree) {
|
|||
}
|
||||
|
||||
function renderNav(docstoc) {
|
||||
for (var i = 0; i < docstoc.horizontalnav.length; i++) {
|
||||
if (docstoc.horizontalnav[i].node !== "glossary") {
|
||||
currentSection = docstoc.horizontalnav[i].node;
|
||||
// build vertical nav
|
||||
var itsHere = findMyTopic(docstoc[docstoc.horizontalnav[i].node]);
|
||||
if (itsHere || docstoc.horizontalnav[i].path === pageURL) {
|
||||
walkTree(docstoc[docstoc.horizontalnav[i].node]);
|
||||
}
|
||||
for (let i = 0; i < docstoc.horizontalnav.length; i++) {
|
||||
if (docstoc.horizontalnav[i].path === pageURL || pageIsInSection(docstoc[docstoc.horizontalnav[i].node])) {
|
||||
// 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]);
|
||||
document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
|
||||
}
|
||||
// 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("");
|
||||
|
||||
// Scroll the current menu item into view. We actually pick the item *above*
|
||||
// the current item to give some headroom above
|
||||
scrollMenuItem("#jsTOCLeftNav a.currentPage")
|
||||
|
|
@ -136,12 +119,10 @@ function scrollMenuItem(selector) {
|
|||
}
|
||||
|
||||
function highlightRightNav(heading) {
|
||||
if (document.location.pathname.indexOf("/glossary/") < 0) {
|
||||
$("#my_toc a.active").removeClass("active");
|
||||
$("#my_toc a.active").removeClass("active");
|
||||
|
||||
if (heading !== "title") {
|
||||
$("#my_toc a[href='#" + heading + "']").addClass("active");
|
||||
}
|
||||
if (heading !== "title") {
|
||||
$("#my_toc a[href='#" + heading + "']").addClass("active");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue