navigation.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function (Drupal, once, tabbable) {
  8. function isNavOpen(navWrapper) {
  9. return navWrapper.classList.contains('is-active');
  10. }
  11. function toggleNav(props, state) {
  12. var value = !!state;
  13. props.navButton.setAttribute('aria-expanded', value);
  14. if (value) {
  15. props.body.classList.add('is-overlay-active');
  16. props.body.classList.add('is-fixed');
  17. props.navWrapper.classList.add('is-active');
  18. } else {
  19. props.body.classList.remove('is-overlay-active');
  20. props.body.classList.remove('is-fixed');
  21. props.navWrapper.classList.remove('is-active');
  22. }
  23. }
  24. function init(props) {
  25. props.navButton.setAttribute('aria-controls', props.navWrapperId);
  26. props.navButton.setAttribute('aria-expanded', 'false');
  27. props.navButton.addEventListener('click', function () {
  28. toggleNav(props, !isNavOpen(props.navWrapper));
  29. });
  30. document.addEventListener('keyup', function (e) {
  31. if (e.key === 'Escape' || e.key === 'Esc') {
  32. if (props.olivero.areAnySubNavsOpen()) {
  33. props.olivero.closeAllSubNav();
  34. } else {
  35. toggleNav(props, false);
  36. }
  37. }
  38. });
  39. props.overlay.addEventListener('click', function () {
  40. toggleNav(props, false);
  41. });
  42. props.overlay.addEventListener('touchstart', function () {
  43. toggleNav(props, false);
  44. });
  45. props.header.addEventListener('keydown', function (e) {
  46. if (e.key === 'Tab' && isNavOpen(props.navWrapper)) {
  47. var tabbableNavElements = tabbable.tabbable(props.navWrapper);
  48. tabbableNavElements.unshift(props.navButton);
  49. var firstTabbableEl = tabbableNavElements[0];
  50. var lastTabbableEl = tabbableNavElements[tabbableNavElements.length - 1];
  51. if (e.shiftKey) {
  52. if (document.activeElement === firstTabbableEl && !props.olivero.isDesktopNav()) {
  53. lastTabbableEl.focus();
  54. e.preventDefault();
  55. }
  56. } else if (document.activeElement === lastTabbableEl && !props.olivero.isDesktopNav()) {
  57. firstTabbableEl.focus();
  58. e.preventDefault();
  59. }
  60. }
  61. });
  62. window.addEventListener('resize', function () {
  63. if (props.olivero.isDesktopNav()) {
  64. toggleNav(props, false);
  65. props.body.classList.remove('is-overlay-active');
  66. props.body.classList.remove('is-fixed');
  67. }
  68. Drupal.olivero.closeAllSubNav();
  69. });
  70. props.navWrapper.addEventListener('click', function (e) {
  71. if (e.target.matches("[href*=\"".concat(window.location.pathname, "#\"], [href*=\"").concat(window.location.pathname, "#\"] *, [href^=\"#\"], [href^=\"#\"] *"))) {
  72. toggleNav(props, false);
  73. }
  74. });
  75. }
  76. Drupal.behaviors.oliveroNavigation = {
  77. attach: function attach(context) {
  78. var headerId = 'header';
  79. var header = once('navigation', "#".concat(headerId), context).shift();
  80. var navWrapperId = 'header-nav';
  81. if (header) {
  82. var navWrapper = header.querySelector("#".concat(navWrapperId));
  83. var olivero = Drupal.olivero;
  84. var navButton = context.querySelector('[data-drupal-selector="mobile-nav-button"]');
  85. var body = document.body;
  86. var overlay = context.querySelector('[data-drupal-selector="header-nav-overlay"]');
  87. init({
  88. olivero: olivero,
  89. header: header,
  90. navWrapperId: navWrapperId,
  91. navWrapper: navWrapper,
  92. navButton: navButton,
  93. body: body,
  94. overlay: overlay
  95. });
  96. }
  97. }
  98. };
  99. })(Drupal, once, tabbable);