generated docs: add navigation bar

master
Andrew Kelley 2019-10-05 15:33:23 -04:00
parent 5aa1e78807
commit edadccde54
No known key found for this signature in database
GPG Key ID: 7C5F548F728501A9
2 changed files with 170 additions and 31 deletions

View File

@ -5,22 +5,52 @@
<title>Documentation - Zig</title> <title>Documentation - Zig</title>
<link rel="icon" href="favicon.png"> <link rel="icon" href="favicon.png">
<style type="text/css"> <style type="text/css">
.hidden { body {
display: none; font-family: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
} }
.hidden {
@media (prefers-color-scheme: dark) { display: none;
body{
background-color: #111;
color: #bbb;
} }
a { a {
color: #88f; color: #2A6286;
}
#listNav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#listNav li {
float:left;
}
#listNav li a {
display: block;
color: #fff;
text-align: center;
padding: .8em .8em;
text-decoration: none;
}
#listNav li a:hover {
background-color: #111;
}
#listNav li a.active {
background-color: #4CAF50;
}
@media (prefers-color-scheme: dark) {
body{
background-color: #111;
color: #bbb;
}
a {
color: #88f;
}
} }
}
</style> </style>
</head> </head>
<body> <body>
<div id="sectNav"><ul id="listNav"></ul></div>
<p id="status">Loading...</p> <p id="status">Loading...</p>
<div id="sectPkgs" class="hidden"> <div id="sectPkgs" class="hidden">
<h2>Packages</h2> <h2>Packages</h2>
@ -32,6 +62,11 @@
<ul id="listTypes"> <ul id="listTypes">
</ul> </ul>
</div> </div>
<div id="sectFns" class="hidden">
<h2>Functions</h2>
<ul id="listFns">
</ul>
</div>
<script src="data.js"></script> <script src="data.js"></script>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>

View File

