Skip to content

Commit fbb0605

Browse files
TheElectronWillTheElectronWill
committed
Add a responsive sidebar and implement the searchbar
1 parent 2900d92 commit fbb0605

File tree

11 files changed

+252
-358
lines changed

11 files changed

+252
-358
lines changed

‎doc-tool/resources/_includes/sidebar.html

Lines changed: 37 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,46 @@
1-
<div class="index-wrapper" style="top: {{ sidebarTop }};">
1+
<nav class="sidebar">
22
<ul class="toc">
3+
<!-- Redacted documents -->
34
{% assign parent = page.path | first %}
45
{% for title in sidebar.titles %}
5-
<li>{% renderTitle title, parent %}</li>
6+
{% renderTitle title, parent %}
67
{% endfor %}
7-
</ul>
8-
9-
<script>
10-
function clickToc(elem, currentPage) {
11-
var sibling = elem.parentElement.children[1];
12-
if (sibling.style.display === "" || sibling.style.display === "none")
13-
sibling.style.display = "block";
14-
else
15-
sibling.style.display = "";
16-
}
17-
18-
(function() {
19-
var activeEntry = document.querySelector("#active-toc-entry")
20-
21-
while (activeEntry != null && activeEntry.tagName.toLowerCase() === "ul") {
22-
activeEntry.style.display = "block";
23-
activeEntry = activeEntry.parentElement.parentElement;
24-
}
25-
})();
26-
</script>
27-
28-
<ul class="index-entities">
29-
{% if docs.size > 0 %}
30-
<li class="index-title">
31-
<span>API</span>
32-
</li>
33-
<li>
34-
<input id="search-api-input" type="text" placeholder="Search API"/>
35-
<script>
36-
var input = document.getElementById("search-api-input");
37-
input.onkeydown = function(evt) {
38-
evt = evt || window.event;
39-
if (evt.keyCode == 13) window.location = (
40-
"{{ site.baseurl }}/api/search.html?" +
41-
"searchTerm=" + input.value +
42-
"&previousUrl=" + encodeURI(window.location)
43-
);
44-
};
45-
</script>
46-
</li>
47-
{% endif %}
48-
{% for pkg in docs %}
49-
<li class="index-entity entity-package">
50-
<h1><a class="entity-name" href="{{ site.baseurl }}/api/{{ pkg.path | join: "/" }}/index.html">{{ pkg.name }}</a></h1>
51-
<ul class="package-entities">
52-
<div id="cover-block"></div>
53-
{% for member in pkg.children %}
54-
{% if member.kind == "object" and member.hasCompanion %}
55-
{% elsif member.kind != "package" %}
56-
57-
{% if forloop.index == 6 and forloop.length > 7 %}
58-
<li id="show-hidden-by-default" onclick="toggleHiddenByDefault(this);">+ expand rest</li>
59-
<li class="hidden-by-default {% if member.hasCompanion %} with-companion {% endif %}">
60-
{% elsif forloop.index > 6 and forloop.length > 7 %}
61-
<li class="hidden-by-default {% if member.hasCompanion %} with-companion {% endif %}">
62-
{% else %}
63-
<li class="{% if member.hasCompanion %} with-companion {% endif %}">
64-
{% endif %}<!-- end li setter -->
65-
66-
<div class="entity-kinds">
67-
{% if member.hasCompanion %}
68-
<a class="letter-anchor object" href="{{ site.baseurl }}/api/{{ member.companionPath | join: "/" }}.html">O</a>
69-
{% endif %}
70-
<a class="letter-anchor {{ member.kind }}" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.kind | first | capitalize }}</a>
71-
</div>
72-
<a class="entity-name" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.name }}</a>
8+
<!-- API documentation -->
9+
{% if docs.size > 0 %}
10+
<li class="index-entities section">
11+
<a onclick="toggleSection(this);">API</a>
12+
<ul>
13+
{% for pkg in docs %}
14+
<li class="index-entity entity-package section">
15+
<a class="package-toggle" onclick="toggleSection(this);">
16+
<i class="fas fa-plus"></i>
17+
</a>
18+
<a class="entity-name" href="{{ site.baseurl }}/api/{{ pkg.path | join: "/" }}/index.html">
19+
{{ pkg.name }}
20+
</a>
21+
<ul class="package-entities">
22+
{% for member in pkg.children %}
23+
{% if member.kind == "object" and member.hasCompanion %} <!-- ignore: companions are handled below -->
24+
{% elsif member.kind != "package" %}
25+
26+
<li class="{% if member.hasCompanion %} with-companion {% endif %}">
27+
<div class="entity-kinds">
28+
{% if member.hasCompanion %}
29+
<a class="letter-anchor object" href="{{ site.baseurl }}/api/{{ member.companionPath | join: "/" }}.html">O</a>
30+
{% endif %}
31+
<a class="letter-anchor {{ member.kind }}" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.kind | first | capitalize }}</a>
32+
</div>
33+
<a class="entity-name" href="{{ site.baseurl }}/api/{{ member.path | join: "/" }}.html">{{ member.name }}</a>
34+
</li>
35+
{% endif %}
36+
37+
{% endfor %}
38+
</ul>
7339
</li>
74-
75-
{% if forloop.last and forloop.index > 6 %}
76-
<li id="hide-hidden-by-default" onclick="toggleHiddenByDefault(this);">- collapse members</li>
77-
{% endif %}
78-
79-
{% endif %} <!-- end != "package" -->
80-
8140
{% endfor %}
8241
</ul>
8342
</li>
84-
{% endfor %}
43+
{% endif %}
8544
</ul>
86-
</div>
87-
<script>
88-
function toggleHiddenByDefault(li) {
89-
var ul = li.parentElement;
90-
91-
for (var i = 0; i < ul.children.length; i++) {
92-
var childLi = ul.children[i];
93-
if (childLi.classList.contains('hidden-by-default') || childLi.id == "hide-hidden-by-default" || childLi.id == "show-hidden-by-default") {
94-
childLi.classList.toggle('toggled');
95-
}
96-
}
97-
}
98-
</script>
45+
</nav>
46+
<script src="{{ site.baseurl }}/js/sidebar.js"></script>

