https://www.tac-mobilites.fr/themes/ratpdev/sergio/assets/js/menu-dropdown.js?tlglfy

1/**
2 * @file menu-dropdown.js
3 *
4 * JS File to init dropdown behavior on menu.
5 */
6(function (Drupal, drupalSettings, once, debounce) {
7
8  /**
9   * @Behavior Force open dropdown on desktop (if mobile only).
10  */
11  Drupal.behaviors.exploreMenuDropdownMobile = {
12    selector: '[data-menu-dropdown]',
13    onceName: 'explore-menu-dropdown',
14    attach(context) {
15
16      const autoCloseMenuDropdown = () => {
17        const breakpoints = drupalSettings?.rdds?.breakpoints || {};
18        const mq = breakpoints['rdds.standard'] || '(min-width: 720px)';
19        const isDesktop = window.matchMedia(mq).matches;
20
21        document.querySelectorAll(this.selector).forEach(function (menu) {
22          menu.setAttribute('data-menu-dropdown', isDesktop ? 'close' : 'open')
23          menu.querySelectorAll('[data-toggle]').forEach(function (btn) {
24            if (isDesktop) {
25              btn.setAttribute('data-disabled', true);
26              btn.setAttribute('role', 'presentation');
27              btn.setAttribute('tabindex', -1);
28            }
29            else {
30              btn.removeAttribute('data-disabled');
31              btn.setAttribute('role', 'button');
32              btn.setAttribute('tabindex', 0);
33            }
34
35            // Open with keyboard.
36            once('explore-menu-dropdown-button', btn, context).forEach((el) => {
37              el.addEventListener('keydown',
38                (event) => {
39                 const key = event.key;
40                 if (key === 'Enter' || key === ' ') {
41                  // Prevent page scroll on Space.
42                  event.preventDefault();
43                  el.click();
44                 }
45             })
46            });
47          });
48
49        });
50      }
51
52      once(this.onceName, context.querySelectorAll(this.selector), context).forEach(function (el) {
53        // Open/close on component load (e.g. on window load).
54        autoCloseMenuDropdown();
55        // Open/close dropdown menu on window resize if at least one menu dropdown on the page.
56        window.addEventListener('resize', debounce(autoCloseMenuDropdown, 100));
57      });
58    },
59    detach: function detach(context, settings, trigger) {
60      if (trigger === "unload") {
61        once.remove(this.onceName, context.querySelectorAll(this.selector));
62      }
63    },
64  };
65
66})(Drupal, drupalSettings, once, Drupal.debounce);