fc21bc6c6d
1. Refactor JavaScript from search.html into a new DocSearch Component Module. The component needs to include: - Asynchronous loading of Algolia docsearch.min.js - Proper Algolia search facets: - Nested arrays for AND conditions: In Algolia, filters in the same array are combined with OR, while arrays in an array are combined with AND - Space after colon: Algolia's parser expects this specific format 2. Update Search HTML Template: refactor the search.html to use the new component: 3. Register the Component in main.js: update main.js to import and register our new DocSearch component: Improve SearchInteractions event handler coordination with DocSearch: - Improve SearchInteractions to dynamically detect the dropdown added by Algolia DocSearch and ensure that blur and focus event handlers are registered after the dropdown loads. Benefits of This Approach: Asynchronous Loading: DocSearch.js is now loaded asynchronously, improving page load performance Search functionality is encapsulated as a component Clean Separation: HTML template only contains configuration data, not implementation Event Communication: Components can react to DocSearch initialization via events SearchInteractions dynamically detects dropdown: Instead of waiting for an event or using setTimeout, we actively observe DOM changes to detect when the dropdown is created. Nested Observation: A second observer monitors changes to the dropdown itself, allowing code to respond to style changes. Better Event Handling: The blur handler checks if the related target is inside the search components, preventing unwanted dropdown closing. Resource Cleanup: The cleanup function disconnects all observers, preventing memory leaks. Additional Interaction Control: Adds an event listener to the dropdown to prevent unwanted blur events when interacting with search results. |
||
|---|---|---|
| .. | ||
| article | ||
| footer | ||
| header | ||
| sidebar | ||
| svgs | ||
| topnav | ||
| article.html | ||
| footer.html | ||
| header.html | ||
| sidebar.html | ||
| topnav.html | ||