Merge f13bc74f4a
into c185e7dec0
This commit is contained in:
commit
38ddb13678
|
@ -2,7 +2,53 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const onLoaded = () => {
|
const onLoaded = () => {
|
||||||
// Nothing for now
|
document.documentElement.classList.add('js');
|
||||||
|
|
||||||
|
for (const header of document.querySelectorAll('.sidebar .sub-title')) {
|
||||||
|
header.role = 'button';
|
||||||
|
header.tabIndex = 0;
|
||||||
|
header.ariaExpanded = true;
|
||||||
|
header.ariaControlsElement = header.nextElementSibling;
|
||||||
|
const toggle = () => {
|
||||||
|
header.nextElementSibling.classList.toggle('collapsed');
|
||||||
|
const collapsed =
|
||||||
|
header.nextElementSibling.classList.contains('collapsed');
|
||||||
|
header.ariaExpanded = !collapsed;
|
||||||
|
header.parentNode.classList.toggle('collapsed', collapsed);
|
||||||
|
};
|
||||||
|
header.addEventListener('click', toggle);
|
||||||
|
header.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === 'Space' || e.key === ' ') {
|
||||||
|
toggle();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!header.nextElementSibling.querySelector('.active')) {
|
||||||
|
toggle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggle = document.querySelector('.sidebar .toggle-button');
|
||||||
|
toggle.addEventListener('click', () => {
|
||||||
|
const collapsed = document.querySelectorAll(
|
||||||
|
'.sidebar li.collapsed:not(.stay-collapsed)'
|
||||||
|
);
|
||||||
|
if (collapsed.length) {
|
||||||
|
for (const collapsible of collapsed) {
|
||||||
|
collapsible.querySelector('.sub-title').click();
|
||||||
|
}
|
||||||
|
toggle.querySelector('strong').textContent = '\u2212'; // minus sign
|
||||||
|
toggle.querySelector('span').textContent = 'Collapse All';
|
||||||
|
} else {
|
||||||
|
for (const collapsible of document.querySelectorAll(
|
||||||
|
'.sidebar > ul > li:not(.stay-collapsed)'
|
||||||
|
)) {
|
||||||
|
collapsible.querySelector('.sub-title').click();
|
||||||
|
}
|
||||||
|
toggle.querySelector('strong').textContent = '+';
|
||||||
|
toggle.querySelector('span').textContent = 'Expand All';
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
if (['interactive', 'complete'].indexOf(document.readyState) !== -1) {
|
if (['interactive', 'complete'].indexOf(document.readyState) !== -1) {
|
||||||
|
|
|
@ -77,7 +77,7 @@ table {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a:not(:focus-visible) {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -125,6 +125,10 @@ body {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
margin-bottom: 52px;
|
margin-bottom: 52px;
|
||||||
|
|
||||||
|
:root.js & {
|
||||||
|
margin-bottom: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 38px;
|
height: 38px;
|
||||||
}
|
}
|
||||||
|
@ -138,9 +142,52 @@ body {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toggle-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background: lighten($darkest, 4%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 6px 12px 4px;
|
||||||
|
margin: 0;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 0;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
margin-bottom: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: lighten($darkest, 8%);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background: lighten($darkest, 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not(.js) & {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& > ul > li {
|
& > ul > li {
|
||||||
margin-bottom: 26px;
|
margin-bottom: 26px;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
& > .sub-title::before {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
@ -151,6 +198,21 @@ body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
:root.js & {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 10 10"><path fill="%239baec8" d="M5 10L0 0h10z"/></svg>') no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > ul a {
|
& > ul a {
|
||||||
|
@ -161,11 +223,11 @@ body {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-menu {
|
a.active {
|
||||||
a.active {
|
color: $vibrant;
|
||||||
color: $vibrant;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
&.collapsed {
|
&.collapsed {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -840,4 +902,4 @@ main {
|
||||||
align-content: center;
|
align-content: center;
|
||||||
margin-left: 0.25em;
|
margin-left: 0.25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,8 +4,9 @@
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{{ $currentPage := . }}
|
{{ $currentPage := . }}
|
||||||
|
<button class="toggle-button"><strong>+</strong><span>Expand All</span></button>
|
||||||
{{ range .Site.Menus.docs.ByWeight }}
|
{{ range .Site.Menus.docs.ByWeight }}
|
||||||
<li>
|
<li class="{{ if .Page }}collapsed stay-collapsed{{ end }}">
|
||||||
{{ if .Page }}
|
{{ if .Page }}
|
||||||
<a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
|
<a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
@ -13,7 +14,7 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{ if .HasChildren }}
|
{{ if .HasChildren }}
|
||||||
<ul class="sub-menu">
|
<ul class="sub-menu" id="sidebar-{{ anchorize .Name }}">
|
||||||
{{ range .Children }}
|
{{ range .Children }}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
|
<a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>
|
||||||
|
|
Loading…
Reference in New Issue