diff --git a/assets/js/components/doc-search.js b/assets/js/components/doc-search.js index 4722a7393..52e1b1f65 100644 --- a/assets/js/components/doc-search.js +++ b/assets/js/components/doc-search.js @@ -2,6 +2,7 @@ * DocSearch component for InfluxData documentation * Handles asynchronous loading and initialization of Algolia DocSearch */ +const debug = false; // Set to true for debugging output export default function DocSearch({ component }) { // Store configuration from component data attributes @@ -26,7 +27,9 @@ export default function DocSearch({ component }) { // Load DocSearch asynchronously function loadDocSearch() { - console.log('Loading DocSearch script...'); + if (debug) { + console.log('Loading DocSearch script...'); + } const script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js'; @@ -37,7 +40,9 @@ export default function DocSearch({ component }) { // Initialize DocSearch after script loads function initializeDocSearch() { - console.log('Initializing DocSearch...'); + if (debug) { + console.log('Initializing DocSearch...'); + } const multiVersion = ['influxdb']; // Use object-based lookups instead of conditionals for version and product names @@ -168,6 +173,8 @@ export default function DocSearch({ component }) { // Return cleanup function return function cleanup() { // Clean up any event listeners if needed - console.log('DocSearch component cleanup'); + if (debug) { + console.log('DocSearch component cleanup'); + } }; } diff --git a/assets/js/flux-group-keys.js b/assets/js/flux-group-keys.js index 9842bdb6f..63929de47 100644 --- a/assets/js/flux-group-keys.js +++ b/assets/js/flux-group-keys.js @@ -116,7 +116,7 @@ export default function FluxGroupKeysDemo({ component }) { toggleCheckbox($(this)); groupKey = getChecked(component); groupData(); - buildGroupExample(); + buildGroupExample(component); }); // Group and render tables on load @@ -240,8 +240,8 @@ function toggleCheckbox(element) { } // Build example group function -function buildGroupExample($component) { - var columnCollection = getChecked($component) +function buildGroupExample(component) { + var columnCollection = getChecked(component) .map((i) => '"' + i + '"') .join(', '); $('pre#group-by-example')[0].innerHTML = diff --git a/assets/js/utils/search-interactions.js b/assets/js/utils/search-interactions.js index d83433667..6a73b2535 100644 --- a/assets/js/utils/search-interactions.js +++ b/assets/js/utils/search-interactions.js @@ -7,7 +7,8 @@ export default function SearchInteractions({ searchInput }) { 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'; @@ -18,53 +19,62 @@ export default function SearchInteractions({ searchInput }) { 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'))) { + 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])'); + 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); + 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, { + dropdownObserver.observe(dropdownMenu, { attributes: true, - attributeFilter: ['style'] + attributeFilter: ['style'], }); - + // Add event listeners to keep dropdown open when interacted with dropdownMenu.addEventListener('mousedown', (e) => { // Prevent blur on searchInput when clicking in dropdown @@ -74,24 +84,24 @@ export default function SearchInteractions({ searchInput }) { } } }); - + // Start observing the document body for dropdown creation - observer.observe(document.body, { - childList: true, - subtree: true + 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 +}