mirror of
https://github.com/vlang/v.git
synced 2023-08-10 21:13:21 +03:00
vdoc: scroll indicator
This commit is contained in:
parent
2cad6db9f7
commit
a530c52b2d
|
@ -16,9 +16,9 @@
|
||||||
--menu-toggle-icon-color: #fff;
|
--menu-toggle-icon-color: #fff;
|
||||||
--menu-toggle-icon-hover-color: #00000044;
|
--menu-toggle-icon-hover-color: #00000044;
|
||||||
--menu-search-background-color: #00000044;
|
--menu-search-background-color: #00000044;
|
||||||
--menu-search-text-color: #fff;
|
--menu-search-font-color: #fff;
|
||||||
--toc-text-color: #2779bd;
|
--toc-text-color: #2779bd;
|
||||||
--toc-indent-line-color: #dae1e7;
|
--toc-indicator-color: #4299e1;
|
||||||
--code-default-text-color: #5c6e74;
|
--code-default-text-color: #5c6e74;
|
||||||
--code-background-color: #edf2f7;
|
--code-background-color: #edf2f7;
|
||||||
--code-keyword-text-color: #2b6cb0;
|
--code-keyword-text-color: #2b6cb0;
|
||||||
|
@ -53,9 +53,9 @@
|
||||||
--menu-scrollbar-color: #4a5568;
|
--menu-scrollbar-color: #4a5568;
|
||||||
--menu-toggle-icon-color: #fff;
|
--menu-toggle-icon-color: #fff;
|
||||||
--menu-search-background-color: #4a5568;
|
--menu-search-background-color: #4a5568;
|
||||||
--menu-search-text-color: #fff;
|
--menu-search-font-color: #fff;
|
||||||
--toc-text-color: #90cdf4;
|
--toc-text-color: #90cdf4;
|
||||||
--toc-indent-line-color: #1a202c;
|
--toc-indicator-color: #4299e1;
|
||||||
--code-default-text-color: #cbd5e0;
|
--code-default-text-color: #cbd5e0;
|
||||||
--code-background-color: #2d3748;
|
--code-background-color: #2d3748;
|
||||||
--code-builtin-text-color: #68d391;
|
--code-builtin-text-color: #68d391;
|
||||||
|
@ -376,22 +376,26 @@ body {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-left-width: 2px;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-color: transparent;
|
||||||
|
padding-left: 0.4rem;
|
||||||
}
|
}
|
||||||
.doc-toc a:hover {
|
.doc-toc a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
.doc-toc a.active {
|
||||||
|
border-color: #4299e1;
|
||||||
|
border-color: var(--toc-indicator-color);
|
||||||
|
}
|
||||||
.doc-toc li ul {
|
.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;
|
margin: 0.2rem 0 0.2rem;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.doc-toc li ul a {
|
.doc-toc li ul a {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
padding-left: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Code highlight */
|
/* Code highlight */
|
||||||
|
|
|
@ -1,11 +1,52 @@
|
||||||
(function() {
|
(function() {
|
||||||
if (!!document.body.scrollIntoView) {
|
if (document.body.scrollIntoView) {
|
||||||
var docnav = document.querySelector('.doc-nav');
|
var docnav = document.querySelector('.doc-nav');
|
||||||
var active = docnav.querySelector('li.active');
|
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();
|
||||||
|
})();
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Mobile view menu toggle button
|
function setupMobileToggle() {
|
||||||
var toggle = document.getElementById('toggle-menu');
|
var toggle = document.getElementById('toggle-menu');
|
||||||
toggle.addEventListener('click', function(ev) {
|
toggle.addEventListener('click', function(ev) {
|
||||||
document.querySelectorAll('.doc-nav').forEach(function(el) {
|
document.querySelectorAll('.doc-nav').forEach(function(el) {
|
||||||
|
@ -16,8 +57,9 @@
|
||||||
el.classList.toggle('show');
|
el.classList.toggle('show');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Dark mode
|
function setupDarkMode() {
|
||||||
var html = document.getElementsByTagName('html')[0];
|
var html = document.getElementsByTagName('html')[0];
|
||||||
var darkModeToggle = document.getElementById('dark-mode-toggle');
|
var darkModeToggle = document.getElementById('dark-mode-toggle');
|
||||||
darkModeToggle.addEventListener('click', function() {
|
darkModeToggle.addEventListener('click', function() {
|
||||||
|
@ -34,8 +76,9 @@
|
||||||
if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
|
if (window.CSS && CSS.supports('color', 'var(--fake-var)')) {
|
||||||
darkModeToggle.style.visibility = 'unset';
|
darkModeToggle.style.visibility = 'unset';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Search
|
function setupSearch() {
|
||||||
var searchInput = document.getElementById('search');
|
var searchInput = document.getElementById('search');
|
||||||
searchInput.addEventListener('input', function(e) {
|
searchInput.addEventListener('input', function(e) {
|
||||||
var searchValue = e.target.value.toLowerCase();
|
var searchValue = e.target.value.toLowerCase();
|
||||||
|
@ -60,8 +103,9 @@
|
||||||
menuItem.style.display = !searchValue || hasResult ? '' : 'none';
|
menuItem.style.display = !searchValue || hasResult ? '' : 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Collapse
|
function setupCollapse() {
|
||||||
var dropdownArrows = document.querySelectorAll('.dropdown-arrow');
|
var dropdownArrows = document.querySelectorAll('.dropdown-arrow');
|
||||||
for (var i = 0; i < dropdownArrows.length; i++) {
|
for (var i = 0; i < dropdownArrows.length; i++) {
|
||||||
var dropdownArrow = dropdownArrows[i];
|
var dropdownArrow = dropdownArrows[i];
|
||||||
|
@ -70,4 +114,4 @@
|
||||||
parent.classList.toggle('open');
|
parent.classList.toggle('open');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})();
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user