|
/* retoor <retoor@molodetz.nl> */
|
|
/* DWN Documentation Scripts */
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
highlightCurrentPage();
|
|
setupCopyButtons();
|
|
setupMobileMenu();
|
|
setupSearch();
|
|
setupTabs();
|
|
});
|
|
|
|
function highlightCurrentPage() {
|
|
const currentPath = window.location.pathname.split('/').pop() || 'index.html';
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
navLinks.forEach(link => {
|
|
const href = link.getAttribute('href');
|
|
if (href === currentPath || (currentPath === '' && href === 'index.html')) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
function setupCopyButtons() {
|
|
const codeBlocks = document.querySelectorAll('pre code');
|
|
|
|
codeBlocks.forEach(block => {
|
|
const wrapper = block.closest('.code-block') || block.parentElement;
|
|
wrapper.style.position = 'relative';
|
|
|
|
const btn = document.createElement('button');
|
|
btn.className = 'copy-btn';
|
|
btn.textContent = 'Copy';
|
|
btn.addEventListener('click', function() {
|
|
const text = block.textContent;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
btn.textContent = 'Copied!';
|
|
setTimeout(() => {
|
|
btn.textContent = 'Copy';
|
|
}, 2000);
|
|
});
|
|
});
|
|
|
|
wrapper.appendChild(btn);
|
|
});
|
|
}
|
|
|
|
function setupMobileMenu() {
|
|
const menuBtn = document.querySelector('.mobile-menu-btn');
|
|
const sidebar = document.querySelector('.sidebar');
|
|
|
|
if (menuBtn && sidebar) {
|
|
menuBtn.addEventListener('click', function() {
|
|
sidebar.classList.toggle('open');
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (!sidebar.contains(e.target) && !menuBtn.contains(e.target)) {
|
|
sidebar.classList.remove('open');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function setupSearch() {
|
|
const searchInput = document.querySelector('.search-input');
|
|
if (!searchInput) return;
|
|
|
|
searchInput.addEventListener('input', function(e) {
|
|
const query = e.target.value.toLowerCase();
|
|
const navLinks = document.querySelectorAll('.nav-link');
|
|
|
|
navLinks.forEach(link => {
|
|
const text = link.textContent.toLowerCase();
|
|
const section = link.closest('.nav-section');
|
|
|
|
if (query === '' || text.includes(query)) {
|
|
link.style.display = 'block';
|
|
} else {
|
|
link.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function setupTabs() {
|
|
const tabGroups = document.querySelectorAll('.example-tabs');
|
|
|
|
tabGroups.forEach(group => {
|
|
const tabs = group.querySelectorAll('.example-tab');
|
|
const container = group.nextElementSibling;
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const target = this.dataset.tab;
|
|
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
if (container) {
|
|
const contents = container.querySelectorAll('.example-content');
|
|
contents.forEach(c => {
|
|
c.classList.remove('active');
|
|
if (c.dataset.tab === target) {
|
|
c.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
function scrollToSection(id) {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|