1
|
|
|
|
2
|
|
|
var MobileMenu = {}; |
3
|
|
|
|
4
|
|
|
MobileMenu.debug = true; |
5
|
|
|
|
6
|
|
|
if (!window.console) { |
7
|
|
|
var console = {}; |
8
|
|
|
} |
9
|
|
|
|
10
|
|
|
if (!console.log) { |
|
|
|
|
11
|
|
|
console.log = function () {}; |
12
|
|
|
} |
13
|
|
|
|
14
|
|
|
// Window Event Listener ======================================================= |
15
|
|
|
|
16
|
|
|
MobileMenu.addWindowEventListener = function (event, myFunction) { |
17
|
|
|
|
18
|
|
|
if (window.addEventListener) { |
19
|
|
|
|
20
|
|
|
window.addEventListener(event, myFunction, false); |
21
|
|
|
|
22
|
|
|
} else if (window.attachEvent) { |
23
|
|
|
|
24
|
|
|
var onEvent = "on" + event; |
25
|
|
|
|
26
|
|
|
window.attachEvent(onEvent, myFunction); |
27
|
|
|
|
28
|
|
|
} |
29
|
|
|
|
30
|
|
|
}; |
31
|
|
|
|
32
|
|
|
// Mobile Navigation Triggers ================================================== |
33
|
|
|
|
34
|
|
|
MobileMenu.mobileNavClickListener = function (e) { |
35
|
|
|
|
36
|
|
|
var mobileMenuTrigger = document.getElementById("pageHeroMobileTrigger"); |
|
|
|
|
37
|
|
|
|
38
|
|
|
var mainMenu = document.getElementById("pageHeroNavigationMenu"); |
39
|
|
|
|
40
|
|
|
e.preventDefault(); |
41
|
|
|
|
42
|
|
|
if (this.classList.contains("active")) { |
43
|
|
|
|
44
|
|
|
this.classList.remove("active"); |
45
|
|
|
|
46
|
|
|
mainMenu.classList.remove("active"); |
47
|
|
|
|
48
|
|
|
document.body.style.overflowY = "auto"; |
49
|
|
|
|
50
|
|
|
} else { |
51
|
|
|
|
52
|
|
|
this.classList.add("active"); |
53
|
|
|
|
54
|
|
|
mainMenu.classList.add("active"); |
55
|
|
|
|
56
|
|
|
document.body.style.overflowY = "hidden"; |
57
|
|
|
|
58
|
|
|
} |
59
|
|
|
|
60
|
|
|
}; |
61
|
|
|
|
62
|
|
|
MobileMenu.mobileNavKeyListener = function (e) { |
63
|
|
|
|
64
|
|
|
if (e.keyCode == 13) { |
65
|
|
|
|
66
|
|
|
var mobileMenuTrigger = document.getElementById("pageHeroMobileTrigger"); |
|
|
|
|
67
|
|
|
|
68
|
|
|
var mainMenu = document.getElementById("pageHeroNavigationMenu"); |
69
|
|
|
|
70
|
|
|
e.preventDefault(); |
71
|
|
|
|
72
|
|
|
if (this.classList.contains("active")) { |
73
|
|
|
|
74
|
|
|
this.classList.remove("active"); |
75
|
|
|
|
76
|
|
|
mainMenu.classList.remove("active"); |
77
|
|
|
|
78
|
|
|
document.body.style.overflowY = "auto"; |
79
|
|
|
|
80
|
|
|
} else { |
81
|
|
|
|
82
|
|
|
this.classList.add("active"); |
83
|
|
|
|
84
|
|
|
mainMenu.classList.add("active"); |
85
|
|
|
|
86
|
|
|
document.body.style.overflowY = "hidden"; |
87
|
|
|
|
88
|
|
|
} |
89
|
|
|
|
90
|
|
|
} |
91
|
|
|
|
92
|
|
|
}; |
93
|
|
|
|
94
|
|
|
MobileMenu.setMobileNavTriggers = function () { |
95
|
|
|
|
96
|
|
|
// Gets all elements on the page with "accordion-trigger". |
97
|
|
|
var mobileMenuTrigger = document.getElementById("pageHeroMobileTrigger"); |
98
|
|
|
|
99
|
|
|
// Checks for a click. |
100
|
|
|
mobileMenuTrigger.addEventListener("click", MobileMenu.mobileNavClickListener); |
101
|
|
|
|
102
|
|
|
// Checks for an Enter key click. |
103
|
|
|
mobileMenuTrigger.addEventListener("keydown", MobileMenu.mobileNavKeyListener); |
104
|
|
|
|
105
|
|
|
}; |
106
|
|
|
|
107
|
|
|
MobileMenu.addWindowEventListener("load", MobileMenu.setMobileNavTriggers); |
108
|
|
|
|
109
|
|
|
// Mobile Navigation Tab Order ================================================= |
110
|
|
|
|
111
|
|
|
MobileMenu.mobileNavTabListener = function (e) { |
112
|
|
|
|
113
|
|
|
// Get the Main Menu |
114
|
|
|
var mainMenu = document.getElementById("pageHeroNavigationMenu"); |
115
|
|
|
|
116
|
|
|
// Get Mobile Menu Trigger |
117
|
|
|
var menuTrigger = document.querySelector(".page-hero__mobile-trigger"); |
118
|
|
|
|
119
|
|
|
// Get Mobile Menu Items |
120
|
|
|
var menuItems = mainMenu.querySelectorAll(".page-hero__navigation-item"); |
121
|
|
|
|
122
|
|
|
// Get Last Menu Item |
123
|
|
|
var lastMenuItem = menuItems[menuItems.length - 1] |
|
|
|
|
124
|
|
|
|
125
|
|
|
if (e.keyCode == 9) { |
|
|
|
|
126
|
|
|
|
127
|
|
|
if (this === lastMenuItem) { |
|
|
|
|
128
|
|
|
|
129
|
|
|
e.preventDefault(); |
130
|
|
|
|
131
|
|
|
menuTrigger.focus(); |
132
|
|
|
|
133
|
|
|
return false; |
134
|
|
|
|
135
|
|
|
} |
136
|
|
|
|
137
|
|
|
} |
138
|
|
|
|
139
|
|
|
} |
|
|
|
|
140
|
|
|
|
141
|
|
|
MobileMenu.setMobileNavTabTriggers = function (e) { |
|
|
|
|
142
|
|
|
|
143
|
|
|
// Get the Main Menu |
144
|
|
|
var mainMenu = document.getElementById("pageHeroNavigationMenu"); |
145
|
|
|
|
146
|
|
|
// Get Mobile Menu Items |
147
|
|
|
var menuItems = mainMenu.querySelectorAll(".page-hero__navigation-item"); |
148
|
|
|
|
149
|
|
|
// Set Triggers |
150
|
|
|
for (var i = 0; i < menuItems.length; i++) { |
151
|
|
|
|
152
|
|
|
menuItems[i].addEventListener("keydown", MobileMenu.mobileNavTabListener); |
153
|
|
|
|
154
|
|
|
} |
155
|
|
|
|
156
|
|
|
} |
|
|
|
|
157
|
|
|
|
158
|
|
|
MobileMenu.addWindowEventListener("load", MobileMenu.setMobileNavTabTriggers); |