https://company.onefootball.com/js/navigation.js

1document.addEventListener('DOMContentLoaded', function () {
2  const header = document.getElementById('navTop');
3  if (!header) return;
4
5  const navMenu = header.querySelector('nav');
6  const signInButton = header.querySelector('.ctas-sign a');
7  const tooltip = header.querySelector('.tooltip');
8  const tooltipBack = tooltip ? tooltip.querySelector('.tooltip-back') : null;
9  const burger = document.getElementById('burger');
10
11  function isTooltipShown() {
12    return tooltip && tooltip.hasAttribute('data-show');
13  }
14
15  function openTooltip() {
16    if (!tooltip) return;
17    tooltip.setAttribute('data-show', '');
18    if (signInButton) signInButton.setAttribute('aria-expanded', 'true');
19    tooltip.setAttribute('aria-hidden', 'false');
20  }
21
22  function closeTooltip() {
23    if (!tooltip) return;
24    tooltip.removeAttribute('data-show');
25    if (signInButton) signInButton.setAttribute('aria-expanded', 'false');
26    tooltip.setAttribute('aria-hidden', 'true');
27  }
28
29  function isNavOpen() {
30    return navMenu && navMenu.getAttribute('data-s') === 'true';
31  }
32
33  function openNav() {
34    if (!navMenu) return;
35    navMenu.setAttribute('data-s', 'true');
36    navMenu.setAttribute('aria-hidden', 'false');
37    if (burger) {
38      burger.classList.add('active');
39      burger.setAttribute('aria-expanded', 'true');
40    }
41    document.body.classList.add('noflow');
42    // close tooltip when opening mobile nav
43    closeTooltip();
44  }
45
46  function closeNav() {
47    if (!navMenu) return;
48    navMenu.setAttribute('data-s', 'false');
49    navMenu.setAttribute('aria-hidden', 'true');
50    if (burger) {
51      burger.classList.remove('active');
52      burger.setAttribute('aria-expanded', 'false');
53    }
54    document.body.classList.remove('noflow');
55  }
56
57  if (signInButton) {
58    signInButton.setAttribute('role', 'button');
59    signInButton.setAttribute('aria-expanded', 'false');
60    signInButton.addEventListener('click', function (ev) {
61      ev.preventDefault();
62      if (isTooltipShown()) closeTooltip(); else openTooltip();
63    });
64  }
65
66  if (burger) {
67    burger.setAttribute('role', 'button');
68    burger.setAttribute('aria-expanded', 'false');
69    burger.addEventListener('click', function (ev) {
70      ev.preventDefault();
71      if (isNavOpen()) closeNav(); else openNav();
72    });
73  }
74
75  if (tooltipBack) {
76    tooltipBack.addEventListener('click', function () {
77      closeTooltip();
78    });
79  }
80
81  // close on escape (both tooltip and nav)
82  document.addEventListener('keydown', function (ev) {
83    if (ev.key === 'Escape') {
84      if (isTooltipShown()) closeTooltip();
85      if (isNavOpen()) closeNav();
86    }
87  });
88
89  // mobile sub-menu toggle
90  const dropdownButtons = header.querySelectorAll('li.has-dropdown > button');
91  dropdownButtons.forEach(function (btn) {
92    btn.addEventListener('click', function (ev) {
93      if (window.innerWidth <= 830) {
94        ev.preventDefault();
95        const li = btn.closest('li.has-dropdown');
96        const isOpen = li.classList.contains('open');
97        // close all other open dropdowns
98        header.querySelectorAll('li.has-dropdown.open').forEach(function (el) {
99          el.classList.remove('open');
100          el.querySelector('button').setAttribute('aria-expanded', 'false');
101        });
102        if (!isOpen) {
103          li.classList.add('open');
104          btn.setAttribute('aria-expanded', 'true');
105        }
106      }
107    });
108  });
109
110  // close when clicking outside nav or tooltip
111  document.addEventListener('click', function (ev) {
112    // close tooltip when clicking outside header
113    if (!header.contains(ev.target) && isTooltipShown()) closeTooltip();
114
115    // close mobile nav when clicking outside navMenu and burger
116    if (isNavOpen()) {
117      const clickedInsideNav = navMenu && navMenu.contains(ev.target);
118      const clickedBurger = burger && burger.contains(ev.target);
119      if (!clickedInsideNav && !clickedBurger) closeNav();
120    }
121  });
122});