43 lines
2 KiB
JavaScript
43 lines
2 KiB
JavaScript
|
// On docs/content pages, add a hierarchical quick nav menu if there are
|
||
|
|
// more than two H2/H3/H4 headers.
|
||
|
|
document.addEventListener("turbolinks:load", function() {
|
||
|
|
var headers = $('#inner').find('h2, h3, h4');
|
||
|
|
if (window.location.pathname !== "/docs/index.html" && $("div#inner-quicknav").length === 0 && headers.length > 0) {
|
||
|
|
// Build the quick-nav HTML:
|
||
|
|
$("#inner h1").first().after(
|
||
|
|
'<div id="inner-quicknav">' +
|
||
|
|
'<span id="inner-quicknav-trigger">' +
|
||
|
|
'Jump to Section' +
|
||
|
|
'<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill-rule="evenodd"/></svg>' +
|
||
|
|
'</span>' +
|
||
|
|
'<ul class="dropdown"></ul>' +
|
||
|
|
'</div>'
|
||
|
|
);
|
||
|
|
var quickNav = $('#inner-quicknav > ul.dropdown');
|
||
|
|
headers.each(function(index, element) {
|
||
|
|
var level = element.nodeName.toLowerCase();
|
||
|
|
var header_text = $(element).text();
|
||
|
|
var header_id = $(element).attr('id');
|
||
|
|
quickNav.append('<li class="level-' + level + '"><a href="#' + header_id + '">' + header_text + '</a></li>');
|
||
|
|
});
|
||
|
|
// Attach event listeners:
|
||
|
|
// Trigger opens and closes.
|
||
|
|
$('#inner-quicknav #inner-quicknav-trigger').on('click', function(e) {
|
||
|
|
$(this).siblings('ul').toggleClass('active');
|
||
|
|
e.stopPropagation();
|
||
|
|
});
|
||
|
|
// Clicking inside the quick-nav doesn't close it.
|
||
|
|
quickNav.on('click', function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
});
|
||
|
|
// Jumping to a section means you're done with the quick-nav.
|
||
|
|
quickNav.find('li a').on('click', function() {
|
||
|
|
quickNav.removeClass('active');
|
||
|
|
});
|
||
|
|
// Clicking outside the quick-nav closes it.
|
||
|
|
$('body').on('click', function() {
|
||
|
|
quickNav.removeClass('active');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|