https://brincdrones.com/wp-content/themes/bdrones/assets/js/layout-new/dropdownModule.js?ver=1775053222

1const dropdownModule = (function () {
2  const mediaQuery = window.matchMedia('(min-width: 1025px)');
3  let subMenus;
4
5  function init() {
6    subMenus = document.querySelectorAll('.sub-menu .sub-menu');
7
8    subMenus.forEach(function (subMenu) {
9      const menuItemsWithDataImage = subMenu.querySelectorAll('.menu-item[data-image]');
10      if (menuItemsWithDataImage.length === 0) {
11        return;
12      }
13
14      const linkImgDiv = document.createElement('div');
15      linkImgDiv.classList.add('header-dropdown__img-area');
16      subMenu.parentNode.insertBefore(linkImgDiv, subMenu);
17
18      const menuItems = subMenu.querySelectorAll('.menu-item');
19      let revertTimer = null;
20
21      menuItems.forEach(function (menuItem, index) {
22        const dataImage = menuItem.getAttribute('data-image');
23        const img = document.createElement('img');
24        img.src = dataImage;
25
26        const link = menuItem.querySelector('a');
27        if (link) {
28          const href = link.getAttribute('href');
29          const linkText = link.textContent.trim().toLowerCase();
30          const imgLink = document.createElement('a');
31          imgLink.classList.add('header-dropdown__img-link');
32          imgLink.href = href;
33          imgLink.appendChild(img);
34          linkImgDiv.appendChild(imgLink);
35
36          if (index === 0) {
37            toggleImgActiveClass(0, true, subMenu.closest('li'));
38          }
39
40          if (!href || href === '#' || href.trim() === '/' || href.trim() === '') {
41            menuItem.classList.add('is-empty-item');
42          }
43
44          if (linkText === 'default image') {
45            menuItem.classList.add('is-empty-item');
46          }
47
48          menuItem.addEventListener('mouseover', function () {
49            clearTimeout(revertTimer);
50            toggleHeaderClass(true);
51            toggleAllImgActiveClass(false, subMenu.closest('li'));
52            toggleImgActiveClass(index, true, subMenu.closest('li'));
53          });
54
55          menuItem.addEventListener('mouseout', function () {
56            toggleHeaderClass(false);
57            revertTimer = setTimeout(function () {
58              toggleAllImgActiveClass(false, subMenu.closest('li'));
59              toggleImgActiveClass(0, true, subMenu.closest('li'));
60            }, 150);
61          });
62        }
63      });
64    });
65
66    // Call positionSubMenu initially
67    positionSubMenu();
68  }
69
70  function toggleHeaderClass(addClass) {
71    const header = document.querySelector('.header');
72
73    if (addClass) {
74      header.classList.add('is-sub-menu-opened');
75    } else {
76      header.classList.remove('is-sub-menu-opened');
77    }
78  }
79
80  function toggleAllImgActiveClass(addClass, parent) {
81    const imgLinks = parent.querySelectorAll('.header-dropdown__img-link');
82
83    imgLinks.forEach(function (imgLink) {
84      if (addClass) {
85        imgLink.classList.add('is-img-active');
86      } else {
87        imgLink.classList.remove('is-img-active');
88      }
89    });
90  }
91
92  function toggleImgActiveClass(index, addClass, parent) {
93    const imgLinks = parent.querySelectorAll('.header-dropdown__img-link');
94
95    if (index < imgLinks.length) {
96      const imgLink = imgLinks[index];
97
98      if (imgLink) {
99        if (addClass) {
100          imgLink.classList.add('is-img-active');
101        } else {
102          imgLink.classList.remove('is-img-active');
103        }
104      }
105    }
106  }
107
108  function positionSubMenu() {
109    if (mediaQuery.matches) {
110      let parentLinks = document.querySelectorAll('.js-main-nav > li');
111
112      parentLinks.forEach(function (elem) {
113        let dropdown = elem.querySelector('.header-dropdown');
114        let subMenu = dropdown.querySelector('.sub-menu.megamenu-disabled');
115
116        if (subMenu !== null) {
117          let parentLinkRect = elem.getBoundingClientRect();
118          let rightOffset = window.innerWidth - parentLinkRect.left;
119          let subMenuWidth = subMenu.offsetWidth;
120          let dropdownMdOffset = getComputedStyle(document.documentElement).getPropertyValue('--dropdown-md-offset');
121
122          dropdownMdOffset = parseInt(dropdownMdOffset);
123          subMenu.style.marginRight = `${rightOffset - subMenuWidth - dropdownMdOffset}px`;
124        }
125      });
126    }
127  }
128
129  // Recalculate position on window resize
130  window.addEventListener('resize', function () {
131    positionSubMenu();
132  });
133
134  return {
135    init: init
136  };
137})();
138
139const MenuModule = (function () {
140  let menuItems = document.querySelectorAll('.header__nav-menu > .menu-item');
141  let header = document.querySelector('.header');
142  let closeHeaderDropdownBtn = document.querySelector('.js-close-header-dropdown');
143
144  function toggleDropdown(event) {
145    event.preventDefault();
146    let menuItem = this.closest('.menu-item');
147    let dropdown = menuItem.querySelector('.header-dropdown');

148    let isVisible = menuItem.classList.contains('is-drop-visible');
149
150    if (dropdown.querySelector('.sub-menu')) {
151      if (isVisible) {
152        menuItem.classList.remove('is-drop-visible');
153      } else {
154        menuItem.classList.add('is-drop-visible');
155      }
156    }
157  }
158
159  function handleHeaderHover() {
160    header.classList.add('is-menu-opened');
161  }
162
163  function handleHeaderLeave() {
164    header.classList.remove('is-menu-opened');
165  }
166
167  function closeActiveDropdown() {
168    let activeItem = document.querySelector('.header__nav-menu > .menu-item.is-drop-visible');
169    if (activeItem) {
170      activeItem.classList.remove('is-drop-visible');
171    }
172  }
173
174  return {
175    init: function () {
176      menuItems.forEach((item) => {
177        let link = item.querySelector('a');
178
179        link.addEventListener('click', toggleDropdown);
180
181        item.addEventListener('mouseenter', handleHeaderHover);
182        item.addEventListener('mouseleave', handleHeaderLeave);
183      });
184
185      if (closeHeaderDropdownBtn) {
186        closeHeaderDropdownBtn.addEventListener('click', closeActiveDropdown);
187      }
188    }
189  };
190})();
191
192document.addEventListener('DOMContentLoaded', function () {
193  dropdownModule.init();
194  MenuModule.init();
195});