Sha256: 29c0cf325e73e0b2a600d712695925d71886416e43cccb8efdefa2eba5a07a5e
Contents?: true
Size: 1.78 KB
Versions: 252
Compression:
Stored size: 1.78 KB
Contents
// Custom Vanilla JS to highlight the user's current location in the navigation bar and the sub-nav navigation bar
function setActive(thisLink, linkText) {
let thisAnchor = thisLink.querySelector('a');
thisLink.classList.add('active');
thisAnchor.insertAdjacentHTML('beforeend', ' <span class="sr-only">(current)</span>');
}
function highlightSubNav(pathname) {
const subNavItems = document.querySelectorAll('.js-sub-nav-item');
for ( let link of subNavItems) {
const anchor = link.querySelector('a');
const href = anchor.getAttribute('href').replace(/\.\.\//g, '');
const linkText = anchor.textContent;
const urlMatchesLink = pathname.indexOf(href) !== -1;
urlMatchesLink ?
setActive(link, linkText)
: null;
}
}
function highlightNav() {
const pathname = window.location.pathname;
const locationIsContactHash = window.location.hash === '#contact';
const locationIsHome = window.location.pathname === '/';
document.getElementById('subNavNav') ?
highlightSubNav(pathname)
: null;
const navigationItems = document.querySelectorAll('.js-nav-item');
for ( let link of navigationItems ) {
const linkAnchor = link.querySelector('a');
const linkHrefValue = linkAnchor.getAttribute('href').replace(/\.\.\//g, '');
const linkTextValue = linkAnchor.textContent;
const linkIsHome = linkTextValue.toLowerCase() === 'home';
const urlMatchesLink = pathname.indexOf(linkHrefValue) !== -1;
if ( locationIsHome || locationIsContactHash ) {
linkIsHome ? setActive(link, linkTextValue) : null;
} else {
urlMatchesLink && !linkIsHome ? setActive(link, linkTextValue) : null;
}
}
}
//
// USEAGE:
//
// document.addEventListener('DOMContentLoaded', function() {
// highlightNav();
// });
//
export default highlightNav;
Version data entries
252 entries across 252 versions & 2 rubygems