34 lines
1.5 KiB
JavaScript
34 lines
1.5 KiB
JavaScript
|
/*
|
||
|
|
This script is responsible for moving the search buttons down when search suggestions appear.
|
||
|
|
*/
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const searchTypeIcons = document.querySelector('.search-type-icons');
|
||
|
|
const resultsWrapper = document.querySelector('.wrapper.custom-search-page .autocomplete');
|
||
|
|
|
||
|
|
// Function to move buttons without affecting the page flow
|
||
|
|
function adjustSearchIconsPosition() {
|
||
|
|
const autocompleteHeight = resultsWrapper.offsetHeight;
|
||
|
|
if (autocompleteHeight > 0) {
|
||
|
|
// Use transform to move the buttons down
|
||
|
|
searchTypeIcons.style.transform = `translateY(${autocompleteHeight + 20}px)`;
|
||
|
|
} else {
|
||
|
|
// Reset the buttons position when no suggestions
|
||
|
|
searchTypeIcons.style.transform = 'translateY(0)';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Observer to detect changes in the autocomplete content and adjust position
|
||
|
|
const observer = new MutationObserver(() => {
|
||
|
|
adjustSearchIconsPosition();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Start observing the autocomplete for content changes
|
||
|
|
observer.observe(resultsWrapper, { childList: true, subtree: true });
|
||
|
|
|
||
|
|
// Optionally adjust when window resizes (for responsive changes)
|
||
|
|
window.addEventListener('resize', adjustSearchIconsPosition);
|
||
|
|
|
||
|
|
// Adjust initially on load in case suggestions are already present
|
||
|
|
adjustSearchIconsPosition();
|
||
|
|
}
|
||
|
|
);
|