56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
// Wait for the DOM content to be fully loaded
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Create the overlay element if it doesn't exist
|
|
if (!document.querySelector('.transition-overlay')) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'transition-overlay';
|
|
document.body.appendChild(overlay);
|
|
}
|
|
|
|
// Find all internal links
|
|
for (const link of document.querySelectorAll('a')) {
|
|
const href = link.getAttribute('href');
|
|
|
|
// Skip if no href
|
|
if (!href) continue;
|
|
|
|
// Skip anchor links (both relative #section and absolute with fragments)
|
|
if (href.startsWith('#') ||
|
|
(link.hostname === window.location.hostname &&
|
|
link.pathname === window.location.pathname &&
|
|
link.hash)) {
|
|
continue;
|
|
}
|
|
|
|
// Only handle links to the same site that aren't anchor links
|
|
if (link.hostname === window.location.hostname &&
|
|
!link.hasAttribute('target')) {
|
|
|
|
link.addEventListener('click', (e) => {
|
|
// Don't handle special clicks (modifier keys)
|
|
if (e.ctrlKey || e.shiftKey || e.metaKey || e.altKey) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
const destination = link.href;
|
|
|
|
// Add active class to trigger the overlay
|
|
document.body.classList.add('transition-active');
|
|
|
|
// Navigate after a slight delay
|
|
setTimeout(() => {
|
|
window.location.href = destination;
|
|
}, 300);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// If someone navigates back/forward, we need to hide the overlay
|
|
window.addEventListener('pageshow', (event) => {
|
|
// This works for both fresh loads and back-forward cache
|
|
if (document.body.classList.contains('transition-active')) {
|
|
document.body.classList.remove('transition-active');
|
|
}
|
|
}); |