https://www.lasell.edu/Content/js/2022.js

1// Select all the child ul's - add class - set attributes and count (index)
2document.querySelectorAll('.main-nav li ul').forEach((el, index) => {
3	el.classList.add('dropMenu');
4	el.setAttribute('id', `menu-${index + 1}`);
5	el.setAttribute('aria-hidden', 'true');
6});
7
8// Look through all the li
9document.querySelectorAll('.main-nav li').forEach((el) => {
10	if (el.querySelector('ul.dropMenu')) el.classList.add('has-dropdown');
11});
12
13// Create the button and add attributes and inner icon
14document.querySelectorAll('.has-dropdown > a').forEach((el) => {
15	const button = document.createElement('button');
16
17	button.classList.add('menu-toggle');
18	button.setAttribute('aria-expanded', 'false');
19	button.setAttribute('aria-haspopup', 'true');
20	button.setAttribute('aria-label', 'Toggle menu');
21	button.innerHTML = `
22	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
23`;
24	el.insertAdjacentElement('afterend', button);
25});
26
27const buttonTriggers = document.querySelectorAll('.menu-toggle');
28
29/*
30
31Iterate over all the triggers and give them an increasing 
32aria-controls number to match the count on the 'dropMenu's
33from line 1
34
35*/
36buttonTriggers.forEach((buttonTrigger, index) => {
37	buttonTrigger.setAttribute('aria-controls', `menu-${index + 1}`);
38});
39
40function closeOpenItems() {
41	openMenus = document.querySelectorAll('.dropMenu');
42	openMenus.forEach(function (menus) {
43		menus.classList.remove('show');
44		menus.setAttribute(
45			'aria-hidden',
46			menus.getAttribute('aria-hidden') === 'false' ? 'true' : 'false'
47		);
48	});
49
50	buttonTriggers.forEach((buttonTrigger) => {
51		buttonTrigger.setAttribute(
52			'aria-expanded',
53			buttonTrigger.getAttribute('aria-expanded') === 'false'
54				? 'true'
55				: 'false'
56		);
57	});
58}
59
60buttonTriggers.forEach(function (btn) {
61	btn.addEventListener('click', function (e) {
62		let dropContent = btn.nextElementSibling;
63		shouldOpen = !dropContent.classList.contains('show');
64		e.preventDefault();
65
66		closeOpenItems();
67		if (shouldOpen) {
68			dropContent.classList.add('show');
69		}
70		e.stopPropagation();
71	});
72});
73
74window.addEventListener('click', function (event) {
75	if (event.target != buttonTriggers) {
76		closeOpenItems();
77	}
78});
79
80const searchTrigger = document.querySelector('#desktop-search-toggle');
81const searchInput = document.querySelector('#desktop-search');
82const searchOpen = document.querySelector('.open--desktop-search');
83const searchClose = document.querySelector('.close--desktop-search');
84
85document.addEventListener('keyup', function (event) {
86	if (event.key === 'Escape') {
87		closeOpenItems();
88		if (searchInput.visibility !== 'hidden') {
89			searchInput.style.display = 'none';
90			searchTrigger.setAttribute('aria-expanded', 'false');
91			searchOpen.style.display = 'block';
92			searchClose.style.display = 'none';
93		}
94	}
95});
96
97// Play pause button button for HTML5 video banners
98const vid = document.querySelector('.banner-video');
99const play = document.querySelector('.button--play');
100const pause = document.querySelector('.button--pause');
101
102if (play) {
103	play.addEventListener('click', function () {
104		vid.play();
105	});
106}
107
108if (pause) {
109	pause.addEventListener('click', function () {
110		vid.pause();
111	});
112}
113
114if (vid) {
115	vid.addEventListener('play', function () {
116		play.style.display = 'none';
117		pause.style.display = 'block';
118	});
119
120	vid.addEventListener('pause', function () {
121		play.style.display = 'block';
122		pause.style.display = 'none';
123	});
124}