https://www.kielibuusti.fi/themes/custom/aalto_base/js/aalto_menu.js?tltw44

1/* eslint-disable func-names */
2(function(Drupal) {
3  var getMenus = function(extraSelector) {
4    var selector = extraSelector
5      ? extraSelector.concat('.js-menu-container')
6      : '.js-menu-container';
7    return [].slice.call(document.querySelectorAll(selector)); // Needs to be an array instead of NodeList for forEach to work in old Edge and IE 11.
8  };
9
10  var getMenuToggleButton = function(menu) {
11    return menu.querySelector('.js-menu-toggle');
12  };
13
14  // Check if menu has data attribute data-mq which holds a media query where things should be done.
15  var checkMediaQueryMatch = function(menu) {
16    var mediaQuery = menu.dataset.mq;
17    return mediaQuery ? Drupal.behaviors.aalto_utils.isMediaQueryMatch(mediaQuery) : true;
18  };
19
20  // At least for now, in mobile there can be several dropdown menus open at the same time. So, we close them all when screen width changes to desktop version where only one at a time can be open.
21  // This may change when an off canvas mobile submenu is done, so need for this function may be temporary.
22  var closeMenusOnResize = Drupal.behaviors.aalto_utils.debounce(function() {
23    var menus = getMenus('.aalto-dropdown_container--nav');
24
25    menus.forEach(function(menu) {
26      var mediaQuery = menu.dataset.mq;
27      if (mediaQuery) {
28        window.matchMedia(mediaQuery).onchange = function() {
29          var button = getMenuToggleButton(menu);
30          if (checkMediaQueryMatch(menu) === true) {
31            Drupal.behaviors.aalto_utils.toggleMenu(button, true);
32          }
33        };
34      }
35    });
36  }, 50);
37
38  function handleMenuKeyPress(e) {
39    var menu = e.currentTarget;
40    var doHandling = checkMediaQueryMatch(menu);
41    var button = getMenuToggleButton(menu);
42    var expanded = Drupal.behaviors.aalto_utils.isExpanded(button);
43
44    if (doHandling === true) {
45      if (expanded === true && Drupal.behaviors.aalto_utils.isEscPressed(e) === true) {
46        e.preventDefault();
47        e.stopPropagation();
48        Drupal.behaviors.aalto_utils.toggleMenu(button, true);
49        button.focus();
50      }
51      if (e.key === 'Tab' && expanded === true) {
52        Drupal.behaviors.aalto_utils.loopWithTab(e);
53      }
54    }
55  }
56
57  function closeAllMenusOnOutsideClick(e) {
58    var menuContainers = getMenus();
59    menuContainers.forEach(function(menu) {
60      var isClickInside = menu.contains(e.target);
61      var toggleButton = getMenuToggleButton(menu);
62      if (checkMediaQueryMatch(menu) === true) {
63        if (isClickInside === false) {
64          Drupal.behaviors.aalto_utils.toggleMenu(toggleButton, true);
65        }
66      }
67    });
68  }
69
70  function toggleMenu(e) {
71    var toggleButton = e.currentTarget;
72    var expanded = Drupal.behaviors.aalto_utils.isExpanded(toggleButton);
73    Drupal.behaviors.aalto_utils.toggleMenu(toggleButton, expanded);
74  }
75
76  function closeMenu(e) {
77    var menu = e.currentTarget.closest('.js-menu-container');
78    var toggleButton = getMenuToggleButton(menu);
79    Drupal.behaviors.aalto_utils.toggleMenu(toggleButton, true);
80  }
81
82  Drupal.behaviors.aalto_menu = {
83    attach: function attach(context) {
84      once('aalto_menu', 'html', context).forEach(function() {
85        var menuContainers = getMenus();
86        var menuToggleButtons = [].slice.call(document.querySelectorAll('.js-menu-toggle')); // Needs to be an array instead of NodeList for forEach to work in old Edge and IE 11.
87        var menuCloseButtons = [].slice.call(document.querySelectorAll('.js-menu-close')); // Needs to be an array instead of NodeList for forEach to work in old Edge and IE 11.
88
89        if (menuContainers.length) {
90          window.addEventListener('resize', closeMenusOnResize);
91          document.addEventListener('click', closeAllMenusOnOutsideClick);
92          menuContainers.forEach(function(menu) {
93            Drupal.behaviors.aalto_utils.setupMenuKeys(menu, handleMenuKeyPress);
94          });
95        }
96
97        if (menuToggleButtons.length) {
98          menuToggleButtons.forEach(function(button) {
99            button.addEventListener('click', toggleMenu);
100          });
101        }
102
103        if (menuCloseButtons.length) {
104          menuCloseButtons.forEach(function(button) {
105            button.addEventListener('click', closeMenu);
106          });
107        }
108      });
109    },
110  };
111})(Drupal);