Search all InfluxData content ',
+ empty:
+ '
',
+ },
+ },
+ });
+
+ // Mark DocSearch as initialized
+ window.InfluxDocs.search.initialized = true;
+
+ // Dispatch event for other components to know DocSearch is ready
+ window.dispatchEvent(new CustomEvent('docsearch-initialized'));
+ }
+
+ /**
+ * Helper function to build facet filters based on config
+ * - Uses nested arrays for AND conditions
+ * - Includes space after colon in filter expressions
+ */
+ function buildFacetFilters(config) {
+ if (!config.searchTag) {
+ return ['latest:true'];
+ } else if (config.includeFlux) {
+ // Return a nested array to match original template structure
+ // Note the space after each colon
+ return [
+ [
+ 'searchTag: ' + config.searchTag,
+ 'flux:true',
+ 'resources: ' + config.includeResources,
+ ],
+ ];
+ } else {
+ // Return a nested array to match original template structure
+ // Note the space after each colon
+ return [
+ [
+ 'searchTag: ' + config.searchTag,
+ 'resources: ' + config.includeResources,
+ ],
+ ];
+ }
+ }
+
+ // Load DocSearch when page is idle or after a slight delay
+ if ('requestIdleCallback' in window) {
+ requestIdleCallback(loadDocSearch);
+ } else {
+ setTimeout(loadDocSearch, 500);
+ }
+
+ // Return cleanup function
+ return function cleanup() {
+ // Clean up any event listeners if needed
+ console.log('DocSearch component cleanup');
+ };
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index 3578952dc..126189fff 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -34,6 +34,7 @@ import AskAITrigger from './ask-ai-trigger.js';
import CodePlaceholder from './code-placeholders.js';
import { CustomTimeTrigger } from './custom-timestamps.js';
import Diagram from './components/diagram.js';
+import DocSearch from './components/doc-search.js';
import FeatureCallout from './feature-callouts.js';
import FluxGroupKeysDemo from './flux-group-keys.js';
import FluxInfluxDBVersionsTrigger from './flux-influxdb-versions.js';
@@ -62,6 +63,7 @@ const componentRegistry = {
'code-placeholder': CodePlaceholder,
'custom-time-trigger': CustomTimeTrigger,
'diagram': Diagram,
+ 'doc-search': DocSearch,
'feature-callout': FeatureCallout,
'flux-group-keys-demo': FluxGroupKeysDemo,
'flux-influxdb-versions-trigger': FluxInfluxDBVersionsTrigger,
diff --git a/assets/js/utils/search-interactions.js b/assets/js/utils/search-interactions.js
index 83d217382..d83433667 100644
--- a/assets/js/utils/search-interactions.js
+++ b/assets/js/utils/search-interactions.js
@@ -1,22 +1,97 @@
+/**
+ * Manages search interactions for DocSearch integration
+ * Uses MutationObserver to watch for dropdown creation
+ */
export default function SearchInteractions({ searchInput }) {
const contentWrapper = document.querySelector('.content-wrapper');
- const dropdownMenu = document.querySelector('.ds-dropdown-menu');
-
+ let observer = null;
+ let dropdownObserver = null;
+ let dropdownMenu = null;
+
// Fade content wrapper when focusing on search input
- searchInput.addEventListener('focus', () => {
- // Using CSS transitions instead of jQuery's fadeTo for better performance
+ function handleFocus() {
contentWrapper.style.opacity = '0.35';
contentWrapper.style.transition = 'opacity 300ms';
- });
+ }
// Hide search dropdown when leaving search input
- searchInput.addEventListener('blur', () => {
+ 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 menu
+ // 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) {
+ console.log('DocSearch dropdown detected');
+
+ // 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 (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();
+ }
+ };
}
\ No newline at end of file
diff --git a/layouts/partials/footer/search.html b/layouts/partials/footer/search.html
index c0405957f..f61459af5 100644
--- a/layouts/partials/footer/search.html
+++ b/layouts/partials/footer/search.html
@@ -7,84 +7,15 @@
{{ $includeFlux := and (in $fluxSupported $product) (in $influxdbFluxSupport $version) }}
{{ $includeResources := not (in (slice "cloud-serverless" "cloud-dedicated" "clustered" "core" "enterprise" "explorer") $version) }}
-
-
\ No newline at end of file
+
+