/*
* Search dropdown
*/
export const globalMastheadSearch = () => {
const iconSearch = `
`
const iconClose = `
`
// Initiate search toggle
const searchToggleInitiate = () => {
// Get the form
const searchForm = document.querySelector('.uol-global-masthead__search-form')
if (window.innerWidth < 1024) {
if (searchForm) {
// Only if there is not already a toggle button
if ( !document.querySelector('.uol-global-masthead__search-toggle')) {
const searchField = searchForm.querySelector('#global-masthead__search-field')
const iconSearchLabel = 'Search form'
const openSearch = () => {
// Update button
searchFormToggle.innerHTML = iconClose + iconSearchLabel
searchFormToggle.setAttribute('aria-expanded', true)
// Update form
searchForm.hidden = false
searchForm.classList.add('uol-global-masthead__search-form--expanded')
searchField.focus()
}
const closeSearch = () => {
// Update button
searchFormToggle.innerHTML = iconSearch + iconSearchLabel
searchFormToggle.setAttribute('aria-expanded', false)
// Update form
searchForm.hidden = true
searchForm.classList.remove('uol-global-masthead__search-form--expanded')
}
// Hide form on load
searchForm.hidden = true
// Create toggle button
const searchFormToggle = document.createElement('button')
searchFormToggle.classList.add('uol-global-masthead__search-toggle')
searchFormToggle.setAttribute('type', 'button')
searchFormToggle.setAttribute('aria-expanded', false)
searchFormToggle.setAttribute('aria-controls', 'uol-global-masthead__search-form')
searchFormToggle.innerHTML = iconSearch + iconSearchLabel
searchFormToggle.classList.add('uol-global-masthead__search-toggle--search')
// Insert button
searchForm.before(searchFormToggle)
// Button click
searchFormToggle.addEventListener( 'click', () => {
let expanded = searchFormToggle.getAttribute('aria-expanded') === 'true' || false
if (!expanded) {
openSearch()
} else {
closeSearch()
}
// Close search form on Escape
searchForm.addEventListener('keydown', (event) => {
if(event.key === "Escape") {
closeSearch()
searchFormToggle.focus()
}
})
})
}
}
} else {
const searchFormToggle = document.querySelector('.uol-global-masthead__search-toggle')
if (searchFormToggle) {
searchFormToggle.remove()
searchForm.removeAttribute('hidden')
searchForm.classList.remove('uol-global-masthead__search-form--expanded')
}
}
}
window.addEventListener('resize', searchToggleInitiate)
var resizeEvent = window.document.createEvent('UIEvents')
resizeEvent.initUIEvent('resize', true, false, window, 0)
window.dispatchEvent(resizeEvent)
}