‎doc-tool/resources/_includes/toolbar.html

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
<nav class="navbar navbar-expand navbar-dark fixed-top bg-primary">
2-
<i class="fas fa-bars"></i>
3-
<i class="fas fa-search" id="search-icon"></i>
4-
<!--<form class="form-inline" action="{{ site.baseurl }}/api/search.html" method="get">
5-
<input type="text" class="form-control" placeholder="Search" aria-label="Search">
6-
</form>-->
7-
<div class="navbar-brand">
8-
{% if site.logo %}
9-
<a href="{{ site.baseurl }}/index.html">
10-
<img class="project-logo" src="{{ site.baseurl }}/images/{{ site.logo }}">
1+
<header>
2+
<nav class="navbar navbar-expand navbar-dark fixed-top">
3+
<a id="menu-icon" title="Menu" aria-label="Menu">
4+
<i class="fas fa-bars"></i>
115
</a>
12-
{% endif %}
13-
<a href="{{ site.baseurl }}/docs/index.html">
14-
<div class="project-details">
15-
<h1>{{ site.project }} Documentation</h1>
16-
<h2>{{ site.version }}</h2>
17-
</div>
6+
<a id="search-icon" title="Search" aria-label="Search">
7+
<i class="fas fa-search"></i>
188
</a>
19-
</div>
9+
<form id="searchbar" class="form-inline">
10+
<input id="search-api-input" type="text" class="form-control" placeholder="Search API" aria-label="Search API">
11+
<input id="baseurl-input" type="hidden" value="{{ site.baseurl }}">
12+
</form>
13+
<div class="navbar-brand">
14+
{% if site.logo %}
15+
<a href="{{ site.baseurl }}/index.html">
16+
<img class="project-logo" src="{{ site.baseurl }}/images/{{ site.logo }}">
17+
</a>
18+
{% endif %}
19+
<a href="{{ site.baseurl }}/docs/index.html">
20+
<div class="project-details">
21+
<h1>{{ site.project }} Documentation</h1>
22+
<h2>{{ site.version }}</h2>
23+
</div>
24+
</a>
25+
</div>
2026

21-
{% if site.projectUrl %}
22-
<a id="github-link" title="Project repository" href="{{ site.projectUrl }}">
23-
{% if site.projectUrl contains "github" %}
24-
<i class="fab fa-github" aria-hidden="true"></i>
25-
{% elsif site.projectUrl contains "gitlab" %}
26-
<i class="fab fa-gitlab" aria-hidden="true"></i>
27-
{% else %}
28-
<i class="fas fa-code" aria-hidden="true"></i>
27+
{% if site.projectUrl %}
28+
<a id="github-link" title="Project repository" href="{{ site.projectUrl }}">
29+
{% if site.projectUrl contains "github" %}
30+
<i class="fab fa-github" aria-hidden="true"></i>
31+
{% elsif site.projectUrl contains "gitlab" %}
32+
<i class="fab fa-gitlab" aria-hidden="true"></i>
33+
{% else %}
34+
<i class="fas fa-code" aria-hidden="true"></i>
35+
{% endif %}
36+
</a>
2937
{% endif %}
30-
</a>
31-
{% endif %}
32-
</nav>
38+
</nav>
39+
</header>
40+
<script src="{{ site.baseurl }}/js/toolbar.js"></script>

‎doc-tool/resources/_layouts/api-page.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@
77
---
88

99
{% include "toolbar" %}
10+
{% include "sidebar" %}
1011

1112
<div id="content-wrapper">
12-
{% assign sidebarTop = "75px" %}
13-
{% include "sidebar" %}
14-
1513
<script>
1614
document.title = "{{ site.project }} Docs - {{ entity.name }}"
1715
</script>

‎doc-tool/resources/_layouts/blog-page.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
---
77

88
{% include "toolbar" %}
9+
{% include "sidebar" %}
910

1011
<div id="content-wrapper">
11-
{% assign sidebarTop = "75px" %}
12-
{% include "sidebar" %}
13-
1412
<div id="content-body" class="doc-page-body">
1513
<div id="post-title">
1614
<h3 id="post-date">

‎doc-tool/resources/_layouts/doc-page.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@
77
---
88

99
{% include "toolbar" %}
10+
{% include "sidebar" %}
1011

1112
<div id="content-wrapper">
12-
{% assign sidebarTop = "75px" %}
13-
{% include "sidebar" %}
14-
1513
<div id="content-body" class="doc-page-body">
1614
<h1 id="doc-page-title">{{ page.title }}</h1>
1715
<a id="edit-on-github" href="{{ site.projectUrl }}/edit/master/{{ site.root }}/{{ page.url }}">

0 commit comments

Comments
 (0)