108 lines
3.2 KiB
JavaScript
108 lines
3.2 KiB
JavaScript
/**
|
|
* Manages search interactions for DocSearch integration
|
|
* Uses MutationObserver to watch for dropdown creation
|
|
*/
|
|
export default function SearchInteractions({ searchInput }) {
|
|
const contentWrapper = document.querySelector('.content-wrapper');
|
|
let observer = null;
|
|
let dropdownObserver = null;
|
|
let dropdownMenu = null;
|
|
const debug = false; // Set to true for debugging logs
|
|
|
|
// Fade content wrapper when focusing on search input
|
|
function handleFocus() {
|
|
contentWrapper.style.opacity = '0.35';
|
|
contentWrapper.style.transition = 'opacity 300ms';
|
|
}
|
|
|
|
// Hide search dropdown when leaving search input
|
|
function handleBlur(event) {
|
|
// Only process blur if not clicking within dropdown
|
|
const relatedTarget = event.relatedTarget;
|
|
if (
|
|
relatedTarget &&
|
|
(relatedTarget.closest('.algolia-autocomplete') ||
|
|
relatedTarget.closest('.ds-dropdown-menu'))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
contentWrapper.style.opacity = '1';
|
|
contentWrapper.style.transition = 'opacity 200ms';
|
|
|
|
// Hide dropdown if it exists
|
|
if (dropdownMenu) {
|
|
dropdownMenu.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Add event listeners
|
|
searchInput.addEventListener('focus', handleFocus);
|
|
searchInput.addEventListener('blur', handleBlur);
|
|
|
|
// Use MutationObserver to detect when dropdown is added to the DOM
|
|
observer = new MutationObserver((mutations) => {
|
|
for (const mutation of mutations) {
|
|
if (mutation.type === 'childList') {
|
|
const newDropdown = document.querySelector(
|
|
'.ds-dropdown-menu:not([data-monitored])'
|
|
);
|
|
if (newDropdown) {
|
|
// Save reference to dropdown
|
|
dropdownMenu = newDropdown;
|
|
newDropdown.setAttribute('data-monitored', 'true');
|
|
|
|
// Monitor dropdown removal/display changes
|
|
dropdownObserver = new MutationObserver((dropdownMutations) => {
|
|
for (const dropdownMutation of dropdownMutations) {
|
|
if (debug) {
|
|
if (
|
|
dropdownMutation.type === 'attributes' &&
|
|
dropdownMutation.attributeName === 'style'
|
|
) {
|
|
console.log(
|
|
'Dropdown style changed:',
|
|
dropdownMenu.style.display
|
|
);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Observe changes to dropdown attributes (like style)
|
|
dropdownObserver.observe(dropdownMenu, {
|
|
attributes: true,
|
|
attributeFilter: ['style'],
|
|
});
|
|
|
|
// Add event listeners to keep dropdown open when interacted with
|
|
dropdownMenu.addEventListener('mousedown', (e) => {
|
|
// Prevent blur on searchInput when clicking in dropdown
|
|
e.preventDefault();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Start observing the document body for dropdown creation
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
|
|
// Return cleanup function
|
|
return function cleanup() {
|
|
searchInput.removeEventListener('focus', handleFocus);
|
|
searchInput.removeEventListener('blur', handleBlur);
|
|
|
|
if (observer) {
|
|
observer.disconnect();
|
|
}
|
|
|
|
if (dropdownObserver) {
|
|
dropdownObserver.disconnect();
|
|
}
|
|
};
|
|
}
|