https://my.nycitycenter.org/bundles/madencc/js/global-navigation.js

1'use strict';
2
3const linkSelector = '.global-nav__link';
4const itemSelector = '.global-nav__item';
5const itemListSelector = '.global-nav__child';
6const backSelector = '.global-nav__item--back';
7const itemActiveClass = 'global-nav__item--active';
8const parentActiveClass = 'is-active';
9const menuActiveClass = 'nav-open-inverted';
10const menuBtnId = 'nav-btn';
11const menuFeature = '.js-menu-feature';
12const menuToggleSelector = 'button.global-header__menu';
13const toggledClass = 'is-toggled';
14const desktopQuery = '(min-width: 62.5em)';
15
16export function calculateFeatureHeight() {
17  let featureHeight = 20;
18
19  const menuFeatureItem = document.querySelector(menuFeature);
20
21  if (!menuFeatureItem) {
22    return false;
23  }
24
25  featureHeight = menuFeatureItem.getBoundingClientRect().height;
26
27  document.documentElement.style.setProperty('--navigation-feature-height', `${featureHeight}px`);
28
29  window.addEventListener('resize', () => {
30    featureHeight = menuFeatureItem.getBoundingClientRect().height;
31    document.documentElement.style.setProperty('--navigation-feature-height', `${featureHeight}px`);
32  });
33}
34
35export function init() {
36  const links = document.querySelectorAll(linkSelector);
37  const backLinks = document.querySelectorAll(backSelector);
38  const menuBtn = document.getElementById(menuBtnId);
39
40  closeMenuOnDesktop();
41
42  if (!links.length) {
43    return;
44  }
45
46  links.forEach(link => {
47    if (link.nextElementSibling) {
48      link.nextElementSibling.addEventListener('click', () => process(link));
49    }
50  });
51
52  backLinks.forEach(backLink => {
53    backLink.addEventListener('click', () => backProcess(backLink));
54  });
55
56  if(menuBtn) {
57    menuBtn.addEventListener('click', () => resetMenu(links));
58  }
59
60  process_active_menu();
61
62  calculateFeatureHeight();
63}
64
65function resetMenu(links) {
66  setTimeout( () => {
67    links.forEach(link => {
68      link.closest('ul').querySelectorAll(itemSelector).removeClass(itemActiveClass);
69      link.closest('ul').classList.remove(parentActiveClass);
70      document.body.classList.remove(menuActiveClass);
71    });
72  }, 250);
73}
74
75function closeMenuOnDesktop() {
76  const menuToggle = document.querySelector(menuToggleSelector);
77
78  if (!menuToggle) {
79    return;
80  }
81
82  const desktop = window.matchMedia(desktopQuery);
83
84  desktop.addEventListener('change', () => {
85    if (!desktop.matches || !menuToggle.classList.contains(toggledClass)) {
86      return;
87    }
88
89    menuToggle.click();
90  });
91}
92
93function process(link) {
94  // link.closest('ul').querySelectorAll(itemSelector).removeClass(itemActiveClass);
95  link.closest('li').classList.add(itemActiveClass);
96
97  document.body.classList.add(menuActiveClass);
98
99  if (link.nextElementSibling) {
100    link.closest('ul').classList.add(parentActiveClass);
101    link.nextElementSibling.nextElementSibling.classList.remove(parentActiveClass);
102  } else {
103    link.closest('ul').classList.remove(parentActiveClass);
104  }
105}
106
107function backProcess(backLink) {
108  backLink.closest('.global-nav__item.has-child').classList.remove(itemActiveClass);
109  backLink.closest('.global-nav__item.has-child').closest('ul').classList.remove(parentActiveClass);
110
111  if(backLink.parentElement.classList.contains('global-nav--level-1')) {
112    document.body.classList.remove(menuActiveClass);
113  }
114}
115
116function process_active_menu () {
117  const link = location.href.replace(location.origin, '');
118  const linkObj = document.querySelector(`a.global-nav__link[href='${link}']`);
119  if (!linkObj) return;
120
121  linkObj.classList.add('active');
122
123  let currentUL = linkObj.closest(itemListSelector);
124  let upperLI = currentUL ? currentUL.closest(itemSelector) : null;
125
126  while (currentUL && upperLI) {
127    upperLI.classList.add(itemActiveClass);
128    upperLI.parentNode.classList.add(parentActiveClass);
129
130    currentUL = upperLI.closest(itemListSelector);
131    upperLI = currentUL ? currentUL.closest(itemSelector) : null;
132  }
133
134  // Handle the desktop nav active
135  const desktopLinkObj = document.querySelector(`a.desktop-navigation__link[href='${link}']`);
136  if (desktopLinkObj) {
137    const parentLi = desktopLinkObj.closest('.desktop-navigation__item');
138
139    if (parentLi) {
140      parentLi.classList.add('desktop-navigation__item--active');
141    }
142
143    desktopLinkObj.classList.add('active');
144  }
145}