105 lines
4.4 KiB
JavaScript
105 lines
4.4 KiB
JavaScript
/**
|
|
* DO NOT EDIT THIS FILE.
|
|
* See the following change record for more information,
|
|
* https://www.drupal.org/node/2815083
|
|
* @preserve
|
|
**/
|
|
(function (Drupal) {
|
|
var isDesktopNav = Drupal.olivero.isDesktopNav;
|
|
var secondLevelNavMenus = document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]');
|
|
function toggleSubNav(topLevelMenuItem, toState) {
|
|
var buttonSelector = '[data-drupal-selector="primary-nav-submenu-toggle-button"]';
|
|
var button = topLevelMenuItem.querySelector(buttonSelector);
|
|
var state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
|
|
if (state) {
|
|
if (isDesktopNav()) {
|
|
secondLevelNavMenus.forEach(function (el) {
|
|
el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
|
|
el.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
|
|
el.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
|
|
});
|
|
}
|
|
button.setAttribute('aria-expanded', 'true');
|
|
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.add('is-active-menu-parent');
|
|
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.add('is-active-menu-parent');
|
|
} else {
|
|
button.setAttribute('aria-expanded', 'false');
|
|
topLevelMenuItem.classList.remove('is-touch-event');
|
|
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
|
|
topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
|
|
}
|
|
}
|
|
Drupal.olivero.toggleSubNav = toggleSubNav;
|
|
function handleBlur(e) {
|
|
if (!Drupal.olivero.isDesktopNav()) return;
|
|
setTimeout(function () {
|
|
var menuParentItem = e.target.closest('[data-drupal-selector="primary-nav-menu-item-has-children"]');
|
|
if (!menuParentItem.contains(document.activeElement)) {
|
|
toggleSubNav(menuParentItem, false);
|
|
}
|
|
}, 200);
|
|
}
|
|
secondLevelNavMenus.forEach(function (el) {
|
|
var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
|
|
button.removeAttribute('aria-hidden');
|
|
button.removeAttribute('tabindex');
|
|
el.addEventListener('touchstart', function () {
|
|
el.classList.add('is-touch-event');
|
|
}, {
|
|
passive: true
|
|
});
|
|
el.addEventListener('mouseover', function () {
|
|
if (isDesktopNav() && !el.classList.contains('is-touch-event')) {
|
|
el.classList.add('is-active-mouseover-event');
|
|
toggleSubNav(el, true);
|
|
setTimeout(function () {
|
|
el.classList.remove('is-active-mouseover-event');
|
|
}, 500);
|
|
}
|
|
});
|
|
button.addEventListener('click', function () {
|
|
if (!el.classList.contains('is-active-mouseover-event')) {
|
|
toggleSubNav(el);
|
|
}
|
|
});
|
|
el.addEventListener('mouseout', function () {
|
|
if (isDesktopNav() && !document.activeElement.matches('[aria-expanded="true"], .is-active-menu-parent *')) {
|
|
toggleSubNav(el, false);
|
|
}
|
|
});
|
|
el.addEventListener('blur', handleBlur, true);
|
|
});
|
|
function closeAllSubNav() {
|
|
secondLevelNavMenus.forEach(function (el) {
|
|
if (el.contains(document.activeElement)) {
|
|
el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]').focus();
|
|
}
|
|
toggleSubNav(el, false);
|
|
});
|
|
}
|
|
Drupal.olivero.closeAllSubNav = closeAllSubNav;
|
|
function areAnySubNavsOpen() {
|
|
var subNavsAreOpen = false;
|
|
secondLevelNavMenus.forEach(function (el) {
|
|
var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
|
|
var state = button.getAttribute('aria-expanded') === 'true';
|
|
if (state) {
|
|
subNavsAreOpen = true;
|
|
}
|
|
});
|
|
return subNavsAreOpen;
|
|
}
|
|
Drupal.olivero.areAnySubNavsOpen = areAnySubNavsOpen;
|
|
document.addEventListener('keyup', function (e) {
|
|
if (e.key === 'Escape' || e.key === 'Esc') {
|
|
if (isDesktopNav()) closeAllSubNav();
|
|
}
|
|
});
|
|
document.addEventListener('touchstart', function (e) {
|
|
if (areAnySubNavsOpen() && !e.target.matches('[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *')) {
|
|
closeAllSubNav();
|
|
}
|
|
}, {
|
|
passive: true
|
|
});
|
|
})(Drupal); |