https://cdn.clarku.edu/news/wp-content/themes/jonas/blocks/menu-search/view.js?ver=1.3.01

1/**
2 * Progressive enhancement of navigation menu.
3 */
4
5class ClarkMenu extends HTMLElement {
6    constructor(){
7        super();
8		this.navButton = this.nav = this.clarkNav = this.searchButton = this.search = this.self = null;
9    }
10	connectedCallback() {
11		this.initNavs();
12	}
13	initNavs() {
14		this.navButton = this.querySelector( "#clarku-nav-button" );
15		this.searchButton = this.querySelector( "#clarku-search-button" ) || null;
16		this.nav = this.querySelector( "#clarku-menu" );
17		this.search = this.querySelector( "#clarku-search" ) || null;
18		this.clarkNav = this.querySelector( "#clarku-nav" );
19		var self = this;
20		// initialize the tactical buttons
21		this.navButton.addEventListener('click', this.toggleNavViz );
22		if (this.searchButton){ this.searchButton.addEventListener('click', this.toggleSearchViz ) };
23		requestAnimationFrame( () => {self.initClarkNav(self)} );
24		this.initNavCloseButton();
25		if (this.search){ this.initSearchCloseButton(); }
26	}
27	
28	toggleBody(shown) {
29		if( shown ) {
30			document.body.classList.add('jonas-modal');
31		} else {
32			document.body.classList.remove('jonas-modal');
33		}
34	}
35	
36	toggleSearchViz(e) {
37		let menu = e.target.closest('clark-menu');
38		let search = menu.querySelector( "#clarku-search" );
39		if( search.classList.contains('shown') ) {
40			search.classList.remove('shown');
41			menu.toggleBody(false);
42			menu.querySelector("#q").blur();
43		} else {
44			search.classList.add('shown');
45			menu.toggleBody(true);
46			menu.querySelector("#q").focus();
47		}
48	}
49	
50	toggleNavViz(e) {
51		let menu = e.target.closest('clark-menu');
52		let nav = menu.querySelector( "#clarku-menu" );
53		if( nav.classList.contains('shown') ) {
54			nav.classList.remove('shown');
55			menu.toggleBody(false);
56		} else {
57			nav.classList.add('shown');
58			menu.toggleBody(true);
59		}
60	}
61	
62	chevron() {
63		return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.55 12.18"><polygon fill="currentColor" points="21.55 1.41 20.13 0 10.77 9.36 1.41 0 0 1.41 10.76 12.18 10.77 12.17 10.78 12.18 21.55 1.41"/></svg>';
64	}
65
66	initSearchCloseButton() {
67		var b = this.search.querySelectorAll( ".close" )[0];
68		b.addEventListener('click', this.toggleSearchViz );
69	}
70
71	initNavCloseButton() {
72		var b = this.nav.querySelectorAll( ".close" )[0];
73		b.addEventListener('click', this.toggleNavViz );
74	}
75
76	initClarkNav(self) {
77		var els = self.querySelectorAll( "#clarku-nav > li > .submenu-button" );

78		els.forEach(function(el) {
79			el.addEventListener( "click", self.clarkNavToggleSubNav );
80			el.classList.remove( "hide" );
81		});
82			
83	}
84	
85	clarkNavToggleSubNav() {
86		if ( "false" == this.getAttribute( "aria-expanded" ) ) {
87			this.setAttribute( "aria-expanded", true );
88		} else {
89			this.setAttribute( "aria-expanded", false );
90		}
91	}
92
93}
94(function () {
95	//document.addEventListener( "DOMContentLoaded", initNavs );
96});
97customElements.define('clark-menu', ClarkMenu);