// Utilities
const getParents = (elem, selector) => {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Set up a parent array
var parents = [];
// Push each parent element to the array
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if (selector) {
if (elem.matches(selector)) {
parents.push(elem);
}
continue;
}
parents.push(elem);
}
// Return our parent array
return parents;
};
export const uolSectionNavToggle = () => {
const sectionNavs = document.querySelectorAll('.uol-section-nav')
sectionNavs.forEach((sectionNav) => {
const sectionNavList = sectionNav.querySelector('.uol-section-nav__list')
const sectionHeading = sectionNav.querySelector('.uol-section-nav__title')
const sectionTitle = sectionHeading.querySelector('.uol-section-nav__title__text').innerText
const button = document.createElement('button')
button.type = 'button'
button.setAttribute('aria-expanded', false)
button.classList.add('uol-section-nav__toggle')
button.innerHTML = `${sectionTitle}`
sectionHeading.appendChild(button)
button.onclick = () => {
let expanded = button.getAttribute('aria-expanded') === 'true' || false
button.setAttribute('aria-expanded', !expanded)
sectionNavList.classList.toggle('uol-section-nav__list--expanded')
// On close, close any child lists
if (expanded) {
sectionNavList.querySelectorAll('ul button').forEach(
subButton => subButton.setAttribute('aria-expanded', 'false')
)
}
}
// Close on escape
window.addEventListener("keydown", function(event) {
if (event.key === 'Escape' || event.keyCode === 27) {
// Toggle button
button.setAttribute('aria-expanded', 'false')
// Close nav
sectionNavList.classList.remove('uol-section-nav__list--expanded')
// Close children - if button visible ie small screen
if (getComputedStyle(button).display !== 'none' ) {
sectionNavList.querySelectorAll('ul button').forEach(
subButton => subButton.setAttribute('aria-expanded', 'false')
)
}
}
}, true);
})
}
export const uolSectionNavTree = () => {
const svgChevronRight = ``
const trees = document.querySelectorAll('.uol-section-nav')
trees.forEach( (tree) => {
const branches = tree.querySelectorAll('.uol-section-nav__item--parent')
branches.forEach((branch) => {
const label = branch.querySelector('.uol-section-nav__item__label')
label.outerHTML = `
`
// Open parents if child is aria-current
const currentPage = branch.querySelector('[aria-current="page"]')
if (currentPage) {
const currentPageParents = getParents(currentPage, '.uol-section-nav__item--parent');
currentPageParents.forEach( (parent) => {
const parentButton = parent.querySelector('.uol-section-nav__branch-toggle')
if (parentButton) {
parentButton.setAttribute('aria-expanded', 'true')
}
})
}
const button = branch.querySelector('button')
button.onclick = () => {
let expanded = button.getAttribute('aria-expanded') === 'true' || false
button.setAttribute('aria-expanded', !expanded)
// On close, close any child lists
if (expanded) {
branch.querySelectorAll('ul button').forEach(
subButton => subButton.setAttribute('aria-expanded', 'false')
)
}
}
})
})
}
export const uolSectionNavMove = () => {
const sectionNavs = document.querySelectorAll('.uol-section-nav')
sectionNavs.forEach((sectionNav) => {
const main = document.getElementById('main')
const uolHeader = document.querySelector('.uol-header')
const sectionNavContainer = document.querySelector('.uol-side-nav-container')
if (main && sectionNavContainer) {
window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) {
sectionNavContainer.classList.add('uol-side-nav-container--populated')
sectionNavContainer.insertAdjacentElement('afterbegin', sectionNav)
} else {
sectionNavContainer.classList.remove('uol-side-nav-container--populated')
uolHeader.insertAdjacentElement('afterend', sectionNav)
}
})
}
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents')
evt.initUIEvent('resize', true, false, window, 0)
window.dispatchEvent(evt)
}
})
}