Skip to content

fix mobile breadcrumbs, round two #1657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 5, 2017
Merged

fix mobile breadcrumbs, round two #1657

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70960a8
properly render default collapsed header when no matching sidebar entry
benesch Jul 2, 2017
cac028b
document the sidebar rendering code
benesch Jul 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 36 additions & 5 deletions _includes/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,20 @@
});
</script>

<ul id="mysidebar" class="nav {% if page.url == '/' or page.url == '/search.html' %}nav--home{% endif %}" style="display: none">
<ul id="mysidebar" class="nav {% if page.name == 'index.md' or page.url == '/search.html' %}nav--home{% endif %}" style="display: none">
<div class="sidenav-arrow"><img src="{{ 'images/sidenav-arrow.svg' | relative_url }}" alt="Sidenav arrow"></div>
<div class="collapsed-header">
<div id="ch-breadcrumbs" class="collapsed-header__pre"></div>
<div id="ch-title"></div>
Docs Menu
{% comment %}
On pages that match a sidebar entry, the JavaScript below
injects the following HTML.
<div class="collapsed-header__pre">
Breadcrumb level 1
<div class=\"arrow-down arrow-down--pre\"></div>
Breadcrumb level 2
</div>
<div>Page title</div>
{% endcomment %}
</div>
<li class="search-wrap">
<div class="search">
Expand Down Expand Up @@ -93,6 +102,23 @@
return "stable";
})();

// Given a sidebar hierarchy (see _data/sidebar-data-v1.0.json
// for an example), returns a jQuery <ul> element with the
// following structure:
//
// <ul>
// <li class="tier-1">
// <a href="{{ item.url }}">{{ item.title }}</a>
// <ul>
// {% for item in item.items %}
// <li class="tier-2">...</li>
// {% endfor %}
// </ul>
// </li>
// </ul>
//
// Additionally injects breadcrumbs for the active sidebar
// entry, if any, into the `.collapsed-header` element above.
function renderItems(items, paths) {
if (!items || items.length == 0)
return $();
Expand All @@ -103,9 +129,14 @@
});
var active = (urls.indexOf(location.pathname) !== -1);
if (active) {
$("#ch-breadcrumbs")
// This mutation inside an otherwise pure function is
// unfortunate, but doing it here avoids a separate
// traversal of the sidebar data.
var breadcrumbs = $("<div>")
.addClass("collapsed-header__pre")
.html(paths.join("<div class=\"arrow-down arrow-down--pre\"></div>\n"));
$("#ch-title").html(item.title);
var title = $("<div>").html(item.title);
$(".collapsed-header").empty().append(breadcrumbs, title);
}
var subitems = renderItems(item.items, paths.concat(item.title));
var a = $("<a>")
Expand Down