|
9 | 9 | * 4) If the nav dropdown trigger parent does not have an active class, add it. |
10 | 10 | */ |
11 | 11 | (function() { |
12 | | - var navDropdownListItem = document.querySelector('.js-nav-dropdown'); |
13 | | - var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */ |
| 12 | + var navDropdownListItem = document.querySelector('.js-nav-dropdown'); |
| 13 | + var navLink = document.querySelectorAll('.js-nav-dropdown-trigger'); /* 1 */ |
14 | 14 |
|
15 | | - for (i = 0; i < navLink.length; i++) { |
16 | | - /* 1 */ |
| 15 | + for (i = 0; i < navLink.length; i++) { |
| 16 | + /* 1 */ |
17 | 17 |
|
18 | | - navLink[i].addEventListener('click', function(event) { |
19 | | - /* 2 */ |
20 | | - event.preventDefault(); |
21 | | - var navLinkParent = this.parentNode; /* 2 */ |
| 18 | + navLink[i].addEventListener('click', function(event) { |
| 19 | + /* 2 */ |
| 20 | + event.preventDefault(); |
| 21 | + var navLinkParent = this.parentNode; /* 2 */ |
22 | 22 |
|
23 | | - if (navLinkParent.classList.contains('is-active')) { |
24 | | - /* 3 */ |
25 | | - navLinkParent.classList.remove('is-active'); |
26 | | - |
27 | | - this.setAttribute("aria-expanded", "false"); |
28 | | - } else { |
29 | | - /* 4 */ |
30 | | - navLinkParent.classList.add('is-active'); |
31 | | - |
32 | | - this.setAttribute("aria-expanded", "true"); |
33 | | - } |
34 | | - |
35 | | - }); |
36 | | - } |
| 23 | + if (navLinkParent.classList.contains('is-active')) { |
| 24 | + /* 3 */ |
| 25 | + navLinkParent.classList.remove('is-active'); |
37 | 26 |
|
38 | | - /** |
39 | | - * Expose docs dropdown if on a docs page |
40 | | - */ |
41 | | - if (window.location.href.indexOf('docs') > -1) { |
42 | | - navDropdownListItem.classList.add('is-active'); |
43 | | - } |
| 27 | + this.setAttribute('aria-expanded', 'false'); |
| 28 | + } else { |
| 29 | + /* 4 */ |
| 30 | + navLinkParent.classList.add('is-active'); |
44 | 31 |
|
45 | | - var pathName = location.pathname; |
| 32 | + this.setAttribute('aria-expanded', 'true'); |
| 33 | + } |
| 34 | + }); |
| 35 | + } |
46 | 36 |
|
47 | | - var navLinks = document.querySelectorAll('.c-tree-nav a'); |
| 37 | + /** |
| 38 | + * Expose docs dropdown if on a docs page |
| 39 | + */ |
| 40 | + if (window.location.href.indexOf('docs') > -1) { |
| 41 | + navDropdownListItem.classList.add('is-active'); |
| 42 | + } |
48 | 43 |
|
49 | | - for (i = 0; i < navLinks.length; i++) { |
50 | | - var subnavLink = navLinks[i].getAttribute('href'); |
51 | | - if (subnavLink == pathName) { |
52 | | - navLinks[i].classList.add('is-active'); |
53 | | - } |
54 | | - } |
| 44 | + var pathName = location.pathname; |
55 | 45 |
|
56 | | - /** |
57 | | - * Toggles active class on the primary nav panel |
58 | | - * 1) Select all nav triggers and cycle through them |
59 | | - * 2) On click, find the nav panel within the header |
60 | | - * 3) If the navPanel already has active class, remove it on click. |
61 | | - * 4) If the navPanel does not have an active class, add it on click. |
62 | | - */ |
63 | | - var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */ |
| 46 | + var navLinks = document.querySelectorAll('.c-tree-nav a'); |
64 | 47 |
|
65 | | - for (i = 0; i < navToggle.length; i++) { |
66 | | - /* 1 */ |
| 48 | + for (i = 0; i < navLinks.length; i++) { |
| 49 | + var subnavLink = navLinks[i].getAttribute('href'); |
| 50 | + if (subnavLink == pathName) { |
| 51 | + navLinks[i].classList.add('is-active'); |
| 52 | + } |
| 53 | + } |
67 | 54 |
|
68 | | - navToggle[i].addEventListener('click', function(event) { |
69 | | - /* 2 */ |
70 | | - event.preventDefault(); |
71 | | - var navToggleParent = this.parentNode; /* 2 */ |
72 | | - var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */ |
| 55 | + /** |
| 56 | + * Toggles active class on the primary nav panel |
| 57 | + * 1) Select all nav triggers and cycle through them |
| 58 | + * 2) On click, find the nav panel within the header |
| 59 | + * 3) If the navPanel already has active class, remove it on click, as well as the aria-expanded attributes value. |
| 60 | + * 4) If the navPanel does not have an active class, add it on click, as well as the aria-expanded attributes value. |
| 61 | + */ |
| 62 | + var navToggle = document.querySelectorAll('.js-nav-trigger'); /* 1 */ |
73 | 63 |
|
74 | | - if (navPanel.classList.contains('is-active')) { |
75 | | - /* 3 */ |
76 | | - navPanel.classList.remove('is-active'); |
77 | | - } else { |
78 | | - /* 4 */ |
79 | | - navPanel.classList.add('is-active'); |
80 | | - } |
81 | | - }); |
82 | | - } |
| 64 | + for (i = 0; i < navToggle.length; i++) { |
| 65 | + /* 1 */ |
| 66 | + |
| 67 | + navToggle[i].addEventListener('click', function(event) { |
| 68 | + /* 2 */ |
| 69 | + event.preventDefault(); |
| 70 | + var navToggleElement = this; |
| 71 | + var navToggleParent = navToggleElement.parentNode; /* 2 */ |
| 72 | + var navPanel = navToggleParent.querySelector('.js-nav-panel'); /* 2 */ |
| 73 | + |
| 74 | + if (navPanel.classList.contains('is-active')) { |
| 75 | + /* 3 */ |
| 76 | + navPanel.classList.remove('is-active'); |
| 77 | + navToggleElement.setAttribute('aria-expanded', 'false'); |
| 78 | + } else { |
| 79 | + /* 4 */ |
| 80 | + navPanel.classList.add('is-active'); |
| 81 | + navToggleElement.setAttribute('aria-expanded', 'true'); |
| 82 | + } |
| 83 | + }); |
| 84 | + } |
83 | 85 | })(); |
0 commit comments