123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- /**
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/2815083
- * @preserve
- **/
- (function (Drupal, once, tabbable) {
- function isNavOpen(navWrapper) {
- return navWrapper.classList.contains('is-active');
- }
- function toggleNav(props, state) {
- var value = !!state;
- props.navButton.setAttribute('aria-expanded', value);
- if (value) {
- props.body.classList.add('is-overlay-active');
- props.body.classList.add('is-fixed');
- props.navWrapper.classList.add('is-active');
- } else {
- props.body.classList.remove('is-overlay-active');
- props.body.classList.remove('is-fixed');
- props.navWrapper.classList.remove('is-active');
- }
- }
- function init(props) {
- props.navButton.setAttribute('aria-controls', props.navWrapperId);
- props.navButton.setAttribute('aria-expanded', 'false');
- props.navButton.addEventListener('click', function () {
- toggleNav(props, !isNavOpen(props.navWrapper));
- });
- document.addEventListener('keyup', function (e) {
- if (e.key === 'Escape' || e.key === 'Esc') {
- if (props.olivero.areAnySubNavsOpen()) {
- props.olivero.closeAllSubNav();
- } else {
- toggleNav(props, false);
- }
- }
- });
- props.overlay.addEventListener('click', function () {
- toggleNav(props, false);
- });
- props.overlay.addEventListener('touchstart', function () {
- toggleNav(props, false);
- });
- props.header.addEventListener('keydown', function (e) {
- if (e.key === 'Tab' && isNavOpen(props.navWrapper)) {
- var tabbableNavElements = tabbable.tabbable(props.navWrapper);
- tabbableNavElements.unshift(props.navButton);
- var firstTabbableEl = tabbableNavElements[0];
- var lastTabbableEl = tabbableNavElements[tabbableNavElements.length - 1];
- if (e.shiftKey) {
- if (document.activeElement === firstTabbableEl && !props.olivero.isDesktopNav()) {
- lastTabbableEl.focus();
- e.preventDefault();
- }
- } else if (document.activeElement === lastTabbableEl && !props.olivero.isDesktopNav()) {
- firstTabbableEl.focus();
- e.preventDefault();
- }
- }
- });
- window.addEventListener('resize', function () {
- if (props.olivero.isDesktopNav()) {
- toggleNav(props, false);
- props.body.classList.remove('is-overlay-active');
- props.body.classList.remove('is-fixed');
- }
- Drupal.olivero.closeAllSubNav();
- });
- props.navWrapper.addEventListener('click', function (e) {
- if (e.target.matches("[href*=\"".concat(window.location.pathname, "#\"], [href*=\"").concat(window.location.pathname, "#\"] *, [href^=\"#\"], [href^=\"#\"] *"))) {
- toggleNav(props, false);
- }
- });
- }
- Drupal.behaviors.oliveroNavigation = {
- attach: function attach(context) {
- var headerId = 'header';
- var header = once('navigation', "#".concat(headerId), context).shift();
- var navWrapperId = 'header-nav';
- if (header) {
- var navWrapper = header.querySelector("#".concat(navWrapperId));
- var olivero = Drupal.olivero;
- var navButton = context.querySelector('[data-drupal-selector="mobile-nav-button"]');
- var body = document.body;
- var overlay = context.querySelector('[data-drupal-selector="header-nav-overlay"]');
- init({
- olivero: olivero,
- header: header,
- navWrapperId: navWrapperId,
- navWrapper: navWrapper,
- navButton: navButton,
- body: body,
- overlay: overlay
- });
- }
- }
- };
- })(Drupal, once, tabbable);
|