Rewrite menu opening/closing without jQuery

Cette révision appartient à :
Dustin Wilson 2019-08-10 15:48:18 -05:00 révisé par Stéphane Goetz
Parent e84c9cc10a
révision 9b6af9b000
15 fichiers modifiés avec 9042 ajouts et 50 suppressions

Voir le fichier

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

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Voir le fichier

@ -93,22 +93,81 @@ if (hljs) {
setCodeBlockStyle(codeBlockState);
})();
$(function () {
// Tree navigation
$('.aj-nav').click(function (e) {
e.preventDefault();
$(this).parent().siblings().find('ul').slideUp();
$(this).next().slideToggle();
});
(function() {
function debounce(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
};
// New Tree navigation
$('ul.Nav > li.has-children > a > .Nav__arrow').click(function() {
$(this).parent().parent().toggleClass('Nav__item--open');
return false;
});
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
// Responsive navigation
$('.Collapsible__trigger').click(function () {
$('.Collapsible__content').slideToggle();
var navItemsWithChildren = document.querySelectorAll('.Nav__item.has-children > a');
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');
}
});
});
})();

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Voir le fichier

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

Voir le fichier

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

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues