74 lines
2.4 KiB
JavaScript
74 lines
2.4 KiB
JavaScript
/**
|
|
* Fusion Website Theme - Header Interactions
|
|
* Expandable search bar - expands right from search button
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
function initExpandableSearch() {
|
|
var searchTrigger = document.querySelector('.search-trigger');
|
|
var searchExpanded = document.querySelector('.search-expanded');
|
|
var searchClose = document.querySelector('.search-close');
|
|
var searchInput = document.querySelector('.search-expanded input');
|
|
|
|
if (!searchTrigger || !searchExpanded) {
|
|
return;
|
|
}
|
|
|
|
// Open search
|
|
searchTrigger.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
document.body.classList.add('search-open');
|
|
searchExpanded.classList.add('active');
|
|
|
|
// Focus the input after animation
|
|
setTimeout(function() {
|
|
if (searchInput) searchInput.focus();
|
|
}, 250);
|
|
});
|
|
|
|
// Close search on X button
|
|
if (searchClose) {
|
|
searchClose.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
closeSearch();
|
|
});
|
|
}
|
|
|
|
// Close on Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && document.body.classList.contains('search-open')) {
|
|
closeSearch();
|
|
}
|
|
});
|
|
|
|
// Close when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (document.body.classList.contains('search-open')) {
|
|
if (!searchExpanded.contains(e.target) && !searchTrigger.contains(e.target)) {
|
|
closeSearch();
|
|
}
|
|
}
|
|
});
|
|
|
|
function closeSearch() {
|
|
document.body.classList.remove('search-open');
|
|
searchExpanded.classList.remove('active');
|
|
if (searchInput) searchInput.value = '';
|
|
}
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initExpandableSearch);
|
|
} else {
|
|
initExpandableSearch();
|
|
}
|
|
|
|
// Also try after a small delay in case elements are loaded dynamically
|
|
setTimeout(initExpandableSearch, 500);
|
|
})();
|