86 lines
No EOL
2.3 KiB
JavaScript
86 lines
No EOL
2.3 KiB
JavaScript
window.addEventListener('pageshow', () =>
|
|
{
|
|
/**
|
|
* @type {NodeListOf<HTMLVideoElement>}
|
|
*/
|
|
const parallaxElems = document.querySelectorAll('.parallax');
|
|
|
|
const refreshScrollLinkedPositioningEffect = () =>
|
|
{
|
|
document.body.classList.toggle('is-scrolled', window.scrollY > 0);
|
|
|
|
parallaxElems.forEach(parallaxElem =>
|
|
{
|
|
const parentElem = parallaxElem.parentElement;
|
|
|
|
const parentRect = parentElem.getBoundingClientRect();
|
|
const parentScroll = parentRect.top + (parentRect.height / 2);
|
|
|
|
const windowScroll = window.scrollY + (window.innerHeight / 2);
|
|
|
|
parallaxElem.style.top = `${(windowScroll - parentScroll) / 4}px`;
|
|
});
|
|
};
|
|
|
|
refreshScrollLinkedPositioningEffect();
|
|
window.addEventListener('scroll', refreshScrollLinkedPositioningEffect);
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () =>
|
|
{
|
|
/**
|
|
* @type {HTMLDivElement}
|
|
*/
|
|
const navBar = document.getElementById('navbarNav');
|
|
/**
|
|
* @type {NodeListOf<HTMLAnchorElement>}
|
|
*/
|
|
const navLinks = navBar.querySelectorAll('a.nav-link');
|
|
/**
|
|
* @type {NodeListOf<HTMLElement>}
|
|
*/
|
|
const sectionsWithId = document.querySelectorAll('section[id]');
|
|
|
|
// Update nav links and add anchor links to section headers.
|
|
sectionsWithId.forEach(anchorTarget =>
|
|
{
|
|
// Navigate within current page if a section for the anchor exists.
|
|
navLinks.forEach(navLink =>
|
|
{
|
|
const href = navLink.getAttribute('href');
|
|
|
|
if (href.startsWith('/#') && href.substring(2) === anchorTarget.id)
|
|
{
|
|
navLink.setAttribute('href', href.substring(1));
|
|
}
|
|
});
|
|
|
|
/**
|
|
* @type {HTMLHeadingElement|null}
|
|
*/
|
|
const anchorHeader = anchorTarget.querySelector('h1,h2');
|
|
|
|
// Add anchor link to section header.
|
|
if (anchorHeader)
|
|
{
|
|
const anchorLink = document.createElement('a');
|
|
anchorLink.className = 'anchor-link';
|
|
anchorLink.href = `#${anchorTarget.id}`;
|
|
anchorLink.innerHTML = ' # ';
|
|
anchorHeader.appendChild(anchorLink);
|
|
}
|
|
});
|
|
|
|
// Collapse the navbar in mobile view after clicking a link.
|
|
navLinks.forEach(navLink =>
|
|
{
|
|
navLink.addEventListener('click', () =>
|
|
{
|
|
/**
|
|
* @type {HTMLButtonElement}
|
|
*/
|
|
const navbarNav = document.querySelector('button.navbar-toggler[aria-expanded="true"]');
|
|
navbarNav?.click();
|
|
});
|
|
});
|
|
}); |