@ -1,9 +1,17 @@
(function() { (function() {
var domStatus = document.getElementById("status"); var domStatus = document.getElementById("status");
var domSectNav = document.getElementById("sectNav");
var domListNav = document.getElementById("listNav");
var domSectPkgs = document.getElementById("sectPkgs"); var domSectPkgs = document.getElementById("sectPkgs");
var domListPkgs = document.getElementById("listPkgs"); var domListPkgs = document.getElementById("listPkgs");
var domSectTypes = document.getElementById("sectTypes"); var domSectTypes = document.getElementById("sectTypes");
var domListTypes = document.getElementById("listTypes"); var domListTypes = document.getElementById("listTypes");
var domSectFns = document.getElementById("sectFns");
var domListFns = document.getElementById("listFns");
var typeKindTypeId;
var typeKindFnId;
findTypeKinds();
var curNav = { var curNav = {
// each element is a package name, e.g. @import("a") then within there @import("b") // each element is a package name, e.g. @import("a") then within there @import("b")
@ -19,14 +27,29 @@
}; };
var rootIsStd = detectRootIsStd(); var rootIsStd = detectRootIsStd();
var typeKindTypeId = findTypeKindType();
var typeTypeId = findTypeTypeId(); var typeTypeId = findTypeTypeId();
window.addEventListener('hashchange', onHashChange, false); window.addEventListener('hashchange', onHashChange, false);
onHashChange(); onHashChange();
function renderTitle() {
var list = curNav.pkgNames.concat(curNav.declNames);
var suffix = " - Zig";
if (list.length === 0) {
if (rootIsStd) {
document.title = "std" + suffix;
} else {
document.title = zigAnalysis.params.rootName + suffix;
}
} else {
document.title = list.join('.') + suffix;
}
}
function render() { function render() {
domStatus.classList.add("hidden"); domStatus.classList.add("hidden");
renderTitle();
var pkg = zigAnalysis.packages[zigAnalysis.rootPkg]; var pkg = zigAnalysis.packages[zigAnalysis.rootPkg];
curNav.pkgObjs = [pkg]; curNav.pkgObjs = [pkg];
for (var i = 0; i < curNav.pkgNames.length; i += 1) { for (var i = 0; i < curNav.pkgNames.length; i += 1) {
@ -58,6 +81,8 @@
curNav.declObjs.push(decl); curNav.declObjs.push(decl);
} }
renderNav();
var lastPkg = curNav.pkgObjs[curNav.pkgObjs.length - 1]; var lastPkg = curNav.pkgObjs[curNav.pkgObjs.length - 1];
renderPkgList(lastPkg); renderPkgList(lastPkg);
@ -69,11 +94,46 @@
} }
} }
function renderNav() {
var len = curNav.pkgNames.length + curNav.declNames.length;
resizeDomList(domListNav, len, '<li><a href="#"></a></li>');
var list = [];
var hrefPkgNames = [];
var hrefDeclNames = [];
for (var i = 0; i < curNav.pkgNames.length; i += 1) {
hrefPkgNames.push(curNav.pkgNames[i]);
list.push({
name: curNav.pkgNames[i],
link: navLink(hrefPkgNames, hrefDeclNames),
});
}
for (var i = 0; i < curNav.declNames.length; i += 1) {
hrefDeclNames.push(curNav.declNames[i]);
list.push({
name: curNav.declNames[i],
link: navLink(hrefPkgNames, hrefDeclNames),
});
}
for (var i = 0; i < list.length; i += 1) {
var liDom = domListNav.children[i];
var aDom = liDom.children[0];
aDom.textContent = list[i].name;
aDom.setAttribute('href', list[i].link);
if (i + 1 == list.length) {
aDom.classList.add("active");
} else {
aDom.classList.remove("active");
}
}
}
function render404() { function render404() {
domStatus.textContent = "404 Not Found"; domStatus.textContent = "404 Not Found";
domStatus.classList.remove("hidden"); domStatus.classList.remove("hidden");
domSectPkgs.classList.add("hidden"); domSectPkgs.classList.add("hidden");
domSectTypes.classList.add("hidden"); domSectTypes.classList.add("hidden");
domSectFns.classList.add("hidden");
} }
function renderPkgList(pkg) { function renderPkgList(pkg) {
@ -104,12 +164,22 @@
} }
} }
function navLink(pkgNames, declNames) {
if (pkgNames.length === 0 && declNames.length === 0) {
return '#';
} else if (declNames.length === 0) {
return '#' + pkgNames.join('.');
} else {
return '#' + pkgNames.join('.') + ';' + declNames.join('.');
}
}
function navLinkPkg(childName) { function navLinkPkg(childName) {
return '#' + (curNav.pkgNames.concat([childName])).join(','); return navLink(curNav.pkgNames.concat([childName]), []);
} }
function navLinkDecl(childName) { function navLinkDecl(childName) {
return '#' + curNav.pkgNames.join(",") + ';' + (curNav.declNames.concat([childName])).join(","); return navLink(curNav.pkgNames, curNav.declNames.concat([childName]));
} }
function resizeDomList(listDom, desiredLen, templateHtml) { function resizeDomList(listDom, desiredLen, templateHtml) {
@ -125,28 +195,55 @@
} }
function renderContainer(container) { function renderContainer(container) {
// Find only the types of this package var typesList = [];
var list = []; var fnsList = [];
for (var i = 0; i < container.decls.length; i += 1) { for (var i = 0; i < container.decls.length; i += 1) {
var decl = zigAnalysis.decls[container.decls[i]]; var decl = zigAnalysis.decls[container.decls[i]];
if (decl.type == typeTypeId) { if (decl.type != null) {
list.push(decl); if (decl.type == typeTypeId) {
typesList.push(decl);
} else {
var typeKind = zigAnalysis.types[decl.type].kind;
if (typeKind === typeKindFnId) {
fnsList.push(decl);
}
}
} }
} }
list.sort(function(a, b) { typesList.sort(function(a, b) {
return operatorCompare(a.name.toLowerCase(), b.name.toLowerCase());
});
fnsList.sort(function(a, b) {
return operatorCompare(a.name.toLowerCase(), b.name.toLowerCase()); return operatorCompare(a.name.toLowerCase(), b.name.toLowerCase());
}); });
resizeDomList(domListTypes, list.length, '<li><a href="#"></a></li>'); if (typesList.length === 0) {
for (var i = 0; i < list.length; i += 1) { domSectTypes.classList.add("hidden");
var liDom = domListTypes.children[i]; } else {
var aDom = liDom.children[0]; resizeDomList(domListTypes, typesList.length, '<li><a href="#"></a></li>');
var decl = list[i]; for (var i = 0; i < typesList.length; i += 1) {
aDom.textContent = decl.name; var liDom = domListTypes.children[i];
aDom.setAttribute('href', navLinkDecl(decl.name)); var aDom = liDom.children[0];
var decl = typesList[i];
aDom.textContent = decl.name;
aDom.setAttribute('href', navLinkDecl(decl.name));
}
domSectTypes.classList.remove("hidden");
} }
domSectTypes.classList.remove("hidden"); if (fnsList.length === 0) {
domSectFns.classList.add("hidden");
} else {
resizeDomList(domListFns, fnsList.length, '<li><a href="#"></a></li>');
for (var i = 0; i < fnsList.length; i += 1) {
var liDom = domListFns.children[i];
var aDom = liDom.children[0];
var decl = fnsList[i];
aDom.textContent = decl.name;
aDom.setAttribute('href', navLinkDecl(decl.name));
}
domSectFns.classList.remove("hidden");
}
} }
function operatorCompare(a, b) { function operatorCompare(a, b) {
@ -169,13 +266,20 @@
return rootPkg.file === stdPkg.file; return rootPkg.file === stdPkg.file;
} }
function findTypeKindType() { function findTypeKinds() {
for (var i = 0; i < zigAnalysis.typeKinds.length; i += 1) { for (var i = 0; i < zigAnalysis.typeKinds.length; i += 1) {
if (zigAnalysis.typeKinds[i] === "Type") { if (zigAnalysis.typeKinds[i] === "Type") {
return i; typeKindTypeId = i;
} else if (zigAnalysis.typeKinds[i] === "Fn") {
typeKindFnId = i;
} }
} }
throw new Error("No type kind 'Type' found"); if (typeKindTypeId == null) {
throw new Error("No type kind 'Type' found");
}
if (typeKindFnId == null) {
throw new Error("No type kind 'Fn' found");
}
} }
function findTypeTypeId() { function findTypeTypeId() {
@ -194,11 +298,11 @@
declNames: [], declNames: [],
declObjs: [], declObjs: [],
}; };
if (location.hash[0] === '#') { if (location.hash[0] === '#' && location.hash.length > 1) {
var parts = location.hash.substring(1).split(";"); var parts = location.hash.substring(1).split(";");
curNav.pkgNames = parts[0].split("."); curNav.pkgNames = parts[0].split(".");
if (parts[1] != null) { if (parts[1] != null) {
curNav.declNames = parts[1] ? parts[1].split(".") : []; curNav.declNames = parts[1].split(".");
} }
} }
render(); render();