Skip to content

Commit bd919ca

Browse files
hmillersarahhmillersarah
committed
update js file for nav header
1 parent f17570f commit bd919ca

1 file changed

Lines changed: 62 additions & 91 deletions

File tree

‎web-components/nav-header/nav-header.js‎

Lines changed: 62 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ fetch("web-components/nav-header/nav-header.html")
99
* @returns {void}
1010
*/
1111
function createComponent(html) {
12-
// Web component class representing a course card.
12+
// Web component class representing the navigation header.
1313
class NavHeader extends HTMLElement {
14-
1514
/**
1615
* Called when an attribute is defined or changed.
1716
* @param {string} property - The name of the attribute.
@@ -31,9 +30,13 @@ function createComponent(html) {
3130

3231
// Variables
3332
// --------------------------------------------------------------------------------------------------
33+
const contentBody = document.querySelector('#content');
34+
const firstLink = document.querySelector('a');
3435
// Dropdown navigation menu
3536
const menuButton = shadow.querySelector('.hamburger-menu');
3637
const menuToggle = shadow.getElementById('menu-toggle');
38+
const dropdownMenu = shadow.querySelector('.dropdown-menu');
39+
const menuItems = dropdownMenu.querySelectorAll('a');
3740
// Search
3841
const searchForm = shadow.getElementById('search-form');
3942
const searchInput = shadow.getElementById('search-input');
@@ -44,22 +47,18 @@ function createComponent(html) {
4447
// Event listeners for dropdown navigation menu
4548
// --------------------------------------------------------------------------------------------------
4649
// Toggle dropdown menu
47-
menuButton.addEventListener('click', () => {this.toggleMenu()});
48-
menuButton.addEventListener('keydown', (event) => {if (event.key === 'Enter') {this.toggleMenu()}});
49-
50+
menuButton.addEventListener('click', () => {toggleMenu()});
51+
menuButton.addEventListener('keydown', (event) => {if (event.key === 'Enter') {toggleMenu()}});
5052
// Hide search results if hamburger menu is focused
5153
menuButton.addEventListener('focus', () => {searchResults.style.display = 'none';})
52-
5354
// Hide dropdown menu for keyboard navigation when first link in document is focused
54-
const firstLink = document.querySelector('a');
55-
firstLink.addEventListener('focus', () => {if (menuToggle.checked) {this.toggleMenu()}});
55+
firstLink.addEventListener('focus', () => {if (menuToggle.checked) {toggleMenu()}});
5656

5757
// Event listeners for all menus
5858
// --------------------------------------------------------------------------------------------------
5959
// Hide dropdowns when user clicks outside of search results or nav menu
60-
const contentBody = document.querySelector('#content');
6160
contentBody.addEventListener('click', () => {
62-
if (menuToggle.checked) {this.toggleMenu()};
61+
if (menuToggle.checked) {toggleMenu()};
6362
searchResults.style.display = 'none';
6463
})
6564

@@ -70,119 +69,91 @@ function createComponent(html) {
7069
// Highlight search input field
7170
searchBar.classList.add('search-bar-focused');
7271
// Hide dropdown nav menu if open
73-
if (menuToggle.checked) {this.toggleMenu()};
72+
if (menuToggle.checked) {toggleMenu()};
7473
// Display search results
7574
searchResults.style.display = 'block';
7675
})
7776
// On blur of search
78-
searchInput.addEventListener('blur', () => {
79-
searchBar.classList.remove('search-bar-focused');
80-
})
77+
searchInput.addEventListener('blur', () => {searchBar.classList.remove('search-bar-focused')});
8178
// On input of search
8279
searchInput.addEventListener('input', () => {
8380
// Display clear search button if input is added
84-
if (searchInput.value.length > 0) {
85-
clearIcon.style.display = 'block';
86-
} else {
87-
clearIcon.style.display = 'none';
88-
}
81+
let clearSearchState = (searchInput.value.length > 0) ? 'block' : 'none';
82+
clearIcon.style.display = clearSearchState;
8983
})
9084

9185
// Clear search
92-
clearIcon.addEventListener('click', () => {this.clearSearch()});
93-
clearIcon.addEventListener('keydown', (event) => {if (event.key === 'Enter') {this.clearSearch()}});
86+
clearIcon.addEventListener('click', () => {clearSearch()});
87+
clearIcon.addEventListener('keydown', (event) => {if (event.key === 'Enter') {clearSearch()}});
9488

9589
// Submission of search input
9690
searchForm.addEventListener('submit', (event) => {
9791
// Prevent page from reloading
9892
event.preventDefault();
99-
// Get user search input
100-
const input = searchInput.value;
10193
// Make search call
102-
$(searchInput).tipuesearch(input, searchInput, searchResults, 'web-component');
94+
$(searchInput).tipuesearch(searchInput.value, searchInput, searchResults, 'web-component');
10395
// Get search results
10496
const results = shadow.querySelectorAll('.tipue_search_content_title');
10597
// Clear search after result is clicked
10698
results.forEach(result => {
107-
result.addEventListener('click', this.clearSearch.bind(this));
99+
result.addEventListener('click', clearSearch.bind(this));
108100
})
109101
// Get dropdowns from search results
110102
const accordions = shadow.querySelectorAll('.cordion');
111103
accordions.forEach(accordion => {
112-
accordion.addEventListener('click', this.handleResultDropdown.bind(this));
104+
accordion.addEventListener('click', handleResultDropdown.bind(this));
113105
})
114106
});
115-
}
116107

117-
// Toggle dropdown navigation menu
118-
toggleMenu() {
119-
const component = document.querySelector('nav-header');
120-
const shadow = component.shadowRoot;
121-
const menuToggle = shadow.getElementById('menu-toggle');
122-
const dropdownMenu = shadow.querySelector('.dropdown-menu');
123-
const menuItems = dropdownMenu.querySelectorAll('a');
108+
// Helper functions
109+
// --------------------------------------------------------------------------------------------------
124110

125-
// Update checked state of menuToggle
126-
let checkedState = menuToggle.checked ? false : true;
127-
menuToggle.checked = checkedState;
128-
// Update display of dropdown menu based on checked state
129-
if (checkedState) {
130-
dropdownMenu.classList.add('show-menu');
131-
// Make menu items focusable
132-
for (let i = 0; i < menuItems.length; i++) {
133-
menuItems[i].tabIndex = '0';
134-
}
135-
} else {
136-
dropdownMenu.classList.remove('show-menu');
137-
// Make menu items non-focusable
138-
for (let i = 0; i < menuItems.length; i++) {
139-
menuItems[i].tabIndex = '-1';
111+
// Toggle dropdown navigation menu
112+
function toggleMenu() {
113+
dropdownMenu.classList.toggle('show-menu');
114+
// Update checked state of menu toggle
115+
menuToggle.checked = menuToggle.checked ? false : true;
116+
if (menuToggle.checked) {
117+
// Make menu items focusable
118+
for (let item of menuItems) {item.tabIndex = '0'};
119+
} else {
120+
// Make menu items non-focusable
121+
for (let item of menuItems) {item.tabIndex = '-1'};
122+
}
140123
}
141-
}
142-
}
143-
144-
/**
145-
* Handle search result dropdown interaction
146-
* @param {event} event - User event
147-
*/
148-
handleResultDropdown(event) {
149-
const button = event.target;
150-
const parent = button.parentElement;
151-
const grandparent = parent.parentElement;
152-
let arrow;
153-
let description;
154124

155-
// Check if user clicked on button - assign variables
156-
if (button.classList.contains('cordion')) {
157-
arrow = button.firstChild;
158-
description = parent.nextElementSibling;
159-
// If user clicked on icon, change variable assignment
160-
} else {
161-
arrow = button;
162-
description = grandparent.nextElementSibling;
163-
}
164-
// Rotate arrow and display/hide result description
165-
arrow.classList.toggle('rotArrow');
166-
description.classList.toggle('search_content_drop');
167-
}
125+
// Clear search
126+
function clearSearch() {
127+
searchInput.value = "";
128+
searchResults.style.display = clearIcon.style.display = 'none';
129+
// Make search call with empty input
130+
$(searchInput).tipuesearch(searchInput.value, searchInput, searchResults, 'web-component');
131+
}
168132

169-
// Clear search
170-
clearSearch() {
171-
const component = document.querySelector('nav-header');
172-
const shadow = component.shadowRoot;
173-
const searchResults = shadow.getElementById('search-results');
174-
const searchInput = shadow.getElementById('search-input');
175-
const clearIcon = shadow.getElementById('clear-icon');
133+
/**
134+
* Handle search result dropdown interaction
135+
* @param {event} event - User event
136+
*/
137+
function handleResultDropdown(event) {
138+
const button = event.target;
139+
const parent = button.parentElement;
140+
const grandparent = parent.parentElement;
141+
let arrow;
142+
let description;
176143

177-
// Remove input value
178-
searchInput.value = "";
179-
const input = searchInput.value;
180-
// Make search call
181-
$(searchInput).tipuesearch(input, searchInput, searchResults, 'web-component');
182-
// Hide search results
183-
searchResults.style.display = 'none';
184-
// Hide clear search button
185-
clearIcon.style.display = 'none';
144+
// Check if user clicked on button - assign variables
145+
if (button.classList.contains('cordion')) {
146+
arrow = button.firstChild;
147+
description = parent.nextElementSibling;
148+
// If user clicked on icon, change variable assignment
149+
} else {
150+
arrow = button;
151+
description = grandparent.nextElementSibling;
152+
}
153+
// Rotate arrow and display/hide result description
154+
arrow.classList.toggle('rotArrow');
155+
description.classList.toggle('search_content_drop');
156+
}
186157
}
187158
}
188159

0 commit comments

Comments
 (0)