vdoc: scroll indicator
Daniel Däschle
GitHub
parent
2cad6db9f7
commit
a530c52b2d
|
|
@ -16,9 +16,9 @@
|
|||
--menu-toggle-icon-color: #fff;
|
||||
--menu-toggle-icon-hover-color: #00000044;
|
||||
--menu-search-background-color: #00000044;
|
||||
--menu-search-text-color: #fff;
|
||||
--menu-search-font-color: #fff;
|
||||
--toc-text-color: #2779bd;
|
||||
--toc-indent-line-color: #dae1e7;
|
||||
--toc-indicator-color: #4299e1;
|
||||
--code-default-text-color: #5c6e74;
|
||||
--code-background-color: #edf2f7;
|
||||
--code-keyword-text-color: #2b6cb0;
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
--menu-scrollbar-color: #4a5568;
|
||||
--menu-toggle-icon-color: #fff;
|
||||
--menu-search-background-color: #4a5568;
|
||||
--menu-search-text-color: #fff;
|
||||
--menu-search-font-color: #fff;
|
||||
--toc-text-color: #90cdf4;
|
||||
--toc-indent-line-color: #1a202c;
|
||||
--toc-indicator-color: #4299e1;
|
||||
--code-default-text-color: #cbd5e0;
|
||||
--code-background-color: #2d3748;
|
||||
--code-builtin-text-color: #68d391;
|
||||
|
|
@ -376,22 +376,26 @@ body {
|
|||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border-left-width: 2px;
|
||||
border-left-style: solid;
|
||||
border-color: transparent;
|
||||
padding-left: 0.4rem;
|
||||
}
|
||||
.doc-toc a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.doc-toc a.active {
|
||||
border-color: #4299e1;
|
||||
border-color: var(--toc-indicator-color);
|
||||
}
|
||||
.doc-toc li ul {
|
||||
border-color: #dae1e7;
|
||||
border-color: var(--toc-indent-line-color);
|
||||
border-left-width: 2px;
|
||||
border-left-style: solid;
|
||||
padding-left: 0.8rem;
|
||||
margin: 0.2rem 0 0.2rem;
|
||||
font-size: 0.7rem;
|
||||
list-style: none;
|
||||
}
|
||||
.doc-toc li ul a {
|
||||
font-weight: 400;
|
||||
padding-left: 0.8rem;
|
||||
}
|
||||
|
||||
/* Code highlight */
|
||||
|
|
|
|||
|
|
@ -1,11 +1,52 @@
|
|||
(function() {
|
||||
if (!!document.body.scrollIntoView) {
|
||||
if (document.body.scrollIntoView) {
|
||||
var docnav = document.querySelector('.doc-nav');
|
||||
var active = docnav.querySelector('li.active');
|
||||
active && active.scrollIntoView({ block: 'center', inline: 'nearest' });
|
||||
if (active) {
|
||||
active.scrollIntoView({ block: 'center', inline: 'nearest' });
|
||||
}
|
||||
}
|
||||
setupScrollSpy();
|
||||
setupMobileToggle();
|
||||
setupDarkMode();
|
||||
setupSearch();
|
||||
setupCollapse();
|
||||
})();
|
||||
|
||||
// Mobile view menu toggle button
|
||||
function setupScrollSpy() {
|
||||
var sectionPositions = [];
|
||||
var sections = document.querySelectorAll('section');
|
||||
sections.forEach(function(section) {
|
||||
sectionPositions.push(section.offsetTop);
|
||||
});
|
||||
window.addEventListener('scroll', function() {
|
||||
// Reset classes
|
||||
document.querySelectorAll('.doc-toc a[class="active"]').forEach(function(link) {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
// Set current menu link as active
|
||||
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
for (var i = 0; i < sectionPositions.length; i++) {
|
||||
var section = sections[i];
|
||||
var position = sectionPositions[i];
|
||||
if (position >= scrollPosition) {
|
||||
var link = document.querySelector('.doc-toc a[href="#' + section.id + '"]');
|
||||
if (link) {
|
||||
link.classList.add('active');
|
||||
var docToc = document.querySelector('.doc-toc');
|
||||
if (link.scrollIntoViewIfNeeded) {
|
||||
link.scrollIntoViewIfNeeded();
|
||||
} else if (link.scrollIntoView) {
|
||||
link.scrollIntoView();
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupMobileToggle() {
|
||||
var toggle = document.getElementById('toggle-menu');
|
||||
toggle.addEventListener('click', function(ev) {
|
||||
document.querySelectorAll('.doc-nav').forEach(function(el) {
|
||||
|
|
@ -16,8 +57,9 @@
|
|||
el.classList.toggle('show');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Dark mode
|
||||
function setupDarkMode() {
|
||||
var html = document.getElementsByTagName('html')[0];
|
||||
var darkModeToggle = document.getElementById('dark-mode-toggle');
|
||||
darkModeToggle.addEventListener('click', function() {
|
||||
|
|
@ -34,8 +76,9 @@
|
|||
if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
|
||||
darkModeToggle.style.visibility = 'unset';
|
||||
}
|
||||
}
|
||||
|
||||
// Search
|
||||
function setupSearch() {
|
||||
var searchInput = document.getElementById('search');
|
||||
searchInput.addEventListener('input', function(e) {
|
||||
var searchValue = e.target.value.toLowerCase();
|
||||
|
|
@ -60,8 +103,9 @@
|
|||
menuItem.style.display = !searchValue || hasResult ? '' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Collapse
|
||||
function setupCollapse() {
|
||||
var dropdownArrows = document.querySelectorAll('.dropdown-arrow');
|
||||
for (var i = 0; i < dropdownArrows.length; i++) {
|
||||
var dropdownArrow = dropdownArrows[i];
|
||||
|
|
@ -70,4 +114,4 @@
|
|||
parent.classList.toggle('open');
|
||||
});
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue