Rewrite menu opening/closing without jQuery

This commit is contained in:
Dustin Wilson 2019-08-10 15:48:18 -05:00 committed by Stéphane Goetz
parent e84c9cc10a
commit 9b6af9b000
15 changed files with 9042 additions and 50 deletions

View File

@ -1,7 +1,6 @@
{ {
"favicon": "<theme_url>img/favicon.png", "favicon": "<theme_url>img/favicon.png",
"js": [ "js": [
"<theme_url>js/jquery-1.11.3.min.js",
"<theme_url>js/highlight.pack.js", "<theme_url>js/highlight.pack.js",
"<theme_url>js/daux.js" "<theme_url>js/daux.js"
], ],

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -93,22 +93,81 @@ if (hljs) {
setCodeBlockStyle(codeBlockState); setCodeBlockStyle(codeBlockState);
})(); })();
$(function () { (function() {
// Tree navigation function debounce(func, wait) {
$('.aj-nav').click(function (e) { var timeout;
e.preventDefault(); return function() {
$(this).parent().siblings().find('ul').slideUp(); var context = this, args = arguments;
$(this).next().slideToggle(); var later = function() {
}); timeout = null;
};
// New Tree navigation clearTimeout(timeout);
$('ul.Nav > li.has-children > a > .Nav__arrow').click(function() { timeout = setTimeout(later, wait);
$(this).parent().parent().toggleClass('Nav__item--open'); };
return false; };
});
// Responsive navigation var navItemsWithChildren = document.querySelectorAll('.Nav__item.has-children > a');
$('.Collapsible__trigger').click(function () {
$('.Collapsible__content').slideToggle(); function _toggleSubMenu(ev) {
ev.preventDefault();
var parent = ev.target.parentNode;
var subNav = parent.querySelector('ul.Nav');
if (parent.classList.contains('Nav__item--open')) {
subNav.style.height = 0;
parent.classList.remove('Nav__item--open');
} else {
subNav.style.transitionDuration = Math.max(subNav.scrollHeight * 1.5, 150) + 'ms';
subNav.style.height = subNav.scrollHeight + 'px';
parent.classList.add('Nav__item--open');
}
}
// Because font sizes change the height of the menus can change so they must
// be recalculated if necessary when the viewport size changes.
function _resize() {
var subNav = document.querySelector('.Nav .Nav'),
height, cur;
for (var i = 0; i < subNav.length; i++) {
cur = subNav[i];
height = parseFloat(cur.style.height, 10);
if (height > 0 && cur.scrollHeight !== height) {
// Disable the height transition, change it, and
// re-establish the transition that's in the stylesheet.
cur.style.transitionDuration = 0;
cur.style.height = cur.scrollHeight + 'px';
cur.style.transitionDuration = Math.max(cur.scrollHeight, 150) + 'ms';
}
}
}
for (var i = 0; i < navItemsWithChildren.length; i++) {
navItemsWithChildren[i].addEventListener('click', _toggleSubMenu);
}
window.addEventListener('resize', debounce(_resize, 150));
window.addEventListener('orientationchange', _resize);
})();
(function() {
var trigger = document.querySelector('.Collapsible__trigger');
if (!trigger) {
return;
}
content = document.querySelector('.Collapsible__content');
trigger.addEventListener('click', function(ev) {
if (content.classList.contains('Collapsible__content--open')) {
content.style.height = 0;
content.classList.remove('Collapsible__content--open');
} else {
content.style.transitionDuration = Math.max(content.scrollHeight, 150) + 'ms';
content.style.height = content.scrollHeight + 'px';
content.classList.add('Collapsible__content--open');
}
}); });
}); })();

File diff suppressed because one or more lines are too long

View File

@ -41,6 +41,7 @@ Components
border: 1px solid transparent; border: 1px solid transparent;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
margin-bottom: 0;
&--small { &--small {
font-size: 12px; font-size: 12px;
@ -155,6 +156,11 @@ Components
width: 16px; width: 16px;
margin-left: -16px; margin-left: -16px;
// Prevent arrow from being the target in its container's event listener.
&, &::before {
pointer-events: none;
}
&:before { &:before {
position: absolute; position: absolute;
display: block; display: block;
@ -193,7 +199,9 @@ Components
} }
.Nav .Nav { .Nav .Nav {
display: none; height: 0;
transition: height 400ms ease-in-out;
overflow: hidden;
margin-left: 15px; margin-left: 15px;
.Nav__item a { .Nav__item a {
@ -223,10 +231,6 @@ Components
} }
&--open { &--open {
> .Nav {
display: block;
}
> a > .Nav__arrow:before { > a > .Nav__arrow:before {
margin-left: -0.25em; margin-left: -0.25em;
transform: rotate(135deg); transform: rotate(135deg);
@ -284,7 +288,7 @@ Components
} }
.PoweredBy { .PoweredBy {
padding: 0 20px; padding: 0 20px 1rem 20px;
font-size: var(--type-size-6); font-size: var(--type-size-6);
} }
@ -509,10 +513,6 @@ ul.TableOfContents {
} }
} }
.Collapsible__content {
padding-bottom: 1rem;
}
.Hidden { .Hidden {
display: none; display: none;
} }

View File

@ -41,9 +41,13 @@ body {
} }
} }
// mobile friendly sub-nav @media (max-width: 768px) {
.Collapsible__content { // mobile friendly sub-nav
display: none; .Collapsible__content {
height: 0;
overflow: hidden;
transition: height 400ms ease-in-out;
}
} }
.Collapsible__trigger { .Collapsible__trigger {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long