https://sdccd.edu/_resources/js/topnav.js

1const collegeLinkCont = document.querySelector(
2  '.topQuickLinksBar .collegeLinksContainer'
3);
4const collegeLinkDropdown = collegeLinkCont.querySelector('.collegLinksList');
5const collegeLinkTrigger = collegeLinkCont.querySelector('.collegeLinkTrigger');
6
7const quickLinkCont = document.querySelector(
8  '.topQuickLinksBar .quickLinksContainer'
9);
10const quickLinkDropdown = quickLinkCont.querySelector('.quickLinkList');
11const quickLinkTrigger = quickLinkCont.querySelector('.quickLinkTrigger');
12
13const mobileTrigger = document.querySelector(
14  '.topQuickLinksBar .mobileQuickLinksTrigger'
15);
16const mobileDropdown = document.querySelector(
17  '.topQuickLinksBar .quickLinksMobileContainer'
18);
19/** disabling the resize listener because of mobile Chrome behavior
20window.addEventListener('resize', function () {
21  if (window.innerWidth < 1064) {
22    mobileDropdown.style.display = 'none';
23  }
24  if (window.innerWidth >= 1064) {
25    mobileDropdown.style.display = 'grid';
26  }
27  // } else {
28  //   mobileDropdown.style.display = 'grid';
29  // }
30});
31**/
32if (mobileTrigger !== null) {
33  mobileTrigger.addEventListener(
34    'click',
35    function () {
36      if (mobileDropdown.style.display !== 'grid') {
37        mobileDropdown.style.display = 'grid';
38		  document.addEventListener('keydown', function (e) {
39          if (e.key === 'Escape' && collegeLinkDropdown.style.display !== 'flex' && quickLinkDropdown.style.display !== 'flex') {
40            mobileDropdown.style.display = 'none';
41           
42            mobileTrigger.focus();
43            mobileTrigger
44              .querySelector('.nf')
45              .classList.replace('nf-fa-caret_up', 'nf-fa-caret_down');
46          }
47        }, false);
48      } else {
49        mobileDropdown.style.display = 'none';
50      }
51    },
52    false
53  );
54}
55
56if (collegeLinkCont !== null) {
57  collegeLinkTrigger.addEventListener(
58    'click',
59    function () {
60      if (collegeLinkDropdown.style.display !== 'flex') {
61        collegeLinkDropdown.style.display = 'flex';
62        quickLinkDropdown.style.display = 'none';
63        document.addEventListener('keydown', function (e) {
64          if (e.key === 'Escape') {
65            collegeLinkDropdown.style.display = 'none';
66       
67            collegeLinkTrigger.focus();
68            collegeLinkTrigger
69              .querySelector('.nf')
70              .classList.replace('nf-fa-caret_up', 'nf-fa-caret_down');
71          }
72        }, false);
73        collegeLinkTrigger
74          .querySelector('.nf')
75          .classList.replace('nf-fa-caret_down', 'nf-fa-caret_up');
76      } else {
77        collegeLinkDropdown.style.display = 'none';
78        collegeLinkTrigger
79          .querySelector('.nf')
80          .classList.replace('nf-fa-caret_up', 'nf-fa-caret_down');
81      }
82    },
83    false
84  );
85}
86
87if (quickLinkCont !== null) {
88  quickLinkTrigger.addEventListener(
89    'click',
90    function () {
91      if (quickLinkDropdown.style.display !== 'flex') {
92        quickLinkDropdown.style.display = 'flex';
93        collegeLinkDropdown.style.display = 'none';
94        document.addEventListener('keydown', function (e) {
95          if (e.key === 'Escape') {
96            quickLinkDropdown.style.display = 'none';
97     
98            quickLinkTrigger.focus();
99            quickLinkTrigger
100              .querySelector('.nf')
101              .classList.replace('nf-fa-caret_up', 'nf-fa-caret_down');
102          }
103        }, false);
104        quickLinkTrigger
105          .querySelector('.nf')
106          .classList.replace('nf-fa-caret_down', 'nf-fa-caret_up');
107      } else {
108        quickLinkDropdown.style.display = 'none';
109        quickLinkTrigger
110          .querySelector('.nf')
111          .classList.replace('nf-fa-caret_up', 'nf-fa-caret_down');
112      }
113    },
114    false
115  );
116}
117
118// const allElem = document.querySelectorAll('*');
119//
120// for (let i = 0; i < allElem.length; i++) {
121//   allElem[i].addEventListener(
122//     'click',
123//     function() {
124//       if (
125//         allElem[i].className.indexOf('collegeLinkTrigger') === -1 &&
126//         allElem[i].className.indexOf('collegeLinksContainer') === -1 &&
127//         allElem[i].className.indexOf('quickLinksMobileContainer') === -1 &&
128//         allElem[i].className.indexOf('topQuickLinksBar') === -1
129//       ) {
130//         if (collegeLinkDropdown.style.display === 'flex') {
131//           console.log(this.className);
132//           console.log('triggered');
133//           collegeLinkDropdown.style.display = 'none';
134//         }
135//       }
136//     },
137//     false
138//   );
139// }
140//
141//